Created
May 22, 2023 06:37
-
-
Save Abdulsaboor2004/63ccb9e64f12a2434a56c4ea6b158c3a to your computer and use it in GitHub Desktop.
Here's an engaging Calculator made by using PURE html/css/js. (With the most consice JS code)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="style.css"> | |
| <title>A Simple Calculator</title> | |
| </head> | |
| <body> | |
| <h1 class="text-center" >Creating a Calculator using HTML/CSS/JS</h1> | |
| <div class="container"> | |
| <div class="row"> | |
| <input type="text" class="input"> | |
| </div> | |
| <div class="row"> | |
| <button class="button">7</button> | |
| <button class="button">8</button> | |
| <button class="button">9</button> | |
| <button class="button">*</button> | |
| </div> | |
| <div class="row"> | |
| <button class="button">4</button> | |
| <button class="button">5</button> | |
| <button class="button">6</button> | |
| <button class="button">/</button> | |
| </div> | |
| <div class="row"> | |
| <button class="button">1</button> | |
| <button class="button">2</button> | |
| <button class="button">3</button> | |
| <button class="button">+</button> | |
| </div> | |
| <div class="row"> | |
| <button class="button">0</button> | |
| <button class="button">.</button> | |
| <button class="button">=</button> | |
| <button class="button">-</button> | |
| </div> | |
| <div class="row"> | |
| <button class="button">Clear</button> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let stringForScreen = ""; | |
| let buttons = document.querySelectorAll(".button") | |
| Array.from(buttons).forEach((button)=>{button.addEventListener("click", (e)=>{ | |
| if (e.target.innerHTML == "=") { | |
| stringForScreen = eval(stringForScreen); | |
| document.querySelector("input").value = stringForScreen; | |
| } | |
| else if (e.target.innerHTML == "Clear") { | |
| stringForScreen = ""; | |
| document.querySelector("input").value = stringForScreen; | |
| }else{ | |
| console.log(e.target) | |
| stringForScreen = stringForScreen + e.target.innerHTML; | |
| document.querySelector('input').value = stringForScreen; | |
| } | |
| }) | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* UTILITY CLASSES */ | |
| @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@500&display=swap'); | |
| * { | |
| font-family: 'Dosis', sans-serif; | |
| color: aliceblue; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: radial-gradient(ellipse at bottom, #192E47 0%, #030617 100%); | |
| padding: 0; | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .button { | |
| margin: 5px; | |
| padding: 17px 20px; | |
| background-color: #793000; | |
| color: #f3f3f3; | |
| font-weight: bold; | |
| border: none; | |
| border-radius: 5px; | |
| letter-spacing: 4px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| } | |
| .button:hover { | |
| transition: 0.3; | |
| background: #f49403; | |
| color: #050801; | |
| box-shadow: 0 0 5px #f49403, | |
| 0 0 25px #f49403, | |
| 0 0 50px #f49403, | |
| 0 0 200px #f49403; | |
| -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); | |
| } | |
| .container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: rgba(180, 180, 180, 0.11); | |
| flex-direction: column; | |
| } | |
| .row input { | |
| outline: none; | |
| background: radial-gradient(ellipse at bottom, #192e473f 0%, #03061733 100%); | |
| font-family: 'Dosis', sans-serif; | |
| font-size: 15px; | |
| padding: 12px 57px; | |
| margin: 10px; | |
| text-align: end; | |
| border: none; | |
| border-radius: 6px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You all might be wondering… What's new in this? It's just a Calculator!
But What's New in this is
The lines of code (of JavaScript) is less than as compare to other ones. Thus, it's the Calculator with the most concise code.
Thanks to @Muzammil-Bilwani who taught me how to create this.
