Fix the 24-hour-format (#284)

[fix] #170 I had fix the bug of 24-hour-format which was previously showing 12-hour-format. And also some styling improvement has been done. ![Screenshot (1168)](https://github.com/Git21221/JS-beginner-projects/assets/110921916/1577d7c5-a8eb-4792-a722-7ad75f272300)
Git21221 · Oct 5, 2023 · bc8c06d · bc8c06d
2 parents 746b504 + c96de32
commit bc8c06d
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 78 deletions.
diff --git a/Digital Clock/css/style.css b/Digital Clock/css/style.css
@@ -1,52 +1,25 @@
 *{
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
-}
-body{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    height: 100vh;
-    row-gap: 20px;
-    background-color: #212121;
-    color: white;
-    font-family: "Outfit", sans-serif;
-}
-.clock{
-    background:linear-gradient(135deg,#14ffe9,#ffeb3b,#ff00e0);
-    height: 90px;
-    width: 200px;
-    border: 1px solid black;
-    border-radius: 10px;
-    color: black;
-    display: flex;
-    font-size: 1.5rem;
-    align-items: center;
-    justify-content: center;
-}
-.main{
-    display: flex;
-    flex-direction: row;
-    height: 8rem;
-    justify-content: space-between;
-    align-items: center;
+
+    font-family: 'Poppins', sans-serif;
 }
-.text{
+.text1{
     display: flex;
     justify-content: center;
+
     align-items: center;
     font-size: 3rem;
     height: 100px;
     width: 400px;
+    color:#fff;
     border: 1px solid rgb(111, 111, 111);
     box-shadow: 10px 10px 3px #273938;
     transition: .4s all ease;
 
 }
 
-.text:hover{
+.text1:hover{
     display: flex;
     justify-content: center;
     align-items: center;
@@ -57,37 +30,110 @@ body{
     box-shadow: 15px 15px 3px #273938 ;
 }
 
-
-.texts{
-    display: flex ;
-
-    flex-direction: column;
-    justify-content: space-around;
-    margin: 5px 2px;
-
-
-
+html,body{
+    display: grid;
+    height:100%;
+    place-items: center;
+    background: #000;
 }
-.texts span{
-    font-weight: 500;
-    font-size:1.5rem;
-    margin: 2px 15px;
+.wrapper{
+    height: 100px;
+    width:360px;
+    cursor:default;
+    background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
+    border-radius: 10px;
+    animation:animate 1.5s linear infinite;
+    align-items:center;
+    position: relative;
+    top:-5rem;
 }
-
+.wrapper .display,
+.wrapper #bd #ab{
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+}
+.wrapper .display{
+    z-index: 99;
+    background:#1b1b1b;
+    height:85px;
+    width:345px;
+    border-radius: 6px;
+    text-align:center;
+}
+.wrapper .display #time{
+    line-height: 85px;
+    color:#fff;
+    font-size: 50px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
+    -webkit-background-clip:text;
+    -webkit-text-fill-color:transparent;
+    animation:animate 1.5s linear infinite;
+}
+@keyframes animate{
+    100%{
+        filter:hue-rotate(360deg);
+    }
+}
+.wrapper span{
+    height: 100%;
+    width: 100%;
+    background: inherit;
+    border-radius: 10px;
+}
+.wrapper span:first-child{
+    filter:blur(10px);
+}
+.wrapper span:last-child{
+    filter:blur(20px);
+}
+.outer-container {
+    display: flex;
+    flex-direction: row; 
+
+}
+
+.inner-div {
+    margin:40px;
+    margin-bottom:10px ;
+} 
 .day{
     background:linear-gradient(135deg,#14ffe9,#ffeb3b,#ff00e0);
-
-    padding: 10px;
-    border: 3px solid rgb(206, 200, 200);
+    padding:3px;
+    border: 1px solid rgb(206, 200, 200);
     border-radius: 10px;
     color: rgb(59, 59, 59);
-
-    font-size: 1.5rem;
-    transition: .3s all ease-in;
-
+    font-size: 2.3rem;
 }
 
-.day:hover{
-    border-radius: 0;
-    font-size: 1.55rem;
-}
+@media (max-width:400px){
+    .outer-container{
+        flex-direction: column;
+    }
+    .text1{
+        width:280px;
+        font-size: 2rem;
+    }
+    .wrapper{
+        width:280px;
+
+    }
+    .display{
+        height: 50px;
+        width: 280px;
+    }
+    .inner-div{
+        margin: 2rem;
+        margin-bottom: 0.5rem;
+
+    }
+    .day{
+        font-size: 1rem;
+
+        width:75%;
+
+    }
+}
diff --git a/Digital Clock/digitalClock.html b/Digital Clock/digitalClock.html
@@ -7,19 +7,29 @@
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
-    <div class="text">
+    <div class="text1">
         Your local time
     </div>
-    <div class="main">
-        <div class="texts">
-            <span>24 hr Format:</span>
-            <span>12 hr Format:</span>
-        </div>
-        <div class="clock"></div>
+
+    <div  class="outer-container">
+      <div class="wrapper inner-div">
+        <div class="display">
+        <div id="time" class="twelve">12:00:00 PM</div></div>
+        <span ></span>
+
     </div>
     <div class="day">
     </div>
 
+    <div class="wrapper inner-div">
+        <div class="display">
+        <div id="time" class="twentyfour">12:00:00 PM</div></div>
+        <span ></span>
+
+    </div>
+
+    </div>
+    <div class="day"></div>
 </body>
 <script src="js/script.js"></script>
 </html>
diff --git a/Digital Clock/js/script.js b/Digital Clock/js/script.js
@@ -1,28 +1,32 @@
-// const clock = document.querySelector(".clock");
-// setInterval(() => {
-//     let date = new Date();
-//     clock.innerHTML = date.toLocaleTimeString();
-// }, 1000);
 
-
-const clock = document.querySelector(".clock");
+const clock12 = document.querySelector(".twelve");
+const clock24 = document.querySelector(".twentyfour");
 const day = document.querySelector(".day");
 
 
 function updateClock() {
     let date = new Date();
 
-    // 24-hour format
-    const time24Hour = date.toLocaleTimeString();
+
+
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+
+    const time24Hour = `${hours}:${minutes}:${seconds}`;
 
-    // 12-hour format
+
     const options12Hour = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true };
     const time12Hour = date.toLocaleTimeString(undefined, options12Hour);
 
-    clock.innerHTML = ` ${time24Hour}<br>${time12Hour}`;
+
+    clock12.innerHTML = `${time12Hour}`;
+    clock24.innerHTML = `${time24Hour}`;
+
+
     day.innerHTML = ` ${date}`;
 
 }
 
 setInterval(updateClock, 1000);
-updateClock(); // Call it once immediately to display the time on page load
+updateClock();