Working Calculator using HTML, CSS & jQuery Sources Code

Ashish Kumar Dangi Wednesday, July 29, 2020 C
Working Calculator using HTML, CSS & jQuery



Hello readers, Today in this blog you'll learn how to build a Calculator using HTML CSS & jQuery. Previously I have shared a Working Analog Clock using HTML CSS & Javascript, now it's time to create a Working Calculator using 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 difficult to understand what I am saying. You can watch a full video tutorial on this program (Working Calculator).








Video Tutorial of Advanced Drop-down Menu Animation


COMMING SOON


I hope you have understood the designs, concepts, and codes. I think this video can help beginners to know CSS in depth. If you want to get the source code of this program (Working Calculator). You can easily get from the link which is given below.

You can also build this calculator according to requirements after a few changes. Also, you can redesign this program to take this Calculator to the next level.

Working Calculator using HTML CSS & jQuery [Source Codes]

As always, before sharing the codes of this program (Working Calculator). Let's a few talk about the main tags and codes of this Calculator. As you have seen in the video, this is <input> type button-based calculator that's why we can easily create buttons for the calculator.

First I created a div tag with the class name "center" and place all elements inside it. Then I created a form tag and place all inputs tag inside it to create a button. After working in an HTML file, I created a CSS file to style all forms such as display, buttons, background, etc. You can see in the video for a better understanding. All the clickable events are done by Javascript (JQuery).

There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this program. But, don't worry you'll understand all codes and programs after getting the source code of this Calculator.

To create this program (Working Calculator). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.




  • HTML File


<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.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>
$(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 = "";
  });
})
</script>

  </body>
</html>


  • CSS File:-



*{
  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;
}






Source Code by Ashish Kumar !

Thanks You Guys For Using THis Source Code!

Post a Comment

0 Comments