Merge pull request #202 from Jothishwar/main

Sulagna-Dutta-Roy · web-flow · commit a0fa1d4c67ee · 2022-10-18T01:26:15.000+05:30
CSS clock
diff --git a/Css Animations/CSS clock/Readme.md b/Css Animations/CSS clock/Readme.md
@@ -0,0 +1 @@
+Clock using CSS and Js
diff --git a/Css Animations/CSS clock/clock-script.js b/Css Animations/CSS clock/clock-script.js
@@ -0,0 +1,15 @@
+
+function setdate() {
+	const d=new Date();
+	const sec=d.getSeconds();
+	const min=d.getMinutes();
+	const hour=d.getHours();
+	const secDeg=((sec/60)*360)+90;
+	const minDeg=((min/60)*360)+((sec/60)*6)+90;
+	const hrDeg=((hour/12)*360)+((min/60)*30)+90;
+	document.querySelector('.second-hand').style.transform = `rotate(${secDeg}deg)`;
+	document.querySelector('.min-hand').style.transform = `rotate(${minDeg}deg)`;
+	document.querySelector('.hour-hand').style.transform = `rotate(${hrDeg}deg)`;
+	//console.log(hour,min,sec);
+}
+setInterval(setdate,1000);
diff --git a/Css Animations/CSS clock/clock-stlye.css b/Css Animations/CSS clock/clock-stlye.css
@@ -0,0 +1,43 @@
+html{
+	background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+.clock{
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.clock-face{
+	width: 300px;
+	height: 300px;
+	border-radius: 50%;
+	border: 15px solid floralwhite;
+	position: relative;
+}
+.hand{
+	width: 50%;
+	height: 5px;
+	background-color: black;
+	top: 50%;
+	position: absolute;
+	transform-origin: 100%;
+	transform: rotate(90deg);
+	transition: all 0.05s;
+	transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+}
+.second-hand{
+	width: 45%;
+	left: 5%;
+	height: 3px;
+}
+.min-hand{
+	width: 30%;
+	left: 20%;
+	height: 4px;
+}
+.hour-hand{
+	width: 25%;
+	left: 25%;
+}
diff --git a/Css Animations/CSS clock/index.html b/Css Animations/CSS clock/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>clock</title>
+	<link rel="stylesheet" type="text/css" href="clock-stlye.css">
+	<script type="text/javascript" src="clock-script.js"></script>
+</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>
+</body>
+</html>
