made it prefect

Amanc77 · Mar 26, 2024 · b1aa2df · b1aa2df
1 parent e301fca
commit b1aa2df
Show file tree

Hide file tree

Showing 5 changed files with 251 additions and 31 deletions.
diff --git a/15 basic project/7. Digital Clock/.vscode/settings.json b/15 basic project/7. Digital Clock/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/15 basic project/7. Digital Clock/index.html b/15 basic project/7. Digital Clock/index.html
@@ -7,16 +7,38 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-//this is whole body of code
+
   <div class="buttons">
     <h1>Click Start for changing Background</h1>
       <button class="start">Start</button>
       <button class="stop">Stop</button>
   </div>
-    <nav>
-        <h1>Digital Clock</h1>
+    <nav class="digital">
+        <h1  >Digital Clock</h1>
     </nav>
-    <div class="center">
+    <!-- theme -->
+
+
+
+    <div class="toggle">
+
+    <div class="class-container">
+      <div class="clock">
+          <div class="needle hour"></div>
+          <div class="needle minute"></div>
+          <div class="needle second"></div>
+          <div class="center-point"></div>
+      </div>
+
+      <div class="time"></div>
+      <div class="date"></div>
+  </div>
+
+
+    </div>
+
+    <!-- theme end -->
+    <div class="localtime">
         <div id="banner"><span>Your local time</span></div>
         <div id="clock"></div>
     </div>

diff --git a/15 basic project/7. Digital Clock/script.js b/15 basic project/7. Digital Clock/script.js
@@ -34,4 +34,69 @@ let setIntervalID
 })
 stop.addEventListener('click',function(e){
     clearInterval(setIntervalID)
-})
+})
+
+
+
+// Theme clock
+
+const hourEl = document.querySelector('.hour')
+const minuteEl = document.querySelector('.minute')
+const secondEl = document.querySelector('.second')
+const timeEl = document.querySelector('.time')
+const dateEl = document.querySelector('.date')
+const toggle = document.querySelector('.toggle')
+
+const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+toggle.addEventListener('click', (e) => {
+    const html = document.querySelector('html')
+    if (html.classList.contains('dark')) {
+        html.classList.remove('dark')
+        e.target.innerHTML = 'Dark mode'
+    } else {
+        html.classList.add('dark')
+        e.target.innerHTML = 'Light mode'
+    }
+})
+
+function setTime() {
+    const time = new Date();
+    const month = time.getMonth()
+    const day = time.getDay()
+    const date = time.getDate()
+    const hours = time.getHours()
+    const hoursForClock = hours >= 13 ? hours % 12 : hours;
+    const minutes = time.getMinutes()
+    const seconds = time.getSeconds()
+    const ampm = hours >= 12 ? 'PM' : 'AM'
+    const anpm = hours >=16
+    const abcd = 'efgh'
+
+    hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`
+    minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`
+    secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`
+
+    timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
+    dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`
+}
+
+// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
+const scale = (num, in_min, in_max, out_min, out_max) => {
+    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+}
+
+setTime()
+
+setInterval(setTime, 1000)
+
+//this is not use in this code 
+
+if ( 5 > 8 ){
+    console.log(` i am aman kumar chaurasiya `)
+}
+
+else{
+    console.log(`you are not eligible for next exam so focouse on only your coding skill `)
+}
diff --git a/15 basic project/7. Digital Clock/style.css b/15 basic project/7. Digital Clock/style.css
@@ -1,53 +1,183 @@
+/* General styles */
 body {
     width: 100vw;
-    height: 100vh;
+    height: 100%;
     background-color: #212121;
     color: #fff;
-
+    font-family: 'Heebo', sans-serif; /* Applying font family for the entire body */
+    margin: 0; /* Resetting default margin */
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 .center {
     display: flex;
-    height: 100vh;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-
-}
-#clock {
-    font-size: 40px;
-    background-color: orange;
-    padding: 20px 50px;
-    margin-top: 1px;
-    border-radius: 10px;
-
+    height: 100vh;
 }
 
- nav h1 {
+nav h1 {
     text-align: center;
     padding-top: 80px;
-    margin-bottom: 20px; 
-
+    margin-bottom: 20px;
 }
 
 .buttons {
-
-    top: 0;
-    left: 0;
     width: 100%;
-    height: 100px;
-    background:transparent;
-    padding: 10px;
     text-align: center;
 }
 
-.start,
-.stop {
+.start, .stop {
     height: 40px;
-    border-radius: 10px;
-    margin: 20px;
     width: 80px;
+    margin: 20px 10px; /* Adjusted margin for buttons */
+    border-radius: 10px;
     color: white;
     background-color: black;
-    margin: 0 10px; /* Add margin between buttons */
+}
+.localtime{
+    color: red;
+    position:relative;
+    transform: translate(245px,-430px)
+}
+#clock{
+    max-width: 100px;
+    padding-top: 10px;
+    padding-left: 10px;
+   scale: 2;
+    color: aqua
+
+}
+#banner{
+
+    scale: 1.5;
+    margin-left: 90px;
+    margin-bottom: 5px
+
+}
+
+.digital{
+    margin-top: 20px;
+    transform: translateY(10px);
+
+    color: rgb(6, 49, 168)
+
+
+}
+
+/* Theme clock */
+@import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap');
+
+:root {
+    --primary-color: #000;
+    --secondary-color: #fff;
+}
+
+html.dark {
+    --primary-color: #fff;
+    --secondary-color: #333;
+    background-color: #111;
+    color: var(--primary-color);
+}
+
+.clock-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.toggle {
+    cursor: pointer;
+
+    color: var(--secondary-color);
+    border: 0;
+    border-radius: 4px;
+    padding: 8px 12px;
+    position: ;
+    top: 100px;
+    transform: translate(190px);
+}
+
+.toggle:focus {
+    outline: none;
+
+}
+
+.clock {
+    position: relative;
+    width: 200px;
+    height: 200px;
+}
+
+.needle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 3px;
+    background-color: var(--primary-color);
+    transform-origin: bottom center;
+    transition: all .5s ease-in;
+}
+
+.needle.hour {
+    height: 65px;
+}
+
+.needle.minute {
+    height: 65px;
+}
+
+.needle.second {
+    height: 100px;
+    background-color: #e74c3c;
+}
+
+.center-point {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 10px;
+    height: 10px;
+    background-color: #e74c3c;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.center-point::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 5px;
+    height: 5px;
+    background-color: var(--primary-color);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.time {
+    font-size: 60px;
+}
+
+.date {
+    font-size: 14px;
+    color: #aaa;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+}
+
+.date.circle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    font-size: 12px;
+    color: var(--secondary-color);
+    background-color: var(--primary-color);
+    border-radius: 50%;
+    transition: all 0.5s ease-in;
 }
diff --git a/README.md → To-do-list-WebPage/README.md b/README.md → To-do-list-WebPage/README.md