Add files via upload

yogeswari05 · Jan 19, 2024 · 75f7d18 · 75f7d18
1 parent 19a3a74
commit 75f7d18
Show file tree

Hide file tree

Showing 3 changed files with 264 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>Digital Clock</title>
+   <link rel="stylesheet" href="style.css">
+</head>
+<body>
+   <div class="main">
+      <div class="clock">
+         <div class="container">
+            <div class="time">
+               <div class="hour_div">
+                  <span class="hour">00</span>
+                  <span class="hname">HOURS</span>            
+               </div>
+               <span class="colon">:</span>
+               <div class="minutes_div">
+                  <span class="minutes">00</span>
+                  <span class="mname">MINS</span>
+               </div>
+               <span class="colon">:</span>
+               <div class="sec_div">
+                  <span class="seconds">00</span>
+                  <span class="same">SECS</span>
+               </div>
+               <div style="background-color: transparent; width:50px;">
+               <span class="am_pm">AM</span>
+               </div>
+
+            </div>
+            <div class="calender">
+               <span class="month">Month, </span>
+               <span class="day">day</span>
+               <span class="day_num">date</span>
+               <span class="year">year</span>               
+            </div>
+         </div>
+      </div>
+      <span class="toggle" curr_format="12">
+         <div class="btn-main">
+            <button onclick="toggler_format_func()" class="button" id="swi">
+               click to see in 24-hour format
+            </button>
+         </div>
+      </span>
+   </div>
+   <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,81 @@
+function toggler_format_func() {
+   var text = document.querySelector("button");
+   // var ap = document.querySelector("am_pm");
+   var toggle_format = document.querySelector(".toggle");
+   var val = toggle_format.getAttribute("curr_format");
+   if (val == "12") {
+      toggle_format.setAttribute("curr_format", "24");
+      text.innerHTML = "click to see in 12-hour format";
+      // ap.innerHTML = "";
+   }
+   else {
+      toggle_format.setAttribute("curr_format", "12");
+      text.innerHTML = "click to see in 24-hour format";
+
+   }
+}
+
+function clock() {
+  var today = new Date();
+  var hours = today.getHours();
+  var minutes = today.getMinutes();
+  var seconds = today.getSeconds();
+
+  var toggle_format = document.querySelector(".toggle");
+  var val = toggle_format.getAttribute("curr_format");
+
+  let am_pm = "AM";
+
+  // To set am/pm depending on time
+  if (hours >= 12) {
+    am_pm = "PM";
+  }
+  // to set 12 hour format
+  // var toggle_format = document.querySelector(".toggle");
+  var val = toggle_format.getAttribute("curr_format");
+  if (val == "12") {
+    if (hours > 12) {
+      hours = hours % 12;
+    }
+  }
+  // setting extra 0s before single digit
+  if (hours < 10) {
+    hours = "0" + hours;
+  }
+  if (minutes < 10) {
+    minutes = "0" + minutes;
+  }
+  if (seconds < 10) {
+    seconds = "0" + seconds;
+  }
+//   var ap = document.querySelector("am_pm");
+
+  document.querySelector(".hour").innerHTML = hours;
+  document.querySelector(".minutes").innerHTML = minutes;
+  document.querySelector(".seconds").innerHTML = seconds;
+  document.querySelector(".hour").innerHTML = hours;
+  var toggle_format = document.querySelector(".toggle");
+
+  // if(ap.innerHTML == "")
+
+  var daynum = today.getDate();
+  var year = today.getFullYear();
+  var day_name = today.toLocaleString("default", { weekday: "long" });
+  var mon_name = today.toLocaleString("default", { month: "short" });
+
+  document.querySelector(".month").innerHTML = mon_name;
+  document.querySelector(".day").innerHTML = day_name;
+  document.querySelector(".day_num").innerHTML = daynum;
+  document.querySelector(".year").innerHTML = year;
+  if (val == "24") {
+      document.querySelector(".am_pm").innerHTML = "";
+   }
+   else {
+      document.querySelector(".am_pm").innerHTML = am_pm;
+
+   }
+}
+var myInterval = setInterval(clock, 1000);
+function myStop() {
+  clearInterval(myInterval);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,132 @@
+*{
+   margin:0;
+   padding:0;
+   box-sizing: border-box;
+   font-family: sans-serif;
+}
+body{
+   min-height: 100vh;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   background-color:#003366;
+}
+.container::before{
+   content: '';
+   width:160px;
+   height:160px;
+   background: #004080;
+   box-shadow: 0 5px 15px rgba(15, 15, 15, 0.8);
+   border-radius: 50%;   
+   position:absolute;
+   left:-60px;
+   top:-60px;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   flex-direction: column;
+}
+.clock{
+   position: relative;
+   color: #fff;
+   width:500px;
+   padding:20px 45px 45px;
+   box-shadow: 0 5px 15px rgba(15, 15, 15, 0.8);
+   border-radius: 10px;
+   background-color: #0059b3;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   transition: background-color 1s;
+}
+.time{
+   position: relative;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   font-weight: 750;
+}
+.calender{
+   padding-top: 30px;
+   font-weight: bold;
+   font-size: large;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   text-shadow: 0 5px 20px rgba(15, 15, 15, 0.8);
+}
+.month, .day, .day_num, .year{
+   margin-left: 8px;
+}
+.hour_div, .minutes_div, .sec_div{
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   flex-direction: column;
+   border-radius: 10px;
+   background-color: #003366;
+   box-shadow: 0 5px 15px rgba(15, 15, 15, 0.8);
+   padding: 10px;
+   transition: background-color 1s;
+}
+.hour_div:hover{
+   background-color: #0059b3;
+}
+.minutes_div:hover{
+   background-color: #0059b3;
+}
+.sec_div:hover {
+   background-color: #0059b3;
+}
+.clock:hover{
+   background-color: #003366;
+}
+
+.hour, .colon, .minutes, .seconds{
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   font-weight: 750;
+   padding:0 10px;
+   line-height:125px;
+}
+.hour, .minutes, .seconds{
+   font-size: 50px;
+}
+.am_pm{
+   font-size: 30px;
+   padding-left: 10px;
+   padding-bottom: 10px;
+   text-shadow: 0 5px 20px rgba(15, 15, 15, 0.8);
+}
+.colon{
+   font-size: 40px;
+   color: grey;
+}
+.toggle{
+   display: flex;
+   flex-direction: row-reverse;
+   color: #fff;
+   text-shadow: 0 5px 20px rgba(15, 15, 15, 0.8);
+   font-weight: bolder;
+   padding-top: 10px;
+   margin:10px;
+}
+.button{
+   /* width: 10px;
+   height: 160px; */
+   background: #0059b3;
+   box-shadow: 0 5px 15px rgba(15, 15, 15, 0.8);
+   border-radius: 10px;
+   padding:8px;
+   font-size: 16px;
+   margin-top: 5px;
+   border-color: #0059b3;
+   transition: background-color 1s;
+}
+.button:hover{
+   background-color: #003366;
+}
+#label{
+   cursor: pointer;
+}