Calculator

Developer
Jimmy Lin
Size
2,544 Kb
Views
10,120
  1. Calculator Previews
  2. Calculator HTML Codes
  3. Calculator CSS Codes
  4. Calculator JS Codes

How do I make an calculator?

What is a calculator? How do you make a calculator? This script and codes were developed by Jimmy Lin on 11 December 2022, Sunday.

Calculator Previews
IQ Test

Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calculator</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<div class="text-center"> <h1>Calculator</h1> <h2>Free Code Camp Project</h2>
</div>
<div id = "calcOutput"> <span id="steps">0</span> <hr/>
</div>
<div class="text-center" id="calculator"> <a class="btn btn-danger" id="deleteAll">AC</a> <a class="btn btn-danger" id="backOne">CE</a> <a class="btn btn-primary" id="/">/</a> <a class="btn btn-primary" id="*">*</a> <br/> <a class="btn btn-primary" id="7">7</a> <a class="btn btn-primary" id="8">8</a> <a class="btn btn-primary" id="9">9</a> <a class="btn btn-primary" id="-">-</a> <br/> <a class="btn btn-primary" id="4">4</a> <a class="btn btn-primary" id="5">5</a> <a class="btn btn-primary" id="6">6</a> <a class="btn btn-primary" id="+">+</a> <br/> <a class="btn btn-primary" id="1">1</a> <a class="btn btn-primary" id="2">2</a> <a class="btn btn-primary" id="3">3</a> <a class="btn btn-primary" id=".">.</a> <br/> <a class="btn btn-primary bigButton" id="0">0</a> <a class="btn btn-primary bigButton" id="total">=</a>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Calculator - Script Codes CSS Codes

h1, h2 { font-family: Lobster;
}
#calcOutput{ background-color: grey; width:250px; height:75px; border-top-left-radius:2em; border-top-right-radius:2em; margin-right:auto; margin-left:auto; padding-top: 20px; margin-top: 20px;
}
#calculator{ background-color:grey; width:250px; padding-top:20px; padding-bottom:30px; border-bottom-left-radius:2em; border-bottom-right-radius:2em; margin-right:auto; margin-left:auto;
}
#steps{ padding-left:50px; font-size:2em;
}
a{ margin:5px; width:2.6vw; height:2.6vw;
}
.bigButton{ width:93px;
}

Calculator - Script Codes JS Codes

$(document).ready(function(){ //stores input var inputs=[""]; //string to store current input var totalString; //operators array var operators1 =["+","-","/","*"]; //operators array with . var operators2 =["."]; //numbers for validation var nums = [0,1,2,3,4,5,6,7,8,9]; function getValue(input){ if(operators2.includes(inputs[inputs.length-1]===true && input===".")){ console.log("Duplicate '.' "); } else if(inputs.length===1&& operators1.includes(input)===false){ inputs.push(input); } else if (operators1.includes(inputs[inputs.length-1])===false){ inputs.push(input); } else if (nums.includes(Number(input))){ inputs.push(input); } update(); } function update(){ totalString = inputs.join(""); $("#steps").html(totalString); } function getTotal(){ total = inputs.join(""); $("#steps").html(eval(totalString)); } $("a").on("click", function(){ if(this.id==="deleteAll"){ inputs=[""]; update(); } else if (this.id==="backOne"){ inputs.pop(); update(); } else if(this.id==="total"){ getTotal(); } else { //error1 if(inputs[inputs.length-1].indexOf("+","-","/","*",".")===-1){ getValue(this.id); } else { getValue(this.id); } } });
});
Calculator - Script Codes
Calculator - Script Codes
Home Page Home
Developer Jimmy Lin
Username odylic
Uploaded December 11, 2022
Rating 3
Size 2,544 Kb
Views 10,120
Do you need developer help for 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!

Jimmy Lin (odylic) Script Codes
Name
Portfolio Template
Mark Down Previewer
Firefly tribute
TwitchTV JSON API 2
Portfolio Trial 1
Tic Tac Toe Game
Pomodoro Clock
Random Quote Generator
RPG Style Text Dialogue
Twitch JSON API
Create amazing SEO 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!