<!DOCTYPE html>
<head>
<title>creating analogue clock using - web development</title>
<link rel="stylesheet" href="css/clock.css">
</script>
</head>
<body>
<div id="main">
<div class="clock">
<div class="number num1"><div>1</div></div>
<div class="number num2"><div>2</div></div>
<div class="number num3"><div>3</div></div>
<div class="number num4"><div>4</div></div>
<div class="number num5"><div>5</div></div>
<div class="number num6"><div>6</div></div>
<div class="number num7"><div>7</div></div>
<div class="number num8"><div>8</div></div>
<div class="number num9"><div>9</div></div>
<div class="number num10"><div>10</div></div>
<div class="number num11"><div>11</div></div>
<div class="number num12"><div>12</div></div>
<div class="hand" id="sec"><div class="sec"></div></div>
<div class="hand" id="min"><div class="min"></div></div>
<div class="hand" id="hour"><div class="hour"></div></div>
</div>
</div>
<div class="view">
<div id="day">Today</div>
<div id="hr" >Hours</div>
<div id="mini" >Minutes</div>
<div id="se" >Seconds</div>
</div>
<script src="js/clock.js"></script>
</body>
</html>
|
*{
padding: 0px;
margin: 0px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
box-sizing: border-box;
}
body{
background: linear-gradient(to right,hsl(101, 80%, 60%), hsl(131, 80%, 60%), hsl(161, 80%, 60%));
width: 100vw;
height: 100vh;
}
#main{
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 50px;
}
.clock{
width: 400px;
height: 400px;
overflow: hidden;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
border: 2px solid black;
position: relative;
}
.clock::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: linear-gradient(285deg, rgba(0,0,0,0.175)50%, rgba(0,0,0,0.1)50% );
left: 0;
top:0;
}
.number{
width: 100%;
height: 100%;
text-align: center;
position: absolute;
top:0;
left: 0;
font-size: 1.5rem;
font-weight: 600;
padding: 18px;
}
.number::before{
position: absolute;
content: '';
transform: translatex(-50%);
top:0;
left: 50%;
width: 5px;
height: 15px;
background-color: black;
}
.clock::before{
content: '';
position: absolute;
width: 25px;
height: 25px;
background-color: linear-gradient(285deg, rgba(0,0,0,0.175)50%, rgba(0,0,0,0.1)50% );
left: 50%;
top:50%;
border-radius: 50%;
background-color: black;
transform: translate(-50%, -50%);
z-index: 11;
}
.num1{
transform: rotate(30deg);
}
.num1 div{
transform: rotate(-30deg);
}
.num2{
transform: rotate(60deg);
}
.num2 div{
transform: rotate(-60deg);
}
.num3{
transform: rotate(90deg);
}
.num3 div{
transform: rotate(-90deg);
}
.num4{
transform: rotate(120deg);
}
.num4 div{
transform: rotate(-120deg);
}
.num5{
transform: rotate(150deg);
}
.num5 div{
transform: rotate(-150deg);
}
.num6{
transform: rotate(180deg);
}
.num6 div{
transform: rotate(-180deg);
}
.num7{
transform: rotate(210deg);
}
.num7 div{
transform: rotate(-210deg);
}
.num8{
transform: rotate(240deg);
}
.num8 div{
transform: rotate(-240deg);
}
.num9{
transform: rotate(270deg);
}
.num9 div{
transform: rotate(-270deg);
}
.num10{
transform: rotate(300deg);
}
.num10 div{
transform: rotate(-300deg);
}
.num11{
transform: rotate(330deg);
}
.num11 div{
transform: rotate(-330deg);
}
.num12{
transform: rotate(360deg);
}
.num12 div{
transform: rotate(-360deg);
}
.hand{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hand div{
position: absolute;
bottom: 50%;
left: 50%;
transform: translatex(-50%)
}
.sec{
width: 1px;
height: 38%;
background-color: red;
}
.min{
width: 4px;
height: 30%;
background-color: green;
border-radius: 5px;
}
.hour{
width: 12px;
height: 20%;
background-color: black;
border-radius: 5px;
}
.view{
display: grid;
grid-template-columns:auto auto auto auto;
padding: 50px;
justify-content: space-evenly;
grid-column-gap: 1px;
color: white;
background: linear-gradient(to left,hsl(101, 80%, 60%), hsl(131, 80%, 60%), hsl(161, 80%, 60%));
color: black;
border: 2px solid white;
margin: 2px;
}
#hr, #mini, #se, #day{
font-size: 1.5em;
}
|
const secDiv = document.querySelector("#sec");
const minDiv = document.querySelector("#min");
const hourDiv = document.querySelector("#hour");
setInterval(updateClock, 1000);
function updateClock(){
let date = new Date();
let sec = date.getSeconds();
let min = date.getMinutes();
let hour = date.getHours()%12;
console.log(hour);
let hourDeg = (hour * 30) + (0.5 * min) // it should move 30 degree once in an hour, it should also needs to respond to the minutes.
// (we have 60mins per hour hece 30deg / 60)
let minDeg = (min * 6) + (0.1 * sec);// it moves 6 deg per minute and also needs to respond to the seconds. so 6deg/60
let secDeg = sec * 6; // it moves 6 deg per second and we have 60seconds, maximum deg is 360 so 360/60 = 6
secDiv.style.transform = "rotate(" + secDeg +"deg)";
minDiv.style.transform = "rotate(" + minDeg + "deg)";
hourDiv.style.transform = "rotate(" + hourDeg +"deg)";
}
updateClock()
const se = document.querySelector("#se");
const min = document.querySelector("#mini");
const hour = document.querySelector("#hr");
const day = document.querySelector("#day");
setInterval(function(){
let time = new Date();
let hr = time.getHours();
se.innerHTML = "Seconds: " + time.getSeconds();
min.innerHTML = "Minutes: " + time.getMinutes();
if (hr < 12){
hour.innerHTML = "Hours: " + hr + " Am";
} else {
hour.innerHTML = "Hours: " + hr + " Pm";
}
if (hr == 0){
hour.innerHTML = "Hours: " + 12;
}else if (hr > 12 ){
hour.innerHTML = "Hours: " + (hr-12) + " Pm";
}
day.innerHTML = time.toLocaleString();
},1000);
|
