Calculator with JavaScript and CSS3
How do I make an calculator with javascript and css3?
What is a calculator with javascript and css3? How do you make a calculator with javascript and css3? This script and codes were developed by Kw7oe on 13 December 2022, Tuesday.
Calculator with JavaScript and CSS3 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calculator with JavaScript and CSS3</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='calculator'> <div class='top'> <span class='clear'>C</span> <div class='screen'></div> </div> <div class='keys'> <span>7</span> <span>8</span> <span>9</span> <span class='operator'>+</span> <span>4</span> <span>5</span> <span>6</span> <span class='operator'>-</span> <span>1</span> <span>2</span> <span>3</span> <span class='operator'>÷</span> <span>0</span> <span>.</span> <span class='evaluate'>=</span> <span class='operator'>x</span> </div>
</div>
<div id='credit'> Source Code from: <a href='http://thecodeplayer.com/walkthrough/javascript-css3-calculator' target='_blank'>The Code Player Walkthrough</a>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Calculator with JavaScript and CSS3 - Script Codes CSS Codes
#credit { position: fixed; bottom: 5%; left: 50%; transform: translateX(-50%); font-size: 16px;
}
#credit a { color: #3553cf; text-decoration: none;
}
#credit a:hover { color: #2841a9;
}
* { margin: 0; padding: 0; box-sizing: border-box; font: bold 14px Arial, sans-serif;
}
html { height: 100%; background: white; background: radial-gradient(circle, #ffffff 20%, #cccccc); background-size: cover;
}
#calculator { width: 325px; height: auto; margin: 10% auto; padding: 20px 20px 9px; background: #9dd2ea; background: linear-gradient(#9dd2ea, #8bceec); border-radius: 3px; box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
.keys, .top { overflow: hidden;
}
.keys span, .top span.clear { float: left; position: relative; top: 0; cursor: pointer; width: 66px; height: 36px; background: white; border-radius: 3px; box-shadow: 0px 4px rgba(0, 0, 0, 0.2); margin: 0 7px 11px 0; color: #888; line-height: 36px; text-align: center; user-select: none; transition: all 0.2s ease;
}
.keys span.operator { background: #FFF0F5; margin-right: 0;
}
.keys span.evaluate { background: #F1FF92; box-shadow: 0px 4px #9da853; color: #888e5f;
}
.keys span.evaluate:active { box-shadow: 0px 0px #717a33; top: 4px;
}
.keys span:hover { background: #9c89f6; box-shadow: 0px 4px #6b54d3; color: white;
}
.top span.clear { float: left; background: #FF9FA8; box-shadow: 0px 4px #FF7c87; color: white;
}
.top span.clear:hover { background: #f68991; box-shadow: 0px 4px #d3545d; color: white;
}
.top span.clear:active { top: 4px; box-shadow: 0px 0px #d3545d;
}
.top .screen { height: 40px; width: 212px; float: right; padding: 0 10px; background: rgba(0, 0, 0, 0.2); border-radius: 3px; box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2); font-size: 17px; line-height: 40px; color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); text-align: right; letter-spacing: 1px;
}
Calculator with JavaScript and CSS3 - Script Codes JS Codes
var keys = document.querySelectorAll("#calculator span");
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
for(var i = 0; i < keys.length; i++) { keys[i].onclick = function(e) { var input = document.querySelector(".screen"); var inputVal = input.innerHTML; var btnVal = this.innerHTML; // Clear if (btnVal == "C") { input.innerHTML = ''; decimalAdded = false; } // Evaluate else if (btnVal == "=") { var equation = inputVal; var lastChar = equation[equation.length - 1]; equation = equation.replace(/x/g, "*") .replace(/÷/g, "/") if(operators.indexOf(lastChar) > -1 || lastChar == ".") { equation = equation.replace("/.$/", "") } if (equation) { input.innerHTML = eval(equation); } decimalAdded = false; } else if(operators.indexOf(btnVal) > -1) { var lastChar = inputVal[inputVal.length - 1]; if (inputVal != '' && operators.indexOf(lastChar) == -1) input.innerHTML += btnVal; else if (inputVal == '' && btn == "-") input.innerHTML += btnVal; if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) { input.innerHTML = inputVal.replace(/.$/, btnVal); } decimalAdded = false; } // Add Decimal else if (btnVal == ".") { if (!decimalAdded) { input.innerHTML += btnVal; decimalAdded = true; } } // Others else { input.innerHTML += btnVal; } e.preventDefault; }
}
Developer | Kw7oe |
Username | kw7oe |
Uploaded | December 13, 2022 |
Rating | 3 |
Size | 4,226 Kb |
Views | 14,168 |
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 |
JavaScript Calculator | 3,197 Kb |
Simple Typing Effect | 2,184 Kb |
Responsive Navigation Bar with Bootstrap | 2,133 Kb |
Register Form with Bootstrap | 2,911 Kb |
Image with Slide Up Caption | 2,578 Kb |
Tic Tac Toe | 3,793 Kb |
Image Slider | 2,131 Kb |
Wikipedia Viewer | 2,664 Kb |
Random Icon | 1,685 Kb |
Twitch Streams | 3,030 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 |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Another brick in the wall | Fivera | 1,955 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!