In this article, Let’s create a calculator in HTML, CSS, and JavaScript. that can run over the browser and show the output.
To perform this task, I am using visual studio code as a code editor tool, which you can use at your convenience.
- Create a folder with a project folder and open that folder inside your code editor to start the task.
- Create index.html file to write the HTML code to define Buttons, Input, and labels.
- Create script.js file to write the JavaScript or logical code to perform events and operations.
- Create style.css to write the CSS code for the styling of the button, input, and labels.
- Now double-click on your index.html file to run it and get the output.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Codebun</title>
</head>
<body>
<div class="container">
<div class="calculator">
<input type="text" id="inputBox" placeholder="0" />
<div>
<button class="button operator">AC</button>
<button class="button operator">DEL</button>
<button class="button operator">%</button>
<button class="button operator">/</button>
</div>
<div>
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="button operator">*</button>
</div>
<div>
<button class="button">4</button>
<button class="button">5</button>
<button class="button">6</button>
<button class="button operator">-</button>
</div>
<div>
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="button operator">+</button>
</div>
<div>
<button class="button">00</button>
<button class="button">0</button>
<button class="button">.</button>
<button class="button equalBtn">=</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Script.js
let input = document.getElementById('inputBox');
let buttons = document.querySelectorAll('button');
let string = "";
let arr = Array.from(buttons);
arr.forEach(button => {
button.addEventListener('click', (e) =>{
if(e.target.innerHTML === '='){
string = eval(string);
input.value = string;
}
else if(e.target.innerHTML === 'AC'){
string = "";
input.value = string;
}
else if(e.target.innerHTML === 'DEL'){
string = string.substring(0, string.length-1);
input.value = string;
}
else{
string += e.target.innerHTML;
input.value = string;
}
})
})
Style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(5deg, #150441, #285c9b);
}
.calculator{
border: 1px solid #717377;
padding: 20px;
border-radius: 16px;
background: transparent;
box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}
input{
width: 350px;
border: none;
padding: 24px;
margin: 5px;
background: transparent;
box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
font-size: 35px;
text-align: right;
cursor: pointer;
color: #ffffff;
}
input::placeholder{
color: #ffffff;
}
button{
border: none;
width: 60px;
height: 60px;
margin: 10px;
border-radius: 20%;
background: transparent;
color: #ffffff;
font-size: 20px;
box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
cursor: pointer;
}
.equalBtn{
background-color: #06010e;
}
.operator{
color: #f5f8fa;
}
Output
