Easy
Web development
Weather forecast
Full-stack
Weather Forecast App
Build a full-stack web application for displaying weather forecast.
Are you interested in building a web application that can display the current and forecast weather for any location? This project is perfect for you! In this project, you will create a full-stack web application for displaying weather forecast using a weather API.
Users will be able to search for the current weather and a 5-day forecast for any location by entering a city or zip code. The application will display the current temperature, humidity, wind, and a brief description of the weather conditions, as well as the forecast for the next five days.
Project Checklist
- Create a simple front-end using HTML, CSS and JavaScript
- Integrate a weather API to fetch weather data
- Build a server-side application using Node.js and Express
- Implement a search feature for users to enter a city or zip code
- Display the current weather and 5-day forecast on the front-end
Bonus Project Checklist Items
- Add a feature to switch between Celsius and Fahrenheit
- Add a feature to save the user's last search
- Implement a feature to display weather alerts if any
Inspiration (Any companies/libraries similar)
- OpenWeatherMap.org
- Weather.com
- Accuweather.com
Hint/Code snippet to start
// Example code for integrating a weather API using Node.js and Express
app.get('/weather', (req, res) => {
const {city, zip_code} = req.query;
axios.get(`https://weather-api.com/weather?q=${city}&zip=${zip_code}&appid=YOUR_API_KEY`)
.then(response => res.json(response.data))
.catch(err => res.status(400).json(err))
});
This code snippet is an example of how to use the GET method to fetch weather data using a city or zip code as a parameter and an API key, and then returning the data in JSON format.