├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calculator 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const display = document.querySelector(".display") 2 | const buttons = document.querySelectorAll("button") 3 | const specialChar = ["%", "*" , "/" , "-" , "+" , "="]; 4 | 5 | let output = ""; 6 | 7 | //Define function to calculate based on button clicked 8 | const calculate =(btnValue)=>{ 9 | if(btnValue === "=" && btnValue !== ""){ 10 | //if output has % replace with "/100" before evaluating. 11 | output = eval(output.replace("%", "/100")) 12 | } 13 | else if (btnValue === "AC"){ 14 | output = ""; 15 | } 16 | else if (btnValue === "DC"){ 17 | //if DEL button is clicked, remove the last character from the output. 18 | output = output.toString().slice(0, -1); 19 | } 20 | else{ 21 | // if output is empty and button is specialChars then return 22 | if(output === "" && specialChar.includes(btnValue)) return; 23 | output += btnValue; 24 | } 25 | display.value = output 26 | } 27 | 28 | 29 | 30 | //Add event linsners to buttons call calculate() and click. 31 | buttons.forEach(button => { 32 | //button click listners call calculate() with dataset value as argument 33 | button.addEventListener("click", (e)=>{ 34 | calculate(e.target.dataset.value); 35 | }) 36 | }) 37 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | body{ 9 | height: 100vh; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | background-color: #e0e3eb; 14 | } 15 | .contanier{ 16 | position: relative; 17 | max-width: 300px; 18 | width: 100%; 19 | border-radius: 12px; 20 | padding: 10px 20px 20px ; 21 | background-color: #fff; 22 | box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5); 23 | } 24 | .display{ 25 | height: 80px; 26 | width: 100%; 27 | outline: none; 28 | border: none; 29 | text-align: right; 30 | margin-bottom: 10px; 31 | font-size: 25px; 32 | color: #000e1a; 33 | pointer-events: none; 34 | } 35 | .buttons{ 36 | display: grid; 37 | grid-gap: 10px; 38 | grid-template-columns: repeat(4,1fr); 39 | } 40 | .buttons button{ 41 | padding: 10px; 42 | border-radius: 6px; 43 | border: none; 44 | font-size: 20px; 45 | cursor: pointer; 46 | background-color: #eee; 47 | } 48 | .buttons button:active{ 49 | transform: scale(0.99); 50 | } 51 | .operator{ 52 | color: #2f9fff; 53 | } 54 | 55 | @media screen and (max-width: 315px) { 56 | .contanier { 57 | width: 90vw; 58 | } 59 | .buttons{ 60 | display: grid; 61 | flex-wrap: wrap; 62 | } 63 | } --------------------------------------------------------------------------------