UPDATED

atanumondal-2001 · Apr 20, 2023 · c34e5ad · c34e5ad
1 parent 72d7dca
commit c34e5ad
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 3 deletions.
diff --git a/calculatorJs.js b/calculatorJs.js
@@ -17,4 +17,9 @@ Array.from(buttons).forEach((button) => {
             document.querySelector('input').value = Str;
         }
     })
-})
+})
+
+function changeMode() {
+    let myContainer = document.getElementById("mainId");
+    myContainer.classList.toggle('lightContainer')
+}
diff --git a/calculatorStyle.css b/calculatorStyle.css
@@ -3,7 +3,7 @@
         /*margin: 0;
     padding: 0;*/
         box-sizing: border-box;
-        font-family: 'Chivo Mono', monospace;
+        font-family: 'poppins', monospace;
     }
 
     body {
@@ -35,6 +35,10 @@
         font-size: 25px;
     }
 
+    .fa-lightbulb {
+        color: white;
+    }
+
     input {
         border: none;
         width: 320px;
@@ -65,6 +69,20 @@
         box-shadow: 2px 1px 9px rgba(197, 192, 192, 1.5);
     }
 
+    .modeBtn {
+        cursor: pointer;
+        width: 30px;
+        height: 30px;
+        margin: 10px;
+        margin-left: 61px;
+        border-radius: 50px;
+        background: transparent;
+        color: white;
+        border: none;
+        font-size: 20px;
+        box-shadow: 2px 1px 9px rgb(177, 172, 172);
+    }
+
     .remove {
         background-color: rgb(209, 70, 70);
     }
@@ -86,4 +104,42 @@
         color: white;
         font-size: 15px;
         text-align: center;
+    }
+    /*CSS for Light Mode*/
+
+    .lightContainer {
+        border: 1px solid silver;
+        padding: 20px;
+        border-radius: 16px;
+        background-color: white;
+        box-shadow: 0px 0px 20px rgb(133, 127, 127);
+        opacity: 5.5;
+    }
+
+    .lightContainer .product_name {
+        color: black;
+    }
+
+    .lightContainer .modeBtn {
+        background-color: rgb(134, 132, 132);
+    }
+
+    .lightContainer .fa-lightbulb {
+        color: yellow;
+    }
+
+    .lightContainer>h2 {
+        color: black;
+    }
+
+    .lightContainer .input {
+        color: black;
+    }
+
+    .lightContainer .input::placeholder {
+        color: black;
+    }
+
+    .lightContainer .num {
+        color: rgb(10, 240, 10);
     }
diff --git a/index.html b/index.html
@@ -8,18 +8,20 @@
     <title>Calculator by Atanu</title>
     <link rel="icon" href="Calc_icon.png">
     <link rel="stylesheet" href="calculatorStyle.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 </head>
 
 <body>
 
 
-    <div class="container">
+    <div class="container" id="mainId">
 
         <header>
             <table>
                 <th><img class="logo" src="Calc_icon.png" alt="Calculator"></th>
                 <th class="product_name">CALCULATOR</th>
+                <th><button class="modeBtn" onclick="changeMode()"><i class="fa-solid fa-lightbulb"></i></button></th>
 
             </table>
         </header>