Weather forecast website

user profile photouser profile photouser profile photo4386 developers have joined this project.

What you will practice

In this project, you'll practice building a React app, implementing basic user interaction, and using Chart.js.

Introduction

Make a web app for users to see the current weather and the weather forecast for the next 7 days.

Requirements

  • Create a React app
  • An input for users to type city name
  • Display current weather including weather condition, temperature, humidity, wind speed, and date and time
  • Visualization to display the temperature change, humidity change, and weather conditions of each day

The following image shows one way to implement the UI. Feel free to interpret the requirements however you'd like!
Weather forecast website project demo

Suggested Implementation

  • Fetch user's device position. If you're unable to get the user's position, set London as the default location.
  • Fetch weather data (forecast data and current weather data) of the location from weather API
  • Format the data into charts
  • Display the chart and current weather

References

Hit a programming wall?
Get help from our mentors

  • Post request free
  • First 15 mins free

Suggested languages and frameworks

HTML/CSSReactJavaScript

Difficulty

easy

Contributed by

Front-End Developer @ Codementor

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

  • Post request free
  • First 15 mins free
Shorten your learning curve with on-demand programming help

Browse more projects

More coming soon...