Question

In: Computer Science

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

Create a web calculator with JavaScript.

  1. Only four operations (Add, Sub, Multiplication, and Division)
  2. 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 2 years ago
Next > < Previous

Related Solutions

Java program - you are not allowed to use arithmetic operations such as division (/), multiplication,...
Java program - you are not allowed to use arithmetic operations such as division (/), multiplication, or modulo (%) to extract the bits. In this exercise use only logic bit-wise operations. Write a program that prompts the user to enter a positive integer n (0 up to 232 -1). You must write a function that takes as input n and returns a string s representing the number n in binary. For this assignment, you CANNOT use the arithmetic division by...
C -Language Create a simple calculator that performs addition, subtraction, multiplication, and division. Your program should...
C -Language Create a simple calculator that performs addition, subtraction, multiplication, and division. Your program should prompt the user for the operation they wish to perform followed by the numbers they wish to operate on. You should have a function for each operation and use branches to determine which function to call. I need this to make any integers given, into decimal numbers, such as 3 to 3.0, or 2 to 2.0, also, so that I can multiply or add...
Write a C++ arithmetic calculator program that performs four arithmetic operations namely addition, subtraction, multiplication and...
Write a C++ arithmetic calculator program that performs four arithmetic operations namely addition, subtraction, multiplication and division. This program prompts user to enter data in the following order: First data is the number, second data is an operator and the third data is the number. You are required to: Write a function for addition. Write a function for subtraction. Write a function for multiplication. Write a function for division. Write a main program which calls four functions based on the...
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
There are four basic functions in math. They are addition, subtraction, multiplication and division. Children in...
There are four basic functions in math. They are addition, subtraction, multiplication and division. Children in 1st grade focus on addition. They are required to memorize their addition facts from 1 to 12. Create a function that prompts the user to enter a number between 1 and 12. Then display - using the input supplied - the addition and subtraction math facts for that number from 1 to 12 for the number entered. The output should be the results of...
There are four basic functions in math. They are addition, subtraction, multiplication and division. Children in...
There are four basic functions in math. They are addition, subtraction, multiplication and division. Children in 1st grade focus on addition. They are required to memorize their addition facts from 1 to 12. Create a function that prompts the user to enter a number between 1 and 12. Then display - using the input supplied - the addition and subtraction math facts for that number from 1 to 12 for the number entered. The output should be the results of...
Gui calculator in Java with additon, subtraction, multiplication, division, sine, cosine, tangent, square, cube, raise to...
Gui calculator in Java with additon, subtraction, multiplication, division, sine, cosine, tangent, square, cube, raise to x to the power of y functionality. It should also have memory button, memory recall button and clear.
In Visual Studio in C#, you will create a simple calculator that performs addition, subtraction, multiplication,...
In Visual Studio in C#, you will create a simple calculator that performs addition, subtraction, multiplication, and division. Your program should request a numerical input from the user, followed by the operation to be performed, and the second number to complete the equation. The result should be displayed to the user after each equation is performed. For example, if the user performs 3+3, the program should display 6 as the result. The program should continue running so the user can...
Calculator Class Instructions Create a calculator class that will add, subtract, multiply, and divide two numbers....
Calculator Class Instructions Create a calculator class that will add, subtract, multiply, and divide two numbers. It will have a method that will accept three arguments consisting of a string and two numbers example ("+", 4, 5) where the string is the operator and the numbers are what will be used in the calculation. The class must check for a correct operator (+,*,-,/), and a number (integer) for the second and third argument entered. The calculator cannot divide by zero...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT