I want to make a Calculator using JavaScript, HTML, and CSS. I used Notepad ++ I
ID: 3709891 • Letter: I
Question
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cal.css">
<script src="script.js"></script>
</head>
<body>
<h1> JavaScript Calculator </h1>
<div id = "calculator">
<form>
<input type='text' id='display' disabled>
<br>
<input type='button' value='C' id='keys'>
<input type='button' value='CE' id='keys'>
<input type='button' value='x^2' id='keys'>
<input type='button' value='+' id='keys'>
<br>
<input type='button' value='9' id='keys'>
<input type='button' value='8' id='keys'>
<input type='button' value='7' id='keys'>
<input type='button' value='-' id='keys'>
<br>
<input type='button' value='6' id='keys'>
<input type='button' value='5' id='keys'>
<input type='button' value='4' id='keys'>
<input type='button' value='*' id='keys'>
<br>
<input type='button' value='3' id='keys'>
<input type='button' value='2' id='keys'>
<input type='button' value='1' id='keys'>
<input type='button' value='/' id='keys'>
<br>
<input type='button' value='0' id='keys'>
<input type='button' value='.' id='keys'>
<input type='button' value='=' id='equal'>
<br>
</form>
</div>
<footer>
<p>project</p>
</footer>
<script src="script.js"></script>
</body>
</html>
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;
}
Explanation / Answer
Below is the working module of your project what you coded in the project-
Calculator.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cal.css">
<script src="script.js"></script>
</head>
<body>
<h1> JavaScript Calculator </h1>
<div id = "calculator">
<form>
<input type='text' id='display' disabled >
<br>
<input type='button' value='C' id='keys'>
<input type='button' value='CE' id='keys'>
<input type='button' value='x^2' id='keys'>
<input type='button' value='+' id='keys'>
<br>
<input type='button' value='9' id='keys'>
<input type='button' value='8' id='keys'>
<input type='button' value='7' id='keys'>
<input type='button' value='-' id='keys'>
<br>
<input type='button' value='6' id='keys'>
<input type='button' value='5' id='keys'>
<input type='button' value='4' id='keys'>
<input type='button' value='*' id='keys'>
<br>
<input type='button' value='3' id='keys'>
<input type='button' value='2' id='keys'>
<input type='button' value='1' id='keys'>
<input type='button' value='/' id='keys'>
<br>
<input type='button' value='0' id='keys'>
<input type='button' value='.' id='keys'>
<input type='button' value='=' id='keys'>
<br>
</form>
</div>
<footer>
<p>project</p>
</footer>
<script src="script.js"></script>
</body>
</html>
//cal.css
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Apr 17, 2018, 10:12:20 AM
Author : Prashant Tomer
*/
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
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
var box = document.getElementById('display');
function toScreen(x){
box.value+=x;
if (x==='c'){
box.value = '';
}
}
function equal(){
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;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.