Weather forecast website

5540 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

Create React app
Getting device position
Chart.js: JavaScript charting
OpenWeather provides weather data APIs

Hit a programming wall?
Get help from our mentors

Post request free
First 15 mins free

Suggested languages and frameworks

HTML/CSS React JavaScript

Difficulty

easy

Contributed by

Wenyun She

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

Other recommended projects

easy

Build a custom google maps theme

In this project, you’ll be creating and styling a Google Map with a theme and custom marker images. You’ll use Google Cloud Platform to create the map, and also use the Google Maps JavaScript API to load the map on a website. I’ve created a Super Mario themed map here but you are welcome to use any style you’d like!

JavaScriptHTML/CSS

easy

Alpaca image generator website

At DevProjects, we love alpacas! It's our mascot, and we'd love for you to have your own alpaca profile photo. With that said, this project is not just about alpacas. Allowing users to generate and download avatars are common in many interactive websites. In this project, you'll learn how to create an image generator website that allows users to generate, combine, and download images. This project should take you approximately 8 hours to complete.

JavaScriptReactHTML/CSSAngular

easy

Random number generator web app

There are various use cases for a random number generator. You could do a random dice roll or get a random quote. Most of the time, the implementation is relatively straightforward and similar to this project’s approach. In this project, we will create a dice roll simulation.

JavaScriptPHPNode.jsHTML/CSS