Create a web calculator with JavaScript. Only four operations (Add, Sub, Multiplication, and Division) Use a...

Create a web calculator with JavaScript.

Only four operations (Add, Sub, Multiplication, and Division)
Use a CE button to cancel the operation.

Use the following website or any online resource as a reference. Don’t use their CSS or any other code.

https://freshman.tech/calculator/

I am trying to learn please make comments then I will understand better.

Solutions

Expert Solution

Here's the code :

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JavaScript Calculator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <main class="calculator">

    <div class="top">

      <span class="unit">deg</span>
      <section class="screen">
        <div class="input"></div>
        <div class="result"></div>
      </section>

    </div>

    <div class="bottom">

      <section class="keys">

        <div class="column">
          <span data-key="7">7</span>
          <span data-key="4">4</span>
          <span data-key="1">1</span>
          <span data-key=".">.</span>
        </div>

        <div class="column">
          <span data-key="8">8</span>
          <span data-key="5">5</span>
          <span data-key="2">2</span>
          <span data-key="0">0</span>
        </div>

        <div class="column">
          <span data-key="9">9</span>
          <span data-key="6">6</span>
          <span data-key="3">3</span>
          <span class="equals-to" data-key="=">=</span>
        </div>
      </section>

      <section class="operators">
        <span class="delete">del</span>
        <span data-key="÷">÷</span>
        <span data-key="x">x</span>
        <span data-key="-">-</span>
        <span data-key="+">+</span>
      </section>

    </div>

  </main>

  <span class="credit">View on <a href="https://github.com/ayoisaiah/javascript-calculator">Github</a></span>

  <script src="main.js"></script>
</body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Roboto", "Noto Sans", "Helvetica", sans-serif;
  font-size: 14px;
  background-color: #3498DB;
  height: 100%;
}

.calculator {
  width: 350px;
  height: auto;
  margin: 70px auto 0;
  overflow: hidden;
  box-shadow: 4px 4px rgba(0, 0, 0, 0.2);
}

.calculator span {
  -moz-user-select: none;
  user-select: none;
}

.top {
  position: relative;
  height: 150px;
  background-color: white;
}

.top .unit {
  text-transform: uppercase;
  position: absolute;
  top: 10px;
  left: 10px;
  font-weight: 700;
  color: #757575;
}

.top .screen {
  position: relative;
  width: 100%;
  top: 20%;
  height: 80%;
}

.screen > div  {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 5px;
  text-align: right;
}

.screen .input {
  color: #757575;
  height: 60%;
  font-size: 35px;
}

.screen .result {
  color: #9e9e9e;
  font-size: 20px;
  height: 40%;
}

.bottom {
  background-color: #2D2D2D;
  height: 300px;
  color: #fff;
  cursor: pointer;
}

.bottom section {
  position: relative;
  height: 100%;
  float: left;
  display: flex;
}

.keys {
  width: 80%;
}


.keys .column {
  display: flex;
  flex-grow: 1;
}

.keys .column, .operators {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.keys .column span, .operators span {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  width: 100%;
  line-height: 1;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.5s;
}

.keys .column span {
  font-size: 25px;
}

.keys .column span:hover, .operators span:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.operators {
  width: 20%;
  font-size: 18px;
  background-color: #434343;
}

.delete {
  font-size: 16px;
  text-transform: uppercase;
}

.credit {
  display: block;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 20px;
  margin: 0 auto;
}

.credit a, .error {
  color: #C2185B;
}

Javascript:

"use strict";

const input = document.querySelector(".input");
const result = document.querySelector(".result");
const deleteBtn = document.querySelector(".delete");
const keys = document.querySelectorAll(".bottom span");

let operation = "";
let answer;
let decimalAdded = false;

const operators = ["+", "-", "x", "÷"];

function handleKeyPress (e) {
  const key = e.target.dataset.key;
  const lastChar = operation[operation.length - 1];

  if (key === "=") {
    return;
  }

  if (key === "." && decimalAdded) {
    return;
  }

  if (operators.indexOf(key) !== -1) {
    decimalAdded = false;
  }

  if (operation.length === 0 && key === "-") {
    operation += key;
    input.innerHTML = operation;
    return;
  }

  if (operation.length === 0 && operators.indexOf(key) !== -1) {
    input.innerHTML = operation;
    return;
  }

  if (operators.indexOf(lastChar) !== -1 && operators.indexOf(key) !== -1) {
    operation = operation.replace(/.$/, key);
    input.innerHTML = operation;
    return;
  }

  if (key) {
    if (key === ".") decimalAdded = true;
    operation += key;
    input.innerHTML = operation;
    return;
  }

}

function evaluate(e) {
  const key = e.target.dataset.key;
  const lastChar = operation[operation.length - 1];

  if (key === "=" && operators.indexOf(lastChar) !== -1) {
    operation = operation.slice(0, -1);
  }

  if (operation.length === 0) {
    answer = "";
    result.innerHTML = answer;
    return;
  }

  try {

    if (operation[0] === "0" && operation[1] !== "." && operation.length > 1) {
      operation = operation.slice(1);
    }

    const final = operation.replace(/x/g, "*").replace(/÷/g, "/");
    answer = +(eval(final)).toFixed(5);

    if (key === "=") {
      decimalAdded = false;
      operation = `${answer}`;
      answer = "";
      input.innerHTML = operation;
      result.innerHTML = answer;
      return;
    }

    result.innerHTML = answer;

  } catch (e) {
    if (key === "=") {
      decimalAdded = false;
      input.innerHTML = `<span class="error">${operation}</span>`;
      result.innerHTML = `<span class="error">Bad Expression</span>`;
    }
    console.log(e);
  }

}

function clearInput (e) {

  if (e.ctrlKey) {
    operation = "";
    answer = "";
    input.innerHTML = operation;
    result.innerHTML = answer;
    return;
  }

  operation = operation.slice(0, -1);
  input.innerHTML = operation;

}

deleteBtn.addEventListener("click", clearInput);
keys.forEach(key => {
  key.addEventListener("click", handleKeyPress);
  key.addEventListener("click", evaluate);
});

Like, if this helped :)

venereology answered 1 year ago

Next > < Previous

Related Solutions

please create a calculator using p5.js web editor. Please make sure it works with only js....

please create a calculator using p5.js web editor. Please make sure it works with only js. No added html or css; p5.js only

please create a calculator using p5.js web editor. Please make sure it works with only js....

please create a calculator using p5.js web editor. Please make sure it works with only js. No added html or css; p5.js only. PLEASE MAKE SURE IT WORKS

Please take the code below and add some javascript to it. Please use javascript inline. Please...

Please take the code below and add some javascript to it. Please use javascript inline. Please be sure to specify within the webpage with something like 'Click here' too show what was done and how to activate it. Please post in a format that can be directly copied. Thank you in advance HINT: add some fun widgets to the page index-css.html: <!DOCTYPE html> <html lang="en"> <head>  <title>Index-CSS Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">...

Calculator in JavaScript. No use of switch statements or CSS. Project Standards: Students will use click...

Calculator in JavaScript. No use of switch statements or CSS. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building a simple calculator in the browser. It should be able to add, subtract, divide, and multiply. Your program should do the following: Display a standard calculator to...

JavaScript. Create a Web page with the following features: Three lines of text about anything. A...

JavaScript. Create a Web page with the following features: Three lines of text about anything. A link to OCC (http://www.orangecoastcollege.edu) that opens in a new browser window. An image link (graphical link). A link to the top of the page. A graphical link to your email. Formatted text throughout the page. Horizontal lines

Use the ListInterface operations only to create a tackPunct routine in C++ that will take a...

Use the ListInterface operations only to create a tackPunct routine in C++ that will take a list of string (array or linked, your choice) as a reference. Use the list operations on the passed list to make all items that don’t have a ‘.’, ‘?’ or ‘!’ have a ‘.’ tacked on.

Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org...

Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org sells yearly membership for $30 each. Discounts are given for buying in bulk (see Table 1 and example below). Table 1 – Discounts Quantity Purchased Discount 1 – 29 0% 30 - 59 10% 60 + 15% Example: If a customer purchases 40 family membership, their total price (CTotal) would be: COriginalPrice = 30*40=1200 DMainDiscount = 1200*0.1=120 CTotalPrice = COriginalPrice - DMainDiscount= 1200-120 =...

create an addition and multiplication table on base 12 main question: why we add to different...

create an addition and multiplication table on base 12 main question: why we add to different variables before 10?

Use multiplication or division of power series to find the first three nonzero terms in the...

Use multiplication or division of power series to find the first three nonzero terms in the Maclaurin series for the given function. 6sec(2x)

MATLAB NEEDED. This lab will use functions and arrays. The task within is to Add, Sub,...

MATLAB NEEDED. This lab will use functions and arrays. The task within is to Add, Sub, or Multiply 2 Matrix. See Manipulate Matrix doc for the methods. My reference to matrix below is because we are doing matrix math. The matrix are arrays. Matlab built-in functions not allowed You will write 3 functions (call those functions): 1. ADD two matrix, 2. SUBTRACT two matrix, and 3. MULTIPLY two matrix. Requirements: Write the script to cycle until user chooses to stop....

Subjects