In this article, Let’s create a calculator in HTML, CSS, and JavaScript. that can run over the browser and show the output.
To perform this task, I am using visual studio code as a code editor tool, which you can use at your convenience.
- Create a folder with a project folder and open that folder inside your code editor to start the task.
- Create index.html file to write the HTML code to define Buttons, Input, and labels.
- Create script.js file to write the JavaScript or logical code to perform events and operations.
- Create style.css to write the CSS code for the styling of the button, input, and labels.
- Now double-click on your index.html file to run it and get the output.
Index.html
<!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>Codebun</title> </head> <body> <div class="container"> <div class="calculator"> <input type="text" id="inputBox" placeholder="0" /> <div> <button class="button operator">AC</button> <button class="button operator">DEL</button> <button class="button operator">%</button> <button class="button operator">/</button> </div> <div> <button class="button">7</button> <button class="button">8</button> <button class="button">9</button> <button class="button operator">*</button> </div> <div> <button class="button">4</button> <button class="button">5</button> <button class="button">6</button> <button class="button operator">-</button> </div> <div> <button class="button">1</button> <button class="button">2</button> <button class="button">3</button> <button class="button operator">+</button> </div> <div> <button class="button">00</button> <button class="button">0</button> <button class="button">.</button> <button class="button equalBtn">=</button> </div> </div> </div> <script src="script.js"></script> </body> </html>
Script.js
let input = document.getElementById('inputBox'); let buttons = document.querySelectorAll('button'); let string = ""; let arr = Array.from(buttons); arr.forEach(button => { button.addEventListener('click', (e) =>{ if(e.target.innerHTML === '='){ string = eval(string); input.value = string; } else if(e.target.innerHTML === 'AC'){ string = ""; input.value = string; } else if(e.target.innerHTML === 'DEL'){ string = string.substring(0, string.length-1); input.value = string; } else{ string += e.target.innerHTML; input.value = string; } }) })
Style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(5deg, #150441, #285c9b); } .calculator{ border: 1px solid #717377; padding: 20px; border-radius: 16px; background: transparent; box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5); } input{ width: 350px; border: none; padding: 24px; margin: 5px; background: transparent; box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1); font-size: 35px; text-align: right; cursor: pointer; color: #ffffff; } input::placeholder{ color: #ffffff; } button{ border: none; width: 60px; height: 60px; margin: 10px; border-radius: 20%; background: transparent; color: #ffffff; font-size: 20px; box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1); cursor: pointer; } .equalBtn{ background-color: #06010e; } .operator{ color: #f5f8fa; }
Output