Timesheet Calculator Javascript Assignment

From Knowledge Kitchen
Jump to navigation Jump to search


Your assignment is to create a timesheet calculator. It should work as follows: a user visits your web page. The web page asks the user how many hours they worked each day of the preceding week. The user enters individual responses for the number of hours each day. Once they have entered in all seven responses, the web page outputs the total amount of money they earned in that week.

Example session (user responses are bold):

How many hours did you work Monday: 8
How many hours did you work Tuesday: 8
How many hours did you work Wednesday: 8
How many hours did you work Thursday: 8
How many hours did you work Friday: 8
How many hours did you work Saturday: 8
How many hours did you work Sunday: 8
You worked a total of 56 hours and earned $560 this week!


Version 1: basic functionality

Get the basic functionality working:

  • don't worry about loops or functions.
  • don't worry about the elegance of your code or the design of your web page.
  • ask for user to input their hours using the browser's built-in prompt() function. Do this 7 times: once for each day.
  • process that input and do the math to calculate their earnings, based on whatever hourly rate you think is fair.
  • show the user the final total of their earnings using the browser's built-in alert() function.

Solution

See an example solution posted on jsfiddle.net

Version 2: more functionality

People who work more than 40 hours should earn overtime.

  • maintain the same functionality as Version 1.
  • process the hours and determine how many hours were worked "regular time", and how many were worked "overtime".
  • calculate how much compensation the user earned based on both the regular hours and the overtime hours (which are paid 1.5 as much as the regular hours).
  • show the user the final total of their earnings, as in Version 1, but also show how much was earned "regular time" and how much was earned in overtime.


Version 3: using loops

Realize that asking the user to enter their hours for every day of the week is very repetitive, and is simply the same task done seven times with some small variation.

  • maintain the same functionality as in Version 2.
  • use a loop to repeatedly ask the user for the hours they worked each day.
  • to keep it simple, instead of asking the user to enter input for "How many hours did you work Monday?", "How many hours did you work Tuesday?", etc, simply ask "How many hours did you work on day 1?", "How many hours did you work on day 2?", etc, up to day 7.


Version 4: using functions

This entire program could be very reusable and modular if only it were placed into a function.

  • maintain the same functionality as in Version 3.
  • put the entire program within a function definition.
  • allow the visitor of the web page to call the function as many times as they want by clicking a button on the web page.


Version 5: DHTML

Using the prompt() and alert() functions is not very user-friendly or aesthetically pleasing. Wouldn't it be better if the user could interact with the web page, rather than with these dialog boxes.

  • maintain the same functionality as in Version 4.
  • create a form on the web page with input fields into which the user can enter the hours worked for each day.
  • allow the visitor of the web page to click a button at the bottom of the form in order to have the total compensation be displayed on the web page.
  • you will find it useful to use the browser's built-in document.getElementById() function to get access to each individual element.
  • once you have accessed an element using document.getElementById(), you may find the value property of form input elements and the innerHTML property of any element to be useful.

Solution

Download an example solution


What links here