This project creates a dynamic, real-time clock using HTML, CSS, and JavaScript. The HTML provides the structure, defining a circular clock face with hour, minute, and second hands, as well as a digital time display. The CSS adds the visual styling, making the clock circular with a glowing effect and coloring the hands differently for clear distinction. It also ensures the clock is centered on the page and gives the timebox and developer credit a stylish appearance. The JavaScript is responsible for the functionality, updating the positions of the clock hands every second by calculating their respective rotation angles based on the current time. Additionally, it displays the current time digitally within the clock. This combination of HTML, CSS, and JavaScript provides both aesthetic appeal and functional precision, delivering a visually engaging, working clock for the web page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clock Animation</title>
<link rel="stylesheet" href="style.css"> <!-- Link to the CSS file -->
</head>
<body>
<div class="clock">
<div class="innerclock">
<div class="pin hou"></div>
<div class="pin min"></div>
<div class="pin sec"></div>
<div class="timebox"></div>
</div>
</div>
<script src="script.js"></script> <!-- Link to the JS file -->
</body>
</html>
HTML Explanation:
- DOCTYPE Declaration: Specifies that the document is HTML5.
- Meta Tags:
charset="UTF-8": Ensures the document uses the UTF-8 character encoding.meta name="viewport": Ensures the page is responsive on different screen sizes.
- Title: The page is titled "Clock Animation".
- Clock Structure:
- A
div with the class clock acts as the outer container for the clock. - Inside it, the
innerclock holds the hour (hou), minute (min), and second (sec) hands. - The
timebox displays the current time in digital format.
- Linking CSS and JS:
- The
<link> tag links the external style.css file for styling. - The
<scrip> tag links the external script.js file for clock functionality.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
color: white;
}
:root {
--black: #333;
}
body {
background: var(--black);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.clock {
height: 45vh;
width: 45vh;
background: white;
border-radius: 50%;
border: 5px solid goldenrod;
box-shadow: 1px 1px 2em deeppink;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.innerclock {
box-shadow: inset 1px 1px 2em deeppink;
background: var(--black);
height: 98%;
width: 98%;
border-radius: 50%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.pin {
position: absolute;
height: 50%;
width: 4%;
background: white;
bottom: 50%;
transform-origin: 50% 100%;
transform: rotateZ(0deg);
}
.hou {
height: 30%;
background: lime;
}
.min {
height: 40%;
background: deeppink;
}
.sec {
height: 48%;
background: white;
}
.timebox {
font-size: 3vh;
position: absolute;
font-weight: bolder;
bottom: 10%;
box-shadow: 2px 2px 20px cyan, inset 2px 2px 20px hotpink;
padding: 5px 20px;
border-radius: 20px 10px;
}
h3 {
color: rgba(255, 255, 255, 0.6);
text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
position: absolute;
bottom: 10%;
z-index: 5;
font-size: 3vh;
}
CSS Explanation:
- Universal Reset:
* { padding: 0; margin: 0; box-sizing: border-box; } ensures a consistent appearance across browsers.
- Variables:
--black: A CSS variable to reuse the black color (#333).
- Body Styling:
- Sets the background color to black, centers the content, and ensures the height covers the viewport.
- Clock Styles:
.clock: A circular container with a golden border, pink shadow, and white background..innerclock: A smaller, inset circle with an inner shadow for depth.
- Clock Hands:
.pin: Basic style for all hands, positioned at the bottom center and rotating from the base..hou, .min, .sec: Hour, minute, and second hands styled with different colors and lengths.
- Digital Time Display:
.timebox: Displays the digital time with shadow effects and padding.
- Developer Credit:
h3: Styled with color and text shadow for the developer's name.
let hour = document.querySelector(".hou");
let min = document.querySelector(".min");
let sec = document.querySelector(".sec");
let timebox = document.querySelector(".timebox");
let devtext = document.createElement("h3");
setInterval(() => {
const today = new Date();
let secondNow = 360 / 60 * today.getSeconds();
let minuteNow = 6 * today.getMinutes();
let hournow = 30 * today.getHours() + 0.5 * today.getMinutes();
let nowTime = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
sec.style.transform = `rotateZ(${secondNow}deg)`;
hour.style.transform = `rotateZ(${hournow}deg)`;
min.style.transform = `rotateZ(${minuteNow}deg)`;
timebox.innerHTML = nowTime;
}, 1000);
let webdev = document.createTextNode("@Developer Manoj");
devtext.appendChild(webdev);
document.body.appendChild(devtext);
JavaScript Explanation:
- Element Selection:
querySelector() selects the hour, minute, and second hands, as well as the time display box.
- Clock Logic (setInterval):
- Runs every second (
setInterval set to 1000ms). - The current time is obtained using the
Date() object. - Calculating the Rotation Angles:
secondNow = 360 / 60 * today.getSeconds(): Each second rotates 6 degrees.minuteNow = 6 * today.getMinutes(): Each minute rotates 6 degrees.hournow = 30 * today.getHours() + 0.5 * today.getMinutes(): The hour hand rotates 30 degrees per hour and 0.5 degrees for every minute.
- Updating Clock Hands:
transform: rotateZ() rotates the hands based on the calculated angle.
- Digital Time:
- The time is displayed in the
timebox using the format "HH:MM:SS".
How It All Works Together:
- HTML defines the structure of the page, including the clock and time display.
- CSS styles the clock and gives it an aesthetic look with circular borders, shadows, and animations.
- JavaScript handles the logic of the clock, calculating the angles for the hands and updating the digital time in real-time every second
0 comments:
Post a Comment