Weather For You

This is a weather app that displays the weather forecast for 4 days.

The weather app displays weather data for the location entered in the search bar or by obtaining the location of the deviceif user allows location access

• The units of the weather data are in metric by default, but can be switched to imperial based on user's preference with a toggle button provided.
• The preferred unit of the user is saved so the user won't have to select it again on reload.
• The user input is screened to prevent useless HTTP requests.

Built With

• Semantic HTML5 markup

• CSS custom properties

  • Pseudo-selectors (hover; to add hover effect to certain elements)
  • Pseudo-elements
  • Position property
  • Media queries to make page responsive for mobile
  • Flexbox
  • Transition property
  • Animation
  • Box-Shadow & Text-Shadow Properties.

• OpenWeatherMap Api, Geo-location Api, Geo-coder Api,

• JavaScript

• Implemented DOM manipulation in various parts of the project to make page dynamic.

• JS Objects, Arrays, & Arrays of objects to store data of similar items.

• Used Arrow Functions, spread operators and { object destructuring} methods to match the modern conventions.

• Made use of various JS objects and methods such as; node.createElement(), node.AppendChild(), node.replaceChild(), etc.

• Implemented array.forEach(), through the course of the project to loop through objects in the Objects Array; thus making it possible to manipulate the objects and produce desired result.

• Made use of if Statements to match specific use cases.

• Implement the use of eventListeners to make 'add' & 'remove' buttons functional.

• The node.localStorage set() & get() methods were used to store and retrieve user inputs.

• Made use of the HTMLCollection API with DOM selector document.querySelectorAll() to manipulate a list of elements with same class.

• Implement JS - Class with static methods.

• Fetch API

• Promise and callbacks using (Async and Await.)

• WEBPACK

• Implement webpack with various plugins to bundle js, minify css, and create a HTMl template.

• Split webpack config into two modes production and development.

• Create a common webpack config and use a webpack-merge plugin to keep things DRY in production and development configs.

• Load DateTime from luxon library.

• The Google workbox plugin is used to precache application shell to make it work offline

• Various webpack plugins were used for this project.

  • HTMLWebpackPlugin
  • MiniCssExtractPlugin
  • OptimizeCSSAssetsPlugin
  • CssMinimizerPlugin
  • CleanWebpackPlugin
  • WorkboxWebpackPlugin
  • CopyPlugin
  • TerserPlugin to minimize bundle size

• Service Worker

• Workbox Plugin is used to precache necessary URLS to enable site to work offline, so as to make it a fully Progressive Web App

Live Demo

Live Demo Link

Development (Running locally)

• Clone the project

git clone https://github.com/Lanr3waju/weather-for-you.git

• Install Dependencies

npm install

To run StyleLint by itself, you may run the lint task:

npm run lint:check

Or to automatically fix issues found (where possible):

npm run lint

You can also check against Prettier:

npm run format:check

and to have it actually fix (to the best of its ability) any format issues, run:

npm run format

You can also check against HTML Validator:

npm run html-validator

Style Guides

• CSS Style Guide
• HTML Style Guide
• JavaScript Style Guide
• Git Style Guide

👤 Author

• Github: @author
• Twitter: @author
• Linkedin: @author

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• openWeatherMap
• openCage Geocoding Api
• Bgjar SVG
• amCharts Weather Icons
• SVG Backgrounds

📝 License

MIT licensed.