Simple JavaScript Calculator
Simple calculator building is a very easy task.
Do you want to make a simple calculator using html css and javascript only for your website or blog?
So yes you can make it on your own by using the simple javascript code.
Watch Video Tutorial
https://youtu.be/1CacolC-_vg
Live Preview
C
%
⌫
/
7
8
9
*
4
5
6
-
1
2
3
+
00
0
.
=
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator in HTML, CSS and JavaScript</title>
<!-- Style Sheet -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="calculator">
<div class="screen"></div>
<div class="btn-box">
<span class="dark clear">C</span>
<span class="dark percent">%</span>
<span class="dark delete">⌫</span>
<span class="dark">/</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span class="dark">*</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="dark">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="dark">+</span>
<span>00</span>
<span>0</span>
<span>.</span>
<span class="dark equal">=</span>
</div>
</div>
</div>
<!-- Javascript -->
<script src="js/main.js"></script>
</body>
</html>
CSS Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "roboto", arial;
}
.wrapper{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #E9ECEF;
}
.calculator{
width: 300px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid #495057;
border-radius: 1px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.calculator .screen{
width: 100%;
height: 80px;
padding: 20px;
color: #fff;
font-size: 34px;
text-align: right;
background-color: #343A40;
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5),
inset -1px -1px 10px rgba(255, 255, 255, 0.3);
}
.calculator .btn-box{
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.calculator .btn-box span{
width: 100%;
height: 100%;
color: #E9ECEF;
font-size: 18px;
line-height: 64px;
text-align: center;
cursor: pointer;
background-color: #343A40;
border-radius: 1px;
border-top: 1px solid rgba(33, 37, 41, 0.8);
border-left: 1px solid rgba(33, 37, 41, 0.8);
border-bottom: 1px solid rgba(73, 80, 87, 0.8);
border-right: 1px solid rgba(73, 80, 87, 0.8);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.calculator .btn-box span:hover{
border-top: 1px solid rgba(33, 37, 41, 1);
border-left: 1px solid rgba(33, 37, 41, 1);
border-bottom: 1px solid rgba(73, 80, 87, 1);
border-right: 1px solid rgba(73, 80, 87, 1);
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4),
inset -1px -1px 2px rgba(255, 255, 255, 0.1);
}
.calculator .btn-box .dark{
background-color: #212529;
}
.calculator .btn-box .clear{
color: lime;
}
.calculator .btn-box .percent{
color: orange;
}
.calculator .btn-box .delete{
color: red;
}
.calculator .btn-box .equal{
color: blue;
}
Simple JavaScript Custom Code
let values = document.querySelectorAll(".btn-box span");
let screen = document.querySelector(".screen");
for (var i = 0; i < values.length; i++) {
values[i].addEventListener("click", function(){
switch(this.innerText){ // click values is innerText
case "C":
screen.innerText = "";
break;
case "⌫":
if (screen.innerText) {
screen.innerText = screen.innerText.slice(0, -1);
}
break;
case "%":
screen.innerText = eval(screen.innerText)/100;
break;
case "=":
try {
screen.innerText = eval(screen.innerText);
}
catch{
screen.innerText = "Error..!";
}
break;
default: screen.innerText += this.innerText;
}
});
}
0 Comments