Fair Weather

Page View

---

How does application works?

1. Into text field a city name is entered.

2. Entered city name is used by geocoding api.

   • Geocoding api returns latitude and longitude value of the city.

3. Returned latitude and longitude values are used by current weather api.

   • Current weather api returns name of the city, temperature, description and the id of the city.
   • With name of the city, temperature and the description current weather information are returned and rendered by text and also browser speaks the information.

4. Returned value id of the city is used for hourly forecast.

   • With hourly forecast forecast values for every three hours for the rest of the day are returned

5. Returned value name of the city which is from the current weather api is used by image api.

   • Image api returns a picture for the city and sets as background image.

6. With the news api news are returned and rendered at the top of page.

---

Requirements

A user should be able to enter his/her city

A user should be able to click search

A user should be able to see the current weather for the city entered

Background image should change according to the city entered

At the very above the page latest news should flow from right to left

---

ES6 + Features

• Arrow Functions
• async/await with try/catch
• Modules export/import
• Destructuring Assignment

---

Structure

├── README.md
├── app.js
├── images
│   └── webpagess.png
├── index.html
├── src
│   ├── cityPhotos.js
│   ├── currentWeather.js
│   ├── geocode.js
│   ├── hourlyWeather.js
│   ├── news.js
│   └── speak.js
├── style.css
└── views
    ├── currentView.js
    ├── hourlyView.js
    └── newsViews.js

---

Note

News api has a limit of 200 request per a day for free subscription so after 200 request news api won't work 🥹