project name: clock

Hi, welcome to new and final JavaScript practice project "portfolio website" for beginners along with explaination. You can copy the code by clicking the button just above the code. Read the explaiantion for better understanding. let's get started with index.html file:

index.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" /> <link rel="stylesheet" href="style.css" /> <title>Clock</title> </head> <body> <div class="clock"> <div class="numbers"> <div class="twelve">12</div> <div class="three">3</div> <div class="six">6</div> <div class="nine">9</div> </div> <div class="arrows"> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> </div> <img src="butterfly.png" alt="" /> </div> <script src="index.js"></script> </body> </html>

style.css:

body { margin: 0; padding: 0; font-family: 'Courier New', Courier, monospace; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(230, 155, 225); } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; border-radius: 200px; z-index: 1; } .clock { width: 350px; height: 350px; background-color: rgb(249, 245, 245); border-radius: 100%; border: 5px solid rgb(138, 12, 129); box-shadow: 1px 1px 4px rgba(0,0,0,.7); position: relative; } .numbers div { position: absolute; font-size: 27px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,.7); z-index: 2; } .twelve { top: 6px; left: 50%; transform: translateX(-50%); color: rgb(18, 10, 3); } .three { right: 6px; top: 50%; transform: translateY(-50%); } .six { bottom: 6px; left: 50%; transform: translateX(-50%); } .nine { left: 6px; top: 50%; transform: translateY(-50%); } .arrows { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .arrows::before { content: ""; width: 25px; height: 25px; background-color: rgb(185, 49, 212); border-radius: 50%; box-shadow: 1px 1px 2px rgba(0,0,0,.7); z-index: 4; } .arrows div { width: 7px; height: 120px; background-color: rgb(235, 190, 190); position: absolute; bottom: 50%; box-shadow: 1px 1px 2px rgba(0,0,0,.7); border-radius: 50% 50% 0 0; transform-origin: bottom center; z-index: 3; } .arrows .hour { height: 80px; transform: rotate(30deg); } .arrows .second { background-color: rgb(194, 104, 219); transform: rotate(250deg); }

index.js:

const hour = document.querySelector(".hour"); const minute = document.querySelector(".minute"); const second = document.querySelector(".second"); function setDate() { const now = new Date(); const getSecond = now.getSeconds(); const getMinute = now.getMinutes(); const getHour = now.getHours(); const secondDegree = (getSecond / 60) * 360; const minuteDegree = (getMinute / 60) * 360; const hourDegree = (getHour / 12) * 360; second.style.transform = `rotate(${secondDegree}deg)`; minute.style.transform = `rotate(${minuteDegree}deg)`; hour.style.transform = `rotate(${hourDegree}deg)`; } setInterval(setDate, 1000);

Here is the explaination:

The setDate() function is called to update the clock hands' rotation every second using setInterval(setDate, 1000). This means the function will be executed every 1000 milliseconds (1 second).
Inside the setDate() function, the current time is obtained using new Date().
The current seconds, minutes, and hours are extracted from the current time using getSeconds(), getMinutes(), and getHours() respectively.
Based on these values, the rotation degree for each clock hand is calculated. For example, the second's degree is calculated as (getSecond / 60) * 360 to represent the proportion of seconds passed in a minute.
The style.transform property is then updated for each clock hand, setting the rotation degree using template literals to dynamically update the CSS rotation. Finally, the setDate() function is initially called to set the initial position of the clock hands.
FINAL WORDS:
Thank you Don't forget to leave your feedback in the comment section. Follow front.end24 on instagram for more project ideas