Merge pull request #312 from Ninjavin/digital-clock-js

tejan-singh · web-flow · commit 0517c7306ba8 · 2020-11-09T19:05:58.000+05:30
Digital Clock in JS
diff --git a/JavaScript/Digital-Clock/README.md b/JavaScript/Digital-Clock/README.md
@@ -0,0 +1,11 @@
+# Digital Clock
+
+This is a simple digital clock written using HTML, CSS and JS.
+
+## How to Run?
+
+Double Click on index.html and you will be good to go.
+
+## Screenshot
+
+![image](images/Digital-Clock.png)
diff --git a/JavaScript/Digital-Clock/images/Digital-Clock.png b/JavaScript/Digital-Clock/images/Digital-Clock.png
diff --git a/JavaScript/Digital-Clock/index.html b/JavaScript/Digital-Clock/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="style.css">
+	<title>Digital Clock</title>
+</head>
+<body>
+	<div id="digitalClock">
+
+	</div>
+	<script src="index.js"></script>
+</body>
+</html>
diff --git a/JavaScript/Digital-Clock/index.js b/JavaScript/Digital-Clock/index.js
@@ -0,0 +1,16 @@
+function clock(){
+	// Getting Time
+	let now = new Date()
+	let hours = now.getHours()
+	let min = now.getMinutes()
+	let seconds = now.getSeconds()
+	hours = (hours < 10) ? `0${hours}` : hours
+	min = (min < 10) ? `0${min}` : min
+	seconds = (seconds < 10) ? `0${seconds}` : seconds
+	if(hours > 12){
+		document.getElementById('digitalClock').innerHTML = `${hours%12}:${min}:${seconds} PM`
+	}
+	else
+		document.getElementById('digitalClock').innerHTML = `${hours}:${min}:${seconds} AM`
+}
+setInterval(clock, 1000)
diff --git a/JavaScript/Digital-Clock/style.css b/JavaScript/Digital-Clock/style.css
@@ -0,0 +1,27 @@
+*{
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body, html{
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	background: #1661ee;
+	font-family: Lato, arial;
+}
+
+#digitalClock{
+	position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+	height: max-content;
+	margin: auto;
+	font-size: 7vw;
+	color: white;
+}
