Easy way to build a calculator using HTML, CSS, and Javascript

byHyperLink -
0

Today, we'll use JavaScript to build a simple calculator. We use HTML and CSS to give the design to the calculator

JavaScript, also known as the "scripting language" for websites, is a powerful tool. As we all know, a calculator will perform all of our basic operations, such as addition, subtraction, multiplication, and division. You should be familiar with HTML and CSS to get started. We'll take care of the section with JavaScript code.

Easy way to build a calculator using HTML, CSS, and Javascript

Let's Move on to it

Requirements for constructing a calculator with the JavaScript 

  • IDE (Integrated Development Environment)
  • Compiler for local server/online
For Testing the code you can use the compiler here

Internal CSS will be used in our JavaScript calculator. First, we must determine how many buttons we would need. For the time being, we'll keep our simplistic calculator to the bare essentials. As a result, here is a list of elements:

The display screen 

This will be used for both user input and output data. Even if we build the whole calculator, it will be useless if it does not have a real-time display screen.

Buttons

For a simple calculator, we'll need at least 17 buttons:

Here is the code for HTML 

<html>
<head>
<meta charset="utf-8">
<title>JavaSctipt Calculator</title>
  <link rel="stylesheet" href="style.css">
</head>
 
<body>

  <div class="container">
    <form name="form" id="form">
        
    <div class="display">
        <input type="text" name="result" class="result" id="result" value="" placeholder="0" readonly />    </div>
      <div class="buttons">
        <input type="button" onclick="newFunction()" value="C">
        <div class="row">
            <input type="button" value="7" id="seven" onclick="calculate(7)" />
            <input type="button" value="8" id="eight" onclick="calculate(8)" />
            <input type="button" value="9" id="nine" onclick="calculate(9)" />
            <input type="button" value="x" onclick="calculate('*')" />
        </div>
        
        <div class="row">
            <input type="button" value="4" id="four" onclick="calculate(4)" />
            <input type="button" value="5" id="five" onclick="calculate(5)" />
            <input type="button" value="6" id="six" onclick="calculate(6)" />
            <input type="button" value="-" onclick="calculate('-')" />
        </div>
        
        <div class="row">
            <input type="button" value="1" onclick="calculate(1)" id="one" />
            <input type="button" value="2" onclick="calculate(2)" id="two" />
            <input type="button" value="3" id="three" onclick="calculate(3)" />
            <input type="button" value="+" onclick="calculate('+')" />
        </div>
        
        <div class="row">
            <input type="button" value="/" onclick="calculate('/')" />
            <input type="button" value="0" id="zero" onclick="calculate(0)" />
            <input type="button" value="." class="dot" onclick="calculate('.')" />
            <input type="button" value="=" onclick="result.value = eval(result.value)" />
        </div>
      </div>
    </form>
  </div>

Here's where we put our Simple HTML code. Let's use CSS to add some style to this HTML file.

Here is the CSS code.

We are using internal CSS to style this HTML form. So start the code with <style> tag

<style>
 body, html {
 background-image:linear-gradient(blue,whitesmoke);
 margin: 0;
 padding: 0;
}
 
.container {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: #fff;
 box-shadow:  5px 4px 8px 0 rgba(0,0,0,0.2), 6px 6px 20px 0 rgba(0,0,0,0.2);
 border-radius: 14px;
 padding-bottom: 20px;
 width: 320px;
 
}
.display {
 width: 100%;
 height: 60px;
 padding: 40px 0;
 background: #fdf9ef;
 border-top-left-radius: 14px;
 border-top-right-radius: 14px;
}
.buttons {
 padding: 20px 20px 0 20px;
}
.row {
 width: 280px;
 float: left;
}
input[type=button] {
 width: 60px;
 height: 60px;
 float: left;
 padding: 0;
  background: black;
 border: none;
 font-size: 30px;
 margin: 5px;
 box-sizing: border-box;
 line-height: 30px;
 border-radius: 50%;
 font-weight: 700;
 color: whitesmoke;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
 transition:.5s;
 cursor: pointer;
 outline: none;
}
input[type=button]:hover{
 width: 60px;
 height: 60px
cursor: pointer;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
 outline: none;
 float: left;
  line-height: 30px;
 border-radius: 50%;
 font-weight: 700;
 color:black;
 transition:.5s;
 padding: 0;
 margin: 5px;
 box-sizing: border-box;
 background:whitesmoke;
 border: none;
 font-size: 30px;


}
input[type=text] {
 width: 270px;
 height: 60px;
 float: left;
  margin: 0 25px;
 outline: none;
  font-weight: 700;
 font-size: 60px;
 line-height: 60px
 padding: 0;
 box-sizing: border-box;
 border: none;
 background: none;
 color: black;
 text-align: right;

}
 </style>

Using HTML and CSS, we finish the calculator's basic phase. Let's see if we can make this work. It's now time to add Javascript to make everything functional.

Here our Javascript code Goes

 <script>
function calculate(value) {
  document.getElementById("result").value += value;
}
  function newFunction() {
     document.getElementById("form").reset();
        }
 </script>


HTML, CSS, and Javascript help us complete our calculator. Let's combine all of this code.
<html>
<head>
<meta charset="utf-8">
<title>JavaSctipt Calculator</title>
  <link rel="stylesheet" href="style.css">
</head>
 
<body>

  <div class="container">
    <form name="form" id="form">
        
    <div class="display">
        <input type="text" name="result" class="result" id="result" value="" placeholder="0" readonly />    </div>
      <div class="buttons">
        <input type="button" onclick="newFunction()" value="C">
        <div class="row">
            <input type="button" value="7" id="seven" onclick="calculate(7)" />
            <input type="button" value="8" id="eight" onclick="calculate(8)" />
            <input type="button" value="9" id="nine" onclick="calculate(9)" />
            <input type="button" value="x" onclick="calculate('*')" />
        </div>
        
        <div class="row">
            <input type="button" value="4" id="four" onclick="calculate(4)" />
            <input type="button" value="5" id="five" onclick="calculate(5)" />
            <input type="button" value="6" id="six" onclick="calculate(6)" />
            <input type="button" value="-" onclick="calculate('-')" />
        </div>
        
        <div class="row">
            <input type="button" value="1" onclick="calculate(1)" id="one" />
            <input type="button" value="2" onclick="calculate(2)" id="two" />
            <input type="button" value="3" id="three" onclick="calculate(3)" />
            <input type="button" value="+" onclick="calculate('+')" />
        </div>
        
        <div class="row">
            <input type="button" value="/" onclick="calculate('/')" />
            <input type="button" value="0" id="zero" onclick="calculate(0)" />
            <input type="button" value="." class="dot" onclick="calculate('.')" />
            <input type="button" value="=" onclick="result.value = eval(result.value)" />
        </div>
      </div>
    </form>
  </div>

  <style>
  
      body, html {
 background-image:linear-gradient(blue,whitesmoke);
 margin: 0;
 padding: 0;
}
 
.container {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: #fff;
 box-shadow:  5px 4px 8px 0 rgba(0,0,0,0.2), 6px 6px 20px 0 rgba(0,0,0,0.2);
 border-radius: 14px;
 padding-bottom: 20px;
 width: 320px;
 
}
.display {
 width: 100%;
 height: 60px;
 padding: 40px 0;
 background: #fdf9ef;
 border-top-left-radius: 14px;
 border-top-right-radius: 14px;
}
.buttons {
 padding: 20px 20px 0 20px;
}
.row {
 width: 280px;
 float: left;
}
input[type=button] {
 width: 60px;
 height: 60px;
 float: left;
 padding: 0;
  background: black;
 border: none;
 font-size: 30px;
 margin: 5px;
 box-sizing: border-box;
 line-height: 30px;
 border-radius: 50%;
 font-weight: 700;
 color: whitesmoke;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
 transition:.5s;
 cursor: pointer;
 outline: none;
}
input[type=button]:hover{
 width: 60px;
 height: 60px
cursor: pointer;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
 outline: none;
 float: left;
  line-height: 30px;
 border-radius: 50%;
 font-weight: 700;
 color:black;
 transition:.5s;
 padding: 0;
 margin: 5px;
 box-sizing: border-box;
 background:whitesmoke;
 border: none;
 font-size: 30px;


}
input[type=text] {
 width: 270px;
 height: 60px;
 float: left;
  margin: 0 25px;
 outline: none;
  font-weight: 700;
 font-size: 60px;
 line-height: 60px
 padding: 0;
 box-sizing: border-box;
 border: none;
 background: none;
 color: black;
 text-align: right;

}

  </style>
  <script>
function calculate(value) {
  document.getElementById("result").value += value;
}
  function newFunction() {
            document.getElementById("form").reset();
        }

  </script>
</body>
  
</html>


Using CSS, you can design your own calculator. Here is the output of the calculator we just created.



Tags:

Post a Comment

If you have any doubts. Let me know

Previous Post Next Post