-
-
Save boldrack/e782c3d9c0fb07bbad698e3b2469077a to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title></title> | |
| <style> | |
| body { | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| button { | |
| width: 10rem; | |
| } | |
| .time-container { | |
| display: flex; | |
| flex-flow: column nowrap; | |
| height: 10rem; | |
| } | |
| .timeholder { | |
| display: block; | |
| font-family: 'IBM Plex Sans', sans-serif; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="time-container"> | |
| <p class="timeholder"></p> | |
| <button>Toggle</button> | |
| </div> | |
| <script> | |
| const timeholder = document.querySelector('.timeholder') | |
| let hours12 = false | |
| const updateTime = () => { | |
| const newTime = new Intl.DateTimeFormat( | |
| 'en-US', | |
| { | |
| hour: 'numeric', | |
| minute: 'numeric', | |
| second: 'numeric', | |
| hour12: hours12 | |
| } | |
| ).format(new Date()); | |
| timeholder.innerHTML = newTime; | |
| } | |
| // the timer | |
| setInterval(updateTime, 1000); | |
| // attach the toggle to the button , we do not need to bind cos | |
| // the variable we're changing is also variable. a property of `window` | |
| document.querySelector('button').addEventListener('click', function() { | |
| hours12 = !hours12; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
I guess you do not understand the main code above , right ?
Yeahh
<!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">
<div class="hours" id="hours"></div>
<div class="mins" id="mins"></div>
<div class="secs" id="secs"></div>
</div>
<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 timeHolder, hours, mins, secs;
function getTheTime() {
timeHolder = new Date();
hours = timeHolder.getHours();
mins = timeHolder.getMinutes();
secs = timeHolder.getSeconds();
}
setInterval(getTheTime, 1000);
function setTheTime() {
document.getElementById('hours').innerText = ${hours} : ;
document.getElementById('mins').innerText = ${mins} : ;
document.getElementById('secs').innerText = ${secs};
}
setInterval(setTheTime, 1000);
</script>
</body>
</html>
Okay , the main code those exactly what you wanted with a toggle button but not exactly how you wanted it. i'll correct your own code now.
you should repost the code as a snippet like this <script>const _ = '';</script>
Never mind .. pulled it .
Ok then
Okay , the main code those exactly what you wanted with a toggle button but not exactly how you wanted it. i'll correct your own code now.
Alright will learn from it
const newTime = new Intl.DateTimeFormat(
'en-US',
{
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hour12: hours12
}
).format(new Date());
timeholder.innerHTML = newTime;