https://github.com/jcampbell57/weather-app

Input a city to retrieve weather information. The purpose of this project is to practice integration of an API, linter, Prettier and JavaScript compiler.
https://github.com/jcampbell57/weather-app

async-await babel css3 dom-manipulation eslint html5 javascript javascript-modules json localstorage prettier promises serialization weather-api webpack

Last synced: 17 days ago
JSON representation

Input a city to retrieve weather information. The purpose of this project is to practice integration of an API, linter, Prettier and JavaScript compiler.

• Host: GitHub
• URL: https://github.com/jcampbell57/weather-app
• Owner: jcampbell57
• Created: 2022-08-28T00:36:23.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-03T07:10:47.000Z (6 months ago)
• Last Synced: 2024-11-12T03:32:36.940Z (3 months ago)
• Topics: async-await, babel, css3, dom-manipulation, eslint, html5, javascript, javascript-modules, json, localstorage, prettier, promises, serialization, weather-api, webpack
• Language: JavaScript
• Homepage: https://jcampbell57.github.io/weather-app/
• Size: 1.43 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Weatherserve

## Project info

Input a city to retrieve weather information. The purpose of this project is to practice integration of an API, linter, Prettier and JavaScript compiler.

Project description can be found [here](https://www.theodinproject.com/lessons/javascript-weather-app)

## Live demo

Live demo available [here](https://jcampbell57.github.io/weather-app)

## Table of Contents

* [Features](#features)

* [Technologies utilized](#technologies-utilized)

* [Learning outcomes](#learning-outcomes)

* [Project screenshots](#project-screenshots)

* [Behind the Scenes](#behind-the-scenes)

* [Installation](#installation)

## Features

- Display daily and hourly forecast data for a given location.

- Unique weather symbols for each forecast description.

- Side scrolling five day forecast

## Technologies utilized:

- HTML5

- CSS3

- JavaScript ES6

- Webpack

- JSON

- ESLint

- Prettier

- Babel

## Learning outcomes

This project helped to reinforce the following skills:

- API integration

- Promises & Async/Await functionality

- ESLint integration

- Prettier integration

- Babel integration

- JSON

- serialization

- localStorage integration

- webpack

- JavaScript modules

- DOM manipulation

- CSS styling

## Project screenshots

### Weatherserve:

![Weatherserve index](src/assets/index-600w.png)




### Add or remove locations:

![Add or remove locations](src/assets/add-remove-location-600w.png)




## Behind the scenes

### Improvements

This project could be improved with:

- Responsive design for mobile or tablet use

- Ability to toggle between metric or imperial units.

- Improved styling

- Cleaner code

### Resources

- [This resource](https://gist.github.com/cobyism/4730490) is helpful when deploying to gh-pages after webpack is run.

## Installation

- Clone this repository to your desktop.

- Navigate to the top level of the directory by running `cd weather-app`.

- Run `npm install` to install the required dependencies.  

- Open `dist/index.html` in your browser.

- Run `npm run watch` to update the `dist` folder on save

- Refresh page after saving to see changes