Build a JavaScript Calculator

Developer
Roksana
Size
2,903 Kb
Views
12,144
  1. Build a JavaScript Calculator Previews
  2. Build a JavaScript Calculator HTML Codes
  3. Build a JavaScript Calculator CSS Codes
  4. Build a JavaScript Calculator JS Codes

How do I make an build a javascript calculator?

What is a build a javascript calculator? How do you make a build a javascript calculator? This script and codes were developed by Roksana on 22 November 2022, Tuesday.

Build a JavaScript Calculator Previews
IQ Test

Build a JavaScript Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Build a JavaScript Calculator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE HTML>
<html lang="en">
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Exercise - Build a JavaScript Calculator</title> <link rel="stylesheet" href="main.css" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body> <div class="calculator"> <header class="header"> <h1>FreeCodeCamp Calculator</h1> </header> <div class="screen"> <p class="action">0</p> <p class="remembered-action"></p> </div> <div class="buttons"> <button class="delete-buttons" id="ac">AC</button> <button class="delete-buttons" id="ce">CE</button> <button id="/">&#247;</button> <button class="sign-buttons" id="*">&#215;</button> <div style="clear: both"></div> <button id="7">7</button> <button id="8">8</button> <button id="9">9</button> <button id="-">-</button> <div style="clear: both"></div> <button id="4">4</button> <button id="5">5</button> <button id="6">6</button> <button id="+">+</button> <div style="clear: both"></div> <button id="1">1</button> <button id="2">2</button> <button id="3">3</button> <div style="clear: both"></div> <button class="row-button" id="0">0</button> <button id=".">.</button> <button class="column-button" id="=">=</button> <div style="clear: both"></div> </div> </div> <footer> <p>by <a href="#">Roksana</a></p> </footer> <script src="main.js"></script>
</body> <script src="js/index.js"></script>
</body>
</html>

Build a JavaScript Calculator - Script Codes CSS Codes

html { font-size: 62.5%; margin: 0; padding: 0;
}
body { margin: 0; padding: 0; font-family: 'Inconsolata', monospace; font-size: 1.4rem; color: #F1F2EB; background-color: #4B88A2;
}
.calculator { width: 270px; margin: 50px auto; background-color: #848C8E; border-radius: 20px; padding: 20px; box-shadow: 1px 2px 14px 0px #252627;
}
.header h1 { margin: 0 0 30px 0; text-align: center;
}
.screen { height: 70px; background-color: #F1F2EB; border-radius: 10px; box-shadow: 1px 2px 10px 0px #252627; margin: 0 10px 20px 10px;
}
.screen .action { margin: 0; color: #252627; font-size: 3.4rem; text-align: right; vertical-align: middle; padding: 5px 10px 1px 0;
}
.screen .remembered-action { margin: 0; color: #848C8E; font-size: 2rem; text-align: right; vertical-align: bottom; padding-right: 10px;
}
.buttons { height: 340px; padding: 5px; margin: auto; text-align: center;
}
button { color: #F1F2EB; background-color: #252627; font-size: 2.2rem; font-family: 'Inconsolata', monospace; border-radius: 10px; border: 1px solid #F1F2EB; box-shadow: 1px 2px 10px 0px #252627; width: 55px; height: 55px; padding: 5px; margin: 5px; float: left;
}
.delete-buttons { background-color: #8C001A;
}
.column-button { position: relative; bottom: 65px; height: 120px;
}
.row-button { width: 120px;
}
footer { position: fixed; right: 10px; bottom: 5px; text-align: center; color: #F1F2EB; font-size: 1.8rem;
}
footer p { margin: 0; padding: 0;
}
footer a { text-decoration: none; color: #F1F2EB;
}

Build a JavaScript Calculator - Script Codes JS Codes

var action = $(".action");
var equation = $(".remembered-action");
function buttonClick() { $("button").click( function () { var val = $(this).attr("id"); var equationContent = equation.text(); var ALL_CLEAR = "ac"; var CLEAR_ENTRY = "ce"; if (equationContent.length >= 20) { action.html("Digit limit"); return equation.html(""); } if (equationContent.indexOf("=") !== -1) { equation.html(equationContent.slice((equationContent.indexOf("=") + 1), equationContent.length)); } if (val === ALL_CLEAR) { action.html("0"); equation.html(""); } if (val === CLEAR_ENTRY) { action.html("0"); equation.html(equationContent.slice(0, (equationContent.length - 1))); } if (val.match(/\d/)) { var actionName = (equationContent.slice(-1) === ".") ? "append" : "html"; action[actionName](val); equation.append(val); } if (val === ".") { action.append(val); equation.append(val); } if (val.match(/[*+/-]/)) { if (equationContent.slice(-1).match(/[*+-/]/)) { action.html("Valid sign"); equation.html(""); } else { action.html(val); equation.append(val); } } if (val === "=") { action.html(eval(equationContent)); equation.append(val + eval(equationContent)); } });
}
$(document).ready(buttonClick);
Build a JavaScript Calculator - Script Codes
Build a JavaScript Calculator - Script Codes
Home Page Home
Developer Roksana
Username roksanaop
Uploaded November 22, 2022
Rating 3
Size 2,903 Kb
Views 12,144
Do you need developer help for Build a 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!

Roksana (roksanaop) Script Codes
Name
Exercise - Build a Random Quote Machine
Build a Wikipedia Viewer - FCC
Built a Tribute Page
Exercise - Build a Tribute Page
Build a Simon Game
Use the Twitchtv JSON API
Build a Tic Tac Toe Game
Build a Pomodoro Clock
Image Processing
Weather App
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!