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.
-
- 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,
-
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 throughobjects
in theObjects 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 selectordocument.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
, minifycss
, and create aHTMl
template. -
Split
webpack
config into two modesproduction
anddevelopment
. -
Create a common webpack config and use a
webpack-merge
plugin to keep thingsDRY
in production and development configs. -
Load
DateTime
fromluxon
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
- 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
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!