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

In this article, you will learn how to create a simple calculator using HTML, CSS, and JavaScript. This calculator can perform basic math operations such as addition, subtraction, multiplication and division.

Let’s get started.

Calculator components

The calculator consists of the following elements:

Mathematical operators: Addition (+), Subtraction (-), Multiplication

and Division (/).Numbers 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 erases all mathematical values.Calculate button (=)

Simple calculator using HTML, CSS and JavaScript

Calculator project folder structure Create a root folder containing the HTML, CSS, and JavaScript files. You can name the files whatever you want. Here the root folder is namedCalculator . According to the standard naming convention, HTML, CSS, and JavaScript files are namedindex.html ,styles.css , and script.js

Calculator project folder structure

HTML code Open the index.html

file and paste the following code:

Related: Steps to Understanding Basic HTML Code The calculator structure is created using the label. the The tag contains five lines that represent five horizontal sections of the calculator. Each row is created using the

label. Each the tag contains

Calculator lines

CSS code Open the styles.css

file and paste the following code:

@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%;
}
.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;
}
.button:active {
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;
}

Related: Simple CSS Code Examples You Can Learn In 10 Minutes The CSS above is used to style the calculator. the .class selector is used to select items with a specific class attribute. the.calculator ,.display-box , and .button class selectors are used to style the table structure, display screen, and calculator buttons respectively. @import is used to import the Orbitron font family

from Google Fonts.

Related: How to Use Box-Shadow CSS: Tips & Examples

JavaScript code Open the script.js

// 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 return result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

file and paste the following code:

Understanding JavaScript code theclean screen () ,display () , and calculate()

functions are used to add functionality to the calculator.

Clear values the clean screen ()

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

The function accesses the DOM using the identifier of the result and clears its value by giving it an empty string.

Display of values display ()

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

The function accesses the DOM using the identifier of the result and adds the value of the clicked button to the result.

Expression evaluation the calculate() the function accesses the DOM using the id of the result and evaluates the expression using the eval ()

a function. The evaluated value of the expression is again assigned to the result.To note : The eval ()

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

The function is used in JavaScript to evaluate the expression passed to it as a parameter. It returns the evaluated result of the mathematical expression. If you want to check out the full source code used in this article, here is theGitHub repository . Also, if you want to take a look at the live version of this project, you can check it out.also via GitHub

.

Related: Python Project Ideas Suitable For Beginners

Develop cool programming projects

You can take your engineering skills to the next level by developing projects. Whether you’re just starting out or getting back to coding after some free time, project development can be a big help in building your confidence.

You can try many simple projects like chess game, to do list app, weight converter tool, Tic Tac Toe game, Rock Paper Scissors game, web scraper with Python, login system , a chatbot, a Snake game, a Tetris game, a tip calculator, Countdown timer, URL shortener, etc.

Want to learn programming but don’t know where to start? These beginner programming projects and tutorials will get you started.

Read more

.

Source link