Weather Forecast

💻 Languages

🔧 Technologies

Live Preview

Demo:

Screen views

Desktop View:

Mobile View: Desktop application

🌐 Origin

The Odin Project

📝 Description

Builds a weather forecast website using APIs.

Features

• Fetch a 7-day weather forecast for any location.
• Sets background based on location's Time and Temperature.
• Displays location's root (Continent, Country, Region).
• Displays Date and Time of location at time of forecast.
• Toggle Temperature unit (Fahrenheit/Celsius) and Wind Speed unit (KPH/MPH).
• Trigger a slideshow of the next 6-day weather forecast.
• View detailed weather by hovering over the 6-day forecast.
• Displays forecast details in readable format.
• Smooth loading animation during search.

🎯 Relevance

To solidify concepts of Promise, Async/Await and Using APIs in JavaScript.

👥 Intended Audience

Developers, users, recruiters.

Note

Users can install all dependencies using package.json file via:

npm install

📂 Files

Invert

File	Description
src/*	Source files that are bundled into the output directory dist/.
src/index.js	The main JavaScript entry point that bundling begins.
dist/*	Output files from bundling of files in directory src/.
dist/main.js	Main JavaScript output file that contains the bundled JavaScript code. Code is minified and optimized for deployment (Due to mode set to production in webpack config).
package*	Contains details of project and dependencies versions.
algorithm.txt	Algorithm for JavaScript.
readme-assets/*	Live demo and different screen views used in README.md.

©️ Credit

Invert

File	Description
src/assets/morning.jpg	Photo created by Jonatan Pie on Unsplash.
src/assets/evening.jpg	Photo created by Andre Benz on Unsplash.
src/assets/rain.jpg	Photo created by Jonathan Bowers on Unsplash.
src/assets/night.jpg	Photo created by Pexels on Pixabay.
src/assets/midnight.jpg	Photo created by Neale LaSalle on Pexels.
src/assets/storm.png	Photo created by Freepik on Flaticon.

🔄 Improvements

Invert

• Add hourly weather forecast for current day. (Check other works for inspo)
• Use better background images in .main-sec that depict current weather accurately (Set image for each condition.text in object).
• Create mobile version with completely different UI. (Use apple weather app for inspo. Remember to work on this functionality in a separate branch).

👤 Curator

1. Abraham Da Costa Silvanus

Important

Seek contributor's consent for any code usage.

🞁 Top