A calculator is essential to program in our life. It creates any high-level programming language. Now we create a Calculator with Html, CSS, and JavaScript. You need three files to create it, remember all files should have in one folder.
Rather than making a beeline for the code immediately, you need to figure out how to handle another undertaking. You have two things prepared for you: the rationale and an essential comprehension of the front-end advancements, for example, JavaScript, HTML, and CSS. Before you start fabricating your mini-computer utilizing JavaScript, you need the accompanying:
- An Integrated Development Environment that will help you fabricate your venture utilizing each of the three advancements.
- A nearby worker will help you test your codes and eliminate the bugs. Thus, you will actually want to dispatch the application quicker and with more noteworthy spryness.
First, you create an Html file which name is "index.html", then open this file with your editor and write below the code.
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">
<title>How to make a calculator using html css and javascript</title>
<!-- external css file -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<div class="calculator">
<input type="text" placeholder="0" id="viewScreen">
<button onclick="Clear()">C</button>
<button onclick="del()">DEL</button>
<button onclick="display('%')">%</button>
<button onclick="display('/')">/</button>
<button onclick="display('7')">7</button>
<button onclick="display('8')">8</button>
<button onclick="display('9')">9</button>
<button onclick="display('*')">*</button>
<button onclick="display('4')">4</button>
<button onclick="display('5')">5</button>
<button onclick="display('6')">6</button>
<button onclick="display('-')">-</button>
<button onclick="display('1')">1</button>
<button onclick="display('2')">2</button>
<button onclick="display('3')">3</button>
<button onclick="display('+')">+</button>
<button onclick="display('.')">.</button>
<button onclick="display('0')">0</button>
<button class="equal" onclick="calculate()">=</button>
</div>
</div>
<!-- external js file -->
<script src="./main.js"></script>
</body>
</html>
Now, you create a css file which name is "styel.css", then open this file with your editor and write below the code.
style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
background-color: #ecf0f3;
font-family: sans-serif;
outline: none;
}
.wrapper{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator{
background-color: #ecf0f3;
padding: 15px;
border-radius: 30px;
box-shadow: inset 5px 5px 12px #fff, 5px 5px 12px rgba(0, 0, 0, 0.15);
display: grid;
grid-template-columns: repeat(4, 64px);
}
input{
grid-column: span 4;
height: 70px;
width: 260px;
background-color: #ecf0f3;
box-shadow: inset -4px -6px 12px #fbfbfb91, inset 5px 5px 12px rgba(0, 0, 0, 0.15);
border: none;
border-radius: 30px;
color: rgba(70, 70, 70);
font-size: 50px;
text-align: end;
margin: auto;
margin-top: 40px;
margin-bottom: 30px;
padding: 20px;
}
button{
height: 48px;
transition: 0.3s;
width: 48px;
background-color: #ecf0f3;
box-shadow: -2px -2px 12px #fff, 5px 5px 12px rgb(0, 0, 0, 0.15);
border: none;
cursor: pointer;
border-radius: 50%;
margin: 8px;
font-size: 16px;
}
button:hover{
background-color: red;
color: #fff;
}
.equal{
width: 115px;
border-radius: 40px;
background-color: #ecf0f3;
box-shadow: -1px -1px 12px #fff, 5px 5px 12px rgb(0, 0, 0, 0.15);
}
Last step, you create a javascript file which name is "main.js", then open this file with your editor and write below the code.
main.js
let outputScreen = document.getElementById('viewScreen');
function display(num)
{
outputScreen.value += num
}
function calculate()
{
try{
outputScreen.value = eval(outputScreen.value);
}catch(err){
alert('Invalid')
}
}
function Clear()
{
outputScreen.value = "";
}
function del()
{
outputScreen.value = outputScreen.value.slice(0, -1);
}
Now, open the index.html file with your browser. Finally, We build a calculator using Html, CSS and JavaScript. Let's try your for improve your skill and make a calculator.
Github Code: https://github.com/RakibAlom/Calculator
Tutor: Rakib Alom
Preview of Coding
(3)
Login first for like post.
Nice Post
great info thank you ! online training --> https://www.igmguru.com/