Javascript Calculator

Developer
Vinny
Size
3,767 Kb
Views
18,216
  1. Javascript Calculator Previews
  2. Javascript Calculator HTML Codes
  3. Javascript Calculator CSS Codes
  4. Javascript Calculator JS Codes

How do I make an javascript calculator?

A simple calculator running on javascript. Had some fun with the html rendering as well as with some CSS.. What is a javascript calculator? How do you make a javascript calculator? This script and codes were developed by Vinny on 15 October 2022, Saturday.

Javascript Calculator Previews
IQ Test

Javascript Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Javascript Calculator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'>
<div id="calculator"> <ul class="battery"> <li class="box"></li> <li class="box"></li> </ul> <div class="title">Calc-u-lator</div> <div class="clear input-ctrl"><span class="number"></span></div> <div class="clear"></div> <div id="numberBlock"> <div class="row row1"> </div> <div class="row row2"> </div> <div class="row row3"> </div> <div class="row row4"> </div> <div class="row row5"> </div> </div> <div id="operationBlock"> <div class = "row"> <div class="col op-col">/</div> <div class="col op-col">X</div> <div class="col op-col">-</div> <div class="col op-col big-btn">+</div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Javascript Calculator - Script Codes CSS Codes

body { margin: 0; padding: 0; background: url('https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ffreeimageslive.co.uk%2Ffiles%2Fimages008%2Fschool_desk.jpg&f=1'); background-size:cover; font-family: 'Play', sans-serif;
}
/*body:before { content: " "; width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; background: -webkit-radial-gradient(top center, ellipse cover, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
}*/
@media screen and (max-width: 933px){ body{ background-image: url('https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ffc09.deviantart.net%2Ffs71%2Ff%2F2011%2F005%2Ff%2F8%2Fdesk_texture_by_naveenvverma-d36gv8e.jpg&f=1'); } body:before { content: " "; width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0; background: -webkit-radial-gradient(top center, ellipse cover, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
} #calculator{ margin-right:98% !important; transform:rotate(-3deg) !important; -webkit-transform:rotate(-3deg); -mozilla-transform:rotate(-3deg); }
}/*endmedia query*/
.col { color: #38383a; background-color: #EFEFF2; font-weight: bold; -webkit-box-shadow: inset 5px -3px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset 5px -3px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: inset 5px -3px 12px 0px rgba(50, 50, 50, 0.75); /*font shadow */ text-shadow: -3px 2px 4px rgba(67, 67, 67, 1); padding: 5px; width: 55px; border-radius: 10px; text-align: center; display: inline-block; margin-left: 15px; margin-right: 5px; text-shadow: 1px 1px 7px rgba(150, 150, 150, 1);
}
.col:hover { -webkit-box-shadow: inset 0px 1px 27px -2px rgba(50, 50, 50, 1); -moz-box-shadow: inset 0px 1px 27px -2px rgba(50, 50, 50, 1); box-shadow: inset 0px 1px 27px -2px rgba(50, 50, 50, 1); cursor: pointer;
}
.op-col { display: block !important; margin-top: 25px; margin-right: 25px !important; margin-left: -5px;
}
#id0{ background-color: #433E4D; color: #DBDBDB;
}
#id1{ background-color: #433E4D; color: #DBDBDB;
}
.big-btn { height: 40px; padding-top: 30px;
}
#calculator { margin: 0 auto; background-color: gray; height: 545px; width: 390px; border-radius: 10px; padding-left: 25px; -webkit-box-shadow: inset 0px -1px 29px -4px rgba(50, 50, 50, 0.75); -moz-box-shadow: inset 0px -1px 29px -4px rgba(50, 50, 50, 0.75); box-shadow: inset 0px -1px 29px -4px rgba(50, 50, 50, 0.75); background: rgb(28, 55, 46);
background: -moz-linear-gradient(318deg, rgb(28, 55, 46) 0%, rgb(128, 128, 128) 41%);
background: -webkit-linear-gradient(318deg, rgb(28, 55, 46) 0%, rgb(128, 128, 128) 41%);
background: -o-linear-gradient(318deg, rgb(28, 55, 46) 0%, rgb(128, 128, 128) 41%);
background: -ms-linear-gradient(318deg, rgb(28, 55, 46) 0%, rgb(128, 128, 128) 41%);
background: linear-gradient(48deg, rgb(28, 55, 46) 0%, rgb(128, 128, 128) 41%); transform:rotate(18deg); -webkit-transform:rotate(18deg); -mozilla-transform:rotate(18deg); position:relative; left:143px; top:34px; /*box shodow bottom left*/
-webkit-box-shadow: -4px 4px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -4px 4px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: -4px 4px 6px 0px rgba(50, 50, 50, 0.75);
}
.input-ctrl { font-size: 3em; color: #262633; background-color: #C7C7B0; position: relative; top: 95px; right: 10px; margin: 0 auto; height: 55px; border-radius: 7px; width: 90%; -webkit-box-shadow: inset -5px 4px 13px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset -5px 4px 13px 0px rgba(50, 50, 50, 0.75);
box-shadow: inset -5px 4px 13px 0px rgba(50, 50, 50, 0.75); /*input font sadow/blur*/ text-shadow: -3px 2px 4px rgba(67, 67, 67, 1);
}
.number { float: right; padding-right:.4em;
}
#numberBlock { height: 300px; width: 285px; float: left; position: relative; top: 130px;
}
#operationBlock { float: right; position: relative; top: 130px; right: 20px;
}
.row { padding-left: 5px; margin: 0 auto; margin-top: 25px;
}
.clear { clear: both;
}
.battery { position: relative; float: left; left: -28px; top: 46px;
}
.battery li { list-style: none; display: inline; border: 1.8px solid #282827; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; padding-right: 20px; margin-right: -4px; background-color: #9B9B77; -webkit-box-shadow: inset -3px 5px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset -3px 5px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: inset -3px 5px 12px 0px rgba(50, 50, 50, 0.75);
}
.title { float: right; position: relative; top: 55px; right: 30px; font-weight: bold; font-size: 1.6em; color: #EAEAE5; text-shadow: -3px 2px 4px rgba(67, 67, 67, 1);
}

Javascript Calculator - Script Codes JS Codes

$(document).ready(function() { var buttonArray = ['AC', 'CE', '%', '7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '.', '='], entries = [], total = 0, temp = ''; for (var i = 0; i < 15; ++i) { switch (i) { case 0: case 1: case 2: $("<div class='col' id='id" + i.toString() + "'>" + i + "</div>").appendTo(".row1"); break; case 3: case 4: case 5: $("<div class='col' id='id" + i.toString() + "'>" + i + "</div>").appendTo(".row2"); break; case 6: case 7: case 8: $("<div class='col' id='id" + i.toString() + "'>" + i + "</div>").appendTo(".row3"); break; case 9: case 10: case 11: $("<div class='col' id='id" + i.toString() + "'>" + i + "</div>").appendTo(".row4"); break; case 12: case 13: case 14: $("<div class='col' id='id" + i.toString() + "'>" + i + "</div>").appendTo(".row5"); break; } } //end for for (var j = 0; j < buttonArray.length; ++j) { var stringNum = '#id' + j.toString(); $(stringNum).text(buttonArray[j]); } //calculator function $('.col').on('click', function() { var val = $(this).text(); // Got a number, add to temp if (!isNaN(val) || val === '.') { temp += val; $(".number").text(temp.substring(0, 10)); } else if (val === 'AC') { entries = []; temp = ''; total = 0; $(".number").text('') // Clear last entry } else if (val === 'CE') { temp = ''; $(".number").text(''); // Change mult } else if (val === 'X') { entries.push(temp); entries.push('*'); temp = ''; // Change div } else if (val === '/') { entries.push(temp); entries.push('/'); temp = ''; } else if (val === '=') { entries.push(temp); var newTotal = eval(entries.join('').substring(0, 10)) $(".number").text(newTotal); entries = []; temp = ''; // Push number } else { entries.push(temp); entries.push(val); temp = ''; } }); //end click
}); //end doc ready
Javascript Calculator - Script Codes
Javascript Calculator - Script Codes
Home Page Home
Developer Vinny
Username vinnyA3
Uploaded October 15, 2022
Rating 3
Size 3,767 Kb
Views 18,216
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!

Vinny (vinnyA3) Script Codes
Name
Wikipedia Application
Tic Tac Toe Bro
Raw JS Image Slider
A Pen by Vinny
Your Favorite Twitch App
Svg-play
Camper News Feed
Pure CSS Image Slider
CSS Animations and Effects
Rotating CSS Cube
Create amazing sales emails 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!