In this video I continue teaching JavaScript and related JavaScript libraries and frameworks while making a JavaScript Calculator in 1 video. I design everything using BootStrap which can be found here. We’ll cover the logic of the calculator using a simple diagram. Then we’ll make a working calculator using our acquired knowledge on functions, if statements and the catching of events which was covered last time. It is amazing how much we can do with so little. All of the code used and a transcript of the video can be found below.
This 30 minute video only contains one 5 second skippable ad. I’d appreciate it if you didn’t Ad Block it, because it allows me to make these videos available for free. Thank you 🙂
Code from the Video
Calc.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>JavaScript Calculator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<script src="calc.js"></script>
</head>
<body>
<!-- A container is required for the default
Bootstrap grid system -->
<!-- text-center centers text across the container -->
<div class="container text-center">
<!-- Will surround my whole calculator -->
<div class="calc-container">
<!-- row wraps columns they contain -->
<div class="row">
<form name="calc">
<!-- Change text align to the right -->
<!-- I'll change this value by referring
to the id -->
<input type="text" id="entry" class="entry text-right" value="0" readonly>
</form>
</div>
<!-- Organizing buttons in rows -->
<div class="row">
<!-- I'll call different functions depending
on which button is pressed -->
<!-- I use default Bootstrap button types like
btn-primary, btn-success, etc. -->
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(7)">7</button>
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(8)">8</button>
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(9)">9</button>
<button id="mathBut" type="button" class="btn btn-success mathBut" onclick="mathButPress('+')">+</button>
</div>
<div class="row">
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(4)">4</button>
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(5)">5</button>
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(6)">6</button>
<button id="mathBut" type="button" class="btn btn-success mathBut" onclick="mathButPress('-')">-</button>
</div>
<div class="row">
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(1)">1</button>
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(2)">2</button>
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(3)">3</button>
<button id="mathBut" type="button" class="btn btn-success mathBut" onclick="mathButPress('*')">*</button>
</div>
<div class="row">
<button id="clearBut" type="button" class="btn btn-danger numBut" onclick="clearButPress()">AC</button>
<button id="numBut" type="button" class="btn btn-primary numBut" onclick="numButPress(0)">0</button>
<button id="decimalBut" type="button" class="btn btn-primary numBut" onclick="numButPress('.')">.</button>
<button id="mathBut" type="button" class="btn btn-success mathBut" onclick="mathButPress('/')">/</button>
</div>
<div class="row">
<button id="addMemBut" type="button" class="btn btn-warning numBut" onclick="copyButPress()">MC</button>
<button id="numBut" type="button" class="btn btn-warning numBut" onclick="pasteButPress()">MP</button>
<button id="decimalBut" type="button" class="btn btn-info equalBut" onclick="equalButPress()">=</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Mainstyle.css
body {
background: #000000;
}
.container{
background: #000000;
margin: 0px;
}
.entry {
width: 265px;
height: 50px;
border-radius: 10px;
padding: 10px;
margin: 10px 2px;
font-size: 16px;
font-weight: bold;
}
.calc-container{
width: 300px;
background-color: rgb(9, 114, 138);
border-radius: 20px;
padding: 30px;
margin-top: 10px;
margin-bottom: 10px;
}
.numBut{
height: 59px;
width: 59px;
margin: 10px 4px;
border: none !important;
}
.mathBut{
height: 59px;
width: 59px;
margin: 10px 4px;
border: none !important;
}
.equalBut{
height: 59px;
width: 126px;
margin: 10px 4px;
border: none !important;
}
Calc.js
// Stores previous value if any
let prevVal = "";
// Stores value we are building
let newVal = "";
// Stores value to display in the entry window
let resultVal = "";
// Store previous math operator clicked
let mathOperator = "";
// Store whether decimal has been clicked
// [Only allow 1 per new value entered]
let decimalClicked = false;
// Will hold values we want to store in memory
let valMemStored = "";
// Called when a number button is clicked
function numButPress(num){
// Check if a number has been already clicked
if(resultVal){
// Start a new new number
newVal = num;
// Reset to create a new result
resultVal = "";
} else {
// Used to block using multiple decimals
if(num === '.'){
if(decimalClicked != true){
newVal += num;
decimalClicked = true;
}
} else {
newVal += num;
}
}
// Update value in entry input tag
document.getElementById("entry").value = newVal;
}
function mathButPress(operator){
// Check if there was a previous calculation
// by seeing if resultVal has a value
// If result doesn't have a value then store
// the current val as a previous for the next
// calculation
if(!resultVal){
prevVal = newVal;
} else {
// If there is a current result store that as
// the previous value entered
prevVal = resultVal;
}
// Restart creation of new number
newVal = "";
// Reset decimalClicked
decimalClicked = false;
// Store operator clicked
mathOperator = operator;
// Prepare entry for receiving new numbers
resultVal = "";
document.getElementById("entry").value = "";
}
function equalButPress(){
// Reset decimalClicked
decimalClicked = false;
// Convert string numbers to floats
prevVal = parseFloat(prevVal);
newVal = parseFloat(newVal);
// Perform calculations based on stored operator
switch(mathOperator){
case "+":
resultVal = prevVal + newVal;
break;
case "-":
resultVal = prevVal - newVal;
break;
case "*":
resultVal = prevVal * newVal;
break;
case "/":
resultVal = prevVal / newVal;
break;
// If equals is hit without an operator
// leave everything as is
default:
resultVal = newVal;
}
// Store the current value as the previous so that
// I can except to next value in the calculation
prevVal = resultVal;
// Put the calculation result in the entry window
document.getElementById("entry").value = resultVal;
}
// Clear everything except memory
function clearButPress(){
prevVal = "";
newVal = "";
resultVal = "";
mathOperator = "";
decimalClicked = false;
document.getElementById("entry").value = "0";
}
// Store the current value in the entry window
function copyButPress(){
valMemStored = document.getElementById("entry").value;
}
// If a value has been stored paste it in the entry
// window and assign it as the newVal
function pasteButPress(){
if(valMemStored){
document.getElementById("entry").value = valMemStored;
newVal = valMemStored;
}
}