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 like addition, subtraction, multiplication and division.
Let’s get started.
Calculator components
The calculator consists of the following elements:
Math operators: Addition (+), Subtraction (-), Multiplication
and Division (/).Numbers and decimal button
: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,. .Display screen
: 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
Simple Calculator using HTML, CSS and JavaScript
Related: Steps to Understanding Basic HTML Code The calculator structure is created using the
Calculator lines
CSS code Open the styles.css
@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 .to classify 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
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 identifier of the result and evaluates the expression using the eval ()
a function. The evaluated value of the expression is reassigned 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.
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
Click here to subscribe
