Question 1.html
Question 1
City Information

Select an option
Longtitude
Latitude
Population
Elevation
Results

data.js

var cities = [
{ city: "Bloomington, IL",
latitude: "40.4842° N, 88.9937° W",
population: "77,962",
elevation: "797 feet (243 m) above sea level",
},
{ city: "Normal, IL",
latitude: "40.5142° N, 88.9906° W",
population: "54,742",
elevation: "869 feet (265 m) above sea level",
},
{ city: "Boulder, CO",
latitude: "40.0150° N, 105.2705° W",
population: "107,353",
elevation: "5,430 feet (1,655 m) above sea level",
},
{ city: "New Orleans, LA",
latitude: "29.9511° N, 90.0715° W",
population: "391,006",
elevation: " −6.5 to 20 ft (−2 to 6 m) above sea level",
}
];

Question 1.js

/* Question 1 - Write your JavaScript/jQuery code here */

Transcribed Image Text:

The data.js file contains an array of city objects. Each city object contains the following information about a city. • Name • Latitude/ Longitude • Population • Elevation Your task is to display a subset of this information for every city as shown below. a) (15 pts) Edit the provided HTML file question01.html to create the following elements. - A heading "City Information". A dropdown list using the <select> tag that contains three enabled options: - 1)Latitude/ Longitude 2) Population 3) Elevation The text "Select an option" beside the dropdown list. Add your footer information. b) (30 pts) Add all your JavaScript/jQuery code in the provided external JavaScript file question01.js, and include it in the HTML file. Create an event listener on the "change" event of the dropdown list. Write a function showCityInfo() that gets called whenever the "change" event is triggered on the dropdown list. This function loops over the cities array and displays only the selected information for each city. Each city should be a separate division. Whenever the user selects a new option from the list, the existing information on the webpage should be cleared. c) (5 pts) Style the elements so that the webpage looks similar to the one shown below. You only need to edit the margin, width, padding and border properties of the elements. The data.js file contains an array of city objects. Each city object contains the following information about a city. • Name • Latitude/ Longitude • Population • Elevation Your task is to display a subset of this information for every city as shown below. a) (15 pts) Edit the provided HTML file question01.html to create the following elements. - A heading "City Information". A dropdown list using the <select> tag that contains three enabled options: - 1)Latitude/ Longitude 2) Population 3) Elevation The text "Select an option" beside the dropdown list. Add your footer information. b) (30 pts) Add all your JavaScript/jQuery code in the provided external JavaScript file question01.js, and include it in the HTML file. Create an event listener on the "change" event of the dropdown list. Write a function showCityInfo() that gets called whenever the "change" event is triggered on the dropdown list. This function loops over the cities array and displays only the selected information for each city. Each city should be a separate division. Whenever the user selects a new option from the list, the existing information on the webpage should be cleared. c) (5 pts) Style the elements so that the webpage looks similar to the one shown below. You only need to edit the margin, width, padding and border properties of the elements.

Answer rating: 100% (QA)

Based on the information provided in the screenshots Ill explain how you can approach solving this problem This is a web development exercise where yo... View the full answer