only commit

lape15 · Jul 26, 2020 · d2abf4a · d2abf4a
commit d2abf4a
Show file tree

Hide file tree

Showing 5 changed files with 318 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Calculator</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div class="wrapper">
+      <section class="screen">
+        <div class="previous" data-operand-previous></div>
+        <div class="current" data-operand-current></div>
+      </section>
+
+      <section class="calc-btn_row">
+        <div class="calc_btn_row">
+          <button class="calc_btn double" data-all-clear>C</button>
+          <button class="calc_btn" data-delete>←</button>
+          <button class="calc_btn" data-operation>÷</button>
+        </div>
+        <div class="calc_btn_row">
+          <button class="calc_btn" data-number>7</button>
+          <button class="calc_btn" data-number>8</button>
+          <button class="calc_btn" data-number>9</button>
+          <button class="calc_btn" data-operation>×</button>
+        </div>
+        <div class="calc_btn_row">
+          <button class="calc_btn" data-number>4</button>
+          <button class="calc_btn" data-number>5</button>
+          <button class="calc_btn" data-number>6</button>
+          <button class="calc_btn" data-operation>-</button>
+        </div>
+        <div class="calc_btn_row">
+          <button class="calc_btn" data-number>1</button>
+          <button class="calc_btn" data-number>2</button>
+          <button class="calc_btn" data-number>3</button>
+
+          <button class="calc_btn" data-operation>+</button>
+        </div>
+        <div class="calc_btn_row">
+          <button class="calc_btn" data-number>.</button>
+          <button class="calc_btn double" data-number>0</button>
+          <button class="calc_btn" data-equals>=</button>
+        </div>
+      </section>
+    </div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,122 @@
+class Calculator {
+  constructor(currentScreenTextElement, previousScreenTextElement) {
+    this.currentScreenTextElement = currentScreenTextElement;
+    this.previousScreenTextElement = previousScreenTextElement;
+    this.clear();
+  }
+
+  clear() {
+    this.currentOperand = "";
+    this.previousOperand = "";
+    this.operation = undefined;
+  }
+
+  delete() {
+    this.currentOperand = this.currentOperand.toString().slice(0, -1);
+  }
+
+  appendNumber(number) {
+    if (number === "." && this.currentOperand.includes(".")) return;
+    this.currentOperand = this.currentOperand.toString() + number.toString();
+  }
+
+  flushOperator(operation) {
+    if (this.currentOperand === "") return;
+    if (this.previousOperand !== "") {
+      this.compute();
+    }
+    this.operation = operation;
+    this.previousOperand = this.currentOperand;
+    this.currentOperand = "";
+  }
+
+  compute() {
+    let computation;
+    const previous = parseFloat(this.previousOperand);
+    const current = parseFloat(this.currentOperand);
+
+    if (isNaN(previous) || isNaN(current)) return;
+    switch (this.operation) {
+      case "+":
+        computation = previous + current;
+        break;
+
+      case "-":
+        computation = previous - current;
+        break;
+
+      case "×":
+        computation = previous * current;
+        break;
+
+      case "÷":
+        computation = previous / current;
+        break;
+
+      default:
+        return;
+    }
+    this.currentOperand = computation;
+    this.previousOperand = "";
+    this.operation = undefined;
+  }
+
+  updateDisplay() {
+    this.currentScreenTextElement.innerText = this.currentOperand;
+    if (this.operation != null) {
+      this.previousScreenTextElement.innerText = `${this.previousOperand} ${this.operation}`;
+    }
+  }
+}
+
+const numberButtons = document.querySelectorAll("[data-number]");
+
+const operationButtons = document.querySelectorAll("[data-operation]");
+
+const equalsButton = document.querySelector("[data-equals]");
+
+const deleteButton = document.querySelector("[data-delete]");
+
+const allClearButton = document.querySelector("[data-all-clear]");
+
+const currentScreenTextElement = document.querySelector(
+  "[data-operand-current]"
+);
+
+const previousScreenTextElement = document.querySelector(
+  "[data-operand-previous]"
+);
+
+const calculator = new Calculator(
+  currentScreenTextElement,
+  previousScreenTextElement
+);
+
+numberButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    calculator.appendNumber(button.innerText);
+    calculator.updateDisplay();
+  });
+});
+
+operationButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    calculator.flushOperator(button.innerText);
+    calculator.updateDisplay();
+  });
+});
+
+equalsButton.addEventListener("click", () => {
+  calculator.compute();
+  calculator.updateDisplay();
+});
+
+allClearButton.addEventListener("click", () => {
+  calculator.clear();
+  calculator.updateDisplay();
+});
+
+deleteButton.addEventListener("click", () => {
+  calculator.delete();
+  calculator.updateDisplay();
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,140 @@
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+body {
+  background-color: #ebb5d3;
+}
+
+header {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  width: 80%;
+  margin: 0 auto;
+  /* border: 3px solid blue; */
+}
+
+div.right {
+  padding: 10px;
+}
+
+.left h2 {
+  font-weight: bold;
+  font-size: 2.5rem;
+  font-family: "Ma Shan Zheng", cursive;
+  color: #000000;
+  margin: 25px 16px;
+}
+
+.left h2:hover {
+  color: white;
+}
+
+nav ul {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  /* text-align: center; */
+}
+nav li {
+  display: inline-block;
+  padding: 1.5rem;
+}
+nav a {
+  text-decoration: none;
+  color: #73352e;
+  display: inline;
+  padding: 0.5rem 1rem;
+}
+nav a:hover {
+  background-color: black;
+  color: #ffffff;
+}
+
+.wrapper {
+  max-width: 400px;
+  margin: 0 auto;
+  /* border: 5px solid red; */
+  background-color: #000000;
+}
+
+.screen {
+  display: flex;
+  flex-flow: column nowrap;
+  background-color: #000000;
+  min-height: 80px;
+  padding: 10px;
+  font-size: 2.5rem;
+  font-weight: bold;
+  font-family: "Roboto", sans-serif;
+  text-align: right;
+}
+
+.screen .previous {
+  font-size: 1.5rem;
+  color: rgba(255, 255, 255, 0.75);
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.screen .current {
+  font-size: 2.5rem;
+  color: #ffffff;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.calc_btn_row {
+  display: flex;
+  align-content: stretch;
+  justify-content: space-between;
+  margin-bottom: 0.5%;
+}
+
+.calc_btn {
+  background-color: #d8d8d8;
+  color: black;
+  font-family: "Roboto", sans-serif;
+  font-weight: bold;
+  font-size: 2.5rem;
+  /* padding: 20px; */
+  border: none;
+  height: 100px;
+  flex-basis: 24.5%;
+  cursor: pointer;
+  /* border-radius: 0; */
+}
+
+.calc_btn:hover {
+  background-color: #ebebeb;
+}
+.calc_btn:active {
+  background-color: #bbbcbe;
+}
+.calc_btn:last-child {
+  background-color: #df974c;
+  color: #ffffff;
+}
+.calc_btn:last-child:hover {
+  background-color: #dfb07e;
+}
+
+.double {
+  flex-basis: 49.7%;
+}
+.tripple {
+  flex-basis: 74.8%;
+}
+@media only screen and (max-width: 300px) {
+  .wrapper {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}