JavaScript Calculator

Developer
Anton Babkin
Size
3,082 Kb
Views
20,240
  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?

This is my solution to a freeCodeCamp challenge. Built with pure CSS and jQuery.. What is a javascript calculator? How do you make a javascript calculator? This script and codes were developed by Anton Babkin on 24 August 2022, Wednesday.

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" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div id="head"> <div id="display">0</div> <div id="logo"> touchWood </div> </div> <div id="controls"> </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

#container { background: url("https://dl.dropboxusercontent.com/s/8vda313lobsa1du/wood-texture.jpg") #f90; width: 440px; height: 300px; margin: 20px auto; border-radius: 20px; box-shadow: inset 0 0 20px black, 0 0 30px black;
}
#display { background: #fa0; border: 3px solid #520; width: 230px; margin: 20px 0px 20px 20px; height: 50px; line-height: 50px; padding-right: 4px; float: left; font: italic 46px monospace; text-align: right;
}
#logo { float: right; font: 36px Tangerine; color: rgba(255, 200, 0, 0.5); margin: 20px 20px 10px 0px; height: 50px; width: 140px; text-align: center; line-height: 44px; background: rgba(0, 0, 0, 0.3); border: 3px solid #520; border-radius: 10px;
}
#controls { background: rgba(0, 0, 0, 0.2); height: 190px; width: 340px; margin: auto; clear: both; border: 3px solid #520; border-radius: 20px;
}
.btn { margin: 6px; height: 30px; width: 50px; background: rgba(0, 0, 0, 0.3); color: rgba(255, 200, 0, 0.8); border: 3px solid #520; border-radius: 10px; line-height: 30px; text-align: center; float: left; font-size: 30px; cursor: pointer;
}

JavaScript Calculator - Script Codes JS Codes

$(document).ready(function() { var btnLabels = [ '7', '8', '9', '/', 'C', '4', '5', '6', '*', '1', '2', '3', '-', '0', '.', '=', '+' ], st = 0, // stored number op = '', // pending operator pb = 'c', // previous button: c (clear), n (number), o (+-*/) or = dispLen = 8; // max number of digits on display, including decimal point function btnPress() { var b = this.innerHTML, dt = $('#display').text(), dn = parseFloat(dt); // prepare the number for display function parse(n) { var s = n.toString(); if (s.length <= dispLen) { return s; } else { return n.toExponential(2); } } if (b === 'C') { // clear all input $('#display').text('0'); op = ''; st = 0; pb = 'c'; } else if (pb === 'c') { // fresh: start new number if ('1234567890.'.indexOf(b) !== -1) { $('#display').text(b); pb = 'n'; } } else if (pb === 'n') { // was entering number if ('1234567890.'.indexOf(b) !== -1) { // continue entering number if new symbol is feasible if (!(dt.length === dispLen || //display is full (b === '0' && dt === '0') || // don't duplicate zeros (b === '.' && dt.indexOf('.') !== -1) // can't have two decimal points )) { $('#display').text(dt + b); pb = 'n'; } } else { // b is '=' or '+-*/' if (op !== '') { // compute result if there is a pending operator switch (op) { case '+': st += dn; break; case '-': st -= dn; break; case '*': st *= dn; break; case '/': st /= dn; break; } $('#display').text(parse(st)); if (b === '=') { // erase pending operator op = ''; pb = '=' } else { // chain the next operator op = b; pb = 'o'; } } else if ('+-*/'.indexOf(b) !== -1) { // save number and new operator st = dn; op = b; pb = 'o'; } } } else { // pb is '=' or 'o' if ('1234567890.'.indexOf(b) !== -1) { // start new number $('#display').text(b); pb = 'n'; } else if ('+-*/'.indexOf(b) !== -1) { // new operator op = b; pb = 'o'; } } } btnLabels.forEach(function(b, i) { var div = $('<div>' + b + '</div>').addClass('btn').appendTo('#controls'); if (i === 5 || i === 9 || i === 13) { // start new row div.css('clear', 'both'); } if (b === 'C') { div.css('background', 'rgba(180, 0, 0, 0.3)'); } div.on('click', btnPress); });
});
JavaScript Calculator - Script Codes
JavaScript Calculator - Script Codes
Home Page Home
Developer Anton Babkin
Username antonbabkin
Uploaded August 24, 2022
Rating 3
Size 3,082 Kb
Views 20,240
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!

Anton Babkin (antonbabkin) Script Codes
Name
Local Weather
Anton Babkin - Personal portfolio
Pomodoro Timer
Tic Tac Toe
Random Quote Machine
A Pen by Anton Babkin
Tribute page - Bob Marley
Create amazing web content 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!