diff --git a/calculatorJs.js b/calculatorJs.js
index 6c7a199..9b1b1c9 100644
--- a/calculatorJs.js
+++ b/calculatorJs.js
@@ -17,4 +17,9 @@ Array.from(buttons).forEach((button) => {
document.querySelector('input').value = Str;
}
})
-})
\ No newline at end of file
+})
+
+function changeMode() {
+ let myContainer = document.getElementById("mainId");
+ myContainer.classList.toggle('lightContainer')
+}
\ No newline at end of file
diff --git a/calculatorStyle.css b/calculatorStyle.css
index 238dd7d..20a9ac0 100644
--- 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);
}
\ No newline at end of file
diff --git a/index.html b/index.html
index d70f521..9726ab8 100644
--- a/index.html
+++ b/index.html
@@ -8,18 +8,20 @@
Calculator by Atanu
+
-
+
 |
CALCULATOR |
+ |