Javascript Calculator

Developer
Size
4,576 Kb
Views
14,168

How do I make an javascript calculator?

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/EPNZYW.. What is a javascript calculator? How do you make a javascript calculator? This script and codes were developed by Sam Koshy on 06 November 2022, Sunday.

Javascript Calculator Previews

Javascript Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Javascript Calculator</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Montserrat|Abel|Titillium+Web:300|Roboto:500' rel='stylesheet' type='text/css'>
<div class="shell"> <div class="title"> <h2>freeCodeCamp</h2> <h4>JAVASCRIPT CALCULATOR</h4></div> <div class="well well-lg"><span id="screen"></span></div> <div class="column1"> <div class="one1 clear"> <h2>AC</h2></div> <div class="two1 seven"> <h2>7</h2></div> <div class="three1 four"> <h2>4</h2></div> <div class="four1 one"> <h2>1</h2></div> <div class="five1 zero"> <h2>0</h2></div> </div> <div class="column2"> <div class="one2 del"> <h2>CE</h2></div> <div class="two2 eight"> <h2>8</h2></div> <div class="three2 five"> <h2>5</h2></div> <div class="four2 two"> <h2>2</h2></div> <div class="five2 point"> <h2>.</h2></div> </div> <div class="column3"> <div class="one3 mod"> <h2>%</h2></div> <div class="two3 nine"> <h2>9</h2></div> <div class="three3 six"> <h2>6</h2></div> <div class="four3 three"> <h2>3</h2></div> <div class="five3 equal"> <h2>=</h2></div> </div> <div class="column4"> <div class="one4 divide"> <h2>&divide</h2></div> <div class="two4 mult"> <h2>&times</h2></div> <div class="three4 minus"> <h2>&#8211</h2></div> <div class="four4 plus"> <h2>+</h2></div> </div> <div class="bottom"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Javascript Calculator - Script Codes CSS Codes

body { background: linear-gradient(rgba(186, 171, 166, 0.8), rgba(186, 171, 166, 0.8)), url(https://s3-us-west-1.amazonaws.com/pictureholder/6814511-victorian-wallpaper.jpg) center fixed;
}
.title { padding: 50px; margin-bottom: -80px; margin-top: -45px;
}
.title h2 { font-family: 'Abel', sans-serif;
}
.title h4 { font-family: 'Titillium Web', sans-serif;
}
.shell { margin: 70px auto; text-align: center; width: 400px; height: 533px; background-color: rgb(243, 238, 231); border: 2px solid black; box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), inset 0 0 15px rgba(0, 0, 0, 0.5); /*The first two values set the offset of the shadow, the third value is the amount of blur and the last value is the spread of the shadow*/ border-color: rgba(0, 0, 0, 0.2); border-top-left-radius: 90%80px; border-top-right-radius: 90%80px; border-bottom-left-radius: 120%80px; border-bottom-right-radius: 120%80px;
}
.well { position: absolute; margin-top: 40px; margin-left: 23px; width: 350px; height: 70px; background-color: rgb(212, 214, 199); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
#screen { float: right; margin-right: -5px; line-height: 20px; font-size: 320%; font-family: 'Montserrat';
}
.column1 h2 { margin: 8px auto; color: rgb(253, 253, 253); font-family: 'Roboto', sans-serif;
}
.column2 h2 { font-family: 'Roboto', sans-serif;
}
.column3 h2 { font-family: 'Roboto', sans-serif;
}
.column4 h2 { font-family: 'Roboto', sans-serif;
}
.one1 { position: absolute; margin-top: 140px; margin-left: 30px; width: 70px; height: 50px; background-color: rgb(204, 64, 64); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.two1 { position: absolute; margin-top: 200px; margin-left: 30px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.three1 { position: absolute; margin-top: 260px; margin-left: 30px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.four1 { position: absolute; margin-top: 320px; margin-left: 30px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.five1 { position: absolute; margin-top: 380px; margin-left: 30px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.column2 h2 { margin: 8px auto; color: rgb(253, 253, 253);
}
.one2 { position: absolute; margin-top: 140px; margin-left: 120px; width: 70px; height: 50px; background-color: rgb(204, 64, 64); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.two2 { position: absolute; margin-top: 200px; margin-left: 120px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.three2 { position: absolute; margin-top: 260px; margin-left: 120px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.four2 { position: absolute; margin-top: 320px; margin-left: 120px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.five2 { position: absolute; margin-top: 380px; margin-left: 120px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.column3 h2 { margin: 8px auto; color: rgb(253, 253, 253);
}
.one3 { position: absolute; margin-top: 140px; margin-left: 210px; width: 70px; height: 50px; background-color: rgb(255, 113, 54); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.two3 { position: absolute; margin-top: 200px; margin-left: 210px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.three3 { position: absolute; margin-top: 260px; margin-left: 210px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.four3 { position: absolute; margin-top: 320px; margin-left: 210px; width: 70px; height: 50px; background-color: rgb(89, 91, 99); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.five3 { position: absolute; margin-top: 380px; margin-left: 210px; width: 70px; height: 50px; background-color: rgb(255, 113, 54); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.column4 h2 { margin: 8px auto; color: rgb(253, 253, 253);
}
.one4 { position: absolute; margin-top: 140px; margin-left: 300px; width: 70px; height: 50px; background-color: rgb(255, 113, 54); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.two4 { position: absolute; margin-top: 200px; margin-left: 300px; width: 70px; height: 50px; background-color: rgb(255, 113, 54); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.three4 { position: absolute; margin-top: 260px; margin-left: 300px; width: 70px; height: 50px; background-color: rgb(255, 113, 54); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.four4 { position: absolute; margin-top: 320px; margin-left: 300px; width: 70px; height: 110px; background-color: rgb(255, 113, 54); border-top-left-radius: 80%10px; border-top-right-radius: 80%10px; border-bottom-left-radius: 100%10px; border-bottom-right-radius: 100%10px;
}
.four4 h2 { line-height: 80px;
}
.column1 .clear { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(204, 64, 64, 0.7); box-shadow: inset 0 0 5px rgba(250, 250, 250, 0.5);
}
.column1 .seven { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column1 .four { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column1 .one { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column1 .zero { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column2 .del { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(204, 64, 64, 0.7); box-shadow: inset 0 0 5px rgba(250, 250, 250, 0.5);
}
.column2 .eight { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column2 .five { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column2 .two { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column2 .point { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column3 .mod { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(255, 113, 54, 0.5); box-shadow: inset 0 0 5px rgba(250, 250, 250, 0.5);
}
.column3 .nine { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column3 .six { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column3 .three { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(100, 100, 100, 0.9); box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5);
}
.column3 .equal { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(255, 113, 54, 0.5); box-shadow: inset 0 0 5px rgba(250, 250, 250, 0.5);
}
.column4 .divide { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(255, 113, 54, 0.5); box-shadow: inset 0 0 5px rgba(250, 250, 250, 0.5);
}
.column4 .mult { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(255, 113, 54, 0.5); box-shadow: inset 0 0 5px rgba(250, 250, 250, 0.5);
}
.column4 .minus { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(255, 113, 54, 0.5); box-shadow: inset 0 0 5px rgba(250, 250, 250, 0.5);
}
.column4 .plus { border: 3px solid; border-color: rgba(250, 250, 250, 0.3); border-bottom-color: rgba(255, 113, 54, 0.5); box-shadow: inset 0 0 5px rgba(250, 250, 250, 0.5);
}

Javascript Calculator - Script Codes JS Codes

var operator = "", num = "", holder1 = "", //strings are used so that numbers can be concatenated together holder2 = "", count = 0, result = NaN;
function calculate(num, count) { if (count === 0 && holder1.length < 11) { //make sure input is no larger than 11 digits holder1 += num; } else if (count === 1 && holder2.length < 11) { //if an operator is selected holder2 += num; } else if (count === 2) { switch (operator) { case ('+'): result = Number(holder1) + Number(holder2); break; case ('-'): result = Number(holder1) - Number(holder2); break; case ('*'): result = Number(holder1) * Number(holder2); break; case ('/'): result = Number(holder1) / Number(holder2); break; case ('%'): if (holder2 === "") { result = Number(holder1) / 100; //if user selects equal after the mod operator then they are given the percentage in decimal form } else { result = (Number(holder1) / 100) * holder2; //if user selects a number after the mod operator then they are given the percentage of second number } break; } }
}
$(document).ready(function() { $(".zero").click(function() { num = '0'; calculate(num, count); if (count === 0) { //variable value before operator button is selected document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { //variable value after operator is selected document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".point").click(function() { num = '.'; calculate(num, count); if (count === 0) { //variable value before operator button is selected document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { //variable value after operator is selected document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".one").click(function() { num = '1'; calculate(num, count); if (count === 0) { //variable value before operator button is selected document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { //variable value after operator is selected document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".two").click(function() { num = '2'; calculate(num, count); if (count === 0) { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".three").click(function() { num = '3'; calculate(num, count); if (count === 0) { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".four").click(function() { num = '4'; calculate(num, count); if (count === 0) { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".five").click(function() { num = '5'; calculate(num, count); if (count === 0) { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".six").click(function() { num = '6'; calculate(num, count); if (count === 0) { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".seven").click(function() { num = '7'; calculate(num, count); if (count === 0) { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".eight").click(function() { num = '8'; calculate(num, count); if (count === 0) { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".nine").click(function() { num = '9'; calculate(num, count); if (count === 0) { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder1; } else { document.getElementById("screen").textContent = ""; document.getElementById("screen").textContent += holder2; } }); $(".plus").click(function() { if (num === "" && !isNaN(result)) { //if there is an answer stored, then clicking an operator after equal sign should continue operation holder1 = result.toString(); } if (holder2 !== "") { // if instead of clicking "equal" if user continues chaining operations together count = 2; calculate(num, count); document.getElementById("screen").textContent = holder2; holder1 = result.toString(); holder2 = ""; } count = 1; operator = "+"; calculate("", count); $(".plus h2").css("color", "rgb(33,107,153)"); //highlights the operator $(".minus h2").css("color", ""); //removes highlight of operator $(".mult h2").css("color", ""); //removes highlight of operator $(".divide h2").css("color", ""); //removes highlight of operator $(".mod h2").css("color", ""); //removes highlight of operator }); $(".minus").click(function() { if (num === "" && !isNaN(result)) { //if there is an answer stored, then clicking an operator after equal sign should continue operation holder1 = result.toString(); } if (holder2 !== "") { // if instead of clicking "equal" if user continues chaining operations together count = 2; calculate(num, count); document.getElementById("screen").textContent = holder2; holder1 = result.toString(); holder2 = ""; } count = 1; operator = "-"; calculate("", count); $(".minus h2").css("color", "rgb(33,107,153)"); //highlights the operator $(".plus h2").css("color", ""); //removes highlight of operator $(".mult h2").css("color", ""); //removes highlight of operator $(".divide h2").css("color", ""); //removes highlight of operator $(".mod h2").css("color", ""); //removes highlight of operator }); $(".mult").click(function() { if (num === "" && !isNaN(result)) { //if there is an answer stored, then clicking an operator after equal sign should continue operation holder1 = result.toString(); } if (holder2 !== "") { // if instead of clicking "equal" if user continues chaining operations together count = 2; calculate(num, count); document.getElementById("screen").textContent = holder2; holder1 = result.toString(); holder2 = ""; } count = 1; operator = "*"; calculate("", count); $(".mult h2").css("color", "rgb(33,107,153)"); //highlights the operator $(".plus h2").css("color", ""); //removes highlight of operator $(".minus h2").css("color", ""); //removes highlight of operator $(".divide h2").css("color", ""); //removes highlight of operator $(".mod h2").css("color", ""); //removes highlight of operator }); $(".divide").click(function() { if (num === "" && !isNaN(result)) { //if there is an answer stored, then clicking an operator after equal sign should continue operation holder1 = result.toString(); } if (holder2 !== "") { // if instead of clicking "equal" if user continues chaining operations together count = 2; calculate(num, count); document.getElementById("screen").textContent = holder2; holder1 = result.toString(); holder2 = ""; } count = 1; operator = "/"; calculate("", count); $(".divide h2").css("color", "rgb(33,107,153)"); //highlights the operator $(".plus h2").css("color", ""); //removes highlight of operator $(".minus h2").css("color", ""); //removes highlight of operator $(".mult h2").css("color", ""); //removes highlight of operator $(".mod h2").css("color", ""); //removes highlight of operator }); $(".mod").click(function() { if (num === "" && !isNaN(result)) { //if there is an answer stored, then clicking an operator after equal sign should continue operation holder1 = result.toString(); } if (holder2 !== "") { // if instead of clicking "equal" if user continues chaining operations together count = 2; calculate(num, count); document.getElementById("screen").textContent = holder2; holder1 = result.toString(); holder2 = ""; } count = 1; operator = "%"; calculate("", count); $(".mod h2").css("color", "rgb(33,107,153)"); //highlights the operator $(".plus h2").css("color", ""); //removes highlight of operator $(".minus h2").css("color", ""); //removes highlight of operator $(".mult h2").css("color", ""); //removes highlight of operator $(".divide h2").css("color", ""); //removes highlight of operator }); $(".equal").click(function() { count = 2; calculate(num, count); $(".plus h2").css("color", ""); //removes highlight of operator $(".minus h2").css("color", ""); $(".mult h2").css("color", ""); $(".divide h2").css("color", ""); $(".mod h2").css("color", ""); if (result.toString().length < 10) { document.getElementById("screen").textContent = result; } else { document.getElementById("screen").textContent = result.toPrecision(7); } //make answer fit in the display screen num = ""; holder1 = ""; holder2 = ""; operator = ""; count = 0; }); $(".clear").click(function() { count = 0; num = ""; holder1 = ""; holder2 = ""; operator = ""; result = NaN; document.getElementById("screen").textContent = ""; $(".plus h2").css("color", ""); //removes highlight of operator $(".minus h2").css("color", ""); $(".mult h2").css("color", ""); $(".divide h2").css("color", ""); $(".mod h2").css("color", ""); }); $(".del").click(function() { num = ""; if (count === 0) { holder1 = holder1.substring(0, holder1.length - 1); //deletes one entry at a time document.getElementById("screen").textContent = holder1; } else if (count === 1) { holder2 = holder2.substring(0, holder2.length - 1); //deletes one entry at a time document.getElementById("screen").textContent = holder2; } });
});
Javascript Calculator - Script Codes
Javascript Calculator - Script Codes
Home Page Home
Developer Sam Koshy
Username codinger
Uploaded November 06, 2022
Rating 3
Size 4,576 Kb
Views 14,168
Do you need developer help for Javascript Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sam Koshy (codinger) Script Codes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!