How To Create A Calculator in HTML CSS & JavaScript

Creating a Calculator in HTML CSS & JavaScript

To create a working calculator using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

When you make these records, glue the given codes into the predetermined documents. If you would rather not do these then look down and download all the source code records of the Number cruncher, by tapping on the given download button.

Paste this code in html file (HTML Code) :

<!doctype html>
<html> 
 <head> 
  <title>Calculator</title> 
  <link rel="stylesheet" href="style.css">
  <script src="style.js"></script>
  </head> 
 <body> 
  <div class="calculator"> 
   <input type="text" id="result" value="0"> 
   <div class="buttons"> <button onclick="display('1')">1</button> 
<button onclick="display('2')">2</button> <button onclick="display('3')">3</button> 
<button onclick="display('+')">+</button> 
   </div> 
   <div class="buttons"> <button onclick="display('4')">4</button> 
<button onclick="display('5')">5</button> <button onclick="display('6')">6</button> 
<button onclick="display('-')">-</button> 
   </div> 
   <div class="buttons"> <button onclick="display('7')">7</button> 
<button onclick="display('8')">8</button> <button onclick="display('9')">9</button> 
<button onclick="display('')"></button> 
   </div> 
   <div class="buttons"> <button onclick="display('0')">0</button> 
<button onclick="display('.')">.</button> <button onclick="calculate()">=</button> 
<button onclick="clearScreen()">C</button> 
   </div> 
  </div> 
 </body>
</html>

Paste this code in Css file (CSS Code) :

.calculator {
  width: 200px;
  margin: 0 auto;
  border:2px solid Black;
  margin: 10px;
  padding: 15px;
  background-color: black; 
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  border:2px solid black;
}

button {
  width: 50px;
  height: 50px;
  background-color: #ccc;
  color: #000;
  border: none;
  cursor: pointer;
  border:1px solid black;
}

button:hover {
  background-color: #aaa;
}

input {
  width: 95%;
  height: 50px;
  border: none;
  text-align: right;
  font-size: 20px;
  background-color:gray;
  color : white;
  border-radius:5px;
  margin-bottom :10px;
  padding:5px;
}

Paste this code in Javascript file (JAVASCRIPT Code) :

function display(value) {
    var result = document.getElementById("result");
    result.value += value;
  }
  
  function calculate() {
    var result = document.getElementById("result").value;
    var expression = eval(result);
    document.getElementById("result").value = expression;
  }
  
  function clearScreen() {
    var result = document.getElementById("result");
    result.value = "";
  }

And our Calculator is ready !