Created
April 15, 2022 10:47
-
-
Save boldrack/e782c3d9c0fb07bbad698e3b2469077a to your computer and use it in GitHub Desktop.
Here take a look
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
<!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>