What time is it?

Developer
Peter Lewicki
Size
2,966 Kb
Views
16,192
  1. What time is it? Previews
  2. What time is it? HTML Codes
  3. What time is it? CSS Codes
  4. What time is it? JS Codes

How do I make an what time is it??

A Minimalist "Analog" clock made with javascript. . What is a what time is it?? How do you make a what time is it?? This script and codes were developed by Peter Lewicki on 08 October 2022, Saturday.

What time is it? Previews
IQ Test

What time is it? - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>What time is it?</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en-US">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A Digital Analog Clock</title> <link rel="stylesheet" href="style.css" type="text/css" media="all"> <script src="script.js" defer></script>
</head>
<body>
<main class="main"> <div class="clockbox"> <svg id="clock" xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"> <g id="face"> <circle class="circle" cx="300" cy="300" r="253.9"/> <path class="hour-marks" d="M300.5 94V61M506 300.5h32M300.5 506v33M94 300.5H60M411.3 107.8l7.9-13.8M493 190.2l13-7.4M492.1 411.4l16.5 9.5M411 492.3l8.9 15.3M189 492.3l-9.2 15.9M107.7 411L93 419.5M107.5 189.3l-17.1-9.9M188.1 108.2l-9-15.6"/> <circle class="mid-circle" cx="300" cy="300" r="16.2"/> </g> <g id="hour"> <path class="hour-arm" d="M300.5 298V142"/> <circle class="sizing-box" cx="300" cy="300" r="253.9"/> </g> <g id="minute"> <path class="minute-arm" d="M300.5 298V67"/> <circle class="sizing-box" cx="300" cy="300" r="253.9"/> </g> <g id="second"> <path class="second-arm" d="M300.5 350V55"/> <circle class="sizing-box" cx="300" cy="300" r="253.9"/> </g> </svg> </div><!-- .clockbox -->
</main>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

What time is it? - Script Codes CSS Codes

/* Layout */
.main { display: flex; padding: 2em; height: 90vh; justify-content: center; align-items: middle;
}
.clockbox,
#clock { width: 100%;
}
/* Clock styles */
.circle { fill: none; stroke: #000; stroke-width: 9; stroke-miterlimit: 10;
}
.mid-circle { fill: #000;
}
.hour-marks { fill: none; stroke: #000; stroke-width: 9; stroke-miterlimit: 10;
}
.hour-arm { fill: none; stroke: #000; stroke-width: 17; stroke-miterlimit: 10;
}
.minute-arm { fill: none; stroke: #000; stroke-width: 11; stroke-miterlimit: 10;
}
.second-arm { fill: none; stroke: #000; stroke-width: 4; stroke-miterlimit: 10;
}
/* Transparent box ensuring arms center properly. */
.sizing-box { fill: none;
}
/* Make all arms rotate around the same center point. */
/* Optional: Use transition for animation. */
#hour,
#minute,
#second { transform-origin: 300px 300px; transition: transform .5s ease-in-out;
}

What time is it? - Script Codes JS Codes

const HOURHAND = document.querySelector("#hour");
const MINUTEHAND = document.querySelector("#minute");
const SECONDHAND = document.querySelector("#second");
/*methods to get the current time*/ var date = new Date(); console.log(date); let hr = date.getHours(); let min = date.getMinutes(); let sec = date.getSeconds(); console.log("Hour: " + hr + " Minute: " + min + " Second: " + sec);
/*code below positions the hands re: degrees on a circle, from the values in time variables above
ie. how many of 360 degrees are covered by seconds, minutes and hours*/ let hrPosition = (hr*360/12)+(min*(360/60)/12); let minPosition = (min*360/60) + (sec*(360/60)/60); let secPosition = sec*360/60;
function runTheClock() { /*using math/circle degrees below to set where the hands should be on the clock */ hrPosition = hrPosition+(3/360); minPosition = minPosition+(6/60); secPosition = secPosition+6; HOURHAND.style.transform = "rotate(" + hrPosition + "deg)"; MINUTEHAND.style.transform = "rotate(" + minPosition + "deg)"; SECONDHAND.style.transform = "rotate(" + secPosition + "deg)";
}
/*this method ensures the run clocks continually, rather than only when page refreshed.
The number is 1000 milliseconds or one second. Learning is fun*/
var interval = setInterval(runTheClock, 1000);
What time is it? - Script Codes
What time is it? - Script Codes
Home Page Home
Developer Peter Lewicki
Username peterlewicki
Uploaded October 08, 2022
Rating 3
Size 2,966 Kb
Views 16,192
Do you need developer help for What time is it??

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Peter Lewicki (peterlewicki) Script Codes
Name
Typing Test
Bootstrap navbar practice
A Pen by Peter Lewicki
Javascript Welcome
Udemy Bootstrap Grid System Exercise
TIC TAC TOE GAME
Basic JS rock paper scissors games
GetElementById exercise
Football goal list
Minimalist CSS Blog
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!