JavaScript Calculator

Developer
Joo Vctor De Oliveira Santos
Size
2,542 Kb
Views
32,384
  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?

JavaScript Calculator for FreeCodeCamp.. What is a javascript calculator? How do you make a javascript calculator? This script and codes were developed by Joo Vctor De Oliveira Santos on 27 August 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 prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <br> <br> <br> <div class="row"> <div class="col-md-3 col-md-offset-4"> <table class="table table-bordered"> <tr> <td colspan="4"> <input id="mostrador" type="text" class="form-control" disabled> </td> </tr> <tr> <td> <button id="btn-ac" type="button" class="btn btn-danger">AC</button> </td> <td> <button id="btn-ce" type="button" class="btn btn-danger">CE</button> </td> <td> <button id="btn-percentage" type="button" class="btn btn-default">%</button> </td> <td> <button id="btn-divide" type="button" class="btn btn-default">/</button> </td> </tr> <tr> <td> <button id="btn-7" type="button" class="btn btn-default">7</button> </td> <td> <button id="btn-8" type="button" class="btn btn-default">8</button> </td> <td> <button id="btn-9" type="button" class="btn btn-default">9</button> </td> <td> <button id="btn-multiply" type="button" class="btn btn-default">x</button> </td> </tr> <tr> <td> <button id="btn-4" type="button" class="btn btn-default">4</button> </td> <td> <button id="btn-5" type="button" class="btn btn-default">5</button> </td> <td> <button id="btn-6" type="button" class="btn btn-default">6</button> </td> <td> <button id="btn-less" type="button" class="btn btn-default">-</button> </td> </tr> <tr> <td> <button id="btn-1" type="button" class="btn btn-default">1</button> </td> <td> <button id="btn-2" type="button" class="btn btn-default">2</button> </td> <td> <button id="btn-3" type="button" class="btn btn-default">3</button> </td> <td rowspan="2"> <button id="btn-plus" type="button" class="btn btn-default" style="height: 75px;">+</button> </td> </tr> <tr> <td> <button id="btn-0" type="button" class="btn btn-default">0</button> </td> <td> <button id="btn-dot" type="button" class="btn btn-default">.</button> </td> <td> <button id="btn-equal" type="button" class="btn btn-default">=</button> </td> </tr> </table>
</div>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JavaScript Calculator - Script Codes CSS Codes

td{ text-align: center;
}

JavaScript Calculator - Script Codes JS Codes

var A = "";
var B = "";
var Op = "=";
var isOnA = true;
var clearNextInput = false;
for(var i = 0; i < 10; ++i){ $('#btn-'+i).on("click", clicked);
}
$('#btn-ac').on("click", doFunction);
$('#btn-ce').on("click", doFunction);
$('#btn-percentage').on("click", doFunction);
$('#btn-divide').on("click", doFunction);
$('#btn-multiply').on("click", doFunction);
$('#btn-less').on("click", doFunction);
$('#btn-plus').on("click", doFunction);
$('#btn-dot').on("click", doFunction);
$('#btn-equal').on("click", doFunction);
function updateScreen(number){ $('#mostrador').val(number);
}
function clicked(a){ if(clearNextInput){ console.log("cleaning input..."); A = B = ""; isOnA = true; Op = ""; clearNextInput = false; } if(isOnA){ A += ($(a.target).text()); }else{ B += ($(a.target).text()); } updateScreen((isOnA) ? A : B);
}
function doFunction(a){ var action = ($(a.target).text()); if(action == '.'){ if(isOnA) A += '.'; else B += '.'; }else if(action == "AC"){ A = ""; B = ""; isOnA = true; Op = "="; updateScreen(A); return; }else if(action == "CE"){ if(isOnA) A = ""; else B = ""; updateScreen((isOnA) ? A : B); }else if(action == "=" || (!isOnA && B != "")){ A = calc(A, B, OP); B = ""; isOnA = false; clearNextInput = true; updateScreen(A); OP = action; if(OP != "=") clearNextInput = false; }else{ OP = action; isOnA = false; clearNextInput = false; }
}
function calc(x, y, operation){ console.log(x+" "+operation+" "+y); x = parseFloat(x); y = parseFloat(y); switch(operation){ case "+": return x+y; break; case "-": return x-y; break; case "x": return x*y; break; case "/": return x/y; break; case "%": return -1; break; }
}
JavaScript Calculator - Script Codes
JavaScript Calculator - Script Codes
Home Page Home
Developer Joo Vctor De Oliveira Santos
Username jvhti
Uploaded August 27, 2022
Rating 3
Size 2,542 Kb
Views 32,384
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!

Joo Vctor De Oliveira Santos (jvhti) Script Codes
Name
Random Quote Machine
Price Table
Stylize Stories
Pomodoro
Markdown Previewer
Youtube Random Video With Cover Image
Wikipedia Viewer
A Pen by Joo Vctor de Oliveira Santos
JQuery UI Playground
Tic Tac Toe Game
Create amazing blog posts 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!