# Simple JavaScript Calculator Using Vanilla JavaScript

In this tutorial we have made Simple JavaScript Calculator Using Vanilla JavaScript. The HTML, CSS and JavaScript code is given below.

## HTML Code

HTML Code is given below.

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple JAVASCRIPT CALCULATOR</title> </head> <body> <form> <h1>SIMPLE JAVASCRIPT CALCULATOR</h1> <input id="input1" type="text" placeholder="Enter First Number"> <input id="input2" type="text" placeholder="Enter Second Number"> <input type="submit" onclick="add()" value="ADD"> <input type="submit" onclick="sub()" value="SUBTRACT"> <input type="submit" onclick="mul()" value="MULTIPLY"> <input type="submit" onclick="div()" value="DIVIDE"> <p>HowToCodeSchool.com</p> </form> </body> </html> ```

## CSS Code

CSS Code is given below.

``` body { font-family: monospace; display: flex; align-items:center; justify-content: center; height: 100vh; margin: 0px; background-color: #22438C; color: #fff; } form { width: 700px; text-align: center; } form input[type="text"],form input[type="submit"] { width: 100%; padding: 20px 5px; font-weight: 900; box-sizing: border-box; background-color: #fff; color: #22438C; border: 1px solid #aaa; } ```

## JavaScript Code

JavaScript Code is given below. Four different functions are used for four different mathematical operations, addition, subtraction, multiplication and division.

``` <script> function add() { var a = document.getElementById("input1").value; var b = document.getElementById("input2").value; var c= parseInt(a)+parseInt(b); alert(c); } function sub() { var a = document.getElementById("input1").value; var b = document.getElementById("input2").value; var c=a-b; alert(c); } function mul() { var a = document.getElementById("input1").value; var b = document.getElementById("input2").value; var c=a*b; alert(c); } function div() { var a = document.getElementById("input1").value; var b = document.getElementById("input2").value; var c=a/b; alert(c); } </script> ```

## Video Tutorial

Watch video tutorial on how to create Simple JavaScript Calculator Using HTML, CSS and JavaScript.