Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 2, 2020 06:38 pm GMT

How To Make Calculator Using HTML, CSS, and JavaScript

I Santanu Jana I will teach you how you can make a calculator using only HTML, CSS, and JavaScript programming language. JavaScript programming language is more important when building a calculator. This is exactly how I made the following calculator. I used Java programming code to make this calculator. Also used some amount of HTML and a small amount of CSS. In this article, I will try to explain to you in a complete way how to make a JavaScript calculator.
Alt Text
Demo: Click Here

Download Code: Click Here

Some information about this calculator

  • I used simple HTML, CSS, and JavaScript programming code to build this calculator.
  • I made it very easy i.e. I used the simplest programming code so that you can understand very easily.
  • I have put in this calculator everything that is in a simple calculator. With the help of this calculator, you can solve all the minor mathematics problems like addition, multiplication, division, subtraction, etc.
  • The background of this calculator is black and the buttons here are rounded.
  • Below is a player's button, which means that by clicking there you can delete your calculations and make new calculations.

All in all, this is a great calculator that uses only simple programming code.

I would especially request you to download the codes by clicking on the download button there. Because when I uploaded these codes, I had some problems with Google, so I added some comments. However, these comments do not change your programming in any way. It would be best if you download the code by clicking on the download button.

How To Create This Calculator

Below I have shown you the method I used to make this calculator. So you can easily make this calculator. Here I have shown you in three steps how to make this calculator.

First of all, you have to create an HTML file. To create an HTML file, open Notepad and copy and paste the structure below into your Notepad. Then rename it to your liking and save it with dot HTML.

<html><head>    <style>         Add Css Code    </style></head><body>         Add HTML Code       <script>              Add JavaScript Code      </script></body></html>
Enter fullscreen mode Exit fullscreen mode

Add HTML Code
The code below is the HTML code. You copy those codes and paste them in place of the ad HTML written in the structure of your HTML file. You can also paste these codes into body tags if you want to add them to any of your other projects.

<div class="calc">  <div class="calc-title">    <span class="calc-title-span">      Calculater    </span>    <div class="calc-title-hr"></div>  </div>  <div class="calc-display">    <div class="calc-display-span secondary-display" id="secondary-display">    </div>    <div class="calc-display-span primary-display" id="display">    </div>        <!-- <div class="calc">  <div class="calc-title">    <span class="calc-title-span"> -->  </div>  <div class="calc-display-hr"></div>  <div class="calc-btn" id="btn">    <button class="calc-btn-primary" id="seven">7</button>    <button class="calc-btn-primary" id="eight">8</button>    <button class="calc-btn-primary" id="nine">9</button>    <button class="calc-btn-primary btn-bg" id="divide">/</button>    <button class="calc-btn-primary" id="four">4</button>    <button class="calc-btn-primary" id="five">5</button>    <!-- <div class="calc">  <div class="calc-title">    <span class="calc-title-span"> -->    <button class="calc-btn-primary" id="six">6</button>    <button class="calc-btn-primary btn-bg" id="multiply">*</button>    <button class="calc-btn-primary" id="one">1</button>    <button class="calc-btn-primary" id="two">2</button>    <button class="calc-btn-primary" id="three">3</button>    <button class="calc-btn-primary btn-bg" id="add">+</button>    <button class="calc-btn-primary btn-bg" id="decimal">.</button>    <button class="calc-btn-primary" id="zero">0</button>        <!-- <div class="calc">  <div class="calc-title">    <span class="calc-title-span"> -->    <button class="calc-btn-primary btn-bg-equal" id="equals">=</button>    <button class="calc-btn-primary btn-bg" id="subtract">-</button>    <button class="calc-btn-clear" id="clear">clear</button>  </div></div>
Enter fullscreen mode Exit fullscreen mode

Add CSS Code
The following codes are CSS codes. You copy the following codes and paste them into your HTML file in place of Ad CSS. If you want to add this code to any of your other projects, you can paste the style tags into the head tags.

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900');body {  width : 100%;  height : 750px;  display: flex;  flex-direction : column;  justify-content: center;  align-items: center;  font-family: 'Montserrat', sans-serif;  background-color: #ebedef;  padding: 0;  margin: 0;}/*font-family: 'Montserrat', sans-serif;  background-color: #ebedef;  padding: 0;*/.calc {  display: flex;  flex-direction : column;  width: 330px;  height: 600px;  margin : 10px;  background-color: #000000;  background-image: linear-gradient(315deg, #000000 0%, #414141 104%);  border-radius: 20px;  box-shadow : 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);}/*font-family: 'Montserrat', sans-serif;  background-color: #ebedef;  padding: 0;*/.calc-title {  display: flex;  flex-direction: column;  justify-content: center;  height: 40px;  align-items: center;}/*font-family: 'Montserrat', sans-serif;  background-color: #ebedef;  padding: 0;*/.calc-title-span {  color: #fb7454;  font-size: 15px;  letter-spacing: 1px;  font-weight: 700;  line-height: 20px;}.calc-title-hr {  width: 200px;  height: 3px;  background-color: #fb7454;  opacity: 0.8;}/*font-family: 'Montserrat', sans-serif;  background-color: #ebedef;  padding: 0;*/.calc-display {  display: flex;  flex-direction: column;  justify-content: space-around;  align-items: center;  width: 100%;  height: 100px;  color: #fff; }/*font-family: 'Montserrat', sans-serif;  background-color: #ebedef;  padding: 0;*/.secondary-display{  font-size:20px;  opacity : 0.8;  overflow-x : hidden;}.secondary-display::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    background-color: #F5F5F5;}.secondary-display::-webkit-scrollbar {  height : 4px;    background-color: #bdbdbd;  opacity: 0.7;}/*font-family: 'Montserrat', sans-serif;  background-color: #ebedef;  padding: 0;*/.secondary-display::-webkit-scrollbar-thumb {    border-radius: 10px;    background-color: #000000;      border: 3px solid #555555;}.primary-display::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    background-color: #F5F5F5;}/*font-family: 'Montserrat', sans-serif;  background-color: #ebedef;  padding: 0;*/.primary-display::-webkit-scrollbar {  height : 4px;    background-color: #bdbdbd;  opacity: 0.7;}.primary-display::-webkit-scrollbar-thumb {    border-radius: 10px;    background-color: #000000;      border: 3px solid #555555;}/*font-family: 'Montserrat', sans-serif;  background-color: #ebedef;  padding: 0;*/.calc-display-hr {  width: 250px;  height: 2px;  margin-top: 10px;  align-self: center;  background-color: #bdbdbd;  opacity: 0.4;}.calc-btn {  display: flex;  align-items: center;  justify-content: space-around;  flex-wrap: wrap;  margin: 20px;}/*border-radius: 10px;    background-color: #000000;      border: 3px solid #555555;*/.calc-btn-primary {  cursor: pointer;  font-family: 'Montserrat', sans-serif;  margin: 10px 5px;  outline: none;  border: none;  background-color: transparent;  color: #fff;  font-size: 30px;  width: 60px;  height: 60px;  border: 2px solid #616161;  border-radius: 100%;}/*border-radius: 10px;    background-color: #000000;      border: 3px solid #555555;*/.btn-bg{  background-color:#424242 !important;  opacity : 0.9;  border : none !important;}.btn-bg-equal{  background-color:#ff7555 !important;  border : none !important;}.calc-btn-primary:focus {  outline:none}/*border-radius: 10px;    background-color: #000000;      border: 3px solid #555555;*/.calc-btn-primary:active {  transform: scale(0.9);}.calc-btn-clear {  margin: 20px 5px;  outline: none;  border: none;  background-color: transparent;  color: #fff;  font-size: 30px;  padding: 10px 90px;  border: 3px solid #ff7555;  border-radius: 10px;}/*border-radius: 10px;    background-color: #000000;      border: 3px solid #555555;*/.calc-btn-clear:active {  transform: scale(0.9);}
Enter fullscreen mode Exit fullscreen mode

Add JavaScript Code
The codes written below are the JavaScript code that plays the most significant role in making this calculator. You copy the JavaScript code below and paste it into your HTML file where the ad javascript is written. If you want to add these codes to another project, you must paste the JavaScript codes inside the body tags into the script tags.

console.clear();const btns = document.getElementById("btn");const primaryDisplay = document.getElementById("display");const secondaryDisplay = document.getElementById("secondary-display");let currentString = '';let resultString = '';let evalResult;let lastOperator = false;const primaryRender = (value) => {  primaryDisplay.innerText = value;}/*let currentString = '';let resultString = '';let evalResult;let lastOperator = false;*/const secondaryRender = (value) => {  secondaryDisplay.innerText = value;}secondaryRender('0');primaryRender('0');const evaluate = (e) => {  let width = secondaryDisplay.scrollWidth;  if(width > 310){    secondaryDisplay.style.overflowX = 'scroll';    secondaryDisplay.scrollLeft = width;  }  /*let currentString = '';let resultString = '';let evalResult;let lastOperator = false;*/  else{    secondaryDisplay.style.overflowX = 'hidden';  }  let value = e.target.innerText;  if (value >= '0' && value <= '9') {    let len = currentString.length;    let lastOp = isOp(currentString[len - 1]);    if (lastOperator) {      currentString = currentString.concat(value);      resultString = "".concat(value);      secondaryRender(currentString);      primaryRender(resultString);      lastOperator = false;      /*let currentString = '';let resultString = '';let evalResult;let lastOperator = false;*/    } else {      currentString = currentString.concat(value);      resultString = resultString.concat(value);      secondaryRender(currentString);      primaryRender(resultString);    }  } else if (isOp(value)) {    if (currentString.length == 0 && (value == '/' || value == '*'));    /*let currentString = '';let resultString = '';let evalResult;let lastOperator = false;*/    else {      resultString = "";      primaryRender(value);      lastOperator = true;      let len = currentString.length;      let lastOp = isOp(currentString[len - 1]);      if (lastOp) {        currentString = currentString.substr(0, len - 1) + value;        console.log(currentString);        secondaryRender(currentString);        decimal = false;      } else {        currentString = currentString.concat(value);        secondaryRender(currentString);      }    }/*let currentString = '';let resultString = '';let evalResult;let lastOperator = false;*/  } else if (value == '.') {    if (resultString.indexOf('.') < 0) {      if (resultString.length == 0) {        currentString = currentString.concat('0.');        resultString = resultString.concat('0.');        secondaryRender(currentString);        primaryRender(resultString);      }/*let currentString = '';let resultString = '';let evalResult;let lastOperator = false;*/       else {        currentString = currentString.concat(value);        resultString = resultString.concat(value);        secondaryRender(currentString);        primaryRender(resultString);      }    }  } else if (value == '=') {    secondaryDisplay.style.overflowX = 'hidden';    if (currentString.length == 0);    else {      let result = eval(currentString);      resultString = '';      currentString = '';      secondaryRender('0');      primaryRender(result);    }/*let currentString = '';let resultString = '';let evalResult;let lastOperator = false;*/  } else if (value == 'clear') {    currentString = '';    resultString = '';    secondaryRender('0');    primaryRender('0');  }    let width1 = primaryDisplay.scrollWidth;    if(width1 > 310){      primaryDisplay.style.overflowX = 'scroll';    }    else{      primaryDisplay.style.overflowX = 'hidden';    }}/*let currentString = '';let resultString = '';let evalResult;let lastOperator = false;*/for (let elem of btns.children) {  elem.addEventListener('click', evaluate);}function isOp(value) {  return (/\+|\-|\*|\//).test(value);}
Enter fullscreen mode Exit fullscreen mode

Hopefully, you have followed the above three methods very easily and correctly. In this article, I have tried to show you very easily how to make a JavaScript calculator. With that, I have given you the necessary source code completely free so that you can learn and know better.
Special thanks to you for reading the end of the article


Original Link: https://dev.to/backlinkn/how-to-make-calculator-using-html-css-and-javascript-500f

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To