USA: +1 725-224-8795 
Sign in
Consider the following HTML document:
This document displays 2 inputs mainly: a number field and a button. The utility of this page is to.
You are asked to write a separate JavaScript file that uses array and function(s) to keep the new list of item’s prices with the time when they added and display them as HTML table with statistics about them (average, min , max and the total) . Make sure your code adds only numbers to the list of prices and not to add the price twice. When the number is added, please consider adding the current time and then sort the array of prices. Suggestions: declare two arrays (one to keep prices and the other to keep times) as global variables and 3 functions: start (to add an event listener to the button), addPrice (that performs the comparison, statistics and update the array), and updatePrices (display the content of the array in the HTML table). |
||||||||||||
| Question 2: | To be answered in (30) Minutes [ ] / 10 Marks | |||||||||||
Consider the following HTML document:
| <!DOCTYPE html>
<html> <head> <meta charset=”utf-8″> <title> Student Info </title> <script type=”text/javascript” src=”questionjs2.js”></script> </head> <body> <h2> Student Information </h2> <p>Fields marked with (*) are required.</p> <form method = “post” action = “#” id=”myInfo”> <p> <label>Full Name*: <input type=”text” id=”fullname” name=”fullname” placeholder=”Full Name” required/> </label> </p> <p> <label>Date of birth: <input type = “date” id=”Dob”/> (yyyy-mm-dd) <span id=”age”> </span> </label> </p> <p> <label>Email*: <input type = “email” placeholder = “name@domain.com” required /> (name@domain.com) <span id=”email”> /span> </label> </p> <p> <label>GPA*: <input type = “number” min = “0” max = “5” step = “1” value = “4” required /> </label> (Enter Your GPA between 0 and 5) <span id=”gpa”></span> </p> <p> <label>Year Spent in University: 3 <input type = “range” id =”yiu” min = “3” max = “8” value = “4” /> 8 <span id=”YearinUni”> </span> </label> </p> <p> <input type = “submit” value = “Submit” /> <input type = “reset” value = “Clear” /> </p> </form> <div id=”txt”> </div> </body> </html> |
| When the mouse moves over range showing year spent in university alert will show as the following: | |
| When user click submit or reset |
You are asked to write a separate JavaScript file that can handle the form as the following:
1. When the user finishes writing his full name, you should change the title (hint you could use document.title)
2. Once the date of birth is given, you should show the age.
3. When the mouse moves over range showing year spent in university alert shows: (choose how many years spent in university)
4. When the user clicks on submit or reset, “Are you sure you want to submit/clear your information ?”
5. You should set timer interval to calculate the time spent on the page, if its more than 30 second alert will be given.
Expert Answer
Question no:1
html file:
<!–save the below code as first.html –>
<!– start of html file –>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Item Prices </title>
<script type=”text/javascript” src=”questionjs1.js”></script>
</head>
<body>
<form action=”#”>
<label>New Item price:
<input id =”newPrice” type=”number” size = “25” placeholder=”Enter new price of your Items”>
</label>
<input id=”addButton” type=”button” value=”+” onclick=”add()”>
<div id=”pricesTable”></div>
<div id=”StatisticsTable”></div>
<br><br>
<b> <label>Average:</label></b>
<label id=”avg”></label>
<br>
<b> <label>Sum:</label></b>
<label id=”sum”></label>
<br>
<b><label>Max:</label></b>
<label id=”max”></label>
<br>
<b><label>min: </label></b>
<label id=”min”></label>
<br><br>
<table id=”myTable” border=”1″>
<thead>
<th>Prices</th>
<th>Time</th>
</thead>
</table>
</form>
</body>
</html>
<!–End of the HTML file –>
Javascript file for question 1,
//Save the below code as questionjs1.js
//Array declaractions
var prices = [];
var times = [];
//function implementation.
function add() {
var price = document.getElementById(‘newPrice’).value
if (!isNaN(price)) {
prices.push(price);
times.push(new Date());
var table = document.getElementById(“myTable”);
var row = table.insertRow(prices.length);
row.insertCell(0).innerHTML = price;
row.insertCell(1).innerHTML = new Date();
var sum = 0;
for (var i = 0; i < prices.length; i++) {
sum += parseInt(prices[i], 10);
}
//calculating the avearage and sum of numbers
document.getElementById(‘avg’).innerHTML = (sum / prices.length);
document.getElementById(‘sum’).innerHTML = sum;
document.getElementById(‘max’).innerHTML = Math.max.apply(Math, prices);
document.getElementById(‘min’).innerHTML = Math.min.apply(Math, prices)
}
// alert
else {
alert(‘Enter only numbers.’);
}
}
//End of the js file;
Sample output for Question 1:
*note: place both html and js file in one folder
Question 2:
html file :
<!–save the below code as second.html –>
<!– start of html file –>
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title> Student Info </title>
<script type=”text/javascript” src=”questionjs2.js”></script>
</head>
<body>
<h2> Student Information </h2>
<p>Fields marked with (*) are required.</p>
<form method = “post” action = “#” id=”myInfo”>
<p>
<label>Full Name*:
<input type=”text” id=”fullname” name=”fullname” onchange=”displayTitle();”
placeholder=”Full Name” required/>
</label>
</p>
<p>
<label>Date of birth:
<input type = “date” id=”Dob” onchange=”displayAge()”/>
(yyyy-mm-dd) <br>
<span id=”age”></span>
</label>
</p>
<p>
<label>Email*:
<input type = “email” placeholder = “name@domain.com”
required /> (name@domain.com) <span id=”email”> /span>
</label>
</p>
<p>
<label>GPA*:
<input type = “number”
min = “0”
max = “5”
step = “1”
value = “4” required />
</label> (Enter Your GPA between 0 and 5) <span id=”gpa”></span>
</p>
<p>
<label>Year Spent in University:
3 <input type = “range” id =”yiu” onmouseover=”yearsSpent();”
min = “3”
max = “8”
value = “4” /> 8 <span id=”YearinUni”> </span>
</label>
</p>
<p>
<input type = “submit” value = “Submit” id=”myInfo” onclick=”submitForm();” />
<input type = “reset” value = “Clear” onclick=”clearForm();” />
</p>
</form>
<div id=”txt”> </div>
</body>
</html>
<!–End of the HTML file –>
Javascript file for Question 2:
//Save the below code as questionjs2.js
function displayTitle() {
document.title = document.getElementById(‘fullname’).value;
};
function displayAge() {
var date1 = new Date(document.getElementById(‘Dob’).value);
var date2 = new Date();
var timeDiff = Math.abs(date2.getTime() – date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
alert(‘your age is ‘+parseInt(diffDays / 365, 0)+’ years’);
}
function yearsSpent(){
alert(‘choose how many years spent in university’);
}
function submitForm(){
confirm(‘Are you sure you want to submit information’);
}
function clearForm(){
confirm(‘Are you sure you want to clear information’);
}
Sample output for Question 2:
