-
-
Save boldrack/affb760d994996e55fe1eeb29b919d7c to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digital Timer</title> | |
| </head> | |
| <body> | |
| <div class="timeholder"> | |
| <!-- this are semantically supposed to be spans , not divs | |
| The little stuffs matters. | |
| --> | |
| <div class="hours" id="hours"></div>: | |
| <div class="mins" id="mins"></div>: | |
| <div class="secs" id="secs"></div> | |
| <div class="ampm" id="ampm"></div> | |
| </div> | |
| <button>toggle!</button> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap'); | |
| .timeholder { | |
| font-family: 'IBM Plex Sans', sans-serif; | |
| display: flex; | |
| gap: 24px; | |
| font-size: 48px; | |
| justify-content: center; | |
| transition: gap 1s ease-in-out; | |
| width: 100vw; | |
| } | |
| .timeholder:hover { | |
| gap: 48px; | |
| } | |
| </style> | |
| <script> | |
| //Time | |
| let hours, mins, secs = 0; | |
| let ampm; | |
| let hour12 = false; | |
| // this is a good place to use arrow function. one liner | |
| const padFormat = (h) => String(h).padStart(2, '0'); | |
| function setTheTime() { | |
| // how about handling padding , where 1 turns 01. | |
| // not important just touching. | |
| // also you shouldn't be adding the colon : in here .. | |
| // let that be static in the dom | |
| document.getElementById('hours').innerText = padFormat(hours); | |
| document.getElementById('mins').innerText = padFormat(mins); | |
| document.getElementById('secs').innerText = padFormat(secs); | |
| document.getElementById('ampm').innerText = ampm; | |
| } | |
| function getTheTime24() { | |
| const _cD = new Date(); | |
| hours = _cD.getHours(); | |
| mins = _cD.getMinutes(); | |
| secs = _cD.getSeconds(); | |
| ampm = ''; | |
| } | |
| function getTheTime12() { | |
| const _cD = new Date() | |
| o_hours = _cD.getHours(); // the original hours that wasn't modified | |
| hours = o_hours % 12; | |
| // for the hours, there's this case where 12:14 will result in 00:12 instead of 12:12 | |
| hours = hours === 0 ? hours : 12 // lemme know if you do not understand this snippet | |
| ampm = o_hours > 12 ? 'AM' : 'PM'; // we have to compute this before working on the hours | |
| mins = _cD.getMinutes(); | |
| secs = _cD.getSeconds(); | |
| } | |
| function getTheTime() { | |
| hour12 ? getTheTime12() : getTheTime24(); | |
| setTheTime(); | |
| } | |
| // setTheTime() // the code takes 1 seconds before running , something must be shown before hand | |
| setInterval(getTheTime, 1000); | |
| // attache an event handler to the button and all that does is toggle the hour12 variable | |
| document.querySelector('button').addEventListener('click', function() { | |
| hour12 = !hour12; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
My head don dey hot,
I guess there's a lot to learn so as to understand this fully.
function getTheTime12() {
const _cD = new Date()
o_hours = _cD.getHours(); // the original hours that wasn't modified
hours = o_hours % 12;
// for the hours, there's this case where 12:14 will result in 00:12 instead of 12:12
hours = hours === 0 ? hours : 12 // lemme know if you do not understand this snippet
ampm = o_hours > 12 ? 'AM' : 'PM'; // we have to compute this before working on the hours
mins = _cD.getMinutes();
secs = _cD.getSeconds();
}
What's goin on here
document.querySelector('button').addEventListener('click', function() {
hour12 = !hour12;
});
Lastly this.
I think I get hold of the rest
Ohh, this one is
Whenever the button is clicked
The initial state of hour12 would be negated.
function getTheTime12() { const _cD = new Date() o_hours = _cD.getHours(); // the original hours that wasn't modified hours = o_hours % 12; // for the hours, there's this case where 12:14 will result in 00:12 instead of 12:12 hours = hours === 0 ? hours : 12 // lemme know if you do not understand this snippet ampm = o_hours > 12 ? 'AM' : 'PM'; // we have to compute this before working on the hours mins = _cD.getMinutes(); secs = _cD.getSeconds(); }
What's goin on here
In here, I'm completely lost
There, take note of how we selected either the 24 function or the 12 function based on a boolean variable controlled by the button .