How to Make a Calculator in Html and CSS and Javascript on January 12, 2022 Get link Facebook Twitter Pinterest Email Other Apps How to Make a Calculator in Html and CSS and Javascript Html part calculator calculator ( ) % AC 7 8 9 / 4 5 6 x 1 2 3 - 0 . + = CSS part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; background: linear-gradient(to right , rgba(10, 10, 231, 0.751), rgb(241, 86, 86) ); display: flex; justify-content: center; align-items: center; } .calculator{ display: inline-block; padding: 20px 15px; /* border-radius: 30px; */ /* /* background: #000; */ border-radius: 55px; box-shadow: 10px 10px 10px #000, -10px -10px 10px #000; } h1{ color: #fff; font-size: 30px; font-family: sans-serif; border-bottom: 2px solid #fff; display: inline-block; margin-bottom: 10px; text-transform: uppercase; } main{ text-align: center; } table{ margin: auto; } #display{ width: 80%; height: 70px; font-size: 30px; border: 2px solid #000; border-radius: 10px; outline: none; margin-bottom: 8px; font-family: sans-serif; /* display: inline-block; */ } button{ width: 100px; height: 80px; font-size: 30px; border-radius: 10px; margin: 5px 5px; transition: .2s; } button:hover{ background: crimson; } Javascript part let display = document.getElementById("display"); let keys = document.querySelectorAll("button"); let displayvalue = ''; for(item of keys){ item.addEventListener("click", (a)=>{ keyText = a.target.innerText; if(keyText == "x"){ keyText = "*"; displayvalue += keyText; display.value = displayvalue; } else if(keyText == "AC"){ displayvalue = ""; display.value = displayvalue; } else if(keyText == "="){ display.value = eval(displayvalue); } else{ displayvalue += keyText; display.value = displayvalue; } }) } Comments
Comments
Post a Comment