Help with JavaScript project Please! Follow the prompts in the JavaScript file to make the map "active." Specifically, write code $($as directed$)$ to make data about each city on the map appear on mouse over.

You won't have to edit any file other than project$3.$js$!!$ Wherever you see $//...,$ that's where you'll need to add code. There are plenty of hints in the code comments!!

When you mouse over each city, populate the object you create with the following data:

$$City

State$$

Weather Office$$

Grid X$$

Grid Y$$

$$Chicago

IL$$

$$LOT

$76$

$73$

$$Denver

CO$$

BOU$$

$63$

$61$

$$Houston

TX$$

HGX$$

$64$

$97$

$$Los Angeles

CA$$

LOX$$

$155$

$45$

$$New York

NY$$

OKX$$

$33$

$35$

$$Pittsburgh

$$PA

$$PBZ

$78$

$66$

Seattle$$

WA$$

SEW$$

$125$

$68$

$$Washington

DC$$

LWX$$

$97$

$72$

GRADING:

Complete the definition of the City object:

$5$ points: Add the five field variables specified in the project$3.$js$\text{'}$s comments: name, state, weatherOffice, gridX, and gridY

$10$ points: Give City a method $($i$.$e$.,$ an object function$)$ named setData, accept five values as parameters

$10$ points: Set the object's field variables to the values passed in

Get a reference to the element with the class "cityinfo"

$5$ points: Set a $($global$)$ variable by selecting the element with the class "cityinfo"

Complete the handleCityMouseOver function:

$10$ points: Determine the weather office code of the city you're mousing over

$10$ points: Populate the City object's member data with that city's information $($see the table above$)$

$10$ points: Write City's field values to their corresponding elements in the HTML

$5$ points: Show the element with the class cityinfo

Complete the handleCityMouseOut function:

$5$ points: Hide the element with the class cityinfo

Complete the handlePageLoad function:

$10$ points: Find all elements with a class of "city"

$$ Add the following event listeners to these elements

$10$ points: listen for mouseover, call the function named handleCityMouseOver

$10$ points: listen for mouseout, call the function named handleCityMouseOut Assignment Content

NOTE: Since I$\text{'}$m assigning this so late, this will be the last project in the course. What's more, everyone will get FULL CREDIT for the Final, as well as any assignments we didn't get to$.$

This assignment will exercise your use of objects, events and manipulating the Document Object Model via JavaScript. In this project, start with the code provided here:

M$150\_$P$3.$zip

Follow the prompts in the JavaScript file to make the map "active." Specifically, write code $($as directed$)$ to make data about each city on the map appear on mouse over.

You won't have to edit any file other than project$3.$js$!!$ Wherever you see $//...,$ that's where you'll need to add code. There are plenty of hints in the code comments!!

When you mouse over each city, populate the object you create with the following data:

$\backslash$table$[[$City$,$State,Weather Office,Grid X$,$Grid Y$],[$Chicago$,$IL$,$LOT,$76,73],[$Denver$,$CO$,$BOU,$63,61],[$Houston$,$TX$,$HGX$,64,97],[$Los Angeles,CA$,$LOX,$155,45],[$New York,NY$,$OKX,$33,35],[$Pittsburgh$,$PA$,$PBZ$,78,66],[$Seattle$,$WA$,$SEW,$125,68],[$Washington$,$DC$,$LWX$,97,72]]$

GRADING:

Complete the definition of the City object:

$\_-5$ points: Add the five field variables specified in the project$3.$js$\text{'}$s comments: name, state, weatherOffice, gridX, and gridY

$10$ points: Give City a method $($i$.$e$.,$ an object function$)$ named setData, accept five values as parameters

$-10$ points: Set the object's field variables to the values passed in

Get a reference to the element with the class "cityinfo"

$--5$ points: Set a $($global$)$ variable by selecting the element with the class "cityinfo"

Complete the handleCityMouseOver function:

$10$ points: Determine the weather office code of the city you're mousing over

$-\_\_10$ points: Populate the City object's member data with that city's information $($see the table above$)$

$-10$ points: Write City's field values to their corresponding elements in the HTML

$-5$ points: Show the element with the class cityinfo

Complete the handleCityMouseOut function:

$-5$ points: Hide the element with the class cityinfo

Complete the handlePageLoad function:

$\_10$ points: Find all elements with a class of "city"

$\_\_$ Add the following event listeners to these elements

$\_10$ points: listen for mouseover, call the function named handleCityMouseOver

$-\_\_\_10$ points: listen for mouseout, call the function named handleCityMouseOut