cliftondavies/whetha

A not-just-another weather web app.

Whetha

A weather web app that displays the current weather for a given location, using the OpenWeatherMap API.

MVP Functionality

• Enable your current location
• Search for weather by city name
• Toggle between Celsius and Fahrenheit
• Toggle menu
• See a different background based on the location's weather

📺 Media

Live Demo Link

🧰 Tools & Technologies Used

Built with

• HTML5
• CSS3
• JavaScript ES6
• webpack 5

🚀 Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

Install Node.js with npm

Install webpack

Set up

Clone repo into your local environment:

Clone with SSH

git clone [email protected]:cliftondavies/Weather-App.git

Clone with HTTPS

git clone https://github.com/cliftondavies/Weather-App.git

Open project directory

cd [your-directory-name]

Install packages:

npm install

Local Usage

In console

Start webpack:

npm run watch

In Browser

Visit http://localhost:3000/.

Author

👤 Clifton Davies

• Github: @githubhandle
• Twitter: @twitterhandle
• Linkedin: linkedin

🤝 Contributing

Contributions, issues and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgements

• Picular
• ConvertingColors
• HTML-CSS-JS
• Joy Stamp
• Cloris Ying
• Marc Wieland
• Dave Hoefler

📝 Copyright & License

Copyright (c) 2020 Clifton Davies. This project is licensed under MIT. See LICENSE file for details.

whetha's Issues

Configure webpack for SCSS, and refactor CSS to SCSS

NTA

Create project demo gif for inclusion in readme

NTA

Display loader/spinner before weather data is retrieved

NTA

Enable user to see the weather in their current location

"Go to current location"

Deploy to netlify

NTA.

# Feedback - power-rangers

Carlos' try/catch pattern for error handling with async functions:

• First pattern from Carlos
• Second pattern from Carlos

Display time, date, flag, wind direction and 5-day forecast for location

NTA

Add icons for pressure, humidity, wind and search

Options: fontawesome, etc.

Implement mobile responsiveness

NTA

Implement Google Places API for search suggestions

NTA.

Implement saving, displaying, removal and switching between saved locations

Options to consider: Firebase, LocalStorage, etc.

• Prevent duplicate saved location

Include else statement for ui.userLocation

Call error handler function within the else statement

Create geolocation and weather modules

NTA

Integrate a photo service api for rendering weather images

Options to consider: pexels, unsplash, giphy etc.

Update 'scripts' in package.json

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open" // optional
  },

Refactor existing modules

Ensure modules are less tightly coupled (e.g. via use of synchronous callback function parameters, or the pub/sub pattern)