This new window will have an application to calculate the number of hours and mi
ID: 3576381 • Letter: T
Question
This new window will have an application to calculate the number of hours and minutes worked per day, per week and per two weeks Start Shift Break out Break in End Shift Report You have started your shift at: hhimm/am/pm hh:mm /am/pm, and have worked hhtmm so far You took a break at hh:mm am/pm You break ended at You clocked out at hhimm am/pm and worked hhamm today, Your total hours for this week so far is :hh m Total hours this week is hh m Total hours for thes pay period is(two weeks) is: hh:mm When the user clicks on start shift button the time will start counting When the user clicks on Break out the timer will stop When the user clicks on break in the timer will start counting the number of hours, minutes At the end of the shift, when the user clicks on end shift the calculator will stop for that day, and take the cumulus for the next day.Explanation / Answer
<html>
<head>
<body>
<div name='login'>
<div name='close'>
<input type='button' value='X' name='closelogin'>
</div>
<br>
<div>
<label>Enter your ID#</label>
<input name='id' type='number' />
<br>
<label>Enter your PIN</label>
<input name='password' type='password' />
</div>
<br>
<input name='clear' type='button' value='Clear' />
<input name='submit' type='button' value='Submit' />
</div>
<div name='calculate'>
<div name='buttons'>
<input name='start' type='button' value='Start Shift' />
<input name='breakout' type='button' value='Break out' />
<input name='breakin' type='button' value='Break in' />
<input name='end' type='button' value='End Shift' />
</div>
<br>
<br>
<div>
<div>
Report:
</div>
<br>
<div>
You have started your shift at: <span name='starttime'>hh:mm</span>
</div>
<br>
<div>
You took a break at <span name='breakoutime'>hh:mm</span> and have worked <span name='breakwork'>hh:mm</span> so far
</div><br>
<div>
Your break ended at <span name='breakintime'>hh:mm</span>
</div><br>
<div>
You clocked out at <span name='endtime'>hh:mm</span> and worked <span name='workedtime'>hh:mm</span> today,
</div><br>
<div>
Your total hours for this week so far is : <span name='workweek'>hh:mm</span>
</div><br>
<div>
Total hours this week is : <span name='totalworkweek'>hh:mm</span>
</div><br>
<div>
Total hours for thes pay period is(two weeks) is : <span name='totalworkweekhrs'>hh:mm</span>
</div>
</div>
</div>
<script>
var startTime;
var breakOutTime;
var breakInTime;
var endTime;
var thisWeek = 0;
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
document.getElementsByName('closelogin')[0].addEventListener("click", function(){
login = document.getElementsByName('login')[0];
login.parentNode.removeChild(login);
});
document.getElementsByName('clear')[0].addEventListener("click", function(){
document.getElementsByName('id')[0].value = '';
document.getElementsByName('password')[0].value = '';
});
document.getElementsByName('submit')[0].addEventListener("click", function(){
login = document.getElementsByName('login')[0];
login.parentNode.removeChild(login);
document.getElementsByName('calculate')[0].style.display = 'block';
});
document.getElementsByName('start')[0].addEventListener("click", function(){
startTime = new Date();
document.getElementsByName('starttime')[0].innerHTML = formatAMPM(startTime);
});
document.getElementsByName('breakout')[0].addEventListener("click", function(){
breakOutTime = new Date();
document.getElementsByName('breakoutime')[0].innerHTML = formatAMPM(breakOutTime);
timeDiff = startTime - breakOutTime;
timeDiff /= 1000;
hrs = parseInt(timeDiff / 3600);
minutes = parseInt((timeDiff - (hrs * 3600) ) / 60);
document.getElementsByName('breakwork')[0].innerHTML = hrs + ':' + minutes;
});
document.getElementsByName('breakin')[0].addEventListener("click", function(){
breakInTime = new Date();
document.getElementsByName('breakintime')[0].innerHTML = formatAMPM(breakInTime);
});
document.getElementsByName('end')[0].addEventListener("click", function(){
endTime = new Date();
document.getElementsByName('endtime')[0].innerHTML = formatAMPM(breakInTime);
timeDiff = endTime - (breakInTime - breakOutTime) - startTime ;
thisWeek += timeDiff;
timeDiff /= 1000;
hrs = parseInt(timeDiff / 3600);
minutes = parseInt((timeDiff - (hrs * 3600) ) / 60);
document.getElementsByName('workedtime')[0].innerHTML = hrs + ':' + minutes;
hrs = parseInt(thisWeek / 3600000);
minutes = parseInt((timeDiff - (hrs * 3600) ) / 60);
document.getElementsByName('totalworkweek')[0].innerHTML = hrs + ':' + minutes;
});
</script>
<body>
</head>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.