Home Finder Tutorial Planning App. Tutorial Goleta Comps Real Estate Outlook Lesson Worksheet Lesson Test

Day 6: javaScript for number of houses, bedrooms, square footage, and display each record.


Copy and paste this information into your project just after the saveFile() function.

Save your application.


There six javascript functions here:

  • forSale()
  • forSale2()
  • forSale3()
  • forSale4()
  • squareFeet()
  • displayFile()

Let's look at them one at a time.

forSale()

forSale() reads the file, initializes the variables needed in the function, turns the text into myObj which identifies each element in the file. The record number r is determined by looking at the length of each record. There 27 records in the file 0-26.

For example record 4's city would be myObj[4][1]. If myObj[4][1]= "Santa Barbara", then add 1 to the number of houses in Santa Barbara that are listed in our file.

The variable name for Santa Barbara is santabarbara and the two plus signs increment or add one to the variable each time thru the loop if the condition is true.

Next we need to send the information obtained in the javaScript code to the users' html page. The following lines accomplish this.
document.getElementById("sb").innerHTML= santabarbara; document.getElementById("mon").innerHTML= montecito; document.getElementById("gol").innerHTML= goleta; document.getElementById("sy").innerHTML= santaynez; document.getElementById("sol").innerHTML= solvang; document.getElementById("car").innerHTML= carpinteria;

The number of houses in each city is displayed in a table on the user's html page. Here is the table.

South Coast Real Estate

LocationNumber
Santa Barbara

Goleta

Santa Ynez

Montecito

Carpinteria

Solvang


Here is what some of the coding looks like for our table.

Each table is made up of rows and table data cells. A paragraph id is displayed in the appropriate cells.

<tr><td>Santa Barbara</td><td><p id="sb"></p></td></tr>

Notice the p id is inside six of the table data cells showing number of homes, <td>.

The coding for the table is located at Day 8:

forSale2()

The purpose of this function is to identify all the houses in the file that have two bedrooms.

First we initialize the variables, get the file, turn it into an object.

Next we want to iterate or loop through the items. This is where forEach() array method can be helpful.

The next line does just that.

array.forEach() method iterates over the array items, in ascending order.

Remember the name of our array is "house". Each item in the array is called and sent to another function where it looks for two bedroom homes, "myObj[index][5]".

The variable in the object searched is [5]. If there is a match, it is selected and the index or record number is displayed and the address of the house.

Next demo2 which represents the address of each house is sent the information from the javascript function. <P id ="demo2">

First, two bedroom homes, is displayed in headline form, then the record number followed by a colon and then the address.

house.forEach(myFunction);

document.getElementById("demo2").innerHTML= "<h4>" + "Two bedroom homes " + "</h4>" + stuff;

function myFunction(item,index){

text += index + ": " + item + "<br>";

if (myObj[index][5] =="two"){

stuff += index + " : " + myObj[index][3] + "<br>";

}

}

}

The addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the variable.

stuff is equal to the index number a colon and the address of the house.


Here is the output.

Two bedroom homes

0 : 123 Ashley Road

6 : 456 Rio Vista

8 : 4567 Linden Ave.

9 : 456 Parra Granda

14 : 4450 Abrego

20 : 4450 Trigo

26 : 877 Birkenstock Road

forSale3()

This javascript function is almost identical to the previous one for two bedroom houses.

The only changes are what myObj[index][5] is equal to and where the results are displayed, <p id="demo3>

forSale4()

This javascript function is almost identical to the previous one for two and three bedroom houses.

The only changes are what myObj[index][5] is equal to and where the results are displayed, <p id="demo4>

Square footage

Again this function works the same way as the ones for two, three, and four bedrooms. The variable in the array being examined is [index][9].

Displaying the file one record at a time

The application needs to have a way of displaying records individually. Once, for example, all three bedroom houses have been identified, we need to examine the additional fetures of this house.

<h3>Find a record in the file</h3>

Search for a record <input type=number height=250 value=0 max=26 min=0 name="record" id="record" onChange="displayFile()";>

Add this line to the HTML section just before the ending nav tag.

This is the line that allows the user to enter the record number to view.

We want them to input a number between 0 and 26, the number of houses in the array. The number input control allows the user to click on two small arrows to increase or decrease the number. The OnChange attribute calls the displayFile() function.

Here is the function.

function displayFile(){

var myhouseJSON;

var myObj, x;

var text="";

var homePrice=0;

text= localStorage.getItem("MyhouseJSON", myhouseJSON);

myObj=JSON.parse(text);

var r = document.getElementById("record").value;

document.getElementById("searchR").innerHTML= "<h3>Individual Records</h3> <br> Record Number " + r;

document.getElementById("city").innerHTML= "City " + myObj[r][1];

document.getElementById("address").innerHTML= "Address " + myObj[r][3];

document.getElementById("bedrooms").innerHTML= "Bedrooms " + myObj[r][5];

document.getElementById("bathrooms").innerHTML= "Bathrooms " + myObj[r][7];

document.getElementById("squareFeet").innerHTML= "Square Feet " + myObj[r][9];

document.getElementById("price").innerHTML= "Price " + myObj[r][11];

document.getElementById("acres").innerHTML= "Acres " + myObj[r][13];

document.getElementById("pool").innerHTML= "Pool " + myObj[r][15];

document.getElementById("stories").innerHTML= "Stories " + myObj[r][17];

document.getElementById("style").innerHTML= "Style " + myObj[r][19];

  1. The variables are declared
  2. Text is assisned the value of the file.
  3. The JavaScript function JSON.parse () converts text into a JavaScript object:
  4. The variable r for record is captured from the user input.
  5. Each variable in the file is displayed using innerHTML

The next thing to do is to display a picture of each house. I used abbreviations for the style of houses like, cape, ran, vic, etc and then added the record number on the end of the file name for identification purposes. All files are .jpgs

First I made a list of all houses by style: Cape Cod, Colonial, Victorian, Ranch, Mediterranean, Cottage, Country French.

<img src="" alt="house picture" id="circle" height=400 width=400>

The line above is in the HTML section. The house pictures are substituted for a blank image with the id of circle.

The variable in the array that we want to examine is [19] the style of the house.

var image = document.getElementById('circle');

if (r==0 && myObj[r][19] == "Cape Cod"){

image.src="cape0.jpg"

}

if (r==1 && myObj[r][19] == "Cape Cod"){

image.src="cape2.jpg"

}

Day 7: The innerHTML tags for houses by city and 2, 3 and 4 bedrooms.

The function needs a place to return the results of it's function.

The first function forSale() displays the number of houses in each city.

I had the results appear in a tablular form. Here is the table for you to add to your project.

Copy and paste this information into your project right after the beginning aside tag..

Save your application.