calculator html javascript | calculator javascript code







 calculator html javascript | calculator javascript code


Welcome🎉 to codewithrandom blog in this blog we learn that how we create calculator html javascript  . We use HTML & css and javascript for this calculator html javascript .  Hope you enjoy our blog so let’s start with a basic HTML structure for calculator html javascript .

HTML code for calculator 

 <section>  
<div class="container">
<div class="calculator">
<div class="display">
<div class="display-1">0</div>
<div class="display-2">0</div>
<div class="temp-result"></div>
</div>
<div class="all_button">
<div class="button all-clear">C</div>
<div class="button last-entity-clear">CE</div>
<div class="button operation">%</div>
<div class="button operation">/</div>
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button operation">x</div>
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">-</div>
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button btn-0 number">0</div>
<div class="button number dot">.</div>
<div class="button equal">=</div>
</div>
</div>
</div>
</section>

There is all HTML code forcalculator html javascript  . Now you can see output without css then we write css for our calculator html javascript  .


calculator html javascript | calculator javascript code

CSS for calculator

 * {  
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Montserrat", sans-serif;
}
section {
background-color: rgb(18, 26, 31);
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 90%;
max-width: 400px;
background-color: rgb(39, 55, 59);
border-radius: 8px;
overflow: hidden;
}
.display {
background-color: rgb(182, 182, 182);
height: 100px;
width: 100%;
text-align: right;
padding: 20px;
font-size: 30px;
position: relative;
}
.display-1 {
opacity: 0.4;
font-size: 20px;
height: 20px;
overflow: hidden;
}
.temp-result {
position: absolute;
bottom: 0;
left: 10;
font-size: 20px;
opacity: 0.3;
}
.all_button {
color: whitesmoke;
display: grid;
grid-template: repeat(4, 1fr) / repeat(4, 1fr);
}
.button {
border: 0.5px solid rgba(92, 92, 92, 0.137);
display: inline-block;
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
cursor: pointer;
}
.button:hover {
background-color: rgb(30, 43, 46);
}
.btn-0 {
grid-column: 1/3;
}

Now we complete our css section,  Here is our updated output with css.in next code slide we cover our whole javascript.


calculator html javascript | calculator javascript code

Javascript for calculator

 const display1El = document.querySelector(".display-1");  
const display2El = document.querySelector(".display-2");
const tempResultEl = document.querySelector(".temp-result");
const numbersEl = document.querySelectorAll(".number");
const operationEl = document.querySelectorAll(".operation");
const equalEl = document.querySelector(".equal");
const clearAllEl = document.querySelector(".all-clear");
const clearLastEl = document.querySelector(".last-entity-clear");
let dis1Num = "";
let dis2Num = "";
let result = null;
let lastOperation = "";
let haveDot = false;
numbersEl.forEach((number) => {
number.addEventListener("click", (e) => {
if (e.target.innerText === "." && !haveDot) {
haveDot = true;
} else if (e.target.innerText === "." && haveDot) {
return;
}
dis2Num += e.target.innerText;
display2El.innerText = dis2Num;
// console.log();
});
});
operationEl.forEach((operation) => {
operation.addEventListener("click", (e) => {
if (!dis2Num) return;
haveDot = false;
const operationName = e.target.innerText;
if (dis1Num && dis2Num && lastOperation) {
mathOperation();
} else {
result = parseFloat(dis2Num);
}
clearVar(operationName);
lastOperation = operationName;
console.log(result);
});
});
function clearVar(name = "") {
dis1Num += dis2Num + " " + name + " ";
display1El.innerText = dis1Num;
display2El.innerText = "";
dis2Num = "";
tempResultEl.innerText = result;
}
function mathOperation() {
if (lastOperation === "x") {
result = parseFloat(result) * parseFloat(dis2Num);
} else if (lastOperation === "+") {
result = parseFloat(result) + parseFloat(dis2Num);
} else if (lastOperation === "-") {
result = parseFloat(result) - parseFloat(dis2Num);
} else if (lastOperation === "/") {
result = parseFloat(result) / parseFloat(dis2Num);
} else if (lastOperation === "%") {
result = parseFloat(result) % parseFloat(dis2Num);
}
}
// operation();
equalEl.addEventListener("click", () => {
if (!dis2Num || !dis1Num) return;
haveDot = false;
mathOperation();
clearVar();
display2El.innerText = result;
tempResultEl.innerText = "";
dis2Num = result;
dis1Num = "";
});
clearAllEl.addEventListener("click", () => {
dis1Num = "";
dis2Num = "";
display1El.innerText = "";
display2El.innerText = "";
result = "";
tempResultEl.innerText = "";
});
clearLastEl.addEventListener("click", () => {
display2El.innerText = "";
dis2Num = "";
});
window.addEventListener("keydown", (e) => {
if (
e.key === "0" ||
e.key === "1" ||
e.key === "2" ||
e.key === "3" ||
e.key === "4" ||
e.key === "5" ||
e.key === "6" ||
e.key === "7" ||
e.key === "8" ||
e.key === "9" ||
e.key === "."
) {
clickButtonEl(e.key);
// console.log(e.key)
} else if (e.key === "+" || e.key === "-" || e.key === "/" || e.key === "%") {
clickOperation(e.key);
} else if (e.key === "*") {
clickOperation("x");
// console.log(e.key)
} else if (e.key == "Enter" || e.key === "=") {
clickEqual();
}
// console.log(e.key)
});
function clickButtonEl(key) {
numbersEl.forEach((button) => {
if (button.innerText === key) {
button.click();
}
});
}
function clickOperation(key) {
operationEl.forEach((operation) => {
if (operation.innerText === key) {
operation.click();
}
});
}
function clickEqual() {
equalEl.click();
}

This is all our JavaScript, I know it’s look very lengthy but it’s complete calculator. So also you use in your resume as side project ☺. Here is output video of our project!


calculator html javascript | calculator javascript code


In this post, we learn how to create  calculator html javascript  with simple coding of HTML & css and javascript . If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

written by – codewithrandom/Anki 
Share on:

Leave a Comment