Added theme change in Aspect Ratio Calculator (#1057)

Rakesh9100 · Jun 3, 2024 · fc2d6c2 · fc2d6c2
1 parent b82bafa
commit fc2d6c2
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 28 deletions.
diff --git a/Calculators/Aspect-Ratio-Calculator/README.md b/Calculators/Aspect-Ratio-Calculator/README.md
@@ -2,7 +2,7 @@
 
 ## Description :-
 
-This is a simple Aspect Ratio Calculator that allows users to input width and height values and calculates the simplified aspect ratio. The calculator uses the greatest common divisor (GCD) to simplify the ratio.
+This is a simple Aspect Ratio Calculator that allows users to input width and height values and calculates the simplified aspect ratio. The calculator uses the greatest common divisor (GCD) to simplify the ratio. Also, this calculator also provides a toggle switch to switch between dark and light mode.
 
 ## Tech Stacks :-
 
@@ -12,4 +12,8 @@ This is a simple Aspect Ratio Calculator that allows users to input width and he
 
 ## Screenshots :-
 
-![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/63e9041c-1041-474b-a621-1c49fab10224)
+### Dark Mode
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/908a2850-bab5-497e-9185-4040b7caed3e)
+
+### Light Mode
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/15362f5f-3a48-4760-b72d-6d75ae1daae4)
diff --git a/Calculators/Aspect-Ratio-Calculator/index.html b/Calculators/Aspect-Ratio-Calculator/index.html
@@ -1,29 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
     <title>Aspect Ratio Calculator</title>
 </head>
-
 <body>
     <div class="calculator">
+        <button id="toggleMode" onclick="toggleMode()">Switch to Light Mode</button>
         <h2>Aspect Ratio Calculator</h2>
 
-        <label for="width">Width:</label>
-        <input type="number" id="width" placeholder="Enter width" oninput="calculateAspectRatio()">
-
-        <label for="height">Height:</label>
-        <input type="number" id="height" placeholder="Enter height" oninput="calculateAspectRatio()">
+        <div class="input-group">
+            <label for="width">Width:</label>
+            <input type="number" id="width" placeholder="Enter width" oninput="calculateAspectRatio()">
+        </div>
+        <div class="input-group">
+            <label for="height">Height:</label>
+            <input type="number" id="height" placeholder="Enter height" oninput="calculateAspectRatio()">
+        </div>
 
         <h3>Aspect Ratio:</h3>
         <p id="aspectRatio"></p>
     </div>
 
     <script src="script.js"></script>
-
 </body>
-
-</html>
+</html>
diff --git a/Calculators/Aspect-Ratio-Calculator/script.js b/Calculators/Aspect-Ratio-Calculator/script.js
@@ -5,7 +5,7 @@ function calculateAspectRatio() {
     if (width && height && width > 0 && height > 0) {
         const gcd = findGCD(width, height);
         const aspectRatio = `${width / gcd}:${height / gcd}`;
-        document.getElementById('aspectRatio').innerHTML = `Aspect Ratio: ${aspectRatio}`;
+        document.getElementById('aspectRatio').innerHTML = `Your Aspect Ratio is : ${aspectRatio}`;
     } else {
         document.getElementById('aspectRatio').innerHTML = 'Enter valid width and height.';
     }
@@ -14,3 +14,36 @@ function calculateAspectRatio() {
 function findGCD(a, b) {
     return b === 0 ? a : findGCD(b, a % b);
 }
+
+function toggleMode() {
+    document.body.classList.toggle('light-mode');
+    document.body.classList.toggle('dark-mode');
+    updateToggleButton();
+}
+
+function updateToggleButton() {
+    const button = document.getElementById('toggleMode');
+    if (document.body.classList.contains('light-mode')) {
+        button.textContent = 'Switch to Dark Mode';
+    } else {
+        button.textContent = 'Switch to Light Mode';
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const preferredMode = localStorage.getItem('preferredMode');
+    if (preferredMode) {
+        document.body.classList.add(preferredMode);
+    } else {
+        document.body.classList.add('dark-mode');
+    }
+    updateToggleButton();
+});
+
+window.addEventListener('beforeunload', () => {
+    if (document.body.classList.contains('light-mode')) {
+        localStorage.setItem('preferredMode', 'light-mode');
+    } else {
+        localStorage.setItem('preferredMode', 'dark-mode');
+    }
+});
diff --git a/Calculators/Aspect-Ratio-Calculator/style.css b/Calculators/Aspect-Ratio-Calculator/style.css
@@ -7,34 +7,95 @@ body {
     height: 100vh;
     margin: 0;
     font-family: "Roboto Condensed", sans-serif;
-    background: #010d1b;
-    color: #fff;
+    transition: background 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background: linear-gradient(135deg, #028391, #01204E);
+    color: #ecf0f1;
+}
+
+body.light-mode {
+    background: linear-gradient(135deg, #03AED2, #94FFD8);
+    color: #2c3e50;
 }
 
 .calculator {
     text-align: center;
-    border: 1px solid #fff;
-    width: 500px;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    background: transparent;
+    border: 2px solid currentColor;
+    width: 350px;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    background: #ffffffdd;
     backdrop-filter: blur(10px);
     display: flex;
     flex-direction: column;
+    align-items: center;
+}
+
+.calculator h2, .calculator h3 {
+    margin-bottom: 15px;
+}
+
+.input-group {
+    margin-bottom: 15px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 input {
-    margin: 10px 5px;
+    margin: 5px 0;
     padding: 10px;
     font-size: 16px;
-    background: transparent;
-    color: #fff;
+    border-radius: 10px;
+    border: 1px solid #ccc;
+    width: 80%;
+    text-align: center;
+    transition: background 0.3s, color 0.3s;
+}
+
+button {
+    background-color: #3498db;
+    color: white;
+    padding: 10px 20px;
     border: none;
-    border-bottom: 1px solid;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+    margin-bottom: 20px;
+}
+
+button:hover {
+    background-color: #2980b9;
 }
 
 p {
-    font-size: 16px;
-    margin: 5px 0;
-}
+    font-size: 18px;
+    margin: 10px 0;
+}
+
+body.dark-mode .calculator {
+    background: #34495e;
+    color: #ecf0f1;
+}
+
+body.light-mode .calculator {
+    background: #ffffffdd;
+    color: #2c3e50;
+}
+
+body.dark-mode input {
+    background: #34495e;
+    color: #ecf0f1;
+    border: 3px solid #2980b9;
+}
+
+body.light-mode input {
+    background: #ffffff;
+    color: #2c3e50;
+    border: 3px solid #2980b9;
+}