Skip to content

Commit

Permalink
added a clock out timer
Browse files Browse the repository at this point in the history
  • Loading branch information
@cthuff
cthuff committed Feb 22, 2022
1 parent 89b67a7 commit 8991342
Showing 1 changed file with 63 additions and 28 deletions.
91 changes: 63 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,24 @@
<div style="text-align: center;">
<div style="padding-top: 10px;">
<label for="startTime">Start time: </label>
<input type="time" value="08:00" id="startTime" style="font-size: medium;">
<input type="time" value="08:00" id="startTime" style="font-size: medium;" required>
</div>
<div style="padding-top: 15px;">
<label for="lunchStart">Lunch Start: </label>
<input type="time" value="12:00" id="lunchStart">
<input type="time" value="12:00" id="lunchStart" required>
<br>
<label for="lunchEnd">Lunch End: </label>
<input type="time" value ="12:30" id="lunchEnd">
<input type="time" value ="12:30" id="lunchEnd" required>
<br>
</div>
<div style="padding-top: 15px;">
<label for="shiftTime">Shift Length: </label>
<input type="number" min="1" max="12" value="8" id="shiftTime" onsubmit="return false">
<input type="number" min="1" max="12" value="8" id="shiftTime">
</div>
<p>
You can clock out at <span id="clockOut" style="color: cyan;"><b>n/a</span>.
You can clock out at <span id="clockOut" style="color: #82EC5A;"><b>n/a</b></span>.
<br>
Time Remaining: <span id="timeRemaining" style="color: #C45AEC;"><b>n/a</b></span>
</p>
<div>
<button style="font-size: 15px;" id="canIGoHome" onclick="goHome()">Can I Go Home?</button>
Expand All @@ -55,7 +57,7 @@
</body>
<footer>
<div style="text-align: center;">
<p style="font-size: small;">Made by <a id = "webpage" style="color: cyan;" href="https://craighuff.com" target="_blank"> Craig Huff</a></p>
<p style="font-size: small;">Made by <a id = "webpage" style="color: #82EC5A;" href="https://craighuff.com" target="_blank"> Craig Huff</a></p>
<br>
<div>
<button id="darkMode" onclick="toggle()">LightMode</button>
Expand All @@ -64,21 +66,9 @@
</div>
</footer>
<script>

function goHome() {
var today = new Date();
var timeString = today.getHours() > 12 ? today.getHours() % 12 + ":" + today.getMinutes() + "PM" : today.getHours() % 12 + ":" + today.getMinutes() + "AM";
console.log(timeString + " seconds: " + timeValue(timeString));
console.log(document.getElementById("clockOut").innerText+ " seconds: " + timeValue(document.getElementById("clockOut").innerText));
if (timeValue(document.getElementById("clockOut").innerText) < timeValue(timeString)) {
alert("Get the fuck out of here!");
} else {
alert("Sorry, you're stuck here");
}
}

var dark = true;
function toggle(){
if (document.getElementById("clockOut").style.color == "cyan")
if (dark == true)
{
document.getElementById("darkMode").innerText = "DarkMode"
lightMode();
Expand All @@ -90,36 +80,49 @@

function darkMode() {
var element = document.body;
document.getElementById("clockOut").style.color = "cyan";
document.getElementById("webpage").style.color = "cyan";
document.getElementById("clockOut").style.color = "#82EC5A";
document.getElementById("webpage").style.color = "#82EC5A";
element.className = "dark-mode";

dark = true;
}
function lightMode() {
var element = document.body;
document.getElementById("clockOut").style.color = "purple";
document.getElementById("webpage").style.color = "purple";
document.getElementById("clockOut").style.color = "#3A940E";
document.getElementById("webpage").style.color = "#3A940E";
element.className = "light-mode";
dark = false;
}
</script>

<script>
//initalizes the timer so it can be stopped an started each time
let timer;

//the HTML elements that will be manipulated by this code
var startTime = document.getElementById("startTime");
var lunchStart = document.getElementById("lunchStart");
var lunchEnd = document.getElementById("lunchEnd");
var shiftTime = document.getElementById("shiftTime")
var clockOutSpan = document.getElementById("clockOut");
var timeRemaining = document.getElementById("timeRemaining");

//Listerners for each of the inputs to change the code immediatly when new entries are given
startTime.addEventListener("input", function() { logic(); }, false);
lunchStart.addEventListener("input", function() { logic(); }, false);
lunchEnd.addEventListener("input", function() { logic(); }, false);
shiftTime.addEventListener("input", function() {logic();}, false);

//Calls the two functions to modify the text on when they can clock out
//Calls the two functions to modify the text on when they can clock out and time remaining
function logic(){
clearInterval(timer);
var seconds = timeValue(startTime.value) + (timeValue(lunchEnd.value) - timeValue(lunchStart.value)) + (shiftTime.value * 3600);
var time = timeString(seconds);
clockOutSpan.innerText = time;
//gets the current time to compare to the total shift time
let date = new Date();
var now = (date.getHours() * 3600) + (date.getMinutes() * 60);
//clears the previous timer that's running to prepare a new one
(seconds - now) > 0 ? timer = setInterval(function() {timeRemaining.innerText = remaining(seconds - now); }, 1000) : timeRemaining.innerText = "0:00:00";
}
//Becasue we're dealing with 24 hours time and AM and PM times, convert all of it to seconds to also account for shiftlength * 3600
function timeValue(time){
Expand Down Expand Up @@ -151,8 +154,8 @@
function timeString(time){
var totalSeconds = time;
hours = Math.floor(totalSeconds / 3600);
minutes = Math.floor(totalSeconds % 3600 / 60)
minutes < 10 ? minutes = "0" + minutes.toString() : minutes = minutes.toString()
minutes = Math.floor(totalSeconds % 3600 / 60);
minutes < 10 ? minutes = "0" + minutes.toString() : minutes = minutes.toString();

if(hours == hours % 12){
return hours.toString() + ":" + minutes+ "AM";
Expand All @@ -162,6 +165,38 @@
return hours.toString() + ":" + minutes + "PM";
}
}

//Converts the time in seconds back to a string in format HH:MM(AM/PM)
function remaining(time){
var totalSeconds = time;
hours = Math.floor(totalSeconds / 3600);
minutes = Math.floor(totalSeconds % 3600 / 60);
minutes < 10 ? minutes = "0" + minutes.toString() : minutes = minutes.toString();
seconds = 60 - new Date().getSeconds();
seconds < 10 ? seconds = "0" + seconds.toString() : seconds = seconds.toString();

if(hours == hours % 12){
return hours.toString() + ":" + minutes + ":" + seconds;
}
else {
hours % 12 > 0 ? hours = hours % 12 : hours
return hours.toString() + ":" + minutes + ":" + seconds;
}
}

//Calculates if the client can go home based on the current time and their clockout time
function goHome() {
var today = new Date();
var timeString = today.getHours() > 12 ? today.getHours() % 12 + ":" + today.getMinutes() + "PM" : today.getHours() % 12 + ":" + today.getMinutes() + "AM";
console.log(timeString + " seconds: " + timeValue(timeString));
console.log(document.getElementById("clockOut").innerText+ " seconds: " + timeValue(document.getElementById("clockOut").innerText));
if (timeValue(document.getElementById("clockOut").innerText) < timeValue(timeString)) {
alert("Get the fuck out of here!");
} else {
alert("Sorry, you're stuck here");
}
}

</script>

<!-- This loads the time when the page first appears -->
Expand Down

0 comments on commit 8991342

Please sign in to comment.