Project

The Work Term Housing website was developed for my Web Software Tools class with a group of four people. I was in charge of the location search page and wrote javascript code that interfaced with Google Geolocation to sort by distance. I also worked on the item view with star ratings. The project placed 1st among several other classes related to web software.

Go To Site

Created:
Platform:
Size:
Features:

2013
JS/PHP MySQL
Medium

Geolocation, Star Ratings, Accounts, Comments

Sample Code: results.html

<!DOCTYPE html>

<html>
<head>
    <title id="resultsTitle">Results</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        
        var searchItems = new Array(100);
        var searchIndices = new Array(100);
        var geoLocation = new Array(100);
        var geoLats = new Array(100);
        var geoLngs = new Array(100);
        var fromLat;
        var fromLng;
        var geoDistances = new Array(100);
        var numItems = 0;
        var starPicSrc = "star-2.png"
        var halfStarPicSrc = "star-half.png";
        
        function getXMLHttp()
        {
            var xmlHttp;
            
            xmlHttp = new XMLHttpRequest();
            return xmlHttp;
        }
        
        function getSearchItems()
        {
            var xmlHttp = getXMLHttp();
            
            xmlHttp.onreadystatechange = function()
            {
                if(xmlHttp.readyState == 4)
                {
                    searchItems = JSON.parse(xmlHttp.responseText);
                    numItems = searchItems.length;
                    startDisplayResults();
                }
            }
            
            xmlHttp.open("GET", "test.php", true);
            xmlHttp.send(null);
        }
        
        function getLocation(ID)
        {
            
            var xmlHttp2 = getXMLHttp();
            var geoStringRequest;
            var geocoder;
            var lat;
            var lng;
            xmlHttp2.onreadystatechange = function()
            {
                if(xmlHttp2.readyState == 4)
                {
                    var geoResponse = JSON.decode(xmlHttp2.responseText.results);
                    var geoResponse = xmlHttp2.responseText;
                    var locationText = document.createElement('h3');
                }
                
            }
            geoStringRequest = "http://maps.googleapis.com/maps/api/geocode/json?address=" + searchItems[ID]['Location'].split(' ').join('+') + "&sensor=false";
            
            xmlHttp2.open("GET", geoStringRequest, true);
            xmlHttp2.send(null);
            
            var geocoder;
            geocoder = new google.maps.Geocoder();
            var results = geocoder.geocode({'address': searchItems[ID]['Location'].split(' ').join('+')}, function(results, status){
            if (status == google.maps.GeocoderStatus.OK) {
            lat = results[0].geometry.location.lat();
            lng = results[0].geometry.location.lng();
            geoLats[ID] = lat;
            geoLngs[ID] = lng;
            
            }
               else {
                     alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            
            
            
            //lat = geoResponse->results[0]->geometry->location->lat;
            //lng = geoResponse->results[0]->geometry->location->lng;
            
        }
        
        function setFromLocation(fromLoc)
        {
            
            var xmlHttp2 = getXMLHttp();
            var geoStringRequest;
            var geocoder;
            var lat;
            var lng;
            xmlHttp2.onreadystatechange = function()
            {
                if(xmlHttp2.readyState == 4)
                {
                    var geoResponse = JSON.decode(xmlHttp2.responseText.results);
                    var geoResponse = xmlHttp2.responseText;
                }
                
            }
            geoStringRequest = "http://maps.googleapis.com/maps/api/geocode/json?address=" + fromLoc.split(' ').join('+') + "&sensor=false";
            
            xmlHttp2.open("GET", geoStringRequest, true);
            xmlHttp2.send(null);
            
            var geocoder;
            geocoder = new google.maps.Geocoder();
            var results = geocoder.geocode({'address': fromLoc.split(' ').join('+')}, function(results, status){
            if (status == google.maps.GeocoderStatus.OK) {
            lat = results[0].geometry.location.lat();
            lng = results[0].geometry.location.lng();
            fromLat = lat;
            fromLng = lng;
            }
               else {
                     alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            
            
            
            //lat = geoResponse->results[0]->geometry->location->lat;
            //lng = geoResponse->results[0]->geometry->location->lng;
            
        }
        
        function checkDistances(startLat, startLng)
        {
            for(var i = 0; i < numItems; i++)
            {
                geoDistances[i] = (startLat - geoLats[i])*(startLat - geoLats[i]) + (startLng - geoLngs[i])*(startLng - geoLngs[i]);
            
            }
            
            sortDistances();
            
            var tmpDis;
            var smallestDis = 0;
            var displayIndex = 0;
            for(var i = 0; i < numItems; i++)
            {
                var resultsList = document.getElementById("Results List");
                //getLocation(i);
                
                displayResidencePreview(searchIndices[i]);
                resultsList.appendChild(document.createElement("br"));
                
                //http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true_or_false
            }
            
        }
        
        function getDistance(id1, id2)
        {
            return (geoLats[id1] - geoLats[id2])*(geoLats[id1] - geoLats[id2]) + (geoLngs[id1] - geoLngs[id2])*(geoLngs[id1] - geoLngs[id2]);
        }
        
        function sortDistances()
        {
            var swapped;
            do {
            swapped = false;
            for (var i=0; i < geoDistances.length-1; i++) {
                if (geoDistances[i] > geoDistances[i+1]) {
                    var temp = geoDistances[i];
                    geoDistances[i] = geoDistances[i+1];
                    geoDistances[i+1] = temp;
                    
                    var temp2 = searchIndices[i];
                    searchIndices[i] = searchIndices[i+1];
                    searchIndices[i+1] = temp2;
                    swapped = true;
                }
            }
            } while (swapped);
        }
        
        function initializeSearchIndices()
        {
            for(var i = 0; i < numItems; i++)
            {
                searchIndices[i] = i;
            }
        }
        
        function startDisplayResults()
        {
            for(var i = 0; i < numItems; i++)
                getLocation(i);
            //setFromLocation("500 N Cheverolet, Flint, MI 48504");
            setFromLocation("48084");
            initializeSearchIndices();
            
            window.setTimeout("checkDistances(fromLat,fromLng)",900);
            
            //var smallestDis = 0;
            //var displayIndex = 0;
            //for(var i = 0; i < numItems; i++)
            //{
             //   tmpDis = 100000;
             //   for(i = 0; i < numItems; i++)
             //   {
             //       if(geoDistances[i] <= tmpDis)
             //       {
             //           tmpDis = geoDistances[i];
             //           displayIndex = i;
              //      }
             //   }
             //   if(smallestDis <= tmpDis)
             //       smallestDis = tmpDis;
                
            //    var resultsList = document.getElementById("Results List");
                //getLocation(i);
                
            //    displayResidencePreview(displayIndex);
              //  resultsList.appendChild(document.createElement("br"));
                
                //http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true_or_false
            //}
        }
        
        function displayResidencePreview(ID)
        {
            var nameStr = searchItems[ID]['Name'];
            var newTable;
            var resultsList = document.getElementById("Results List");
            var tableHead;
            var row;
            var cell;
            var thumb;
            var image;
            var rating = searchItems[ID]['Rating'];
            var rentAmt = searchItems[ID]['Rent'];
            var numBeds = searchItems[ID]['Beds'];
            var loc = searchItems[ID]['Location'];
            
            
            //Make table containing the preview
            newTable = document.createElement("table");
            newTable.setAttribute("width","500px");
            newTable.setAttribute("height","250px");
            newTable.style.backgroundColor = "#F9F7ED";
            newTable.style.setProperty("box-shadow","5px 5px 5px #999",0);
            
            resultsList.appendChild(newTable);
            
            //Make Header
            tableHead = document.createElement("tr");
            newTable.appendChild(tableHead);
            cell = document.createElement("td");
            cell.innerHTML = "<h2>" + nameStr + "</h2>";
            cell.setAttribute("colspan",5);
            //cell.setAttribute("align","center");
            tableHead.appendChild(cell);
            
            //Create New Table Row
            row = document.createElement("tr");
            newTable.appendChild(row);
            
            //Create Thumbnail
            cell = document.createElement("td");
            cell.setAttribute("width", "230px");
            thumb = document.createElement("img");
            thumb.setAttribute("src",searchItems[ID]['Thumbnail']);
            thumb.setAttribute("draggable","false");
            row.appendChild(cell);
            cell.setAttribute("rowspan",5);
            cell.appendChild(thumb);
            
            //Rating
            //Show numeric value above stars
            cell = document.createElement("td");
            cell.style.fontSize = "10pt";
            cell.innerHTML = rating + " \/ 5";
            cell.setAttribute("cellpadding","10");
            //cell.setAttribute("align", "center");
            row.appendChild(cell);
            
            //Create New Table Row
            row = document.createElement("tr");
            newTable.appendChild(row);
            
            //Make stars
            cell = document.createElement("td");
            for(var i = 0; i < Math.floor(rating); i++)
            {
                image = document.createElement("img");
                image.setAttribute("src", starPicSrc);
                image.setAttribute("draggable","false");
                cell.appendChild(image);
            }
            //for half stars
            if(rating - Math.floor(rating) > 0)
            {
                image = document.createElement("img");
                image.setAttribute("src", halfStarPicSrc);
                image.setAttribute("draggable","false");
                cell.appendChild(image);
            }
            row.appendChild(cell);
            
            //Create New Table Row
            row = document.createElement("tr");
            newTable.appendChild(row);
            
            //Display Rent Amount
            cell = document.createElement("td");
            cell.innerHTML = "$" + rentAmt + ".00/Month";
            row.appendChild(cell);
            newTable.appendChild(row);
            
            //Create New Table Row
            row = document.createElement("tr");
            newTable.appendChild(row);
            
            //Display Number of Beds
            cell = document.createElement("td");
            cell.innerHTML = numBeds + " Bedroom";
            row.appendChild(cell);
            newTable.appendChild(row);
            
            //Create New Table Row
            row = document.createElement("tr");
            newTable.appendChild(row);
            
            //Display Location
            cell = document.createElement("td");
            cell.innerHTML = loc;
            row.appendChild(cell);
            newTable.appendChild(row);
        }
        
        function updateResultsTitle()
        {
            getSearchItems();
        }
    </script>
</head>

<body>
<h4 id="display results">result here</h4>
<button onclick="updateResultsTitle('what you just clicked')">
    Get Results
</button>
<div id="Results List"></div>

</body>
</html>

Click to Expand

Back