├── assets
    ├── calculator.ico
    ├── MoonIcon.svg
    └── SunIcon.svg
├── styles
    ├── light.css
    └── dark.css
├── index.html
└── scripts
    └── script.js


/assets/calculator.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Raushan122002/codsoft-calculator/HEAD/assets/calculator.ico


--------------------------------------------------------------------------------
/assets/MoonIcon.svg:
--------------------------------------------------------------------------------
1 | <svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M7.83253 15C10.2484 15 12.4549 13.9475 13.9167 12.2229C14.133 11.9678 13.8972 11.5951 13.563 11.656C9.76289 12.349 6.27316 9.55904 6.27316 5.88586C6.27316 3.76998 7.45605 1.82429 9.37857 0.77666C9.67492 0.615176 9.60039 0.184951 9.26365 0.125391C8.79158 0.042039 8.31256 6.84474e-05 7.83253 0C3.50907 0 0 3.35481 0 7.5C0 11.6399 3.50356 15 7.83253 15Z" fill="#fff"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/SunIcon.svg:
--------------------------------------------------------------------------------
1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M5.76 4.29L3.96 2.5L2.55 3.91L4.34 5.7L5.76 4.29ZM3 9.95H0V11.95H3V9.95ZM12 0H10V2.95H12V0ZM19.45 3.91L18.04 2.5L16.25 4.29L17.66 5.7L19.45 3.91ZM16.24 17.61L18.03 19.41L19.44 18L17.64 16.21L16.24 17.61ZM19 9.95V11.95H22V9.95H19ZM11 4.95C7.69 4.95 5 7.64 5 10.95C5 14.26 7.69 16.95 11 16.95C14.31 16.95 17 14.26 17 10.95C17 7.64 14.31 4.95 11 4.95ZM10 21.9H12V18.95H10V21.9ZM2.55 17.99L3.96 19.4L5.75 17.6L4.34 16.19L2.55 17.99Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/styles/light.css:
--------------------------------------------------------------------------------
  1 | /* CSS Reset & Global Styles */
  2 | * {
  3 |   box-sizing: border-box;
  4 |   padding: 0;
  5 |   margin: 0;
  6 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans';
  7 |   -webkit-appearance: none;
  8 | }
  9 | 
 10 | .wrapper {
 11 |   height: 100vh;
 12 |   width: 100%;
 13 |   display: flex;
 14 |   justify-content: center;
 15 |   flex-direction: column;
 16 |   align-items: center;
 17 |   background-color: rgb(7, 210, 199);
 18 |   transition: 0.8s all;
 19 | }
 20 | 
 21 | h1 {
 22 |   margin-bottom: 1.5%;
 23 |   color: #fff;
 24 |   font-weight: normal;
 25 | }
 26 | 
 27 | .container {
 28 |   width: 350px;
 29 |   display: flex;
 30 |   justify-content: center;
 31 |   flex-direction: column;
 32 |   align-items: center;
 33 | }
 34 | 
 35 | .header-container {
 36 |   display: flex;
 37 |   justify-content: space-between;
 38 |   align-items: center;
 39 |   width: 80%;
 40 | }
 41 | 
 42 | .top-buttons {
 43 |   display: flex;
 44 |   align-items: center;
 45 | }
 46 | 
 47 | input {
 48 |   padding: 25px;
 49 |   color: rgb(87, 87, 87);
 50 |   font-size: 1em;
 51 |   cursor: pointer;
 52 |   width: 70px;
 53 |   background-color: #fff;
 54 |   border: none;
 55 |   outline: none;
 56 |   border-radius: 100px;
 57 |   margin: 0.2em;
 58 | }
 59 | 
 60 | .first-row,
 61 | .second-row,
 62 | .third-row,
 63 | .fourth-row,
 64 | .fifth-row {
 65 |   margin-bottom: 4px;
 66 | }
 67 | 
 68 | input[type="button"] {
 69 |   color: rgb(122, 122, 122);
 70 | }
 71 | 
 72 | input[type="text"] {
 73 |   background-color: rgb(255, 255, 255);
 74 |   width: 222.5px;
 75 | }
 76 | 
 77 | input[type="button"]:hover {
 78 |   background-color: rgb(37, 35, 59);
 79 |   color: #fff;
 80 | }
 81 | 
 82 | #clear-button {
 83 |   color: #fff;
 84 |   background-color: rgb(255, 25, 25);
 85 | }
 86 | 
 87 | a {
 88 |   text-decoration: none;
 89 |   color: #fff;
 90 | }
 91 | 
 92 | #github-icon {
 93 |   margin-right: 10px;
 94 | }
 95 | 
 96 | .theme-button {
 97 |   all: unset;
 98 |   cursor: pointer;
 99 | }
100 | .author-text{
101 |   color: white;
102 |   margin-top: 20px;
103 | }
104 | 


--------------------------------------------------------------------------------
/styles/dark.css:
--------------------------------------------------------------------------------
  1 | /* CSS Reset & Global Styles */
  2 | * {
  3 |   box-sizing: border-box;
  4 |   padding: 0;
  5 |   margin: 0;
  6 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans';
  7 |   -webkit-appearance: none;
  8 | }
  9 | 
 10 | ::placeholder {
 11 |   color: rgb(221, 221, 221);
 12 | }
 13 | 
 14 | .wrapper {
 15 |   height: 100vh;
 16 |   width: 100%;
 17 |   display: flex;
 18 |   justify-content: center;
 19 |   flex-direction: column;
 20 |   align-items: center;
 21 |   background-color: rgb(20, 19, 19);
 22 |   transition: 0.8s all;
 23 | }
 24 | 
 25 | h1 {
 26 |   margin-bottom: 1.5%;
 27 |   color: #fff;
 28 |   font-weight: normal;
 29 | }
 30 | 
 31 | .container {
 32 |   width: 350px;
 33 |   display: flex;
 34 |   justify-content: center;
 35 |   flex-direction: column;
 36 |   align-items: center;
 37 | }
 38 | 
 39 | .header-container {
 40 |   display: flex;
 41 |   justify-content: space-between;
 42 |   align-items: center;
 43 |   width: 80%;
 44 | }
 45 | 
 46 | .top-buttons {
 47 |   display: flex;
 48 |   align-items: center;
 49 | 
 50 | }
 51 | 
 52 | input {
 53 |   padding: 25px;
 54 |   color: rgb(255, 255, 255);
 55 |   font-size: 1em;
 56 |   cursor: pointer;
 57 |   width: 70px;
 58 |   background-color: rgb(47, 51, 50);
 59 |   border: none;
 60 |   outline: none;
 61 |   border-radius: 100px;
 62 |   margin: 0.2em;
 63 | }
 64 | 
 65 | .first-row,
 66 | .second-row,
 67 | .third-row,
 68 | .fourth-row,
 69 | .fifth-row {
 70 |   margin-bottom: 4px;
 71 | }
 72 | 
 73 | input[type="text"] {
 74 |   background-color: rgb(47, 51, 50);
 75 |   width: 222.5px;
 76 | }
 77 | 
 78 | input[type="button"]:hover {
 79 |   background-color: rgb(101, 101, 101);
 80 |   color: #fff;
 81 | }
 82 | 
 83 | #clear-button {
 84 |   color: #fff;
 85 |   background-color: rgb(255, 42, 42);
 86 | }
 87 | 
 88 | a {
 89 |   text-decoration: none;
 90 |   color: #fff;
 91 | }
 92 | 
 93 | #github-icon {
 94 |   margin-right: 10px;
 95 | }
 96 | 
 97 | .theme-button {
 98 |   all: unset;
 99 |   cursor: pointer;
100 |   text-align: center;
101 | }
102 | 
103 | 
104 | .author-text{
105 |   color: white;
106 |   margin-top: 20px;
107 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 |   <title>Calculator</title>
 8 |   <meta name="description" content="Simple Calculator With Dark Mode." />
 9 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
10 |   <link rel="icon" type="image/x-icon" href="assets/calculator.ico">
11 |   <link rel="stylesheet" href="styles/dark.css" id="theme" />
12 |   <link rel="preconnect" href="https://fonts.googleapis.com">
13 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14 |   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
15 | </head>
16 | 
17 | <body>
18 |   <div class="wrapper">
19 |     <div class="container">
20 |       <div class="header-container">
21 |         <!-- This heading also notifies about the theme change.-->
22 |         <h1 id="toast">Calculator</h1>
23 |         <div class="top-buttons">
24 |           <button type="button" onclick="changeTheme()" class="theme-button">
25 |             <img src="assets/SunIcon.svg" alt="Theme Icon" height="19" width="19" id="theme-icon">
26 |           </button>
27 |         </div>
28 |       </div>
29 |       <div class="first-row">
30 |         <input type="text" name="result" id="result" placeholder="Result" readonly />
31 |         <input type="button" value="C" onclick="result.value=''" id="clear-button" />
32 |       </div>
33 |       <div class="second-row">
34 |         <input type="button" value="1" onclick="liveScreen(1)" />
35 |         <input type="button" value="2" onclick="liveScreen(2)" />
36 |         <input type="button" value="3" onclick="liveScreen(3)" />
37 |         <input type="button" value="+" onclick="liveScreen('+')" />
38 |       </div>
39 |       <div class="third-row">
40 |         <input type="button" value="4" onclick=" liveScreen(4)" />
41 |         <input type="button" value="5" onclick=" liveScreen(5)" />
42 |         <input type="button" value="6" onclick=" liveScreen(6)" />
43 |         <input type="button" value="-" onclick="liveScreen('-')" />
44 |       </div>
45 |       <div class="fourth-row">
46 |         <input type="button" value="7" onclick="liveScreen(7)" />
47 |         <input type="button" value="8" onclick="liveScreen(8)" />
48 |         <input type="button" value="9" onclick=" liveScreen(9)" />
49 |         <input type="button" value="x" onclick="liveScreen('*')" />
50 |       </div>
51 |       <div class="fifth-row">
52 |         <input type="button" value="/" onclick="liveScreen('/')" />
53 |         <input type="button" value="0" onclick="liveScreen(0)" />
54 |         <input type="button" value="." onclick="liveScreen('.')" />
55 |         <input type="button" value="=" onclick="calculate(result.value)" />
56 |       </div>
57 |     </div>
58 |     <div class="author-text">
59 |       <p>Crafted with passion and dedication by</p>
60 |       <b>Raushan Kr.❤️</b>
61 |   </div>
62 |   </div>
63 |   <script src="scripts/script.js">
64 |   </script>
65 |   
66 | </body>
67 | 
68 | </html>
69 | 


--------------------------------------------------------------------------------
/scripts/script.js:
--------------------------------------------------------------------------------
  1 | const lightTheme = "styles/light.css";
  2 | const darkTheme = "styles/dark.css";
  3 | const sunIcon = "assets/SunIcon.svg";
  4 | const moonIcon = "assets/MoonIcon.svg";
  5 | const themeIcon = document.getElementById("theme-icon");
  6 | const res = document.getElementById("result");
  7 | const toast = document.getElementById("toast");
  8 | 
  9 | function calculate(value) {
 10 |   const calculatedValue = eval(value || null);
 11 |   if (isNaN(calculatedValue)) {
 12 |     res.value = "Can't divide 0 with 0";
 13 |     setTimeout(() => {
 14 |       res.value = "";
 15 |     }, 1300);
 16 |   } else {
 17 |     res.value = calculatedValue;
 18 |   }
 19 | }
 20 | 
 21 | // Swaps the stylesheet to achieve dark mode.
 22 | function changeTheme() {
 23 |   const theme = document.getElementById("theme");
 24 |   setTimeout(() => {
 25 |     toast.innerHTML = "Calculator";
 26 |   }, 1500);
 27 |   if (theme.getAttribute("href") === lightTheme) {
 28 |     theme.setAttribute("href", darkTheme);
 29 |     themeIcon.setAttribute("src", sunIcon);
 30 |     toast.innerHTML = "Dark Mode 🌙";
 31 |   } else {
 32 |     theme.setAttribute("href", lightTheme);
 33 |     themeIcon.setAttribute("src", moonIcon);
 34 |     toast.innerHTML = "Light Mode ☀️";
 35 |   }
 36 | }
 37 | 
 38 | // Displays entered value on screen.
 39 | function liveScreen(enteredValue) {
 40 |   if (!res.value) {
 41 |     res.value = "";
 42 |   }
 43 |   res.value += enteredValue;
 44 | }
 45 | 
 46 | //adding event handler on the document to handle keyboard inputs
 47 | document.addEventListener("keydown", keyboardInputHandler);
 48 | 
 49 | //function to handle keyboard inputs
 50 | function keyboardInputHandler(e) {
 51 |   // to fix the default behavior of browser,
 52 |   // enter and backspace were causing undesired behavior when some key was already in focus.
 53 |   e.preventDefault();
 54 |   //grabbing the liveScreen
 55 | 
 56 |   //numbers
 57 |   if (e.key === "0") {
 58 |     res.value += "0";
 59 |   } else if (e.key === "1") {
 60 |     res.value += "1";
 61 |   } else if (e.key === "2") {
 62 |     res.value += "2";
 63 |   } else if (e.key === "3") {
 64 |     res.value += "3";
 65 |   } else if (e.key === "4") {
 66 |     res.value += "4";
 67 |   } else if (e.key === "5") {
 68 |     res.value += "5";
 69 |   } else if (e.key === "6") {
 70 |     res.value += "6";
 71 |   } else if (e.key === "7") {
 72 |     res.value += "7";
 73 |   } else if (e.key === "7") {
 74 |     res.value += "7";
 75 |   } else if (e.key === "8") {
 76 |     res.value += "8";
 77 |   } else if (e.key === "9") {
 78 |     res.value += "9";
 79 |   }
 80 | 
 81 |   //operators
 82 |   if (e.key === "+") {
 83 |     res.value += "+";
 84 |   } else if (e.key === "-") {
 85 |     res.value += "-";
 86 |   } else if (e.key === "*") {
 87 |     res.value += "*";
 88 |   } else if (e.key === "/") {
 89 |     res.value += "/";
 90 |   }
 91 | 
 92 |   //decimal key
 93 |   if (e.key === ".") {
 94 |     res.value += ".";
 95 |   }
 96 | 
 97 |   //press enter to see result
 98 |   if (e.key === "Enter") {
 99 |     calculate(result.value);
100 |   }
101 | 
102 |   //backspace for removing the last input
103 |   if (e.key === "Backspace") {
104 |     const resultInput = res.value;
105 |     //remove the last element in the string
106 |     res.value = resultInput.substring(0, res.value.length - 1);
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------