Digital Clock Using HTML, CSS and JavaScript

harshilsharmaa · harshilsharmaa · commit 018dcf75327b · 2022-10-02T21:23:41.000+05:30
diff --git a/Digital_clock_using_JavaScript/index.html b/Digital_clock_using_JavaScript/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Digital Clock</title>
+</head>
+<body>
+    <div class="container">
+        <h1 id="heading">Digital Clock</h1>
+        <div class="clock-box">
+            <div class="dateDay">
+                <h3 id="date">hello</h3>
+                <h3 id="day"></h3>
+            </div>
+            <p id="time">20:00:00</p>
+        </div>
+        <h3>Check Out my Potfolio for more amazing projects: <a href="https://harshilsharma.tech">HarshilSharma</a></h3>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Digital_clock_using_JavaScript/script.js b/Digital_clock_using_JavaScript/script.js
@@ -0,0 +1,59 @@
+window.onload = function(){
+    startClock();
+}
+
+let time = document.getElementById('time');
+
+let currentData = new Date(); 
+
+let date = currentData.getDate();
+let day = currentData.getDay();
+let month = currentData.getMonth();
+let year = currentData.getFullYear();
+
+
+let days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
+
+day = days[day];
+
+function startClock(){
+    
+    let currentData = new Date();
+    let seconds = currentData.getSeconds();
+    let minutes = currentData.getMinutes();
+    let hours = currentData.getHours();
+    
+
+    let AMorPM;
+    if(hours>=12){
+        AMorPM = "PM";
+    }
+    else{
+        AMorPM = "AM";
+    }
+
+    let h = hours;
+    if(hours==0){
+        h = 12;
+    }
+    else if(hours>12){
+        h = hours-12;
+    }
+
+    let s = check(seconds);
+    let m = check(minutes);
+    function check(val){
+        if(val<10){
+            return '0' + val;
+        }
+        return val;
+    }
+
+    time.innerText = h + ':' + m + ':' + s + ' '+AMorPM;
+}
+
+document.getElementById('date').innerText = date+'/ '+month+'/ '+year;
+document.getElementById('day').innerText = day;
+
+
+setInterval(startClock,1000);
diff --git a/Digital_clock_using_JavaScript/style.css b/Digital_clock_using_JavaScript/style.css
@@ -0,0 +1,68 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
+
+*{
+    padding: 0;
+    margin: 0;
+}
+
+body{
+    background: #272c33;
+}
+
+.container{
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 30px;
+}
+
+#heading{
+    text-align: center;
+    color: aqua;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 68px;
+}
+
+.clock-box{
+    height: 250px;
+    width: 500px;
+    margin: 110px auto;
+    background: #3f4652;
+    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.315);
+    color: aqua;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.dateDay{
+    display: flex;
+    justify-content: space-between;
+    margin: 1px 15px;
+}
+
+#date{
+    margin-top: 7px;
+    font-family: 'Ubuntu', sans-serif;
+}
+
+#day{
+    margin-top: 7px;
+    font-family: 'Ubuntu', sans-serif;
+}
+
+#time{
+    margin:  auto;
+    font-size: 62px;
+    font-family: 'Ubuntu', sans-serif;
+}
+
+h3{
+    text-align: center;
+    
+    color: rgba(0, 255, 255, 0.7);
+    font-family: 'Ubuntu', sans-serif;
+}
+
+h3 a{
+    color: aqua;
+}
