Could I get some help with the following Task?
The program should be implemented in JavaScript and running on Firefox, a web browser independent to operating systems. The client has specified the following requirements for the functionality of the program:
1. The program should be running without errors throughout two Phases: Information Gathering and Information Presenting.
2. Information Gathering is to gather the information such as state/territory name, the population and population change over previous year for calculation of APG;
3. The program should first confirm with the user for willingness of entering a new state/territory before proceeding to gather information of the state/territory name, population and population change over previous year for calculation.
4. When receiving a new entry for a state/territory, the program should first prompt and ask the user to enter the state/territory name. If the user enters nothing or an invalid state/territory name, the program should alert an error message on screen and then prompt the user to re-enter. The process should iterate until a state/territory name is entered.
5. If the entered state/territory name is valid, the program should then prompt the user to input the population and population change over previous year for the state/territory. Again, if nothing or an invalid value is entered, the program should display an error message then iterate until receive valid population and population change over previous year value.
6. After valid input of state/territory name, the population and population change over previous year, the program should loop back to seek user confirmation for either proceeding to add one more state/territory or moving to the Information Presenting phase to calculate and display the results;
7. If the user confirms no more state/territory to enter, the Information Gathering phase is completed and the program then moves to Information Presenting.
8. In the Information Presenting phase, the program prints on the web page a table containing all entered state/territory(s), including information such as state/territory name, the population and growth rate (Growth rate = population change over previous year/ population).
9. To make the APG calculator user-friendly, the client also expects the program to display some statistic information: - The state/territory(s) with the highest growth rate; -
Explanation :
Assumption - All the states data will be provided at one go.This program will give consistent results only when the states are inserted in the array at the same time.
There are two buttons provided on the front end Submit and InformationProcessing.
By Default submit button is enabled and InformationProcessing is disabled.
Only string is allowed as an input in the State/Territory box.
This code has been tested with only two valid states : Alabama and Alaska.Both these states are maintained in an array.
(You can add as many states you want by adding comma separated values in the states array)
Validations:
Program checks whether the state entered by the user matches any of the states provided in the array.If it is an exact match.Since javascript is case sensitive you will have to provide the exact values that are provided in the states array.
A validstates array is used in order to keep track of the states entered by user.
Population and PopulationChange value should always be a positive number
.
Limitations:
This program assumes that the user will enter all the states at the same time.
As the number of states grow the array size will increase and it would be difficult to map those states and provide validations.
To overcome this limitation,we can populate the states from a .txt file or can retreive it from the database.
I have kept code simple in order to avoid complexity.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" ng-app="demo">
<title>Information Gathering</title>
<script type="text/javascript">
window.onload = function() {
//confirmationDialog();
document.getElementById("stateDiv").style.visibility="hidden";
if(confirmationDialog()){
displayState();
}
};
var states=['
Alabama','Alaska'];
var validstates=[];
function
confirmationDialog(){
var retVal =
confirm("Do you want to continue ?");
if( retVal == true ) {
// document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
/*Function to validate that the states textbox takes
only alphabets*/
function onlyAlphabets(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if ((charCode > 64 && charCode < 91) || (charCode
> 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
//It validates the form against the input provided by the user
function validateForm(){
var state=document.getElementById("state").value;
var
population=document.getElementById('population').value;
var populationc=document.getElementById('populationc').value;
var isPopulationValid=true;
var isPopulationCValid=true;
if(state=="" || state==undefined)
{
alert("Please
enter valid state/territory");
state.innerHTML="";
}
if(population=="" ||
population==undefined || population < 0) {
alert("Please
enter valid values for population");
isPopulationValid=false;
population.innerHTML="";
}
if(populationc=="" ||
populationc==undefined || populationc<0) {
alert("Please
enter valid values for population change");
isPopulationCValid=false;
populationc.innerHTML="";
}
var isStatevalid=true;
if(state!=""){
for(var
i=0;i<states.length;i++){
if(states.indexOf(state)>-1){
validstates.push(state);
}else{
isStatevalid=false;
break;
}
}
if(isStatevalid){
document.getElementById("population").disabled=false;
document.getElementById("populationc").disabled=false;
}else{
alert("Please enter valid state");
}
if(isPopulationCValid && isPopulationValid){
document.getElementById("informationb").disabled=false;
}
}
}
//Function that is used to process the information.
function ProcessInformation() {
var newTable,startTag,endTag;
document.getElementById("informationp").style.display="block";
//Creating a new table
startTag="<TABLE id='mainTable'><TBODY><TR><TD style=\"WIDTH: 120px\">State</TD><TD style=\"WIDTH: 120px\">Population</TD><TD style=\"WIDTH: 120px\">GrowthRate</TD></TR>"
endTag="</TBODY></TABLE>"
newTable=startTag;
var trContents;
//Get the row contents
trContents=document.body.getElementsByTagName('TR');
if(trContents.length>1)
{
for(i=1;i<trContents.length;i++)
{
if(trContents[i].innerHTML)
{
// Add previous rows
newTable+="<TR>";
newTable+=trContents[i].innerHTML;
newTable+="</TR>";
}
}
}
//Add the Latest row
newTable+="<TR><TD style=\"WIDTH: 120px\" >" +
document.getElementById('state').value +"</TD>";
newTable+="<TD style=\"WIDTH: 120px\" >" +
document.getElementById('population').value +"</TD>";
var population=document.getElementById('population').value;
var populationc=document.getElementById('populationc').value;
if(isNaN(population) || isNaN(populationc)){
perc=" ";
}else{
perc = ((populationc/population) * 100).toFixed(3);
}
newTable+="<TD style=\"WIDTH: 120px\" >" +perc
+"</TD><TR>";
newTable+=endTag;
//Update the Previous Table With New Table.
document.getElementById('informationp').innerHTML=newTable;
}
</script>
</head>
<body>
<div id="stateDiv">
<p>State/Territory Name</p>
<input type="text" id="state" onkeypress="return
onlyAlphabets(event,this);"/>
<p>Population</p>
<input type="number" id="population"
disabled="true" />
<p>Population Change</p>
<input type="number" id="populationc"
disabled="true"/><br><br>
<input type="submit" value="submit" onclick="confirmationDialog()">
<input type="submit"
value="InformationProcessing" id="informationb"
onclick="ProcessInformation()" disabled>
</div>
<div id="informationp"
style="display:none;">
<table id="mainTable">
<tr style="width:120px " >
<td >state</td>
<td>Population</td>
<td>Growth rate</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
function displayState(){
document.getElementById("stateDiv").style.visibility="visible";
}
</script>
</html>
Could I get some help with the following Task? The program should be implemented in JavaScript and running on Firefox, a web browser independent to operating systems. The client has specified the foll...