Working Calculator using HTML CSS & jQuery

Hello readers, Today in this blog you’ll learn how to build a Calculator using HTML CSS & jQuery.
Do you ever imagine what you can do you using JavaScript or jQuery? Javascript allows you to do all that you will never think about. At this time JavaScript is one of the most demanding programming languages.

As you can see in the image, this is a Calculator. You will find a calculator program the same as this on a very familiar website like CodePen, but that program will be very difficult. If you are a beginner or watching for simple code then definitely difficult you to understand.

In the image, there are some buttons and numbers. When you click on that specific button, the number of that button will be shown on the display.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <!-- <title>Calculator</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  </head>
  <body>
    <div class="center">
      <form name="forms">
        <input type="text" id="display" name="display" disabled>
        <div class="buttons">
          <input type="button" id="seven" value="7">
          <input type="button" id="eight" value="8">
          <input type="button" id="nine" value="9">
          <input type="button" id="divide" value="/"><br>
          <input type="button" id="four" value="4">
          <input type="button" id="five" value="5">
          <input type="button" id="six" value="6">
          <input type="button" id="multi" value="*"><br>
          <input type="button" id="one" value="1">
          <input type="button" id="two" value="2">
          <input type="button" id="three" value="3">
          <input type="button" id="subs" value="-"><br>
          <input type="button" id="dot" value=".">
          <input type="button" id="zero" value="0">
          <input type="button" id="add" value="+">
          <input type="button" id="clear" value="C"><br>
          <input type="button" id="equal" value="=">
        </div>
</form>
</div>
<script src="script.js"></script>

  </body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(#9cebfc,#6ae1fb);
}
.center{
  /* display: none; */
  width: 350px;
  background: black;
  border-radius: 20px;
}
input[type="text"]{
  height: 60px;
  width: 300px;
  margin-top: 40px;
  border-radius: 1px;
  border: 1px solid #e1e7ea;
  color: black;
  font-size: 22px;
  font-weight: bold;
  text-align: right;
  padding-right: 20px;
  background: linear-gradient(#d1dce0,#dfe6e9);
}
form .buttons{
  width: 300px;
  margin: 10px 25px 0 25px;
  padding: 10px 0;
}
input[type="button"]{
  width: 58px;
  height: 55px;
  margin: 5px;
  font-size: 22px;
  line-height: 55px;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  background: linear-gradient(#d9d9d9, #bfbfbf);
}
input[type="button"]:hover{
  transition: .5s;
  background: linear-gradient(#bfbfbf, #d9d9d9);
}
input#clear{
  background: #ff1a1a;
  border: 1px solid #cc0000;
  color: white;
}
input#equal{
  width: 275px;
  margin: 10px 0 10px 0;
  font-size: 30px;
  color: white;
  background: #ff3d00;
  border: 1px solid #b32a00;
}

Javascript

$(document).ready(function()
{
  $('#one').click(function(){
    document.forms.display.value += 1;
  });
  $('#two').click(function(){
    document.forms.display.value += 2;
  });
  $('#three').click(function(){
    document.forms.display.value += 3;
  });
  $('#four').click(function(){
    document.forms.display.value += 4;
  });
  $('#five').click(function(){
    document.forms.display.value += 5;
  });
  $('#six').click(function(){
    document.forms.display.value += 6;
  });
  $('#seven').click(function(){
    document.forms.display.value += 7;
  });
  $('#eight').click(function(){
    document.forms.display.value += 8;
  });
  $('#nine').click(function(){
    document.forms.display.value += 9;
  });
  $('#zero').click(function(){
    document.forms.display.value += 0;
  });
  $('#add').click(function(){
    document.forms.display.value += '+';
  });
  $('#subs').click(function(){
    document.forms.display.value += '-';
  });
  $('#multi').click(function(){
    document.forms.display.value += '*';
  });
  $('#divide').click(function(){
    document.forms.display.value += '/';
  });
  $('#dot').click(function(){
    document.forms.display.value += '.';
  });
  $('#equal').click(function(){
    if (display.value == "") {
      alert("Please enter any numbers to calculate!");
    }else{
      document.forms.display.value =
      eval(document.forms.display.value);
    }
  });
  $('#clear').click(function(){
    document.forms.display.value = "";
  });
})