My Calculator
How do I make an my calculator?
This is an electronic calculator. What is a my calculator? How do you make a my calculator? This script and codes were developed by Nate Stoll on 09 September 2022, Friday.
My Calculator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My Calculator</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine&effect=neon"> <h1 class="font-effect-neon">Nate's Awesome Calculator</h1> <h2 class="font-effect-neon">To Calculate Click Below:</h2> <div class="Frame"> <div class="tg-wrap"> <table class="tg"> <tr> <th class="tg-a8gl font-effect-neon" colspan="4" id="result"></th> </tr> <tr> <td class="tg-ftb4"> <button type="button" class="red" id="clear-all">AC</button> </td> <td class="tg-lewp"> <button type="button" id="op">(</button> </td> <td class="tg-ljlu"> <button type="button" id="clo">)</button> </td> <td class="tg-6dgb"> <button type="button" id="division">÷</button> </td> </tr> <tr> <td class="tg-6dgb"> <button type="button" id="seven">7</button> </td> <td class="tg-6dgb"> <button type="button" id="eight">8</button> </td> <td class="tg-6dgb"> <button type="button" id="nine">9</button> </td> <td class="tg-6dgb"> <button type="button" id="mult">x</button> </td> </tr> <tr> <td class="tg-6dgb"> <button type="button" id="four">4</button> </td> <td class="tg-6dgb"> <button type="button" id="five">5</button> </td> <td class="tg-6dgb"> <button type="button" id="six">6</button> </td> <td class="tg-6dgb"> <button type="button" id="minus">-</button> </td> </tr> <tr> <td class="tg-6dgb"> <button type="button" id="one">1</button> </td> <td class="tg-6dgb"> <button type="button" id="two">2</button> </td> <td class="tg-6dgb"> <button type="button" id="three">3</button> </td> <td class="tg-6dgb"> <br> <button type="button" class="plus" id="plus" class="font-effect-neon"class="font-effect-neon">+</button> </td> </tr> <tr> <td class="tg-6dgb"> <button type="button" id="zero">0</button> </td> <td class="tg-6dgb"> <button type="button" id="dec">.</button> </td> <td class="tg-6dgb"> <button type="button" id="mod">%</button> </td> <td class="tg-6dgb"> <button type="button" id="eq">=</button> </td> </tr> </table> </div> </div>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
My Calculator - Script Codes CSS Codes
h2 { font-size: 50px; text-align: center; font-family: tangerine; font-effect: neon; color: #663300;
}
h1 { font-size: 60px; text-align: center; font-family: Tangerine; color: #663300;
}
section { min-height: 90vh; padding-top: 1px; padding-bottom: 0px; color: #fff; background-image: url("https://s20.postimg.org/hisdp6ia5/Background_Blue.jpg"); background-color: #000; bottom: 5px;
}
footer { background-color: black; color: gray; line-height: 20px; padding-top: 10px; padding-bottom: 6px; position: relative; text-align: center; font-family: cursive, sans-serif;
}
/*Calculator*/
.red { background-color: transparent; border-color: white;
}
.plus { margin-top: -200px;
}
button { font-weight: bolder; background-color: transparent; border-color: white; width: 100%; padding: 20px 30px;
}
.tg { font-weight: bolder; padding: 1.5em 0 1.5em 0; width: 310px; border-radius: 40px; border: 3px outset #eeeeee; margin: 0 auto;
}
.tg td { font-size: 14px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; border-color: white; color: white; background-color: transparent; font-weight: bolder;
}
.tg th { font-weight: bolder; font-family: arsenal; font-size: 14px; padding: 20px 20px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; color: #fff; background-color: transparent;
}
.tg .tg-ljlu { font-weight: bolder; font-size: 16px; font-family: "Lucida Console", Monaco, monospace !important; background-color: transparent; color: #fff; text-align: center;
}
.tg .tg-a8gl { font-weight: bolder; font-size: 16px; font-family: "Lucida Console", Monaco, monospace !important; background-color: #cac1c0; color: #333333; text-align: right; vertical-align: top; height: 65px;
}
.tg .tg-ftb4 { font-weight: bolder; font-size: 16px; font-family: "Lucida Console", Monaco, monospace !important; background-color: transparent; color: #ffffff; text-align: center;
}
.tg .tg-lewp { font-weight: bolder; font-size: 16px; font-family: "Lucida Console", Monaco, monospace !important; background-color: transparent; color: #ffffff; text-align: center; vertical-align: top;
}
.tg .tg-6dgb { font-weight: bolder; font-size: 16px; font-family: "Lucida Console", Monaco, monospace !important; ; background-color: transparent; color: #ffffff; text-align: center; vertical-align: top;
}
@media screen and (max-width: 767px) { .tg { width: auto !important; } .tg col { width: auto !important; } .tg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: auto 0; }
}
My Calculator - Script Codes JS Codes
var operands = ['+', '-', '*', '/', '%', '.'];
function Check() { var lastChar = $('#result').text().slice(-1); for (var i = 0; i < operands.length; i++) { if (operands[i] == lastChar) { $('#result').text('Err'); } }
}
$('#clear-all').click(function() { $('#result').text('');
});
$('#clear').click(function() { $('#result').text('');
});
$('#plus').click(function() { Check(); $('#result').text($('#result').text() + '+');
});
$('#op').click(function() { Check(); $('#result').text($('#result').text() + '(');
});
$('#clo').click(function() { Check(); $('#result').text($('#result').text() + ')');
});
$('#minus').click(function() { Check(); $('#result').text($('#result').text() + '-');
});
$('#mult').click(function() { Check(); $('#result').text($('#result').text() + '*');
});
$('#division').click(function() { Check(); $('#result').text($('#result').text() + '/');
});
$('#mod').click(function() { Check(); $('#result').text($('#result').text() + '%');
});
$('#dec').click(function() { Check(); $('#result').text($('#result').text() + '.');
});
$('#eq').click(function() { $('#result').text(eval($('#result').text()));
});
$('#nine').click(function() { $('#result').text($('#result').text() + 9);
});
$('#eight').click(function() { $('#result').text($('#result').text() + 8);
});
$('#seven').click(function() { $('#result').text($('#result').text() + 7);
});
$('#six').click(function() { $('#result').text($('#result').text() + 6);
});
$('#five').click(function() { $('#result').text($('#result').text() + 5);
});
$('#four').click(function() { $('#result').text($('#result').text() + 4);
});
$('#three').click(function() { $('#result').text($('#result').text() + 3);
});
$('#two').click(function() { $('#result').text($('#result').text() + 2);
});
$('#one').click(function() { $('#result').text($('#result').text() + 1);
});
$('#zero').click(function() { $('#result').text($('#result').text() + 0);
});
Developer | Nate Stoll |
Username | natester13 |
Uploaded | September 09, 2022 |
Rating | 3 |
Size | 3,074 Kb |
Views | 26,312 |
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 |
Nanny Boutique | 6,162 Kb |
Nanny Boutique Sign In Page | 2,262 Kb |
CTS | 3,801 Kb |
Pomodoro Timer | 3,216 Kb |
Twitch TV | 4,488 Kb |
Personal Website | 4,393 Kb |
A Pen by Nate Stoll | 3,438 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 |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
React TODO | Enieste | 3,320 Kb |
STIKHOI | Denmch | 7,122 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
Cloud upload | Jaflo | 2,774 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 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!