Make a Simple Calculator In JavaScript
- Subject: Javascript Tutorials
- Learning Time: 30 minutes
Hi in this tutorial we will be making a Simple Calculator using JavaScript. There will be some elements of HTML and CSS with this tutorial but the main focus is using and getting used to JavaScript Syntaxes. JavaScript is very similar to C# Syntaxes we have used so far but there are some subtle differences with both of them and they both do very different things in the world of software engineering. JavaScript is the most popular programming language and it has been on top of the charts for a very long time. I have been planning to do a lot of JavaScript tutorials for this website for a while and I want to explore the games development element of JavaScript. I found that it was very easy to move over to JavaScript however it is important to know that you will need to have a brief understanding of HTML and CSS. JavaScript doesn’t handle the Images and page elements on its own therefore we need to learn a little bit of HTML and CSS to get us up to speed on this. This is the first of a series of tutorials I will be publishing on the website around JavaScript projects and Games Development. Hope you enjoy this one. Lets get started.
Lesson Objectives:
- Make a Calculator App in JavaScript
- Do basic HTML and CSS styling on the single page
- Capture values from an input box in HTML and PARSE it as an INTEGER
- Create s single function to work with Add, Subtract, Multiply and Divide method
- Use a Switch statement inside of the class to get relevant results
- Use parameters in the function
Video Tutorial
Source Code –
<html>
<head>
<title>Calculator App With MOO ICT</title>
<style>
body
{
color: black;
font-size: 16pt;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}
#main
{
width: 600px;
border: 5px solid orange;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
margin-bottom: auto;
text-align: center;
border-radius: 40px;
background-color: white;
}
input
{
text-align: center;
padding: 5px;
font-size: 15pt;
margin: 10px;
width: 80px;
border-radius: 10px;
}
#numA
{
background-color: gold;
border: 5px solid black;
}
#numB
{
background-color: salmon;
border: 5px solid black;
}
a{
padding: 10px;
text-align: center;
margin: 10px;
width: 15%;
background-color:chocolate;
border: 2px solid black;
border-radius: 10px;
display: inline-block;
color: white;
}
a:hover
{
background-color: white;
color: black;
}
p
{
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<h1>JS Calculator MOO ICT</h1>
<input type="text" id="numA">
<input type="text" id="numB">
<p>Enter two numbers above and then Click an option from below</p>
<a href="javascript:void(0);" onclick="LetsDoMath('add')">Add</a>
<a href="javascript:void(0);" onclick="LetsDoMath('subtract')">Subtract</a>
<a href="javascript:void(0);" onclick="LetsDoMath('multiply')">Multiply</a>
<a href="javascript:void(0);" onclick="LetsDoMath('divide')">Divide</a>
<p id="total">Total is: 0000</p>
</div>
<script>
function LetsDoMath(type)
{
var numberA = parseInt(document.getElementById("numA").value);
var numberB = parseInt(document.getElementById("numB").value);
var total = document.getElementById("total");
switch(type)
{
case "add":
total.innerHTML = "Total is: " + (numberA + numberB);
break;
case "subtract":
total.innerHTML = "Total is: " + (numberA - numberB);
break;
case "multiply":
total.innerHTML = "Total is: " + (numberA * numberB);
break;
case "divide":
var decimal = parseFloat(numberA / numberB).toFixed(2);
total.innerHTML = "Total is: " + decimal;
break;
}
}
</script>
</body>
</html>