Home
Programming

Simple Calculator With Vanilla JavaScript

Syiainfoku make a Simple Calculator With Vanilla JavaScript

Simple Calculator With Vanilla JavaScript

Hello everyone, I am the founder of Syiainfoku. Today in Syiainfoku you will learn how to create a Simple Calculator With Vanilla JavaScript.

Simple Calculator is also a JavaScript Mini Project, and very useful to train you, if you are just starting to learn JS. And many people suggest you to practice creating some Mini Projects JS so that you understand JS better.

Preview Simple Calculator 

Preview Simple Calculator

In my Simple Calculator design, there will be several elements in it which you can also customize to your liking. 

  1. Column to display calculation results
  2. "C" button = delete
  3. Keys /, *, +. -. etc
  4. Number keys from 1-9 and the number 0

Source Code and Brief Explanation

To make this program [Simple Calculator with Vanilla JavaScript]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Simple Calculator from the given download button.

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

Note: Here I use JS in my HTML file, because the required JS code is quite simple and short, so I input it directly into the HTML file without using external JS

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./assets/style.css">
  <title>Simple Calculator | hitoricoding</title>
</head>

<body>
  <form action="" class="calculator" name="calc">
    <input class="value" type="text" name="txt" readonly="">
    <span class="num clear" onclick="document.calc.txt.value =''">C</span>
    <span class="num" onclick="document.calc.txt.value +='/'">/</span>
    <span class="num" onclick="document.calc.txt.value +='*'">*</span>
    <span class="num" onclick="document.calc.txt.value +='7'">7</span>
    <span class="num" onclick="document.calc.txt.value +='8'">8</span>
    <span class="num" onclick="document.calc.txt.value +='9'">9</span>
    <span class="num" onclick="document.calc.txt.value +='-'">-</span>
    <span class="num" onclick="document.calc.txt.value +='4'">4</span>
    <span class="num" onclick="document.calc.txt.value +='5'">5</span>
    <span class="num" onclick="document.calc.txt.value +='6'">6</span>
    <span class="num plus" onclick="document.calc.txt.value +='+'">+</span>
    <span class="num" onclick="document.calc.txt.value +='3'">3</span>
    <span class="num" onclick="document.calc.txt.value +='2'">2</span>
    <span class="num" onclick="document.calc.txt.value +='1'">1</span>
    <span class="num" onclick="document.calc.txt.value +='0'">0</span>
    <span class="num" onclick="document.calc.txt.value +='00'">00</span>
    <span class="num" onclick="document.calc.txt.value +='.'">.</span>
    <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
  </form>
</body>

</html>

Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000723;
}

.calculator {
  position: relative;
  display: grid;
}

.calculator .value {
  border-radius: 5px;
  grid-column: span 4;
  height: 100px;
  text-align: right;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 18px;
  font-weight: 600;
}

.calculator span {
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  width: 75px;
  height: 75px;
  color: #000;
  background: #bfd3d9;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.calculator span:active {
  background: #54e31a;
  color: #fff;
}

.calculator span.clear {
  grid-column: span 2;
  width: 150px;
  background: #f26691;
}

.calculator span.plus {
  grid-row: span 2;
  height: 150px;
}

.calculator span.equal {
  background: #1eb7cc;
}

That's it, now you have successfully created a Simple Calculator with Vanilla JavaScript, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it. 

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment