Build a Timesheet Calculator Web App

In this web development tutorial you will learn how to create a timesheet calculator web application using HTML CSS and JavaScript.

The web application will calculate the amount of worked hours, the amount of break time and then by subtracting from the work time the break time the application will calculate the amount of hours worked in one day.

You can add multiple day to this application, or even multiple weeks, or moths. At the end the application will calculate the total amount of hours worked in the specified time span.

Resource:
Random Avatar API: https://avatars.dicebear.com/
Custom Fonts: https://fonts.google.com/
Code Editor : https://code.visualstudio.com/

🎱Source Code for this Video:
https://norbertbm.com/build-a-employee-timesheet-web-app/
-----------------------------------------------------------------------------

👇 Website & Courses: 👨‍🏫 :
https://norbertbm.com/web-development/web-dev-courses/

Podcast:
https://www.youtube.com/channel/UCDKBcl1m__Oj7C5O-orhn_w
-------------------------------------------------------------------------------------------------
Timestamps:
00:00 - Intro & Project overview
02:22 - Create the Project HTML CSS and JS files
03:42 - Create a timesheet table in html
14:55 - Style the timesheet table
15:25 - CSS Custom Fonts, general reset and css variables and style the body and project container.
23:34 - Generate a random Avatar using API and style it.
29:46 - Style the html form inputs and table body, header and footer
33:53 - Style the add button
37:41 - Get all table rows from the DOM
38:55 - Create a function that creates a html form element
40:39 - Add all form elements to the DOM using async and IIFE (Immediately Invoked Function Expression)
42:23 - Get all forms elements from the DOM
43:49 - Add submit event listeners to all forms
45:15 - Get input elements from the submitted form
49:46 - Validate form submission
54:22 - Calculate the daily hours worked
55:27 - Create a function that calculates the amount of hours
57:14 - Convert string to time
59:38 - Calculate work time
1:01:38 - Calculate break time
1:03:18 - Calculate the final difference work - break time
1:06:28 - Calculate total amount of worked hours
1:18:56 - Refactoring the JavaScript code

-------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------

#webapp #javascriptproject #norbertbmwebdevelopment