Calculator

Developer
DannyCoder
Size
4,185 Kb
Views
113,344
  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 DannyCoder on 06 November 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='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <section> <h1><span>EZCalculator</span></h1> <h3 id="total">0</h3> <div id="keypad"> <ul id="keypad-list"> <li data-op="clear" class="top-keypad">C</li> <li data-op="plusminus" class="top-keypad">&plusmn;</li> <li data-op="mod" class="top-keypad">mod</li> <li data-op="del" class="no-border-right operator">&larr;</li> <li data-op="7">7</li> <li data-op="8">8</li> <li data-op="9">9</li> <li data-op="divide" class="no-border-right operator">&divide;</li> <li data-op="4">4</li> <li data-op="5">5</li> <li data-op="6">6</li> <li data-op="times" class="no-border-right operator">&times;</li> <li data-op="1">1</li> <li data-op="2">2</li> <li data-op="3">3</li> <li data-op="minus" class="no-border-right operator">&minus;</li> <li data-op="dot" class="border-bottom-left-rounded no-border-bottom">&middot;</li> <li data-op="0" class="no-border-bottom">0</li> <li data-op="equal" class="no-border-bottom">=</li> <li data-op="plus" class="border-bottom-right-rounded no-border-right no-border-bottom operator">+</li> </ul> <div class="cancel-float"></div> </div> <!-- / #keypad --> </section> </div> <!-- /.row --> </div> <!-- /.container--> <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='http://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Calculator - Script Codes CSS Codes

body { font-family: 'Open Sans', sans-serif; background-color: #7B939A;
}
h1 { margin-top: -2px; padding-top: 15px; padding-bottom: 15px !important; color: #FFFFFF; font-size: 18px; font-weight: 300; padding-bottom: 10px; background-color: rgba(0, 0, 0, 0.3); border-top-left-radius: 12px; border-top-right-radius: 12px;
}
h1 span { padding: 0 10px; border-radius: 6px; background-color: #66A1B4;
}
h3 { color: #FFF; text-align: right; padding: 5px 15px 5px 10px; font-size: 72px; font-weight: 100; margin-bottom: -10px; margin-top: -10px;
}
section { background-color: rgba(0, 0, 0, 0.5); border: 1px solid #647B84; border-radius: 12px; -webkit-box-shadow: -5px 19px 37px -18px rgba(0,0,0,0.55); -moz-box-shadow: -5px 19px 37px -18px rgba(0,0,0,0.55); box-shadow: -5px 19px 37px -18px rgba(0,0,0,0.55);
}
.container { margin-top: 100px; text-align: center; width: 450px;
}
.row { border-color: blue; border-radius: 12px; border-width: 4px;
}
#keypad-list { list-style: outside none none; padding-left: 0;
}
#keypad-list li { font-family: 'Open Sans', sans-serif; font-weight: lighter; background-color: #D0DCE3; border-right: 1px solid #647B84; border-bottom: 1px solid #647B84; float: left; font-size: 36px; height: 100px; line-height: 100px; text-align: center; width: 25%;
}
#keypad-list li:hover { background-color: #98bacc !important; color: #fff; cursor: pointer;
}
.no-border-bottom { border-bottom: none !important;
}
.no-border-right { border-right: none !important;
}
.border-bottom-left-rounded { border-bottom-left-radius: 12px;
}
.border-bottom-right-rounded { border-bottom-right-radius: 12px;
}
.cancel-float { clear:both;
}
.operator { background-color: #66A1B4 !important; color: #fff;
}
.top-keypad { background-color: #BED1DB !important;
}

Calculator - Script Codes JS Codes

$(window).load(function () { var total, //keep track of results after operation clickedKey, //check which keypad key was pressed inputNum, //current input Num - reset after operation operator, // plus, minus, times, divide, mod, delete, plus or minus, clear display. $displayTotal, //update the displayed value lastClickedOperator; //keep track of last clicked operator //init the above variables init(); $("#keypad-list li").click(function (e) { clickedKey = $(this).data("op"); switch (clickedKey) { case 1: displayNum(1); break; case 2: displayNum(2); break; case 3: displayNum(3); break; case 4: displayNum(4); break; case 5: displayNum(5); break; case 6: displayNum(6); break; case 7: displayNum(7); break; case 8: displayNum(8); break; case 9: displayNum(9); break; case 0: displayNum(0); break; case "dot": var num = parseFloat(formatInput($displayTotal.text())); //check if displayed number is integer if( num % 1 === 0) {displayNum(".");} break; case "plus": //Prevent reset if(lastClickedOperator == operator){ break; } if (operator === "none") { //read current output and remove comma total = parseFloat(formatInput($displayTotal.text())); $displayTotal.html(formatOutput(total)); } else { compute(operator, inputNum); $displayTotal.html(formatOutput(total)); } operator = lastClickedOperator = "plus"; //reset inputNum inputNum = ""; break; case "minus": if(lastClickedOperator == operator){ break; } if (operator === "none") { //read current output total = parseFloat(formatInput($displayTotal.text())); //display current output $displayTotal.html(formatOutput(total)); } else { compute(operator, inputNum); $displayTotal.html(formatOutput(total)); } operator = lastClickedOperator = "minus"; //reset inputNum inputNum = ""; break; case "times": if(lastClickedOperator == operator){ break; } if (operator === "none") { //read current output total = parseFloat(formatInput($displayTotal.text())); //display current output $displayTotal.html(formatOutput(total)); } else { compute(operator, inputNum); $displayTotal.html(formatOutput(total)); } operator = lastClickedOperator = "times"; //reset inputNum inputNum = ""; break; case "divide": if(lastClickedOperator == operator){ break; } if (operator === "none") { //read current output total = parseFloat(formatInput($displayTotal.text())); //display current output $displayTotal.html(formatOutput(total)); } else { compute(operator, inputNum); $displayTotal.html(formatOutput(total)); } operator = lastClickedOperator = "divide"; //reset inputNum inputNum = ""; break; case "mod": if(lastClickedOperator == operator){ break; } if (operator === "none") { //read current output total = parseFloat(formatInput($displayTotal.text())); //display current output $displayTotal.html(formatOutput(total)); } else { compute(operator, inputNum); $displayTotal.html(formatOutput(total)); } operator = "mod"; //reset inputNum inputNum = ""; break; case "del": //read current output var delString = formatInput($displayTotal.text()).toString(); delString = delString.slice(0, -1); total = (delString === "") ? 0 : parseFloat(delString); $displayTotal.html(formatOutput(total)); if(total === 0) {init();} inputNum = ""; break; case "plusminus": //read current output var plusminus = formatInput($displayTotal.text()).toString(); total = parseFloat(plusminus) * -1; $displayTotal.html(formatOutput(total)); //if(total === 0) {init();} inputNum = total.toString(); break; case "equal": if(operator == "none" || operator == ""){ break; } compute(operator, inputNum); $displayTotal.html(formatOutput(total)); inputNum = ""; operator = "none"; break; case "clear": //reset values init(); break; default: console.log("Error: Invalid Operator"); } }); function init() { total = 0; clickedKey = ""; inputNum = ""; operator = "none"; $displayTotal = $("#total"); $displayTotal.text(0); lastClickedOperator = ""; } function displayNum(val) { lastClickedOperator = ""; //restrict input to maximum 12 digits if(inputNum.length < 12){ inputNum = inputNum + val; } $displayTotal.html(formatOutput(inputNum)); } function compute(optr, val) { switch (optr) { case "plus": total = total + parseFloat(val); break; case "minus": total = total - parseFloat(val); break; case "times": total = total * parseFloat(val); break; case "divide": total = total / parseFloat(val); break; case "mod": total = total % parseFloat(val); break; default: console.log("Error: Unknown Operator"); } } function formatOutput(val) { val = val.toString(); var valnum = parseFloat(val) //numeral library doesn't support scientific notation numbers //Converts number to scientific notation if it is greater than 999,999,999,999 if(valnum > 999999999999 || valnum < -999999999999 ){ //calculate maximum string length do display if(valnum.toPrecision().toString().length <= 12){ //return valnum.toExponential(2).toString(); return valnum.toPrecision().toString(); } else { return valnum.toPrecision(5).toString(); } } // fix "xxx." display issue with numeral library else if (val.indexOf(".") === (val.length - 1)) { return numeral(val).format('0,0') + "."; } //fix "xxx.0" display issue with numeral library else if (val.indexOf(".") === (val.length - 2) && val.indexOf("0") === (val.length - 1)){ return numeral(val).format('0,0') + ".0"; } else { return numeral(val).format('0,0.[0000]'); } } function formatInput(val) { var isExpNotation = val.indexOf('e'); //if is a scientific notation number just return it and don't use numeral library if(isExpNotation !== -1){ return Number(val).toString(); } else { return numeral().unformat(val); } }
});
Calculator - Script Codes
Calculator - Script Codes
Home Page Home
Developer DannyCoder
Username DannyCoder
Uploaded November 06, 2022
Rating 3
Size 4,185 Kb
Views 113,344
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!

DannyCoder (DannyCoder) Script Codes
Name
Personal Portfolio Webpage
Twitch Streamers
Local Weather
Pomodoro Clock
A Pen by DannyCoder
CamperNews
Zipline Random Quote Machine
Palindromes
Create amazing sales emails 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!