yasenyanev / weather-app Goto Github PK

Weather app created with HTML, CSS and JS.

Live Demo

Learning project from The Odin Project curriculum.

• Explore cities across the globe.
• Retrieve the present and next two days' weather outlook.
• Toggle between the imperial and metric measurement systems.
• Ensure adaptability across different screen sizes with responsive design.

• JavaScript
• CSS
• HTML

• date-fns
• loading.io

• Visual Studio Code
• Git and GitHub
• Webpack
• ESLint + Airbnb JavaScript Style Guide
• Prettier

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

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

• Downloading and installing Node.js and npm

1. Get a free API key at https://www.weatherapi.com
2. Clone the repo

   git clone https://github.com/YasenYanev/weather-app.git

3. Install NPM packages

   npm install

4. Enter your API key in ./src/fetch-weather.js

   const API_KEY = 'YOUR API KEY';

5. Build an app

   npm run build

• Open ./dist/index.html file with browser.

• Organized code effectively.
• Used Webpack for building.
• Managed the project with Git and GitHub.
• Added a library for date and time formatting.
• Designed layout using CSS3 grid and flex.
• Improved code structure with the revealing module pattern.
• Learned basic error handling.
• Fetched data using a public API.
• Enhanced readability and structure with HTML5 semantics.

YasenYanev