How to make a simple calculator using HTML+CSS+JavaScript

JavaScript is an essential part of front-end development, because the realization of page functions cannot be separated from JS. As a front-end developer, can you use JavaScript to make a simple calculator? This article will tell you how to make a simple calculator using HTML, CSS, and JavaScript, and it can realize the functions of addition, subtraction, multiplication and division. It has certain reference value and interested friends can take a look.

Making a simple calculator requires a lot of CSS attributes, HTML tags and JavaScript knowledge. If you are unclear, you can refer to the relevant articles on the PHP Chinese website, or visit JavaScript video tutorial , hope it helps you.

Instance description: Use HTML and CSS to build a page, use JavaScript to implement the functions of addition, subtraction, multiplication and division. When you click to clear, the input box has no value. When you click "=", the calculation result is displayed. The specific code is as follows :

HTML part:

<div class="center">
   <h1 id="计算器">计算器</h1>   
   <form name="calculator">
    <input type="button" id="clear" class="btn other" value="C">
    <input type="text" id="display">
     <br>
    <input type="button" class="btn number" value="7" onclick="get(this.value);">
    <input type="button" class="btn number" value="8" onclick="get(this.value);">
    <input type="button" class="btn number" value="9" onclick="get(this.value);">
    <input type="button" class="btn operator" value="+" onclick="get(this.value);">
     <br>
    <input type="button" class="btn number" value="4" onclick="get(this.value);">
    <input type="button" class="btn number" value="5" onclick="get(this.value);">
    <input type="button" class="btn number" value="6" onclick="get(this.value);">
    <input type="button" class="btn operator" value="*" onclick="get(this.value);">
     <br>
    <input type="button" class="btn number" value="1" onclick="get(this.value);">
    <input type="button" class="btn number" value="2" onclick="get(this.value);">
    <input type="button" class="btn number" value="3" onclick="get(this.value);">
    <input type="button" class="btn operator" value="-" onclick="get(this.value);">
     <br>
    <input type="button" class="btn number" value="0" onclick="get(this.value);">
    <input type="button" class="btn operator" value="." onclick="get(this.value);">
    <input type="button" class="btn operator" value="/" onclick="get(this.value);">   
    <input type="button" class="btn other" value="=" onclick="calculates();">
   </form>
  </div>

CSS part:

* {
    border: none;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
   }   
   .center {
    background-color: #fff;
    border-radius: 50%;
    height: 600px;
    margin: auto;
    width: 600px;
   }
   h1 {
    color: #495678;
    font-size: 30px; 
    margin-top: 20px;
    padding-top: 50px;
    display: block;
    text-align: center;
   }   
   form {
    background-color: #495678;
    margin: 40px auto;
    padding: 40px 0 30px 40px; 
    width: 280px;
   }
   .btn {
    outline: none;
    cursor: pointer;
    font-size: 20px;
    height: 45px;
    margin: 5px 0 5px 10px;
    width: 45px;
   }
   .btn:first-child {
    margin: 5px 0 5px 10px;
   }
   .btn, #display, form {
    border-radius: 25px;
   }
   #display {
    outline: none;
    background-color: #98d1dc;
    color: #dededc;
    font-size: 20px;
    height: 47px;
    text-align: right;
    width: 165px;
    padding-right: 10px;
    margin-left: 10px;
   }
   .number {
    background-color: #72778b;
    color: #dededc;
   }
   .number:active {
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      -moz-tranform: translateY(2px);
      transform: translateY(2px);
   }
   .operator {
    background-color: #dededc;
    color: #72778b;
   }
   .operator:active {
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      -moz-tranform: translateY(2px);
      transform: translateY(2px);
   }
   .other {
    background-color: #e3844c;
    color: #dededc;
   }
   .other:active {
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      -moz-tranform: translateY(2px);
      transform: translateY(2px);
   }

JavaScript part:

/* limpa o display */ 
  document.getElementById("clear").addEventListener("click", function() {
   document.getElementById("display").value = "";
  });
  /* recebe os valores */
  function get(value) {
   document.getElementById("display").value += value; 
  }   
  /* calcula */
  function calculates() {
   var result = 0;
   result = document.getElementById("display").value;
   document.getElementById("display").value = "";
   document.getElementById("display").value = eval(result);
  };

The effect is as shown in the figure:

The above has shared with you the code for making a simple calculator using HTML, CSS and JavaScript. It may be difficult for beginners. Don’t worry. After you learn the basic knowledge solidly, I believe that It’s easy for you to understand, I hope this article will be helpful to you!

【Recommended tutorials】

1. JavaScript Chinese Reference Manual
2. CSS3 Tutorial
3. bootstrap tutorial

The above is the detailed content of How to make a simple calculator using HTML+CSS+JavaScript. For more information, please follow other related articles on the PHP Chinese website!