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: blue<br />}<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: pointer<br />}<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: pointer<br />}<br /><br />JAVASCRIPT:<br /><br />"use strict";<br /><br />// Initilization of calculator screen value<br />let box = document.getElementById("display");<br />box.value = "";<br /><br />// append character to screen<br />function addToScreen(e) {<br /> box.value += e;<br /> if (e == "c") {<br /> resetScreen();<br /> }<br />}<br /><br />// reset screen<br />function resetScreen() {<br /> box.value = '';<br />}<br /><br />// evaluate a mathematical expression string<br />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: https://codepen.io/At<br /><br />SOURCES: codepen.io<br /><br />
