A weather app that uses the OpenWeather API to display the current weather forecast for a searched location.

🔗 Live preview

Table of Contents

• About the Project
  • Features
  • Technologies
  • Tools
  • Third Party Code
• Build Process
• Usage
• Outcome
• Authors

About the Project

Weather forecast site using the OpenWeather API. The project is from The Odin Project curriculum.

Features

• Ability to search for a specific location
• Possibility to watch the data in metric or imperial systems
• Responsive design

Technologies

• JavaScript
• CSS
• HTML

Tools

• Visual Studio Code
• Git and GitHub
• Webpack
• ESLint + Airbnb JavaScript style guide
• Prettier code formatter
• Linux terminal

Third Party Code

• date-fns library
• Font Awesome icons
• Google Fonts

⬆️ Back to top

Build Process

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

1. Clone this repository:

$ git clone https://github.com/mooniiDev/weather-app.git

2. Go to the cloned repository:

$ cd weather-app

3. Install dependencies:

$ npm install

4. Generate an API key at OpenWeather website.

5. Enter your generated API key in /src/api.js:

const API_KEY = 'YOUR API KEY';

6. Build the app:

$ npm run build

Usage

1. Go to the /dist location and open index.html file with a browser.

⬆️ Back to top

Outcome

• Used revealing module pattern for code organizing
• Used HTML5 semantic elements for better structure and readability
• Used CSS Grid and CSS Flexbox modules to create a responsive layout
• Cross tested on Firefox and Chromium browsers
• Improved classes naming convention
• Learned to use basic API functionality
• Learned basic error handling
• Learned to use Font Awesome icons in svg format

Authors

mooniiDev | LinkedIn | mooniidev@proton.me