From 03421ac54213b56444c548d2fbeac6fc374244aa Mon Sep 17 00:00:00 2001
From: AdityaKumar2408 <adityachouhan7705@gmail.com>
Date: Wed, 4 Oct 2023 23:31:32 +0530
Subject: [PATCH] Bug Fixed of 24 hour format

---
 Digital Clock/css/style.css     | 162 ++++++++++++++++++++++++--------
 Digital Clock/digitalClock.html |  24 +++--
 Digital Clock/js/script.js      |  27 +++---
 3 files changed, 157 insertions(+), 56 deletions(-)

diff --git a/Digital Clock/css/style.css b/Digital Clock/css/style.css
index 2980af3..7fc3cf1 100644
--- a/Digital Clock/css/style.css	
+++ b/Digital Clock/css/style.css	
@@ -1,53 +1,139 @@
 *{
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
+   
+    font-family: 'Poppins', sans-serif;
 }
-body{
+.text1{
     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-color: rgb(255, 198, 9);
-    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;
+    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;
+    
 }
-.main{
+
+.text1:hover{
     display: flex;
-    flex-direction: row;
-    height: 8rem;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
+    font-size: 3rem;
+    height: 100px;
+    width: 400px;
+    border: 1px solid rgb(111, 111, 111);
+    box-shadow: 15px 15px 3px #273938 ;
 }
-.text{
-    font-size: 2rem;
-}
-.texts{
-    display: flex ;
-
-    flex-direction: column;
-    justify-content: space-around;
-    margin: 5px 2px;
 
 
+html,body{
+    display: grid;
+    height:100%;
+    place-items: center;
+    background: #000;
+}
+.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:3px;
+    border: 1px solid rgb(206, 200, 200);
+    border-radius: 10px;
+    color: rgb(59, 59, 59);
+    font-size: 2.3rem;
+}
 
+@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%;
+        
+    }
 }
-.texts span{
-    font-weight: 500;
-    font-size:1.5rem;
-    margin: 2px 15px;
-}
\ No newline at end of file
diff --git a/Digital Clock/digitalClock.html b/Digital Clock/digitalClock.html
index 28ed9f0..ddadb8d 100644
--- a/Digital Clock/digitalClock.html	
+++ b/Digital Clock/digitalClock.html	
@@ -7,17 +7,27 @@
     <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="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>
\ No newline at end of file
diff --git a/Digital Clock/js/script.js b/Digital Clock/js/script.js
index f9e07a6..3f8fe75 100644
--- a/Digital Clock/js/script.js	
+++ b/Digital Clock/js/script.js	
@@ -1,24 +1,29 @@
-// const clock = document.querySelector(".clock");
-// setInterval(() => {
-//     let date = new Date();
-//     clock.innerHTML = date.toLocaleTimeString();
-// }, 1000);
 
+const clock12 = document.querySelector(".twelve");
+const clock24 = document.querySelector(".twentyfour");
+const day = document.querySelector(".day");
 
-const clock = document.querySelector(".clock");
 
 function updateClock() {
     let date = new Date();
 
-    // 24-hour format
-    const time24Hour = date.toLocaleTimeString();
+    
 
-    // 12-hour format
+    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}`;
+
+    
     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();
\ No newline at end of file