this is the new project where i add the digital clock

Yubraj977 · Nov 6, 2023 · 22881b1 · 22881b1
1 parent 39c8330
commit 22881b1
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 1 deletion.
diff --git a/digital clock/digital.html b/digital clock/digital.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="https://fonts.cdnfonts.com/css/technology" rel="stylesheet">
+
+    <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+<div class="main">
+<div class="fake">
+    <p class="time">00 00 00 </p>
+
+
+    <div class="container">
+        <input type="checkbox" id="check" class="switch">
+        <label for="check" class="button "></label>
+    </div>
+
+</div>
+</div>
+
+
+
+
+
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/digital clock/main.js b/digital clock/main.js
@@ -0,0 +1,27 @@
+const changebtn = document.getElementsByClassName("switch")[0]; 
+const main = document.getElementsByClassName("main")[0]; 
+
+
+changebtn.addEventListener('click', function () {
+
+  main.classList.toggle("mode");
+});
+
+
+
+
+function updateClock(){
+  const updateElement=document.getElementsByClassName("time")[0]
+  const updatemilli=document.getElementsByClassName("millisec")[0]
+  const now=new Date();
+  const hours=String(now.getHours()).padStart(2,"0")
+  const minutes=String(now.getMinutes()).padStart(2,"0")
+  const seconds=String(now.getSeconds()).padStart(2,"0")
+  const millisec=String(now.getMilliseconds()).padStart(3,"0")
+
+  timestring=`${hours}:${minutes}:${seconds}`
+  updateElement.textContent=timestring
+}
+updateClock();
+setInterval(updateClock,200)
+
diff --git a/digital clock/style.css b/digital clock/style.css
@@ -0,0 +1,118 @@
+
+@import url('https://fonts.cdnfonts.com/css/technology');
+
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    /* border: 1px solid red; */
+    font-size: 16px;
+}
+.fake{
+
+    width: 65vw;
+    /* position: relative; */
+
+
+}
+.main{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+.time{
+    font-size: 16rem;
+    font-family: 'Technology', sans-serif;
+    letter-spacing: 1.1rem;
+    box-sizing: border-box;
+
+
+}
+
+.mode{
+     background: black;
+    color: white;
+
+}
+
+
+
+
+
+
+
+.container{
+
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.button{
+    width: 6.5rem;
+    height: 3.25rem;
+    background-color: #d2d2d2;
+    border-radius: 6.5rem;
+    cursor: pointer;
+    position: relative;
+    transition: 0.2s;
+}
+.button::before{
+    position: absolute;
+    content: "";
+    width: 2.8125rem;
+    height: 2.8125rem;
+    background-color: #fff;
+    border-radius: 6.5rem;
+    margin: 5px;
+    transition: 0.2s;
+}
+input:checked + .button{
+    background-color: rgb(128, 115, 112)
+
+}
+input:checked + .button::before{
+    transform: translateX(3.12rem);
+}
+input{
+    display: none;
+}
+input:checked + .button::before{
+    transform: translateX(3.125rem);
+    animation-name: toggle;
+    animation-duration: 0.8s;
+    transition-delay: 0.2s;
+
+}
+/* @keyframes toggle{
+    0%{
+        width: 2.8125rem;
+        height: 2.8125rem;
+    }
+    25%{
+        margin: 0.3125rem;
+        width: 0.9375rem;
+        height: 2.5rem;
+    }
+    50%{
+        margin: 0.625rem;
+        width: 3.125rem;
+        height: 1.875rem;
+    }
+    75%{
+        margin: 5px;
+        width: 2.1rem;
+        height: 2.8125rem;
+    }
+    100%{
+        width: 2.8125rem;
+        height: 2.8125rem;
+    }
+} */
diff --git a/index.html b/index.html
@@ -18,7 +18,14 @@ <h1>The analog clock</h1>
             </div>
 
 
-            <div class="project2 p" >Project2</div>
+            <div class="project2 p" >
+                <h1>The digital clock</h1>
+                <p id="info">with dark and light mode</p>
+               <a href="./digital clock/digital.html"> <button >view</button></a>
+               <p id="about">made by <a href="https://www.facebook.com/salk.sipe">yubraj khatri</a></p>
+            </div>
+
+
             <div class="project3 p" >Project 3</div>
             <div class="project4 p" >project 4</div>
             <div class="project5 p" >project 5</div>