HTML5 simple calculator(html,css,javascript)

HTML:






























CSS:

#calculator {
width: 250px;
height: 350px;
border: 5px solid black;
text-align: center;
background: lightgreen;
margin: 150px auto;
box-shadow: 0px 0px 30px gray;
}

#display {
margin-top: 30px;
margin-bottom: 20px;
width: 220px;
height: 30px;
border: 1px solid red;
box-shadow: 0px 0px 30px red;
text-align: right;
font: 20px bold;
color: blue
}

#keys {
-webkit-appearance: button;
width: 40px;
height: 35px;
margin-left: 10px;
margin-bottom: 10px;
box-shadow: 0px 0px 20px skyblue;
cursor: pointer
}

#keys:hover {
background: yellow;
font-weight: bold;
}

#equal {
-webkit-appearance: none;
width: 90px;
height: 35px;
margin-left: 10px;
margin-bottom: 10px;
box-shadow: 0px 0px 20px skyblue;
cursor: pointer
}

JAVASCRIPT:

"use strict";

// Initilization of calculator screen value
let box = document.getElementById("display");
box.value = "";

// append character to screen
function addToScreen(e) {
box.value += e;
if (e == "c") {
resetScreen();
}
}

// reset screen
function resetScreen() {
box.value = '';
}

// evaluate a mathematical expression string
function answer() {
let s = box.value;
box.value = String(eval(s));
}

function backSpace() {
let s = box.value;
let len = s.length;
if (len > 0) {
s = s.slice(0, len-1);
}
box.value = s;
}

function power(y) {
let x = box.value;
box.value = Math.pow(x, y);
}

Read More: https://codepen.io/At

SOURCES: codepen.io