Weather app was implemented using a provided layout and free weather API with pure vanilla Javascript, HTML and CSS/SASS.
- Implemented layout with HTML/CSS/JS (without frameworks and libraries).
- App has four areas:
- header includes search input, weather widget and background image changes depends on current time;
- "Recently you checked weather in the cities" includes 5 cards latest checked cities;
- "Frequently Asked Questions" includes four accordeons were created with smooth opening/closing;
- footer includes fullname of author and dynamically changed year;
- The user enters their city name in the search box at the top of the page and press Enter / Click search button.
- The user can see a dropdown with the list of found cities or notice "City not found!".
- When the user clicks on the found city - user can see selected city weather data in the main weather widget.
- When the user clicks on the card with the checked city - user can see selected city weather data in the main weather widget.
- FAQ dropdowns work. (Open / close)
- The app is responsive for all modern devices.
- The App has “day” and “night” mode. If user time is between 21:00 and 06:00 - app uses “night” layout, in the other case (from 06:00 to 21:00) it uses “day” layout.
- App shows not more than 5 latest cities with success checked weather in the "Recently you checked weather in the cities"(even if user refreshes the page)
- If cities are two and more then app throws dropdown with list of cities.
- VS Code
- JS
- HTML
- SCSS
- ESlint
- stylelint
- Node v14.18.2 and higher
- NPM v6.14.12 and higher
- Fork and clone this repository
- Run
npm installin your terminal - Run
npm start