Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

2) Open index.html for editing in the editor and study it, and also open it in the browser to see it does not show the

2) Open index.html for editing in the editor and study it, and also open it in the browser to see it does not show the 7 modern wonders of the world. You will fix this. Notice that the data that you will read from the JSON file must be included in the div element with id wonders which is initially empty. Notice also that there are images for the wonders in images folder and you will need to dynamically load them in your web page by creating img tags with the appropriate value of src attribute. 3) Open wonders.json file which is in data folder in the editor and study it. Notice that data are written in JSON format. 4) The web page already contains the script element where you will add the code. jQuery is also included so you dont need to include it. Add a call to jQuery ajax method within the web pages ready event handler to read wonders.json file, in order to parse the data and to include it in the div element. In Ajax request, do the following: - before making Ajax request, set the content of the div with id wonders to the text: Getting data about wonders (15%) - If any errors happen while data is retrieved from the server, show the message in the alert window: An error happened during loading the data (15%) - If the Ajax request completes successfully, parse the data, and retrieve the name, description, and image (in fact this is an url of the image) and wrap name value in h2 element, description value in p element, and add image element with src attribute set to image url. Wrap all this information about an item in div element. Concatenate the values for each wonder item together. After parsing all wonders, set the HTML content of the div with id wonder to the value you compiled during parsing.

**/// index.html

Seven Modern Wonders of the World

Seven Modern Wonders of the World

***/// wonders.json

{"wonders": [ { "name": "Channel Tunnel", "description": "The first wonder in alphabetical order is the Channel Tunnel. Opened in 1994, the Channel Tunnel is a tunnel under the English Channel that connects Folkestone in the United Kingdom with Coquelles in France. The Channel Tunnel actually consists of three tunnels: two tunnels carry trains and a smaller middle tunnel is used as a service tunnel. The Channel Tunnel is 31.35 miles (50 km) long, with 24 of those miles located under water.", "image": "images/channel_tunnel.jpg" }, { "name": "CN Tower", "description": "The CN Tower, located in Toronto, Ontario, Canada, is a telecommunications tower that was built by Canadian National Railways in 1976. Today, the CN Tower is federally owned and managed by Canada Lands Company (CLC) Limited. The CN Tower is one of the world's largest tower at 553.3 meters (1,815 ft). The CN Tower broadcasts television, radio, and wireless signals throughout the Toronto region.", "image": "images/cn_tower.jpg" }, { "name": "Empire State Building", "description": "When the Empire State Building opened on May 1, 1931, it was the tallest building in the world standing at 1,250 feet tall. The Empire State Building became an icon of New York City as well as a symbol of human success in achieving the impossible. Located at 350 Fifth Avenue (between 33rd and 34th Streets) in New York City, the Empire State Building is a 102-story building. The height of the building to the top of its lightning rod is actually 1,454 feet.", "image": "images/emp_st_building.jpg" }, { "name": "Golden Gate Bridge", "description": "The Golden Gate Bridge, connecting the city of San Francisco with Marin County to its north, was the bridge with longest span in the world from the time it was completed in 1937 until the completion of the Verrazano Narrows Bridge in New York in 1964. The Golden Gate Bridge is 1.7 miles long and about 41 million trips are made across the bridge each year. Prior to the construction of the Golden Gate Bridge, the only mode of transportation across San Francisco Bay was ferry.", "image": "images/gold_gate_bridge.jpg" }, { "name": "Itaipu Dam", "description": "Itaipu Dam, located on the border of Brazil and Paraguay, is the world's largest operating hydroelectric facility. Completed in 1984, the nearly five mile-long Itaipu Dam impounds the Parana River and creates the 110 mile-long Itaipu Reservoir. The electricity generated from Itaipu Dam, which is greater than the electricity generated by China's Three Gorges Dam, is shared by Brazil and Paraguay. The dam supplies Paraguay with more than 90% of its electrical needs.", "image": "images/itaipu_dam.jpg" }, { "name": "Netherlands North Sea Protection Works", "description": "Nearly one-third of the Netherlands lies below sea level. Despite being a coastal nation, the Netherlands has created new land from the North Sea through the use of dikes and other barriers to the ocean. From 1927 to 1932, a 19 mile-long dike called Afsluitdijk (the Closing Dike) was built, turning the Zuiderzee sea into the IJsselmeer, a freshwater lake. Further protective dikes and works were built, reclaiming the land of the IJsselmeer. The new land led to the creation of a the new province of Flevoland from what had been sea and water for centuries. Collectively this incredible project is known as the Netherlands North Sea Protection Works.", "image": "images/nether_sea_prot.jpg" }, { "name": "The Panama Canal", "description": "The 48 mile-long (77 km) international waterway known as the Panama Canal allows ships to pass between the Atlantic Ocean and Pacific Ocean, saving about 8000 miles (12,875 km) from a journey around the southern tip of South America, Cape Horn. Built from 1904 to 1914, the Panama Canal was once a territory of the United States although today it is part of Panama. It takes approximately fifteen hours to traverse the canal through its three sets of locks (about half the time is spent waiting due to traffic).", "image": "images/panama_canal.jpg" } ] }

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Intelligent Information And Database Systems 12th Asian Conference ACIIDS 2020 Phuket Thailand March 23 26 2020 Proceedings

Authors: Pawel Sitek ,Marcin Pietranik ,Marek Krotkiewicz ,Chutimet Srinilta

1st Edition

9811533792, 978-9811533792

Students also viewed these Databases questions

Question

suggest a range of work sample exercises and design them

Answered: 1 week ago