HTML CSS & JAVASCRIPT, YouTube

how to build a simple calculator using javascript

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: https://www.youtube.com/watch?v=3FbyiuhhhTI

➡️ How to Download Source code in Coding BD: https://www.youtube.com/watch?v=WXAZ-BScKBE&t=3s

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART…

➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLky…

➡️ CSS Clip Path Hover Circle Hover Effects: https://www.youtube.com/watch?v=cRSgo…

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5…

➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF…

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuV…

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6Hp…

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR…

➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJ…

➡️ Animated eid mubarak 2021 using Html CSS & Javascript: https://www.youtube.com/watch?v=60H2g…

https://youtube.com/watch?v=dnCfBet94r8%3Ffeature%3Doembed

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">

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

<body>

    <table>
        <tr class="header_input">
            <td>
                <input type="text" placeholder="0" id="input" readonly='readonly'>
                <input type="text" id="ansower" readonly='readonly'>
            </td>
        </tr>
        <!---------------------------- button section of the Calcolator---------------- -->
        <tr>
            <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;">
                <br>
                <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('+')">
                <br>
                <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('-')">
                <br>
                <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()">
                <br>
                <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;">
            </td>
        </tr>
    </table>
    <script src="script.js"></script>
</body>

</html>
* {
  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;
}
#input,
#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

YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw

Facebook Page: https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat-ho… 

GitHub: https://github.com/cgsaleh8383

You can see css image hover overlay effects

Leave a Reply

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