W3schools JavaScript calculator

Question

HTML calculator is used for performing basic mathematical operations like Addition, subtraction, multiplication, and division.

Nội dung chính Show

Features of the Calculator
Components of the Calculator
Folder Structure of the Calculator Project
JavaScript Code
Understanding the JavaScript Code
Clearing Values
Displaying Values
Evaluating Expression
Develop Cool Programming Projects
How to create a calculator in JavaScript?
How to calculate using JavaScript?
How to make a calculator using JavaScript and HTML?
How to make a calculator in JavaScript without eval?

You can find the live preview below, try it:

To design the basic calculator, we will use HTML, CSS, and JavaScript. HTML is used to design the basic structure of the calculator. CSS styles are used to apply styles on the calculator and JavaScript is used to add the calculation functionality.

Approach:

Created the design with the HTML Table where firstis holding the input field with id=”result” and the rest are filled with input button.
With every click of the button, it displays the respective value of the button to the input field by using the function dis().
myFunction() is used to set the value pressed from the keyboard to the same input field.
Calculation of the numbers can be done by both the “Enter” key as well as the “=” button on the Calculator UI. The solve() function is evaluating the result with the math.evaluate() and display the final answer to the input field with id=”result”.
clr() function is also defined to clear the input field.

Example:

<html>

<head>

<<0 <1<2

<3

<4<5<2

<7

<4<9<2html1

<4html3<2html5html6<0>

<<0 <1<2

>4

<4<5<2

>8

<4<9<2html1

<4html3<2html5html6<0>

<1

<<4>

<4<7

<8<9

<8head1

<8head3

<4head5

<4head8

<8>0

<8>2

<8>4

<8>6

<8>8

<8 0

<8 2

<8 4

<4head5

<4 9

<8<1

<8>8

<8 0

<8 2

<8 4

<8<01

<4head5

<05<4>

<05head>

<11

<<14>

<<18 <19<2<21>

<4<<25>

<8<<29<33<34 <35<2<53 <54<2<23 <57<2<26

Readers like you help support MUO. When you make a purchase using links on our site, we may earn an affiliate commission. Read More.

The best way to learn JavaScript is to build projects. If you want to become a good web developer, you need to start creating projects as soon as possible. You can start by building beginner-level projects like a simple calculator, digital clock, or stopwatch.

You can make a simple calculator using just core web technologies: HTML, CSS, and JavaScript. This calculator can perform basic mathematical operations like addition, subtraction, multiplication, and division.

Features of the Calculator

In this project, you are going to develop a calculator that will have the following features:

It will perform basic arithmetic operations like addition, subtraction, division, and multiplication.
It will perform decimal operations.
The calculator will display Infinity if you try to divide any number by zero.
It will not display any result in case of invalid expression. For example, 5++9 will not display anything.
Clear screen feature to clear the display screen anytime you want.

The code used in this project is available in a GitHub repository and is free for you to use under the MIT license. If you want to have a look at a live version of this project, you can check out this demo.

Components of the Calculator

The calculator consists of the following components:

Mathematical Operators: Addition (+), Subtraction (-), Multiplication (*), and Division (/).

Digits and Decimal Button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .

Display Screen: It displays the mathematical expression and the result.

Clear Screen Button: It clears all mathematical values.

Calculate button (=): It evaluates the mathematical expression and returns the result.

A calculator's basic components divided into the display and the key inputs.

Folder Structure of the Calculator Project

Create a root folder that contains the HTML, CSS, and JavaScript files. You can name the files anything you want. Here the root folder is named Calculator. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively.

Folder structure of the calculator project

HTML Code

Open the index.html file and paste the following HTML code for the calculator:

 html>
<html lang="en" dir="ltr">
 
<head>
  <meta charset="utf-8">
  <title>Simple Calculator using HTML, CSS and JavaScripttitle>
  <link rel="stylesheet" href="styles.css">
head>
 
<body>
 
<table class="calculator" >
  <tr>
    <td colspan="3"> <input class="display-box" type="text" id="result" disabled /> td>
 
    
    <td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> td>
  tr>
  <tr>
    
    <td> <input type="button" value="1" onclick="display('1')" /> td>
    <td> <input type="button" value="2" onclick="display('2')" /> td>
    <td> <input type="button" value="3" onclick="display('3')" /> td>
    <td> <input type="button" value="/" onclick="display('/')" /> td>
  tr>
  <tr>
    <td> <input type="button" value="4" onclick="display('4')" /> td>
    <td> <input type="button" value="5" onclick="display('5')" /> td>
    <td> <input type="button" value="6" onclick="display('6')" /> td>
    <td> <input type="button" value="-" onclick="display('-')" /> td>
  tr>
  <tr>
    <td> <input type="button" value="7" onclick="display('7')" /> td>
    <td> <input type="button" value="8" onclick="display('8')" /> td>
    <td> <input type="button" value="9" onclick="display('9')" /> td>
    <td> <input type="button" value="+" onclick="display('+')" /> td>
  tr>
  <tr>
    <td> <input type="button" value="." onclick="display('.')" /> td>
    <td> <input type="button" value="0" onclick="display('0')" /> td>
 
    
    <td> <input type="button" value="=" onclick="calculate()" id="btn" /> td>
    <td> <input type="button" value="*" onclick="display('*')" /> td>
  tr>
table>
 
<script type="text/javascript" src="script.js">script>
 
body>
 
html>

This project uses a

tag to create the overall structure of the calculator. The

tag contains five rows which represent five horizontal sections of the calculator. Each row has a corresponding tag. Each tag contains

tags which hold the display screen and buttons of the calculator.

Calculator Rows

CSS Code

Open the styles.css file and paste the following CSS code for the calculator:

 @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

.calculator {
    padding: 10px;
    border-radius: 1em;
    height: 380px;
    width: 400px;
    margin: auto;
    background-color: #191b28;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.display-box {
    font-family: 'Orbitron', sans-serif;
    background-color: #dcdbe1;
    border: solid black 0.5px;
    color: black;
    border-radius: 5px;
    width: 100%;
    height: 65%;
}

#btn {
    background-color: #fb0066;
}

input[type=button] {
    font-family: 'Orbitron', sans-serif;
    background-color: #64278f;
    color: white;
    border: solid black 0.5px;
    width: 100%;
    border-radius: 5px;
    height: 70%;
    outline: none;
}

input:active[type=button] {
    background: #e5e5e5;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
    -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
    box-shadow: inset 0px 0px 5px #c1c1c1;
}

The above CSS styles the calculator. The .class selector in CSS selects elements with a specific class attribute. The .calculator and .display-box class selectors style the table structure and the display screen of the calculator respectively. @import imports the Orbitron font-family from Google fonts.

JavaScript Code

Open the script.js file and add functionality to the simple calculator using the following JavaScript code:

 // This function clear all the values
function clearScreen() {
    document.getElementById("result").value = "";
}
 
// This function display values
function display(value) {
    document.getElementById("result").value += value;
}
 
// This function evaluates the expression and returns result
function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

Understanding the JavaScript Code

The clearScreen(), display(), and calculate() functions add functionality to the Calculator.

Clearing Values

The clearScreen() function access the DOM using the id of the result and clear its value by assigning it an empty string. You can use DOM selectors to target various components of a page.

 function clearScreen() {
    document.getElementById("result").value = "";
}

Displaying Values

The display() function accesses the DOM using the id of the result and appends the value of the clicked button to the result.

 function display(value) {
    document.getElementById("result").value += value;
}

Evaluating Expression

The calculate() function accesses the DOM using the id of the result and evaluates the expression using the eval() function. The evaluated value of the expression is again assigned to the result.

The JavaScript eval() function evaluates an expression that you pass to it. It returns the result of that expression.

 function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

Develop Cool Programming Projects

You can improve your coding skills by developing projects, whether you're a beginner or you're getting back into coding after some time off. Creating fully-working apps, even simple ones, can boost your confidence.

You can try out many simple projects from games (chess, tic-tac-toe, Rock Paper Scissors) to simple utilities (to-do list, weight conversion, countdown clock).

How to create a calculator in JavaScript?

A Guide to Build a Simple Calculator.

Initial HTML Code to Include the . js and . css files. ... .

Input the Digits And Operators. This step creates buttons for digits from 0 to 9 and operators like +,-,*,/, and = ... .

Add the Styling In the . css file. To beautify what you see on the screen, styling is crucial..

How to calculate using JavaScript?

Converting to number data types.

let myNumber = "74"; myNumber += 3; You end up with the result 743, not 77, because myNumber is actually defined as a string. ... .

typeof myNumber; To fix the calculation, you can do this:.

let myNumber = "74"; myNumber = Number(myNumber) + 3; The result is then 77, as initially expected..

How to make a calculator using JavaScript and HTML?

Result.html const number1 = parseFloat(prompt ('Enter the first number: ')); const number2 = parseFloat(prompt ('Enter the second number: ')); let result; // declaration of the variable. // use if, elseif and else keyword to define the calculator condition in JavaScript.

How to make a calculator in JavaScript without eval?

window. eval = null;.

const mainCalc = document. querySelector("#calculator");.

const inputDisplay = document. querySelector("#history");.

const outputDisplay = document. querySelector("#result");.

const allClear = document. querySelector('[data="all-clear"]');.

const backButton = document. ... .

const percentButton = document..

Bài Viết Liên Quan

Cara menggunakan save image temporary python

W3schools JavaScript calculator

Features of the Calculator

Components of the Calculator

Folder Structure of the Calculator Project

HTML Code

CSS Code

JavaScript Code

Understanding the JavaScript Code

Clearing Values

Displaying Values

Evaluating Expression

Develop Cool Programming Projects

How to create a calculator in JavaScript?

How to calculate using JavaScript?

How to make a calculator using JavaScript and HTML?

How to make a calculator in JavaScript without eval?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội