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 1 year 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...
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
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...
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.
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 for web page --> <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...
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.
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 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)
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT