Answered Jul 18, 2023 · 0 votes
currentInput = eval(fullExpression)screen.textContent = currentInput-
"use strict";-// ===============NUMBERSconst screen = document.querySelector(".screen");const zero = document.querySelector(".zero");const one = document.querySelector(".one");const two = document.querySelector(".two");const three = document.querySelector(".three");const four = document.querySelector(".four");const five = document.querySelector(".five");const six = document.querySelector(".six");const seven = document.querySelector(".seven");const eight = document.querySelector(".eight");const nine = document.querySelector(".nine");const buttons = document.querySelectorAll(".buttons");-// ==============OPERATORSconst dot = document.querySelector(".dot");const equal = document.querySelector(".equal");const plus = document.querySelector(".plus");const minus = document.querySelector(".minus");const multiplication = document.querySelector(".multiplication");const division = document.querySelector(".division");const clear = document.querySelector(".clear");const openParenthesis = document.querySelector(".open-parenthesis");const closeParenthesis = document.querySelector(".close-parenthesis");-// ACTUAL COMPUTING CALCULATORlet currentInput = "";let fullExpression = "";let result = "";-three.addEventListener("click", function() { currentInput += "3"; screen.textContent = currentInput; console.log(currentInput);});one.addEventListener("click", function() { currentInput += "1"; screen.textContent = currentInput;});two.addEventListener("click", function() { currentInput += "2"; screen.textContent = currentInput;});plus.addEventListener("click", function() { fullExpression = fullExpression + currentInput + " +"; currentInput = " "; console.log( `Current input: ${currentInput}`, `Full expression: ${fullExpression}` ); /* screen.textContent = fullExpression; */});equal.addEventListener("click", function() { console.log('eq') fullExpression = fullExpression + currentInput; console.log(fullExpression); currentInput = eval(fullExpression) screen.textContent = currentInput /* screen.textContent = fullExpression; */});clear.addEventListener("click", function() { currentInput = ""; fullExpression = ""; screen.textContent = "";});-// Button click/* buttons.forEach(function (button) { button.addEventListener("click", function () { const buttonClicked = true; console.log(buttonClicked); });}); *//* two.addEventListener("click", function () { screen.textContent += "2";});three.addEventListener("click", function () { screen.textContent += "3";});four.addEventListener("click", function () { screen.textContent += "4";});five.addEventListener("click", function () { screen.textContent += "5";});six.addEventListener("click", function () { screen.textContent += "6";});seven.addEventListener("click", function () { screen.textContent += "7";});eight.addEventListener("click", function () { screen.textContent += "8";});nine.addEventListener("click", function () { screen.textContent += "9";}); */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap");-/*========================================= =================RESETS=================== =========================================== */-*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0;}-body { min-height: 100vh; background-color: black; font-family: "Nunito Sans", sans-serif; display: flex; justify-content: center; align-items: center; color: white;}-.container { width: 400px; /* background-color: red; */ display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 150px; grid-auto-rows: 80px; gap: 5px; padding: 1em;}-.buttons { display: flex; justify-content: center; align-items: center; font-size: 2rem;}-.buttons:hover { transform: scale(0.95);}-.orange { background-color: orange;}-.soft { background-color: rgb(143, 143, 143);}-.dark { background: rgb(66, 66, 66);}--/* ========BUTTONS====== */-.screen { grid-column: 1 / 5; display: flex; justify-content: end; align-items: end; padding: 1em 2em; font-size: 2rem;}--/* FIRST ROW */-.open-parenthesis { grid-column: 2 / 3; grid-row: 2 / 3;}-.close-parenthesis { grid-column: 3 / 4; grid-row: 2 / 3;}-.clear { grid-row: 2 / 3; grid-column: 1 / 2;}-.division { grid-row: 2 / 3; grid-column: 4 / 5;}--/* SECOND ROW */-.multiplication { grid-row: 3 / 4; grid-column: 4 / 5;}--/* THIRD ROW */-.minus { grid-row: 4 / 5; grid-column: 4 / 5;}--/* FOURTH ROW */-.plus { grid-row: 5 / 6; grid-column: 4 / 5;}-.dot { grid-row: 6 / 7; grid-column: 3 / 4;}--/* FIFTH ROW */-.zero { grid-column: 1 / 3;}-.equal { grid-column: 4 / 5; grid-row: 6 / 7;}
<!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="styles.css" /> <title>Calculator</title></head>-<body> <div class="container"> <div class="screen dark"></div> <div class="buttons one dark">1</div> <div class="buttons two dark">2</div> <div class="buttons three dark">3</div> <div class="buttons four dark">4</div> <div class="buttons five dark">5</div> <div class="buttons six dark">6</div> <div class="buttons plus orange">+</div> <div class="buttons minus orange">-</div> <div class="buttons multiplication orange">x</div> <div class="buttons division orange">÷</div> <div class="buttons equal orange">=</div> <div class="buttons dot dark">.</div> <div class="buttons clear soft">C</div> <div class="buttons seven dark">7</div> <div class="buttons eight dark">8</div> <div class="buttons nine dark">9</div> <div class="buttons zero dark">0</div> <div class="buttons open-parenthesis soft">(</div> <div class="buttons close-parenthesis soft">)</div> </div> <script src="script.js"></script></body>-</html>
