Chu29 · Chu29 · Sep 25, 2025 · Sep 25, 2025 · Sep 25, 2025 · Sep 25, 2025
diff --git a/index.html b/index.html
@@ -7,6 +7,121 @@
     <title>iPhone Calculator</title>
   </head>
   <body>
+    <main id="calc-ctn">
+      <section id="calc-screen">
+        <div class="output"></div>
+        <div class="input"></div>
+      </section>
+      <footer id="footer">
+        <section class="calc-btns">
+          <div class="group-btn">
+            <button class="clear btn btn-grey">AC</button>
+            <button class="btn btn-grey negate">+/-</button>
+            <button class="btn btn-grey operator">%</button>
+            <button class="btn btn-orange operator">÷</button>
+          </div>
+          <div class="group-btn">
+            <button class="btn btn-dark-grey operand">7</button>
+            <button class="btn btn-dark-grey operand">8</button>
+            <button class="btn btn-dark-grey operand">9</button>
+            <button class="btn btn-orange operator">*</button>
+          </div>
+          <div class="group-btn">
+            <button class="btn btn-dark-grey operand">4</button>
+            <button class="btn btn-dark-grey operand">5</button>
+            <button class="btn btn-dark-grey operand">6</button>
+            <button class="btn btn-orange operator">-</button>
+          </div>
+          <div class="group-btn">
+            <button class="btn btn-dark-grey operand">1</button>
+            <button class="btn btn-dark-grey operand">2</button>
+            <button class="btn btn-dark-grey operand">3</button>
+            <button class="btn btn-orange operator">+</button>
+          </div>
+          <div class="group-btn">
+            <button class="btn btn-dark-grey scientific">
+              <svg
+                height="20"
+                width="20"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g fill="none">
+                  <rect
+                    height="18.5"
+                    width="14.5"
+                    rx="3"
+                    stroke="currentColor"
+                    strokelinecap="round"
+                    strokelinejoin="round"
+                    strokewidth="1.5"
+                    x="4.75"
+                    y="2.75"
+                  />
+                  <rect
+                    height="3.75"
+                    width="7.5"
+                    rx="1"
+                    stroke="currentColor"
+                    strokelinecap="round"
+                    strokelinejoin="round"
+                    strokewidth="1.5"
+                    x="8.25"
+                    y="6.25"
+                  />
+                  <circle cx="8.5" cy="13.5" fill="currentColor" r="1" />
+                  <circle cx="12" cy="13.5" fill="currentColor" r="1" />
+                  <circle cx="15.5" cy="13.5" fill="currentColor" r="1" />
+                  <circle cx="8.5" cy="17.5" fill="currentColor" r="1" />
+                  <circle cx="12" cy="17.5" fill="currentColor" r="1" />
+                  <circle cx="15.5" cy="17.5" fill="currentColor" r="1" />
+                </g>
+              </svg>
+            </button>
+            <button class="btn btn-dark-grey operand">0</button>
+            <button class="btn btn-dark-grey operand decimal">.</button>
+            <button class="btn btn-orange equal">=</button>
+          </div>
+        </section>
+        <section class="calc-advance hidden">
+          <div class="group-btn">
+            <button class="btn btn-grey">√</button>
+            <button class="btn btn-grey">π</button>
+            <button class="btn btn-grey">^</button>
+            <button class="btn btn-grey">!</button>
+          </div>
+          <div class="group-btn">
+            <button class="btn btn-grey">Deg</button>
+            <button class="btn btn-grey">sin</button>
+            <button class="btn btn-grey">cos</button>
+            <button class="btn btn-grey">tan</button>
+          </div>
+          <div class="group-btn">
+            <button class="btn btn-grey">Inv</button>
+            <button class="btn btn-grey">e</button>
+            <button class="btn btn-grey">ln</button>
+            <button class="btn btn-grey">log</button>
+          </div>
+          <div class="group-btn">
+            <button class="btn btn-grey">(</button>
+            <button class="btn btn-grey">)</button>
+            <button class="btn btn-orange backspace">
+              <svg
+                height="50"
+                width="50"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.385 18q-.539 0-1.015-.244q-.476-.244-.79-.683L4 12l3.58-5.035q.314-.438.78-.702Q8.828 6 9.386 6h9q.67 0 1.143.472q.472.472.472 1.143v8.77q0 .67-.472 1.143q-.472.472-1.143.472h-9ZM19 17V7v10Zm-9.615 0h9q.23 0 .423-.192q.192-.193.192-.423v-8.77q0-.23-.192-.423Q18.615 7 18.385 7h-9q-.289 0-.548.144q-.26.144-.414.356L5.22 12l3.204 4.5q.154.212.414.356t.548.144Zm1.669-1.692l2.6-2.6l2.6 2.6l.708-.708l-2.6-2.6l2.6-2.6l-.708-.708l-2.6 2.6l-2.6-2.6l-.708.708l2.6 2.6l-2.6 2.6l.708.708Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>
+          </div>
+        </section>
+      </footer>
+    </main>
     <script src="scripts/app.js"></script>
   </body>
 </html>
diff --git a/scripts/app.js b/scripts/app.js
@@ -1 +1,147 @@
 'use strict'
+
+const advanceBtn = document.querySelector('.scientific')
+const clearBtn = document.querySelector('.clear')
+const calcAdvance = document.querySelector('.calc-advance')
+
+// select input and output screens
+const inputScreen = document.querySelector('.input')
+const outputScreen = document.querySelector('.output')
+
+// select the buttons
+const negateBtn = document.querySelector('.negate')
+const decimalBtn = document.querySelector('.decimal')
+const operandBtn = document.querySelectorAll('.operand')
+const operatorBtn = document.querySelectorAll('.operator')
+const equalsBtn = document.querySelector('.equal')
+
+let currentOperation = ''
+let currentInput = ''
+let previousInput = ''
+
+// toggle the sign of current input
+const toggleSign = () => {
+  if (currentInput === '') return
+
+  let num = parseFloat(currentInput)
+  num *= -1
+  currentInput = num.toString()
+
+  // update input screen
+  inputScreen.textContent = `${previousInput} ${currentOperation} ${currentInput}`
+}
+
+if (negateBtn) {
+  negateBtn.addEventListener('click', toggleSign)
+}
+
+// append numbers and decimal point to the screen
+const appendNumber = (number) => {
+  // check if point exist
+  if (number === '.' && currentInput.includes('.')) {
+    return
+  }
+  if (number === '.' && currentInput === '') {
+    currentInput = '0.'
+  } else {
+    currentInput += number
+  }
+  inputScreen.textContent = ` ${previousInput} ${currentOperation} ${currentInput}`
+}
+
+// event listener for decimal button
+if (decimalBtn) {
+  decimalBtn.addEventListener('click', () => {
+    appendNumber(decimalBtn.textContent)
+  })
+}
+
+// calculate
+const calculate = () => {
+  if (previousInput === '' || currentInput === '') return
+  let result
+  const prev = parseFloat(previousInput)
+  const current = parseFloat(currentInput)
+
+  switch (currentOperation) {
+    case '+':
+      result = (prev + current).toFixed(2)
+      break
+    case '-':
+      result = (prev - current).toFixed(2)
+      break
+    case '*':
+      result = (prev * current).toFixed(2)
+      break
+    case '÷':
+      result = (prev / current).toFixed(2)
+      break
+    case '%':
+      result = (prev * (current / 100)).toFixed(2)
+      break
+    default:
+      break
+  }
+  outputScreen.textContent = result.toString()
+  currentOperation = ''
+  previousInput = ''
+  currentInput = result.toString()
+}
+
+// append operator
+const appendOperation = (operation) => {
+  if (currentInput === '') return
+
+  // check if operator is %
+  if (operation === '%') {
+    const result = parseFloat(currentInput) / 100
+    currentInput = result.toString()
+    inputScreen.textContent = `${previousInput} ${currentOperation} ${currentInput}`
+    calculate()
+    return
+  }
+
+  // condition for all other operators
+  if (previousInput !== '') {
+    calculate()
+  }
+  currentOperation = operation
+  previousInput = currentInput
+  currentInput = ''
+  inputScreen.textContent = `${previousInput} ${currentOperation}`
+}
+
+// listen to click events on all numbers
+for (const operand of operandBtn) {
+  operand.addEventListener('click', () => {
+    appendNumber(operand.textContent)
+  })
+}
+
+// listen to click events on all operators
+for (const operator of operatorBtn) {
+  operator.addEventListener('click', () => {
+    appendOperation(operator.textContent)
+  })
+}
+
+// listen to click event on equal to operator
+equalsBtn.addEventListener('click', () => {
+  calculate()
+})
+
+// toggle scientific calculator
+advanceBtn.addEventListener('click', () => {
+  alert('Feature coming soon!')
+  // calcAdvance.classList.toggle('hidden')
+  calcAdvance.style.paddingLeft = '0px'
+})
+
+// clear the screen
+clearBtn.addEventListener('click', () => {
+  currentOperation = ''
+  currentInput = ''
+  previousInput = ''
+  inputScreen.textContent = ''
+  outputScreen.textContent = ''
+})
diff --git a/styles/index.css b/styles/index.css
@@ -3,3 +3,107 @@
   padding: 0;
   box-sizing: border-box;
 }
+
+body {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  background-color: #333;
+  padding: 20px;
+}
+
+#calc-ctn {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: auto;
+  background-color: #000;
+  border: 3px solid #fff;
+  border-radius: 1rem;
+}
+
+#calc-screen {
+  padding: 1rem;
+}
+
+#calc-screen .input,
+#calc-screen .output {
+  text-align: right;
+  font-size: 4rem;
+  border: none;
+  width: 100%;
+  padding: 0 1rem 2rem;
+  border-radius: 0.2rem 0.2rem 0 0;
+  background-color: #000;
+  color: #fff;
+}
+
+#calc-screen .output {
+  border-radius: 0 0 0.2rem 0.2rem;
+}
+
+.calc-btns,
+.calc-advance {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem;
+}
+
+.calc-advance {
+  padding-left: 0;
+}
+
+#footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.group-btn {
+  display: flex;
+  gap: 0.8rem;
+}
+
+.btn {
+  font-size: 2rem;
+  text-align: center;
+  border: none;
+  border-radius: 50%;
+  width: 4rem;
+  height: 4rem;
+  color: #fff;
+}
+
+.btn:hover {
+  transform: translate(0, -2px);
+  transition: 0.5s;
+}
+
+.btn:active {
+  transform: translate(0, 2px);
+}
+
+.btn-grey {
+  background-color: #808080;
+}
+
+.btn-orange {
+  background-color: #ffa500;
+}
+
+.btn-dark-grey {
+  background-color: #303030;
+}
+
+.backspace {
+  flex-grow: 1;
+  border-radius: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hidden {
+  display: none;
+}