swapnilsparsh · keerthika-18 · Jun 4, 2024 · Jun 7, 2024 · Jun 11, 2024 · Jun 16, 2024
diff --git a/01 - Drum Kit/style.css b/01 - Drum Kit/style.css
@@ -1,10 +1,12 @@
-body,
-html {
+
+body, html {
   margin: 0;
   padding: 0;
   font-family: 'sans';
   font-size: 10px;
-  background: #19172e;
+  background: linear-gradient(120deg, #1a1a2e, #16213e, #0f3460, #53354a, #903749, #e84545);
+  background-size: 200% 200%;
+  animation: gradientAnimation 10s ease infinite;
   user-select: none;
 }
 
@@ -15,7 +17,7 @@ html {
 
 h1 {
   font-size: 5.5rem;
-  color: #FEFFE2;
+  color: #957efb; /* White title color */
   font-family: "Arvo", cursive;
   text-align: center;
   margin-bottom: 0;
@@ -35,22 +37,22 @@ span {
 }
 
 .key {
-  border: .4rem solid white;
+  border: .4rem solid #ce8cfe; /* Light grey border */
   border-radius: .5rem;
   margin: 1rem;
   font-size: 1.5rem;
   padding: 1rem .5rem;
   transition: all .07s ease;
   width: 78pt;
   text-align: center;
-  color: white;
+  color: rgb(136, 117, 242);
   background-color: #212121;
 }
 
 .playing {
   transform: scale(1.1);
-  border-color: #bb86fc;
-  box-shadow: 0 0 1rem #bb86fc;
+  border-color: #868efc;
+  box-shadow: 0 0 1rem #8886fc;
 }
 
 kbd {
@@ -82,9 +84,22 @@ footer a:visited {
   color: inherit;
 }
 
-#container{
+#container {
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-}
+}
+
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
diff --git a/02 - Clock/index.html b/02 - Clock/index.html
@@ -8,7 +8,6 @@
   <title>Clock</title>
   <link rel="stylesheet" href="style.css" />
   <link rel="icon" href="assets/favicon.png">
-
 </head>
 
 <body>
@@ -27,8 +26,6 @@ <h2 class="heading">
     </div>
   </div>
 
-
-
   <footer>
     <p>&#x3c; &#47; &#x3e; with ❤️ by
       <a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
@@ -38,31 +35,33 @@ <h2 class="heading">
     </p>
   </footer>
 
+  <button id="theme-toggle"> Theme</button>
+
   <script type="text/javascript">
     const deg = 6;
-    // getting all hands of clock from html through id
     const hr = document.querySelector('#hr')
     const mn = document.querySelector('#mn');
     const sc = document.querySelector('#sc');
 
     setInterval(() => {
       let day = new Date();
 
-      //setting the actual seconds minutes and hour in clock
-
       let ms = day.getMilliseconds() * deg;
       let hh = day.getHours() * 30;
       let mm = day.getMinutes() * deg;
       let ss = day.getSeconds() * deg + ms / 1000;
 
-      //changing the degrees in the style as per the time
-
       hr.style.transform = `rotateZ(${(hh) + (mm / 12)}deg)`;
       mn.style.transform = `rotateZ(${mm}deg)`;
       sc.style.transform = `rotateZ(${ss}deg)`;
 
     }, 1);
+
+    const themeToggleBtn = document.getElementById('theme-toggle');
+    themeToggleBtn.addEventListener('click', () => {
+      document.body.classList.toggle('light-theme');
+    });
   </script>
 </body>
 
-</html>
+</html>
diff --git a/02 - Clock/style.css b/02 - Clock/style.css
@@ -8,10 +8,11 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
   min-height: 100vh;
   background: #19172e;
   font-family: "sans";
-
+  transition:  0.5s;
 }
 
 @font-face {
@@ -38,6 +39,12 @@ body {
   align-items: center;
   background: url(assets/clock.png);
   background-size: cover;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s;
+}
+
+.clock:hover {
+  transform: scale(1.05);
 }
 
 .clock:before {
@@ -48,12 +55,14 @@ body {
   background: #fff;
   border-radius: 50%;
   z-index: 10000;
+  box-shadow: 0 0 15px #fff;
 }
 
 .clock .hour,
 .clock .min,
 .clock .sec {
   position: absolute;
+  transition: all 0.5s ease-in-out;
 }
 
 .clock .hour,
@@ -79,7 +88,6 @@ body {
 .sc {
   display: flex;
   justify-content: center;
-  /* align-items: center; */
   position: absolute;
   border-radius: 50%;
 }
@@ -92,6 +100,7 @@ body {
   background: #bb86fc;
   z-index: 10;
   border-radius: 6px 6px 0 0;
+  box-shadow: 0 0 10px #bb86fc;
 }
 
 .mn:before {
@@ -102,6 +111,7 @@ body {
   background: #fff;
   z-index: 11;
   border-radius: 6px 6px 0 0;
+  box-shadow: 0 0 10px #fff;
 }
 
 .sc:before {
@@ -112,6 +122,7 @@ body {
   background: #70efde;
   z-index: 12;
   border-radius: 6px 6px 0 0;
+  box-shadow: 0 0 10px #70efde;
 }
 
 footer {
@@ -128,3 +139,87 @@ footer {
 footer a:visited {
   color: inherit;
 }
+
+button#theme-toggle {
+  margin-top: 20px;
+  padding: 10px 20px;
+  font-size: 1rem;
+  color: #1b1919;
+  background-color: #6200ea;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+button#theme-toggle:hover {
+  background-color: #3700b3;
+  transform: scale(1.05);
+}
+
+button#theme-toggle:focus {
+  outline: none;
+}
+
+@media (max-width: 600px) {
+  .clock {
+    width: 250px;
+    height: 250px;
+  }
+
+  .clock .hour,
+  .hr {
+    width: 120px;
+    height: 120px;
+  }
+
+  .clock .min,
+  .mn {
+    width: 140px;
+    height: 140px;
+  }
+
+  .clock .sec,
+  .sc {
+    width: 180px;
+    height: 180px;
+  }
+}
+
+/* Theme Toggle */
+body.light-theme {
+  background: #8f8df9;
+}
+
+body.light-theme .clock:before {
+  background: #000;
+  box-shadow: 0 0 15px #000;
+}
+
+body.light-theme .hr:before {
+  background: #6200ea;
+  box-shadow: 0 0 10px #6200ea;
+}
+
+body.light-theme .mn:before {
+  background: #000;
+  box-shadow: 0 0 10px #000;
+}
+
+body.light-theme .sc:before {
+  background: #03dac6;
+  box-shadow: 0 0 10px #03dac6;
+}
+
+body.light-theme .heading,
+body.light-theme footer {
+  color: #000;
+}
+
+body.light-theme button#theme-toggle {
+  background-color: #bb86fc;
+}
+
+body.light-theme button#theme-toggle:hover {
+  background-color: #3700b3;
+}
diff --git a/05 - Random Password Generator/main.js b/05 - Random Password Generator/main.js
@@ -1,49 +1,35 @@
-const words = ['seat', 'pen', 'broad', 'vapor', 'ocean',
-    'red', 'plate', 'late', 'that', 'ring', 'swim', 'shown',
-    'path', 'law', 'list', 'hard', 'plate', 'block', 'two',
-    'pupil', 'were', 'lot', 'pay', 'would', 'tired', 'dull',
-    'mud', 'sky', 'grew', 'hard', 'ill', 'frame',
-    'sport', 'did', 'many', 'been', 'page', 'year', 'trail',
-    'earth', 'are', 'while', 'off', 'town', 'doing', 'size',
-    'steel', 'sale', 'swam', 'put', 'zero', 'week', 'mill',
-    'past', 'aside', 'her', 'cent', 'box', 'fuel', 'block',
-    'those', 'late', 'sun', 'map', 'silk', 'lady', 'meant',
-    'still', 'shine', 'range', 'loud', 'fox', 'gate', 'slide',
-    'each', 'nails', 'flag', 'exist', 'door', 'luck', 'down',
-    'poem', 'depth', 'press', 'crowd', 'herd', 'drink', 'worry',
-    'dried', 'dig', 'new', 'rest', 'play', 'win', 'strong'];
-
-    function getPassword() {
-        let length = document.getElementById('length').value;
-        if (length === '') {
-            length = 8; // Setting default length to 8
+function getPassword() {
+    let length = document.getElementById('length').value;
+    if (length === '' || isNaN(length)) {
+        length = 8; // Setting default length to 8 if invalid input
+    } else {
+        length = parseInt(length); 
+        if (length < 8 || length > 32) {
+            length = 8; 
+            alert('default 8 to 32')
         }
-
-        const includeLowercase = document.getElementById('includeLowercase').checked;
-        const includeUppercase = document.getElementById('includeUppercase').checked;
-        const includeSymbols = document.getElementById('includeSymbols').checked;
-        const includeNumbers = document.getElementById('includeNumbers').checked;
-
-        let chars = '';
-        if (includeLowercase) chars += 'abcdefghijklmnopqrstuvwxyz';
-        if (includeUppercase) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-        if (includeSymbols) chars += '!@#$%&';
-        if (includeNumbers) chars += '0123456789';
-
-        let password = '';
-        for (let i = 0; i < length; i++) {
-            password += chars.charAt(Math.floor(Math.random() * chars.length));
-        }
-
-        document.getElementById('password').value = password;
     }
 
+    const includeLowercase = document.getElementById('includeLowercase').checked;
+    const includeUppercase = document.getElementById('includeUppercase').checked;
+    const includeSymbols = document.getElementById('includeSymbols').checked;
+    const includeNumbers = document.getElementById('includeNumbers').checked;
 
-function randomNumber (l) {
-    return Math.floor(Math.random() * l);
-}
+    let chars = '';
+    if (includeLowercase) chars += 'abcdefghijklmnopqrstuvwxyz';
+    if (includeUppercase) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    if (includeSymbols) chars += '!@#$%&';
+    if (includeNumbers) chars += '0123456789';
+
+    if (chars === '') {
+        alert('Please select at least one character type.');
+        return;
+    }
+
+    let password = '';
+    for (let i = 0; i < length; i++) {
+        password += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
 
-function randomWord () {
-    const number = randomNumber(words.length);
-    return words[number];
+    document.getElementById('password').value = password;
 }