├── .gitignore
├── LICENSE
├── README.md
├── app.js
├── index.html
└── styles.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Ignore node_modules
 2 | node_modules/
 3 | 
 4 | # Ignore log files
 5 | npm-debug.log
 6 | yarn-error.log
 7 | 
 8 | # Ignore environment variable files
 9 | .env
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SimpleCalculator
 2 | 
 3 | SimpleCalculator is a simple JavaScript-based calculator web application. Users can perform basic arithmetic operations such as addition, subtraction, multiplication, and division.
 4 | 
 5 | ## Features
 6 | 
 7 | - Perform addition, subtraction, multiplication, and division.
 8 | - Clear input.
 9 | 
10 | ## Installation
11 | 
12 | 1. Clone the repository:
13 |     ```bash
14 |     git clone https://github.com/YOUR_USERNAME/SimpleCalculator.git
15 |     cd SimpleCalculator
16 |     ```
17 | 
18 | 2. Open `index.html` in your web browser.
19 | 
20 | ## License
21 | 
22 | This project is licensed under the MIT License.
23 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | class Calculator {
  2 |     constructor() {
  3 |         this.displayValue = '0';
  4 |         this.firstOperand = null;
  5 |         this.waitingForSecondOperand = false;
  6 |         this.operator = null;
  7 |     }
  8 | 
  9 |     inputDigit(digit) {
 10 |         if (this.waitingForSecondOperand === true) {
 11 |             this.displayValue = digit;
 12 |             this.waitingForSecondOperand = false;
 13 |         } else {
 14 |             this.displayValue = this.displayValue === '0' ? digit : this.displayValue + digit;
 15 |         }
 16 |     }
 17 | 
 18 |     inputDecimal(dot) {
 19 |         if (this.waitingForSecondOperand === true) {
 20 |             this.displayValue = "0.";
 21 |             this.waitingForSecondOperand = false;
 22 |             return;
 23 |         }
 24 | 
 25 |         if (!this.displayValue.includes(dot)) {
 26 |             this.displayValue += dot;
 27 |         }
 28 |     }
 29 | 
 30 |     handleOperator(nextOperator) {
 31 |         const inputValue = parseFloat(this.displayValue);
 32 | 
 33 |         if (this.operator && this.waitingForSecondOperand)  {
 34 |             this.operator = nextOperator;
 35 |             return;
 36 |         }
 37 | 
 38 |         if (this.firstOperand == null && !isNaN(inputValue)) {
 39 |             this.firstOperand = inputValue;
 40 |         } else if (this.operator) {
 41 |             const result = this.calculate(this.firstOperand, inputValue, this.operator);
 42 |             this.displayValue = `${parseFloat(result.toFixed(7))}`;
 43 |             this.firstOperand = result;
 44 |         }
 45 | 
 46 |         this.waitingForSecondOperand = true;
 47 |         this.operator = nextOperator;
 48 |     }
 49 | 
 50 |     calculate(firstOperand, secondOperand, operator) {
 51 |         if (operator === '+') {
 52 |             return firstOperand + secondOperand;
 53 |         } else if (operator === '-') {
 54 |             return firstOperand - secondOperand;
 55 |         } else if (operator === '*') {
 56 |             return firstOperand * secondOperand;
 57 |         } else if (operator === '/') {
 58 |             return firstOperand / secondOperand;
 59 |         }
 60 | 
 61 |         return secondOperand;
 62 |     }
 63 | 
 64 |     resetCalculator() {
 65 |         this.displayValue = '0';
 66 |         this.firstOperand = null;
 67 |         this.waitingForSecondOperand = false;
 68 |         this.operator = null;
 69 |     }
 70 | }
 71 | 
 72 | const calculator = new Calculator();
 73 | 
 74 | function updateDisplay() {
 75 |     const display = document.querySelector('.calculator-screen');
 76 |     display.value = calculator.displayValue;
 77 | }
 78 | 
 79 | updateDisplay();
 80 | 
 81 | const keys = document.querySelector('.calculator-keys');
 82 | keys.addEventListener('click', (event) => {
 83 |     const { target } = event;
 84 |     if (!target.matches('button')) {
 85 |         return;
 86 |     }
 87 | 
 88 |     if (target.classList.contains('operator')) {
 89 |         calculator.handleOperator(target.value);
 90 |         updateDisplay();
 91 |         return;
 92 |     }
 93 | 
 94 |     if (target.classList.contains('decimal')) {
 95 |         calculator.inputDecimal(target.value);
 96 |         updateDisplay();
 97 |         return;
 98 |     }
 99 | 
100 |     if (target.classList.contains('all-clear')) {
101 |         calculator.resetCalculator();
102 |         updateDisplay();
103 |         return;
104 |     }
105 | 
106 |     calculator.inputDigit(target.value);
107 |     updateDisplay();
108 | });
109 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Simple Calculator</title>
 7 |     <link rel="stylesheet" href="styles.css">
 8 | </head>
 9 | <body>
10 |     <div class="calculator">
11 |         <input type="text" class="calculator-screen" id="calculator-screen" disabled />
12 |         <div class="calculator-keys">
13 |             <button type="button" class="operator" value="+">+</button>
14 |             <button type="button" class="operator" value="-">-</button>
15 |             <button type="button" class="operator" value="*">&times;</button>
16 |             <button type="button" class="operator" value="/">&divide;</button>
17 | 
18 |             <button type="button" value="7">7</button>
19 |             <button type="button" value="8">8</button>
20 |             <button type="button" value="9">9</button>
21 | 
22 |             <button type="button" value="4">4</button>
23 |             <button type="button" value="5">5</button>
24 |             <button type="button" value="6">6</button>
25 | 
26 |             <button type="button" value="1">1</button>
27 |             <button type="button" value="2">2</button>
28 |             <button type="button" value="3">3</button>
29 | 
30 |             <button type="button" value="0">0</button>
31 |             <button type="button" class="decimal" value=".">.</button>
32 |             <button type="button" class="all-clear" value="all-clear">AC</button>
33 | 
34 |             <button type="button" class="equal-sign operator" value="=">=</button>
35 |         </div>
36 |     </div>
37 |     <script src="app.js"></script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: 'Roboto', sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     background: #f4f4f4;
 8 |     margin: 0;
 9 | }
10 | 
11 | .calculator {
12 |     border-radius: 5px;
13 |     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
14 | }
15 | 
16 | .calculator-screen {
17 |     width: 100%;
18 |     height: 80px;
19 |     background: #fff;
20 |     border: none;
21 |     text-align: right;
22 |     padding: 20px;
23 |     font-size: 2.4rem;
24 |     border-top-left-radius: 5px;
25 |     border-top-right-radius: 5px;
26 | }
27 | 
28 | .calculator-keys {
29 |     display: grid;
30 |     grid-template-columns: repeat(4, 1fr);
31 |     gap: 1px;
32 |     background: #fff;
33 |     border-bottom-left-radius: 5px;
34 |     border-bottom-right-radius: 5px;
35 | }
36 | 
37 | button {
38 |     height: 80px;
39 |     border: none;
40 |     outline: none;
41 |     font-size: 1.6rem;
42 |     background: #f9f9f9;
43 |     transition: background 0.3s ease;
44 | }
45 | 
46 | button:hover {
47 |     background: #eaeaea;
48 | }
49 | 
50 | .operator {
51 |     background: #ff9500;
52 |     color: #fff;
53 | }
54 | 
55 | .operator:hover {
56 |     background: #e08900;
57 | }
58 | 
59 | .equal-sign {
60 |     background: #ff9500;
61 |     color: #fff;
62 |     border-bottom-right-radius: 5px;
63 | }
64 | 
65 | .equal-sign:hover {
66 |     background: #e08900;
67 | }
68 | 
69 | .all-clear {
70 |     background: #ff3b30;
71 |     color: #fff;
72 |     border-bottom-left-radius: 5px;
73 | }
74 | 
75 | .all-clear:hover {
76 |     background: #e22c22;
77 | }
78 | 


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