Calculator
How do I make an calculator?
What is a calculator? How do you make a calculator? This script and codes were developed by Codoer on 07 December 2022, Wednesday.
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> <div class='cal'> <h1>Calculator</h1> <div class='buttonarea'> <div class='showarea'><span class='result'></span></div> <div class="row1"> <button class='button percent'>%</button> <button class='button sqrt'> √</button> <button class='button square'><span id='ex'>X</span> <span class='ex2'>2</span></button> <button class='button limitb'><span class='limit'>1/</span><span class='lim'>x</span></button> </div> <div class='row2'> <button class='button CE'>CE</button> <button class='button C'>C</button> <button class='button back'>⌫</button> <button class='button operator' value='/'>÷</button> </div> <div class='row3'> <button class='numbers button' value='7'>7</button> <button class='numbers button' value='8'>8</button> <button class='numbers button' value='9'>9</button> <button class='button operator' value='*'>X</button> </div> <div class='row4'> <button class='numbers button' value='4'>4</button> <button class='numbers button' value='5'>5</button> <button class='numbers button' value='6'>6</button> <button class='button operator' value='-'>-</button> </div> <div class='row5'> <button class='numbers button' value='1'>1</button> <button class='numbers button' value='2'>2</button> <button class='numbers button' value='3'>3</button> <button class='button operator' value='+'>+</button> </div> <div class='row6'> <button class='button negate'>+/-</button> <button class='numbers button' value='0'>0</button> <button class='button dot' value='.'>.</button> <button class='button equal'>=</button> </div> </div>
</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
body { background-color: #2c2c2c; background-size: cover;
}
.cal { width: 272px; margin: 0 auto; background-color: whitesmoke; height: 452px;
}
h1 { margin-top: 100px; font-size: 25px; font-weight: bold; color: black; text-align: center; padding-top: 15px;
}
.showarea { background-color: whitesmoke; font-size: 25px; text-align: right; padding-top: 4px; padding-right: 4px; width: 272px; height: 52px; margin: 0 auto;
}
.buttonarea { margin: 0 auto; text-align: center; padding-top: 22px; font-size: 0; margin-top: -25px; background: whitesmoke;
}
.button { width: 68px; height: 60px; font-size: 25px; border: none; background-color: #dedede;
}
.button:focus { outline: 0;
}
.button:hover { background-color: #c8c8c8; color: black;
}
.ex2 { position: absolute; font-size: 15px; margin-top: -2px;
}
.equal:hover { background-color: #1FAEFF;
}
h3 { text-align: right;
}
Calculator - Script Codes JS Codes
function count() { var arr = [], flag = false, oFlag = false, $result = $('.result'), percentNumber = [], percentArr = [], percentStr = '', otest = [], percentDecimal = 0; function fixNumber(x) { var num = x.toPrecision(15); return parseFloat(num); } function sub() { var str = $result.text(); if (str.length > 19) { str = str.substr(0, 19); $result.text(str); } } $('.numbers').click(function() { var val = $(this).attr('value'); function num() { var str = $result.text(); flag = false; if (arr[0] === '0' && arr.indexOf('.') === -1 && arr.indexOf('/') === -1 && arr.indexOf('*') === -1 && arr.indexOf('+') === -1 && arr.indexOf('-') === -1) { arr = []; arr = []; $result.text(''); //fix 0030, 00.03 otest.push(val); arr.push(val); $result.text($result.text() + val); return sub(); } if (oFlag && otest[0] === '0' && otest.indexOf('.') === -1 && otest.indexOf('/') === -1 && otest.indexOf('*') === -1 && otest.indexOf('+') === -1 && otest.indexOf('-') === -1) { otest = []; otest.push(val); arr.splice(-1, 1, val); str = str.substr(0, str.length - 1) + val; $result.text(str); return sub; } else { arr.push(val); otest.push(val); $result.text($result.text() + val); return sub(); } } if (!flag) { num(); } if (flag) { arr = []; $result.text(''); num(); } }); $('.dot').click(function() { otest.push('.'); function check() { var last = $result.text().slice(-1); if (last === '.') { return $result.text(); } if (arr.indexOf('.') !== -1) { $result.text(); return sub(); } else { arr.push('.'); $result.text($result.text() + '.'); return sub(); } } if (flag) { $result.text(''); flag = false; arr = []; return check(); } if (!flag) { return check(); } }); $('.operator').click(function() { otest = []; oFlag = true; flag = false; var val1 = $(this).attr('value'); var str = $result.text(); var strLen = (str.length) - 1; if (str === '') { return $result.text(''); } if (str[strLen] === '+' || str[strLen] === '-' || str[strLen] === '*' || str[strLen] === '/') { str = str.substr(0, strLen); arr.splice(-1, 1, val1); return $result.text(str + val1); } else { var arrStr = fixNumber(eval(arr.join(''))); arr = []; arr.push(arrStr); arr.push(val1); console.log(arr); return $result.text(arrStr + val1); } }); $('.equal').click(function() { flag = true; var str = $result.text(); if (str === '') { return $result.text(''); } else { var equa = eval($result.text()); $result.text(fixNumber(equa)); arr = []; arr.push(equa); percentNumber = []; percentArr = []; percentStr = ''; percentDecimal = 0; return sub(); } }); $('.limitb').click(function() { flag = true; var str = $result.text(); if (/[\+\-\*\/]/.test(arr[arr.length - 1])) { var limi = arr[0]; arr = []; arr.push(fixNumber(1 / limi)); $result.text(fixNumber(1 / limi)); return sub(); } if (str === '') { return $result.text(''); } else { var lim = eval($result.text()); $result.text(fixNumber(1 / lim)); arr = []; arr.push(fixNumber(1 / lim)); return sub(); } }); $('.negate').click(function() { flag = true; var str = $result.text(); if (/[\+\-\*\/]/.test(arr[arr.length - 1])) { var n = fixNumber(arr[0] * -1); arr = []; arr.push(n); return $result.text(n); } if (str === '') { return $result.text(''); } else { var neg = fixNumber(eval($result.text())); arr = []; arr.push(neg * -1); return $result.text(neg * -1); } }); $('.back').click(function() { oFlag = true; otest = []; function del() { var str = $result.text(); var strl = str.length - 1; arr.splice(-1, 1); $result.text(arr.join('')); sub(); } if (flag) { $result.text(); } else { del(); } }); $('.CE').click(function(){ if (flag) { arr = []; flag = false; return $result.text(''); } else { if (oFlag) { for (var i = arr.length - 1; i >= 0; i--) { if (/[\+\-\/\*]/.test(arr[i])) { $result.text(arr.join('')); return sub(); } else arr.pop(); } } else { flag = false; $result.text(''); arr = []; otest = []; } } }); $('.C').click(function() { flag = false; oFlag = false; $result.text(''); arr = []; otest = []; }); $('.square').click(function() { flag = true; var str = $result.text(); if (/[\+\-\*\/]/.test(arr[arr.length - 1])) { var n = fixNumber(arr[0] * arr[0]); arr = []; arr.push(n); $result.text(n); return sub(); } if (str === '') { return $result.text(''); } else { var squa = fixNumber(eval($result.text())); $result.text(fixNumber(squa * squa)); arr = []; arr.push(squa * squa); return sub(); } }); $('.sqrt').click(function() { flag = true; var str = $result.text(); if (/[\+\-\*\/]/.test(arr[arr.length - 1])) { var n = fixNumber(Math.sqrt(arr[0])); arr = []; arr.push(n); return $result.text(n); } if (str === '') { return $result.text(''); } else { var sqt = fixNumber(Math.sqrt(eval($result.text()))); $result.text(sqt); arr = []; arr.push(sqt); return sub(); } }); $('.percent').click(function() { function percent() { percentNumber = []; while (arr[arr.length - 1] !== '+' && arr[arr.length - 1] !== '-' && arr[arr.length - 1] !== '*' && arr[arr.length - 1] !== '/') { percentNumber.push(arr.splice(-1, 1)); } percentArr = percentNumber.reduce(function(a, b) { return a.concat(b); }, []).reverse(); percentDecimal = Number(percentArr.join('')) / 100; return percentDecimal; } if (arr.includes('+') || arr.includes('-') || arr.includes('*') || arr.includes('/')) { if (!isNaN(arr[arr.length - 1])) { var percentResult = fixNumber(eval(arr[0] * percent())); arr.push(percentResult); percentDecimal = 0; $result.text(arr.join('')); return sub(); } else { arr.push(fixNumber(eval(arr[0] * arr[0] / 100))); $result.text(arr.join('')); return sub(); } } else { arr = []; return $result.text(''); } });
}
count();
Developer | Codoer |
Username | c0d0er |
Uploaded | December 07, 2022 |
Rating | 3 |
Size | 3,530 Kb |
Views | 6,072 |
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 |
React photo carousel | 2,500 Kb |
Show the Local Weather | 2,904 Kb |
Jd wiki | 3,082 Kb |
Nikola Tesla Tribute Page | 3,263 Kb |
Twitch TV App | 3,530 Kb |
Visualize Meteorites Map Data Across the Globe | 5,842 Kb |
React Camper Leaderboard | 5,258 Kb |
Visualize Data with a Heat Map | 6,445 Kb |
Wikipedia Viewer | 2,811 Kb |
Visualize Data with a Scatterplot Graph | 6,834 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 |
Intake Form Page 2 | Ijantje | 4,983 Kb |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
404 Error Page | WebSonick | 3,203 Kb |
Popover Example | Seanboom | 2,429 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Tumblr API | Juanv911 | 2,436 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!