leonnoel · Nimero09 · Apr 5, 2024 · Apr 5, 2024 · Apr 5, 2024 · Apr 5, 2024
diff --git a/assets/style/style.css b/assets/style/style.css
@@ -0,0 +1,50 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.calculator {
+    padding: 40px;
+    border: 1px solid rgb(112, 112, 112);
+    border-radius: 30px;
+    background: black;
+}
+
+.buttons-container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    padding: 20px 20px 0 20px;
+}
+
+button {
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    font-size: 2em;
+    font-weight: 700;
+}
+
+.placeholder {
+    width: 100%;
+    height: 70px;
+    margin-bottom: 10px;
+    text-align: right;
+    padding: 20px;
+    font-size: 2em;
+    background: white;
+}
+
+.data-delete {
+    font-size: 1.5em;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!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="assets/style/style.css">
+    <title>Document</title>
+</head>
+<body>
+    <section class="container">
+        <div class="calculator">
+            <section>
+                <div class="placeholder"></div>
+            </section>
+            <section class="buttons-container">
+                <button data-number>7</button>
+                <button data-number>8</button>
+                <button data-number>9</button>
+                <button data-operation>/</button>
+                <button data-number>4</button>
+                <button data-number>5</button>
+                <button data-number>6</button>
+                <button data-operation>x</button>
+                <button data-number>1</button>
+                <button data-number>2</button>
+                <button data-number>3</button>
+                <button data-operation>+</button>
+                <button data-number>0</button>
+                <button class="data-delete">AC</button>
+                <button class="data-equal">=</button>
+                <button data-operation>-</button>
+            </section>
+        </div>
+    </section>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,124 @@
+class Calculator {
+    constructor() {
+        this.a = 0;
+        this.b = 0;
+        this.screen = '';
+        this.operand = '';
+        this.operation = null;
+
+        this.add = function() {
+            return this.a + this.b;
+          }
+
+          this.substract = function() {
+            return this.a - this.b;
+          }
+
+          this.multiply = function() {
+            return this.a * this.b;
+          }
+
+          this.divide = function() {
+            return this.a / this.b;
+        }
+
+        this.setOperation = function(value) {
+            this.operation = value;
+            this.a = Number(this.operand);
+            this.operand = '';
+            this.b = 0;
+        }
+
+        this.calculate = function() {
+            this.b = Number(this.operand);
+            let result = 0;
+            switch (this.operation) {
+              case 'x':
+                result = this.multiply();
+                break;
+              case '+':
+                result = this.add();
+                  break; 
+              case '-':
+                result = this.substract();
+                break;
+              case '/':
+                result = this.divide()
+                break;
+            }
+            this.operand = result;
+            this.screen = result;
+            this.operation = null;
+          }
+
+        this.updateScreen = function(value) {
+            if (this.b !== 0) {
+                this.screen = value;
+                this.operand = '';
+            } 
+            else if (this.operand[0] === '0') this.screen = value;
+            else this.screen += value;
+        }
+
+        this.clear = function() {
+            this.screen = '';
+            this.a = 0;
+            this.operand = '';
+            this.operation = null;
+        }
+
+        this.addOperandNumber = function(value) {
+            if (this.operand[0] === '0') this.operand = value;
+            else this.operand += value;
+        }
+    }
+}
+
+const calculator = new Calculator();
+const screen = document.querySelector('.placeholder');
+
+const numberButtons = document.querySelectorAll('[data-number]');
+const operations = document.querySelectorAll('[data-operation]');
+const equalBtn = document.querySelector('.data-equal');
+const deleteBtn = document.querySelector('.data-delete');
+
+
+numberButtons.forEach(x => {
+    x.addEventListener('click', () => {
+        if (calculator.operand[0] === '0' && x.innerText === '0') {
+            return;
+        }
+        else {
+            calculator.updateScreen(x.innerText);
+            calculator.addOperandNumber(x.innerText);
+            screen.innerText = calculator.screen;
+        }
+
+    })
+})
+
+operations.forEach(x => {
+    x.addEventListener('click', () => {
+    if (calculator.operation) {
+        calculator.calculate();
+    } else {
+        calculator.setOperation(x.innerText);
+        calculator.updateScreen(x.innerText);
+    }
+    screen.innerText = calculator.screen;
+  })
+})
+
+equalBtn.addEventListener('click', () => {
+    if (!calculator.operation) {
+        return;
+    } else {
+        calculator.calculate();
+        screen.innerText = calculator.screen;
+    }
+})
+
+deleteBtn.addEventListener('click', () => {
+    calculator.clear();
+    screen.innerText = calculator.screen;
+})
diff --git a/main.js b/main.js
@@ -0,0 +1,97 @@
+class Calculator {
+  constructor() {
+    this.screen = '';
+    this.operand = '';
+    this.operation = null;
+    this.firstValue = false;
+    this.a = 0;
+    this.b = 0;
+
+    this.add = function() {
+      return this.a + this.b;
+    }
+
+    this.substract = function() {
+      return this.a - this.b;
+    }
+
+    this.multiply = function() {
+      return this.a * this.b;
+    }
+
+    this.divide = function() {
+      return this.a / this.b;
+    }
+
+    this.setOperation = function(value) {
+      this.operation = value;
+      this.a = this.screen;
+      this.operand = '';
+      this.firstValue = true
+    }
+
+    this.calculate = function() {
+      this.b = this.operand;
+      let result = 0;
+      switch (this.operation) {
+        case 'x':
+          result = this.multiply();
+          break;
+        case '+':
+          result = this.add();
+            break; 
+        case '-':
+          result = this.substract();
+          break;
+        case '÷':
+          result = this.divide()
+          break;
+      }
+      this.updateScreen(result);
+      this.a = result;
+    }
+
+    this.updateScreen = function(value) {
+      this.screen += value;
+      this.operand += value;
+    }
+
+    this.clear = function() {
+      this.screen = '';
+      this.firstValue = false;
+      this.operand = '';
+    }
+  }
+}
+
+const calculator = new Calculator();
+
+const screen = document.querySelector('.placeholder');
+
+const numberButtons = document.querySelectorAll('[data-number]');
+const deleteBtn = document.querySelector('[data-delete]');
+const operations = document.querySelectorAll('[data-operation');
+const equalBtn = document.querySelector('[data-equal');
+
+
+
+numberButtons.forEach(x => {
+  x.addEventListener('click', () => {
+    calculator.updateScreen(x.innerText);
+    screen.innerText = calculator.screen;
+  })
+})
+
+operations.forEach(x => {
+  x.addEventListener('click', () => {
+    calculator.setOperation(x.innerText);
+    calculator.updateScreen(x.innerText);
+    screen.innerText = calculator.screen;
+  })
+})
+
+deleteBtn.addEventListener('click', () => {
+  calculator.clear();
+  screen.innerText = calculator.screen;
+})
+