How to create a Web Calculator using HTML CSS & JS
 |
Hello friends! Welcome back to our Blog ProgrammingHill My name is Aniruddh, Today we are going to create a Web Calculator using HTML CSS and JavaScript. Friends! this Web Calculator is like your normal calculator which you use daily in your phone, but the special part of this Web calculator is, we will create this using HTML CSS & JavaScript and this Calculator will be on Internet.
Friends! previously we have created an Analog Clock using HTML CSS and JavaScript, you can also check out that. So friends without wasting any time let's start
Step 1- Create a folder with name Web Calculator
Friends! firstly we will create a folder to place our all project files at the same place, so that we can easily link files with one another.
Step 2- Create an index.html file
Now create an index.html file in the same folder, that you have created recently and open this index.html file in your text editor, and paste all the code given below in your index.html file and save.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Simple Calculator</h1>
<div class="container">
<table>
<input type="text" class="inp">
<tr><td colspan="2" class="C main">C</td><td class="main">.</td><td class="main">/</td></tr>
<tr><td>7</td><td>8</td><td>9</td><td class="main">*</td></tr>
<tr><td>4</td><td >5</td><td class="five">6</td><td class="main">-</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td class="main">+</td></tr>
<tr><td>0</td><td>00</td><td colspan="2" class="equal main">=</td></tr>
</table>
</div>
</body>
<script src="script.js"></script>
</html>
Step 3- Create a style.css file
Now create a style.css file in the same folder where you have created your index.html file. Now open your style.css file in your text editor and paste all the code given below. that's it. this file will make your calculator attractive and without this file your Web Calculator will look very ugly. so if there is any problem with the design of Project then you should check your style.css file.
body{
color:white;
font-weight: bolder;
background-color:#091921;
}
.container{
margin-left: 35vw;
width: 25vw;
box-shadow: 3px 3px 4px black,
-3px -3px 3px black;
}
table{
border-collapse: collapse;
width: 25.1vw;
background-color: rgba(21, 21, 22, 0.753);
}
td{
cursor: pointer;
width: 5vw;
height: 9vh;
text-align: center;
}
td:hover{
background-color: rgb(233, 143, 8);
}
.main{
font-size: 5vh;
font-weight:bolder;
height: 12vh;
}
.equal{
background-color: rgb(252, 79, 252);
}
.equal:hover{
background-color: rgb(252, 79, 252);
}
.C{
background-color: rgb(4, 218, 247);
}
.C:hover{
background-color: rgb(4, 218, 247);
}
.inp{
font-size: 3vh;
outline: none;
background-color: white;
height: 15vh;
width: 24.7vw;
border:none;
}
h1{
color: springgreen;
text-align: center;
}
@media only screen and (max-width:1024px) {
.container{
width: 90vw;
margin-left: 2vw;
}
table{
width: 90vw;
}
td{
width: 20vw;
}
.inp{
width: 88vw;
}
}
Step 4- Create a script.js file
Friends! this is our final step. Create a script.js file in the same folder where you have created your rest 2 files. Friends! Script.js file is the main file of your project, because this is the file where the code of calculation is written. Now again open this file in your text editor and paste all the code given below and save.
let display=document.querySelector(".inp");
let btnAll=document.querySelectorAll('td');
btnAll.forEach((elem,index,array)=>{
elem.addEventListener("click",()=>{
if(elem.innerHTML=="="){
const sol=eval(display.value);
display.value=sol;
}
else if(elem.innerHTML=="C"){
display.value="";
}
else{
display.value+=elem.innerHTML;
}
})
})Friends! now we have successfully created our Web Calculator. Our Web Calculator is looking very attractive and fully functional, so friends if you have any doubt regarding this project or Programming, feel free to comment below and let me know in the comment section if you liked my way to explain or not. Thanks for reading! Take care! Bye Bye.
Post a Comment