For an example click here

1. Decide on three world cities you love, and find beautiful images to represent each. Save the URL for each image in a notepad.
   
   
2. Create an HTML Page with 3 buttons on top. Name each button after a city, and clicking each button should run a function corresponding to that city. Make sure each button has an id and an onClick attribute
   
   
3. Add a text element (use <p> or <div>). This is the label where you are going to put the city name. Make sure it also has an id attribute and remember to add a close tag. (</p> or </div>).
   
   
   
4. Under the text label, add ONE image element <img> with the source attribute empty (src=" ") This is where the city image will go after you click one of the buttons. Make sure it also has an id attribute (like id="cityImage")
   
   
5. Next, go into the < script> section of your code and write the function for your first city.

   <script> function doMilan() { //what the function does goes here } </script>

6. Add code to the fuction to do the following: when the button is clicked, change the src=" " of the image element to have URL for the image for that city. So something like:
   

   document.getElementById("cityImage").src = "yourOwnPhotoOfMilan.jpg";

   
   
7. Now, do the same to the .innerHTML=" " of the text label, change it to be the name of the city.
   
   
8. Also inside the function, change the background color and font of the page to be specific to that city.
   
   
9. Repeat for the other two cities by copying the 1st city function and editing.
   
   
10. FOR EXTRA CREDIT: Show the local time (HH:MM) in that city. Hint: use var dateTime = new Date ();