how to build a simple calculator using javascript


Coding BD given how to build a simple calculator using javascript. You can Build A Calculator With JavaScript. We Create a simple Calculator using Html CSS and JavaScript. It is the most important part Of Javascript Simple Calculator Tutorial. We have given more importance to Making a Calculator with Basic HTML,CSS and JavaScript. They used pure vanilla javascript effects. because they need highly effective effects. Thank you so much. 

😍😍 If You like this video Please like, share and subscribe This video.😍😍

😍😍 Check Others Programming Video👇

➡️ creative button hover effects:

➡️ How to Download Source code in Coding BD:

➡️Responsive website html css javascript | part( 1 ):…

➡️ Responsive Services Section:…

➡️ CSS Clip Path Hover Circle Hover Effects:…

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021:…

➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border:…

➡️ Responsive Box Model Web Design Using CSS Flexbox:…

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript:…

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021:…

➡️Scroll top button :…

➡️ Animated eid mubarak 2021 using Html CSS & Javascript:…

Here is all Source code ( Present your own country ). You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">


        <tr class="header_input">
                <input type="text" placeholder="0" id="input" readonly='readonly'>
                <input type="text" id="ansower" readonly='readonly'>
        <!---------------------------- button section of the Calcolator---------------- -->
            <td class="calculate_btn">
                <input type="button" value="CE" onclick="clearScreen()" style="color: #fff; background-color: hotpink;">
                <input type="button" value="÷" onclick="getOperand('/')">
                <input type="button" value="x" onclick="getOperand('x')">
                <input type="button" value="←" onclick="backspace()" style="color: red;">
                <input type="button" value="1" onclick="getNumber(1)">
                <input type="button" value="2" onclick="getNumber(2)">
                <input type="button" value="3" onclick="getNumber(3)">
                <input type="button" value="+" onclick="getOperand('+')">
                <input type="button" value="4" onclick="getNumber(4)">
                <input type="button" value="5" onclick="getNumber(5)">
                <input type="button" value="6" onclick="getNumber(6)">
                <input type="button" value="-" onclick="getOperand('-')">
                <input type="button" value="7" onclick="getNumber(7)">
                <input type="button" value="8" onclick="getNumber(8)">
                <input type="button" value="9" onclick="getNumber(9)">
                <input type="button" value="( )" onclick="brackets()">
                <input type="button" value="+/-" onclick="getOperand('+/-')">
                <input type="button" value="0" onclick="getNumber(0)">
                <input type="button" value="=" onclick="compute()"
                    style="width: 120px; height: 45px; font-size: 30px; color: #fff; background-color: hotpink;">
    <script src="script.js"></script>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

body {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #ebe9e9;

table {
  width: 340px;
  background: #ffffff;
  box-shadow: 0 15px 20px 0 rgb(55 84 170 / 10%);
  border: none;
  overflow: hidden;
  padding: 0px 0 20px 0;
  margin: 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;

.header_input {
  background: #d9dadf;
#ansower {
  width: 100%;
  height: 60px;
  font-size: 210%;
  text-align: right;
  border: none;
  padding: 0 10px;
  outline: none;
#input {
  color: #1b1916;

#ansower {

input[type="button"] {
  height: 60px;
  width: 60px;
  margin: 5px;
  font-size: 130%;
  border-radius: 50px;
  transition: 0.5s;
  border: none;
  background: #ebe9e9;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
input[type="button"]:hover {
  background: #d9dadf;
  cursor: pointer;
  outline: none;

.calculate_btn {
  width: 100%;
  padding: 10px 20px;

Don’t Forget to Follow me on all Social Network


Facebook Page:



You can see css image hover overlay effects

Leave a Reply

Your email address will not be published. Required fields are marked *