JS Calculator
How do I make an js calculator?
It's a simple js calculator using which you can add, substract, multiply and delete numbers. This js calculator functionality is based on javascript completely. . What is a js calculator? How do you make a js calculator? This script and codes were developed by Tushar Mehrotra on 13 September 2022, Tuesday.
JS Calculator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS Calculator</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head></head>
<body> <div class="title animated fadeInLeft"> <h1> JS Calculator</h1> <h4>Let's do some calculations</h4> </div>
<form class="container animated tada" name="calculator"> <input type="text" class="resultBox" name="result" id="input"> <div class="buttonContainer"> <div class="row"> <input type="button" onclick="calc1()" value="1"/> <input type="button" onclick="calc2()" value="2"/> <input type="button" onclick="calc3()" value="3"/> <input type="button" onclick="clearC()" value="C"/> </div> <div class="row"> <input type="button" onclick="calc4()" value="4"/> <input type="button" onclick="calc5()" value="5"/> <input type="button" onclick="calc6()" value="6"/> <input type="button" onclick="equals()" value="="/> </div> <div class="row"> <input type="button" onclick="calc7()" value="7"/> <input type="button" onclick="calc8()" value="8"/> <input type="button" onclick="calc9()" value="9"/> <input type="button" onclick="plus()" value="+"/> </div> <div class="row"> <input type="button" onclick="calc()" value="0"/> <input type="button" onclick="multiply()" value="*"/> <input type="button" onclick="divide()" value="/"/> <input type="button" onclick="minus()" value="-"/> </div> </div>
</form>
</body>
</html> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
JS Calculator - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
body { background: #6BB9F0; font-family: 'Open Sans', sans-serif;
}
.title { text-align: center; color: #fff;
}
.title h1 { margin-bottom: 0;
}
.title h4 { margin: 0; margin-bottom: 15px;
}
.container { width: 250px; margin: 70px auto; height: 230px; background-color: #247BA0; border-radius: 10px;
}
.resultBox { color: #000; display: inline-block; width: 230px; margin: 10px 7px; height: 30px; border-radius: 5px; border: 2px solid #999; text-align: right; font-weight: normal;
}
.buttonContainer { width: 230px; margin: 0 10px;
}
.row { text-align: center;
}
input { background: #fff; border: 1px solid #fff; color: #3D315B; width: 50px; height: 30px; margin-right: 4px; margin-top: 10px; font-weight: bold; font-size: 16px; border-radius: 3px;
}
.buttonContainer .row:nth-child(1) { margin-top: 0px;
}
.buttonContainer .row button:nth-child(4) { margin-right: 2px;
}
input[type="button"] { cursor: pointer;
}
JS Calculator - Script Codes JS Codes
function calc1(){ document.calculator.result.value += "1";
}
function calc2(){ document.calculator.result.value += "2";
}
function calc3(){ document.calculator.result.value += "3";
}
function calc4(){ document.calculator.result.value += "4";
}
function calc5(){ document.calculator.result.value += "5";
}
function calc6(){ document.calculator.result.value += "6";
}
function calc7(){ document.calculator.result.value += "7";
}
function calc8(){ document.calculator.result.value += "8";
}
function calc9(){ document.calculator.result.value += "9";
}
function calc(){ document.calculator.result.value += "0";
}
function plus(){ document.calculator.result.value += "+";
}
function minus(){ document.calculator.result.value += "-";
}
function multiply(){ document.calculator.result.value += "*";
}
function divide(){ document.calculator.result.value += "/";
}
function clearC(){ document.calculator.result.value = "";
}
function equals() { var equals = eval(document.calculator.result.value); document.calculator.result.value = equals;
}
$("input[type=button]").hover(function(){ $(this).toggleClass("animated tada");
});
Developer | Tushar Mehrotra |
Username | MTushar |
Uploaded | September 13, 2022 |
Rating | 3 |
Size | 3,213 Kb |
Views | 34,408 |
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!
Name | Size |
Github profile finder | 2,514 Kb |
React Tabs | 3,390 Kb |
Animated Responsive Skill Bar | 2,312 Kb |
React JS Movie Info App | 4,870 Kb |
Bootstrap alert | 2,509 Kb |
Vertical timeline page | 2,267 Kb |
AngularJS Form Validation | 2,896 Kb |
Hamburger menu animation | 2,469 Kb |
Random Programming Quote Generator | 5,855 Kb |
Show Hide Alert with Angular JS | 2,360 Kb |
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!
Name | Username | Size |
Mostly Fluid | Mccreath | 3,308 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!