Scribd
Upload
23 views

Project HTML Lms

Uploaded by

coolbrown4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views

Project HTML Lms

Uploaded by

coolbrown4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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