/weather-app

A simple weather app made as part of the odin project

Primary LanguageJavaScript

Weather App

Project to create a Weather App

Live Demo

Weather App

weather-app

Note: This Website works best with High Resolution Screens (1080p and up). Check the improvements section for future updates.

Features

  • Get current, 24 hours and weekly forecast.
  • Search cities worldwide.
  • Switch between imperial and metric systems.

Built with

Technologies

  • JS
  • CSS
  • HTML

Tools

  • Visual Studio Code
  • Linux terminal
  • Git and GitHub
  • ESLint
  • Prettier
  • npm
  • Webpack

Third party code

Outcome

  • Used ES6 Modules for more modular code.
  • Used CSS3 grid and flex to create layout.
  • Used Git and GitHub for project management.
  • Tried to maintain clean code.
  • Cross tested on Firefox and Chromium based browsers.

Improvements

Features I am going to add to this app:

  • Approach a Responsive Web Design(RWD)
  • Add error handling for incorrect city name

Summary

What I learned

  • Used revealing module pattern for better code organizing.
  • Used public API to get data.
  • Used Webpack to build the app.
  • Used third-party library for date and time formatting.
  • learned about JavaScript promises
  • learned about async/await in JavaScript

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

You will need Node.js and npm installed globally on your machine.

Installation

  1. Get a free API key at https://openweathermap.com
  2. Clone the repo 
    git clone https://github.com/voidchef/weather-app.git
  3. Install NPM packages 
    npm install
  4. Enter your API key in ./src/components/weather.js 
    const API_KEY = "YOUR API KEY";
  5. Build an app 
    npm run build

Contributing

Contributions, issues, and feature requests are welcome!

Author

👤 voidchef