please write the code and help me finish this program. 1500 REWARD !!!!!! Goal:
ID: 3554206 • Letter: P
Question
please write the code and help me finish this program. 1500 REWARD !!!!!!
Goal: To create a web page for your home page.
Objectives: Learn to use add behavior and user interaction to the web experience by adding Javascript elements to HTM L web page design.
Learn to design and test as you proceed with implementation of the design.
To be able to design modular functions in Javascript.
Introduction : This lab is a simple introduction to Javascript (JS) elements, syntax and usage in a web page.
Requirements : We specify here the minimum requirements: The lab3 requires students to design a simple calculator using JS. The basic functions of the calculator are +_*/ operations on single digit numbers and comparing two numbers. Everyone is encouraged to add more functions to the calculator, such as square, convert a decimal number to binary number and so on. Let's get started!
Features to include in your page:
1. (5%) A title that captures the theme of your web page. Use large font size.
2. (5%) Your name , course and Lab # should appear right after the title added as a HTML comment .
3. (40%) Now add the Calculator: The user interface of the calculator has button for numbers and operators and a box for displaying the result. In the Body of you web page add these items .and save the file as Calculator.html
a) (5%) Buttons for numbers from 0 to 9
b) (5 %) Buttons for arithmetic operators and relational operators (+, -, *, / and %) Note % displays percentage given two numbers: for example entering 4, 8, % will give you 50%
c) You need deal with only single digit numbers for input.
d) (10%) Text box for result and a also a Button to indicate completion of operation "="
e) (5%) Button to clear the result
f) (10%) Arrange them nicely by using appropriate tags so that the buttons are placed or located nicely depicting a real calculator (Button in rows and columns).
g) (5%) Display the user interface and test it with a JavaScript function built into the HTML code and make sure all the button work.
4. (40%) Now add Javascript functionality. Add the Javascript function is Javascript file called Calculator.js.
a) Associate the javascript file (Calculator.js) with the html file created above (calculator.js)
b) function that gets the values from buttons for data and operations input by the user: That is +-*/, and shows the result number in the textbox when user clikcs button" = "
c) clear result in textbox and reset all of variables
5. Now add some style.Put some color into your design by defining some attributes such as color for your calculator and text display by specifying these in a Calculator.css file.
Explanation / Answer
Hi,
I am posting the calculator.htm and calculator.js working code. CSS code has been embeded in the file itself.
Steps to execute
1. Copy and paste the entire calculator.htm code in a text file and save it as caculator.htm file
2. Copy and paste the entire calculator.js code below in a text file and save it as caculator.js file
3. Place both the html file and the js files in the same folder.
4. Open the html file in a browser and check the working calculator.
---- Calculator.js---
function c(val)
{
document.getElementById("d").value=val;
}
function v(val)
{
var dispval = document.getElementById("d").value;
var strlen = dispval.length;
var lastchar = dispval.charAt(strlen-1);
var num = ["0","1","2","3","4","5","6","7","8","9"];
var splchars = ["*","%","+","-","/"];
if((num.indexOf(val)== -1)||(splchars.indexOf(lastchar) != -1))
{
document.getElementById("d").value+=val;
}
else
{
document.getElementById("d").value=val;
}
}
function e()
{
try
{
var dispval = document.getElementById("d").value;
if (dispval.indexOf("%") != -1)
{
var firstelem = dispval.charAt(0);
var lastelem = dispval.charAt(2);
var calval = eval((firstelem/lastelem)*100);
c(calval);
}
else
{
c(eval(document.getElementById("d").value));
}
}
catch(e)
{
c('Error')
}
}
---- Calculator.htm---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculator</title>
<style>
body
{
background-color:tan;
}
.box
{
background-color:#3d4543;
height:300px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
}
.display
{
background-color:#222;
width:220px;
position:relative;
left:15px;
top:20px;
height:40px;
}
.display input
{
position:relative;
left:2px;
top:2px;
height:35px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;
}
.keys
{
position:relative;
top:15px;
}
.button
{
width:40px;
height:30px;
color:#000000;
border:none;
border-radius:8px;
margin-left:17px;
cursor:pointer;
border-top:2px solid transparent;
}
.button.gray
{
color:white;
background-color:#6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;
}
.button.pink
{
color:black;
background-color:#ff4561;
border-bottom:black 2px solid;
}
.button.black
{
color:white;
background-color:#000000;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange
{
color:black;
background-color:FF9933;
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active
{
border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;
}
.pink:active
{
border-top:black 2px solid;
border-bottom:#ff4561 2px solid;
}
.black:active
{
border-top:black 2px solid;
border-bottom:#303030 2px solid;
}
.orange:active
{
border-top:black 2px solid;
border-bottom:FF9933 2px solid;
}
p
{
line-height:10px;
}
</style>
<script type="text/javascript" src="Calculator.js"></script>
</head>
<body>
<p>Web Calculator</p>
<table width=40%>
<tr>
<td width=20%><b>Name: </b></td>
<td>ABCD</td>
</tr>
<tr>
<td width=20%><b>Course: </b></td>
<td>XYZ</td>
</tr>
<tr>
<td width=20%><b>Lab: </b> </td>
<td>3</td>
</tr>
</table>
<div class="box">
<div class="display"><input type="text" readonly size="18" id="d"></div>
<div class="keys">
<p>
<input type="button" class="button pink" value="%"
><input type="button"
class="button pink" value="/"></p>
<p><input type="button" class="button black"
value="7"><input type="button"
class="button black" value="8">
<input type="button" class="button black" value="9"
><input type="button"
class="button pink" value="*"></p>
<p><input type="button" class="button black"
value="4"><input type="button"
class="button black" value="5">
<input type="button" class="button black" value="6"
><input type="button"
class="button pink" value="-"></p>
<p><input type="button" class="button black"
value="1"><input type="button"
class="button black" value="2">
<input type="button" class="button black" value="3"
><input type="button"
class="button pink" value="+"></p>
<p><input type="button" class="button black"
value="0"><input type="button"
class="button black" value=".">
<input type="button" class="button black" value="C"
><input type="button"
class="button orange" value="="></p>
</div>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.