prograd-org · trishasinha22 · Apr 2, 2022
diff --git a/app.js b/app.js
@@ -0,0 +1,29 @@
+var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var setTime = setInterval(showtime, 1000);
+
+
+function showtime()
+{
+    var today = new Date();
+    var hours = today.getHours();
+    var minutes = today.getMinutes();
+    var day = today.getDay();
+
+
+    if(hours<10)
+    {
+        hours= `0${hours}`;
+    }
+
+    if(minutes<10)
+    {
+        minutes=`0${minutes}`;
+
+    }
+
+       topt.innerHTML=hours+":"+ minutes;
+       middle.innerHTML= hours+":"+minutes;
+       daydis.innerHTML= days[day];
+}
+
+      setInterval(time,1000);
diff --git a/images/chat.PNG b/images/chat.PNG
diff --git a/images/music.PNG b/images/music.PNG
diff --git a/images/time.PNG b/images/time.PNG
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!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">
+    <title>SmartWatch</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <section class="container">
+        <section class="left">
+            <div class="text">
+                <h2>SmartWatch</h2>
+            </div>
+        </section>
+        <section class="right">
+            <div class="clock">
+                <h3 id="topt"></h3>
+                <div class="center">
+                    <h1 id="middle"></h1>
+                    <h4 id="daydis"></h4>
+                </div>
+                <div class="icon">
+                    <button><img id="img1" src="./images/chat.PNG" alt=""></button>
+                    <button><img id="img2" src="./images/music.PNG" alt=""></button>
+                    <button><img id="img3" src="./images/time.PNG" alt=""></button>
+                </div>
+            </div>
+        </section>
+    </section>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,88 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+html,body{
+    background: black;
+    height: 100%;
+    width: 100%;
+}
+.container{
+    display: flex;
+    margin-top: 20px;
+    height: 100%;
+}
+.left{
+    width: 50%;
+    background-color:rgb(43, 46, 56);
+    margin-bottom: 10px;
+  }
+  .right{
+    width: 50%;
+    background-color: white;
+    margin-bottom: 10px;
+  }
+  .text{
+    position: relative;
+    font-size:400%;
+    font-weight: normal;
+    color: white;
+    top: 285px;
+    left: 150px;
+    font-family: 'Times New Roman', Times, serif;
+  }
+
+  .clock{
+    height: 350px;
+    width: 250px;
+    top: 140px;
+    left: 230px;
+    background: black;
+    border-radius: 13%;
+    border-top: 25px solid grey;
+    border-bottom: 25px solid grey;
+    color: white;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+  }
+  .clock h3{
+    text-align: center;
+    margin-top: 15px;
+  }
+  .center{
+    text-align: center;
+    position: relative;
+    top: 10%;
+    font-family: 'Times New Roman', Times, serif;
+  }
+  .center h1{
+    font-size:550%;
+  }
+  #daydis{
+      font-size: 100%;
+  }
+  img{
+    position: relative;
+    display: flex;
+    height: 30px;
+  }
+
+  #img1{
+    margin-left: 60%;
+}
+#img2{
+    margin-left: 200%;
+}
+#img3{
+    margin-left: 350%;
+} 
+button{
+    background-color: transparent;
+    justify-content: space-around;
+    margin-top: 35%;
+    border: none;
+  }
+