How to Make a Calculator using HTML CSS and JS. Making a Javascript calculator, you’ll utilize your skills into a real object with evident functionality in no time. Learn how to make a calculator using HTML CSS and JavaScript, fix the common problems, add a desirable design – you’ve built your own calculator.
How will you benefit from making a calculator?
To go ahead to developing your basic JavaScript, HTML, and CSS skills, you sway need to turn off the lights and make the beds before you leave the house. A design as simple as making a JavaScript-HTML-CSS calculator will let you have good work with your current skills. At the same time, enjoy deeper your understanding of the programming languages required for practical use. Learning more knowledgeable with JavaScript, you’ll soon realize the fruits which are everything.
So, now let’s start to make a calculator by using HTML, CSS, and JS.
First of all open a text editor like notepad, or Notepad++ and create a file named calculator.html or whatever you want. Then copy below HTML, CSS, and JS code to build your own calculator.
How to Make a Calculator using HTML CSS and JS
HTML Code:
<div class="calculator"> <input type="text" placeholder="Enter Values" class="display" disabled> <div class="keys"> <div class="soft"> <button value="1">1</button> <button value="2">2</button> <button value="3">3</button> <button value="/" class="soft-operator">/</button> </div> <div class="soft"> <button value="4">4</button> <button value="5">5</button> <button value="6">6</button> <button value="+" class="soft-operator">+</button> </div> <div class="soft"> <button value="7">7</button> <button value="8">8</button> <button value="9">9</button> <button value="-" class="soft-operator">-</button> </div> <div class="soft"> <button value="C" class="soft-operator">C</button> <button value="0">0</button> <button value="=" class="soft-operator">=</button> <button value="*" class="soft-operator">*</button> </div> </div> </div>
CSS Code:
<style>
* {padding: 0;margin: 0;}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
font-family: sans-serif;
}
/* calculator */
.calculator {
width: 300px;
padding-bottom: 15px;
border-radius: 7px;
background-color: #fff;
box-shadow:
-0px -0px 4px 0px #ffffff,
4px 4px 8px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
/* Style */
.display {
width: 100%;
height: 80px;
border: none;
box-sizing: border-box;
padding: 10px;
font-size: 2rem;
background-color: #fff;
color: #000;
text-align: right;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
box-shadow:
-0px -0px 4px 0px #ffffff,
4px 4px 4px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
/* soft */
.soft {
display: flex;
justify-content: space-between;
}
/* soft style end */
button {
width: 50px;
height: 50px;
border-radius: 20%;
border: none;
outline: none;
font-weight: bold;
font-size: 1.5rem;
background-color: #f1f1f1;
color: #000;
margin: 10px;
box-shadow:
-0px -0px 0px 0px #000,
4px 0px 0px 0px #000,
0px 0px px 0px #000 inset,
-4px -4px 4px 0px #000 inset;
}
button:hover {
cursor: pointer;
background: rgba(0,0,0,0.2);
}
/* soft-operator */
.soft-operator {
background-color: #f1f1f1;
color: #000;
font-weight: bold;
box-shadow:
-1px -1px 4px 0px #ffffff,
4px 4px 4px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.soft-operator:hover {
background-color: #ddd;
color: #000;
font-weight: bold;
box-shadow:
-0px -0px 4px 0px #ffffff,
4px 4px 8px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
</style>
JavaScript/JS Code:
<script>
const buttons = document.querySelectorAll('button');
const display = document.querySelector('.display');
buttons.forEach(function (button) {
button.addEventListener('click', calculate);
});
function calculate(event) {
const clickedButtonValue = event.target.value;
if (clickedButtonValue === '=') {
if (display.value !== '') {
display.value = eval(display.value);
}
} else if (clickedButtonValue === 'C') {
display.value = '';
} else {
display.value += clickedButtonValue;
}
} </script>Okay, Well that’s it. Now you can modify your own skills.
Have a nice day.