I want to make a Calculator using JavaScript, HTML, and CSS. I used Notepad ++ I did the following files:Calculator.html, cal.css, and script.js Please see below files. However, I can't get the claculator to work. Pluse, it doesn't fit in the frame. Could you please help me on this JavaScript problem to get a functionable clculator. I appreciate your help

Calculator.html

JavaScript Calculator

project

cal.css

body {

background: background.jpg url(https://i.pinimg.com/originals/f2/50/62/f25062b96c7c06f256ad232a84916550.jpg)no-repeat center;

no-repeat center center;

-webkit-background-size: cover;

-0-background-size: cover;

background-size: cover;

text-align: center;

}

h1{

color:black;

font-weight:bold;

font-size:3em;

text-shadow: 2px 4px 5px black;

)

#calculator {

background-color:gray;

width: 250px;

height: 325px;

border: 1px solid black;

padding:20px;

border-radius:20px;

margin: 50px auto;

box-shadow: 0px 0px 3px 6px #ccc;

}

#display{

margin-bottom:20px;

height:30px;

width: 10em;

border: 1px solid black;

border-radius: 5px;

box-shadow: 0px 0px 1px 1px black;

text-align:right;

font: 20px bold;

}

#keys{

width: 41px;

height: 35px;

margin: 4px;

box-shadow: 0px 0px 2px 1px black;

border-radius:2px;

outline:none;

}

#equal{

width: 94px;

height: 35px;

margin: 4px;

box-shadow: 0px 0px 2px 1px black;

border-radius:2px;

outline:none;

}

script.js

var box = document.getElementById('display');

function addtoscreen(x){

box.value+=x;

if (x==='c'){

box.value = '';

}

}

function answer(){

x = box.value

x=eval(x);

box.value=x;

}

function power(){

x=box.value;

x=eval(x*x);

box.value=x;

}

function backspace(){

var num = box.value;

var len=num.length-1;

var newNum=num.substring(0,len);

box.value = newNum;

}