A Pen by Ash
How do I make an a pen by ash?
What is a a pen by ash? How do you make a a pen by ash? This script and codes were developed by Ash on 09 August 2022, Tuesday.
A Pen by Ash - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Ash</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="calc"> <div class="top"> <span class="reset">C</span> <div class="screen"></div> </div> <div class="buttons"> <span>7</span> <span>8</span> <span>9</span> <span class="action">+</span> <span>4</span> <span>5</span> <span>6</span> <span class="action">-</span> <span>1</span> <span>2</span> <span>3</span> <span class="action">x</span> <span>0</span> <span>.</span> <span class="evaluate">=</span> <span class="action">/</span> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
A Pen by Ash - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Muli);
body { font: 18px 'Muli', 'sans-serif'; color: #3b3a36; font-weight: 700; background:#B4E1D9;
}
#calc { width: 400px; height: auto; background: #B4E1D9; padding: 20px; border-radius: 2px; margin: 0 auto;
}
.buttons span
{ background: #fff; float: left; -ms-flex-preferred-size: 19%; flex-basis: 19%; height: 50px; line-height: 50px; text-align: center; margin: 10px; border-radius: 2px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.reset{ background: #fff; -ms-flex-preferred-size: 19%; flex-basis: 19%; height: 50px; line-height: 50px; text-align: center; margin: 10px; border-radius: 2px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.buttons span:active,
.reset:active{ background: #90b4ad; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: translateY(2px); transform: translateY(2px);
}
.top { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: space-between; flex-flow: space-between;
}
.screen { background: #90b4ad; height: 50px; -webkit-box-flex: 3; -ms-flex-positive: 3; flex-grow: 3; line-height: 50px; text-align: center; margin: 10px; border-radius: 2px;
}
.buttons,
.top { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.reset{ color: #FF7070;
}
A Pen by Ash - Script Codes JS Codes
var buttons = document.querySelectorAll("#calc span");
var operators = ['+', '-', 'x', '÷'];
for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function(e) { var input = document.querySelector(".screen"); var inputVal = input.innerHTML; var buttonVal = this.innerHTML; //var reset = document.querySelector(".reset"); //clear if (buttonVal == "C") { input.innerHTML = ""; } else if (buttonVal == "=") { var equation = inputVal; equation = equation.replace(/x/g, "*"); if (equation) input.innerHTML = eval(equation); } //number to screen else { input.innerHTML += buttonVal } }
}
Developer | Ash |
Username | littleginger |
Uploaded | August 09, 2022 |
Rating | 3 |
Size | 2,386 Kb |
Views | 46,552 |
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 |
Button | 2,144 Kb |
Isometric Grid Map | 6,298 Kb |
Cute Bunny | 3,761 Kb |
Travel Site Demo | 2,899 Kb |
Star Thing | 2,982 Kb |
PKMN | 3,802 Kb |
Telescope | 2,241 Kb |
CSS Isometric Pokemon | 4,874 Kb |
Sky Clock | 2,973 Kb |
Playing with Buttons | 3,099 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 |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Break Out | AzazelN28 | 12,431 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
A Pen by Eka Risyana | Risyana | 3,705 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!