boldrack · April 15, 2022 12:17 · devdesiignn · Apr 15, 2022 · devdesiignn · Apr 15, 2022
diff --git a/code.html b/code.html

 <!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>

	<!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>