HTML:br br br br br br br br br br br br br br br br br br br br br br br br br br br br br br br CSS:br br #calculator {br width: 250px;br height: 350px;br border: 5px solid black;br text-align: center;br background: lightgreen;br margin: 150px auto;br box-shadow: 0px 0px 30px gray;br }br br #display {br margin-top: 30px;br margin-bottom: 20px;br width: 220px;br height: 30px;br border: 1px solid red;br box-shadow: 0px 0px 30px red;br text-align: right;br font: 20px bold;br color: bluebr }br br #keys {br -webkit-appearance: button;br width: 40px;br height: 35px;br margin-left: 10px;br margin-bottom: 10px;br box-shadow: 0px 0px 20px skyblue;br cursor: pointerbr }br br #keys:hover {br background: yellow;br font-weight: bold;br }br br #equal {br -webkit-appearance: none;br width: 90px;br height: 35px;br margin-left: 10px;br margin-bottom: 10px;br box-shadow: 0px 0px 20px skyblue;br cursor: pointerbr }br br JAVASCRIPT:br br "use strict";br br Initilization of calculator screen valuebr let box = document.getElementById("display");br box.value = "";br br append character to screenbr function addToScreen(e) {br box.value += e;br if (e == "c") {br resetScreen();br }br }br br reset screenbr function resetScreen() {br box.value = '';br }br br evaluate a mathematical expression stringbr function answer() {br let s = box.value;br box.value = String(eval(s));br }br br function backSpace() {br let s = box.value;br let len = s.length;br if (len 0) {br s = s.slice(0, len-1);br }br box.value = s;br }br br function power(y) {br let x = box.value;br box.value = Math.pow(x, y);br }br br Read More: br SOURCES: codepen.