odin-weather-app

The Odin Project: Weather App

Summary

This project is a weather forecast application developed using JavaScript, CSS, HTML, and managed through npm.

For more details on this project, please visit The Odin Project - Project: Weather App.

Key Project Instructions

Develop the application with the following specifications:

- Weather API:
Utilize the Weather API. The recommended provider as of May 2024 is WeatherAPI.

- Search by Location:
Enable the app to be searchable by specific locations.

- Temperature Converter:
Include a toggle to switch between Fahrenheit and Celsius.

- Background Styling:
Style the background with a variety of colors or images based on the weather data retrieved from the API.

- API Data Fetching:
Implement a function to fetch data from the API based on the user's requested location.

- Raw Data Organization:
Transform the fetched data into JSON format. Then return it as an object containing only the data used in the app.

- Location Search Box:
Add a form that captures location information and fetches data upon submission.

- Optional Loader:
Optionally, include a loader to indicate when data fetching is in progress.

Built With

• HTML
• CSS
• JavaScript
• Webpack
• ESLint
• Prettier
• date-fns

---

Resources

• Weather Forecast API by WeatherAPI
• SVG Icons by Pictogrammers
• google-webfonts-helper by Mario Ranftl
• Design Inspiration by Dribbble
• Designing Tool by Figma
• JavaScript Key Code Finder by Toptal
• Search and Data Sorting by ChatGPT-4 & MULTITASKER GPT-4 (Turbo)
• Static HTTP Server for Production Version Testing by http-server

Referenced Tutorials

JavaScript Related:

• onkeydown Event by W3Schools
• KeyboardEvent key Property by W3Schools
• How TO - Trigger Button Click on Enter by W3Schools()
• Date.prototype.getDay() by MDN Web Docs
• JavaScript forEach() – JS Array For Each Loop Example by freeCodeCamp
• How to add a loading animation while Fetch data from API? Vanilla js by StackOverflow
• How to use Promise.prototype.finally () in async/await syntax? by StackOverflow
• Finally in Promises & Try/Catch by Anna Rankin

CSS Related:

• CSS Gradients W3Schools
• Ordering flex items by MDN Web Docs
• Background attachment: fixed; issues on mobile on Reddit
• RAM (Repeat, Auto, Minmax) by web.dev

HTML Related:

• HTML <input> autofocus Attribute by W3Schools

Git Related:

• Deploying a subfolder to GitHub Pages by cobyism