Build a Website using an API with HTML, JavaScript, and JSON

Project Scenario

The team at a European travel agency is trying to increase travel bookings. To do this, they want to provide an ability for their website visitors to look up a 7-day weather forecast for major European cities.

They want you to create a webpage that will retrieve weather forecasts from an external service. This feature will help the agency maximize their travel bookings and sales through their website.

Project Objectives

1. Provide ability for website users to look up 7 day weather forecasts for major European cities
2. Keep website visitors on the website longer
3. Increase online bookings

My Challenges

My challenge will be to write a webpage that uses API to retrieve weather information from an external source. To do this, I will create the user interface, send the request to the external source using JavaScript, process data received and present the information on your webpage using HTML.

Summary

I used HTML, CSS, and JavaScript to create this website. Also, I utilized Bootstrap library to make responsive accessible UI and jQuery library to make it interactive.

Solution

To let users easily check the 7-day forecast for some key European cities, I have provided a list so that users can look through and select one. After clicking on an option, data would be displayed on the screen in respect of weekdays.

To have minimal user-friendly webpages, I Implemented HTML5, CSS3, and ES6 JS along with writing clean and semantic codes.

Approach

In the most important step, I explored the weather forecast API (7Timer!) and defined what parameters I should send and what type of result would be returned. The Postman application helped me in this step.

In the next step, using Visual Studio IDE, I applied HTML and CSS to the interface. Also, in the JS file, I have created one function for sending a request to the external API and one function for processing data and generating HTML results.