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: about 2 months 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 (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-08-03T07:10:47.000Z (almost 2 years ago)
- Last Synced: 2025-06-13T07:05:49.586Z (12 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:
### Add or remove locations:
## 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