Scribd
Upload
10 views

Project HTML Lms

Uploaded by

coolbrown4
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

Project HTML Lms

Uploaded by

coolbrown4
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

NAMES: Kandra Venkatesh ERP ID: 2300032324

K Hemanth kumar Raju 2300031495

Mediseti Bala chala rao 2300031585

PROJECT ON HTML
TITLE:CREATING CLOCK USING HTML,CSS AND
JAVASCRIPT

Code for HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clock</title>
</head>
<body>

<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>

<style>
html {
background: rgba(255, 24, 24, 0.132);
background-size: cover;
font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}

body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}

.clock {
width: 30rem;
height: 30rem;
border: 20px solid black;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}

.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock
hands */
}
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.4s;
}
.second-hand{
background-color: red;
transition:0.4s;
}
.hour-hand{
transition:0.4s;
}
.min-hand{
transition:0.4s;
}
</style>

<script src="p11.js"></script>
</body>
</html>
Code for JAVASCRIPT:

let minHand = document.querySelector('.min-hand');


let hourHand = document.querySelector('.hour-hand');
let secHand = document.querySelector('.second-hand');
function clock(){
let time = new Date();
let hrs = time.getHours();
let mins = time.getMinutes();
hrs = (((hrs*60)/12)*6)+90;
hourHand.style.transform = `rotate(${hrs}deg)`;

mins=(mins*6)+90;
minHand.style.transform = `rotate(${mins}deg)`;

let sec = time.getSeconds();


sec = (sec*6)+90;
secHand.style.transform = `rotate(${sec}deg)`;
}
setInterval(clock,1000)
clock();

screenshot:

This shows correct time

You might also like