Calculator

We are going to make a dark theme♠️ calculator using simple HTML,CSS & JavaScript.🧑‍💻 The goal is not to go to complex logic and css. the main goal is to keep it simple and write the less code to make beautiful UI with basic calculator functionality 1. Simple HTML Markup ``` Calculator

``` 2. To handle functionality, one JavaScript function is required ``` const display = document.querySelector("#display"); const button = document.querySelectorAll("button"); button.forEach((btn) => { btn.addEventListener("click", () => { if (btn.id === "=") { display.value = eval(display.value); } else if (btn.id === "ac") { display.value = ""; } else if (btn.id === "de") { display.value = display.value.slice(0, -1); } else { display.value += btn.id; } }); }); ``` 3. Making calculators beautiful with CSS ``` body { text-align: center; margin: 0; background: #bf4d5d; display: flex; align-items: center; justify-content: center; height: 100vh; } #calculator { max-width: 360px; background-color: #0d1b2a; border-radius: 10px; padding: 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px rgba(0, 0, 0, 0.23); } #display { width: 100%; height: 56px; font-size: 20px; text-align: right; margin-bottom: 10px; padding: 20px; border-radius: 5px; color: #e0e1dd; background-color: rgba(13, 27, 42, 0.3); border: none; box-sizing: border-box; } .operator { color: #219ebc; } #ac { color: #bf4d5d } .equal { width: calc(50% - 10px); } button { width: calc(25% - 10px); height: 50px; font-size: 20px; margin: 10px 5px; border: none; border-radius: 5px; float: left; background-color: rgba(13, 27, 42); color: #e0e1dd; -webkit-box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2); -moz-box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2); box-shadow: -1px 1px 30px -5px rgba(0, 0, 0, 0.2); } button:active { transform: scale(1.05); box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.19), 0 1.5px 1.5px rgba(0, 0, 0, 0.23); } ``` 🛖Please checkout the git repository https://github.com/kaizen-developer/simple-calculator 📺Please watch the video on YouTube that shows the same step by step https://youtu.be/HjA1m7xsARo I hope you enjoy creating a calculator this way.

kaizendeveloper

How To Make a Calculator Using HTML, CSS & JavaScript | HTML Calculator 🧮

Join Our Newsletter. No Spam, Only the good stuff.