https://github.com/autumnchris/local-weather-app-vanilla-js

A front-end web app that uses HTML5 Geolocation and the OpenWeatherMap API to get the user's current weather and forecast. Built with vanilla JS.
https://github.com/autumnchris/local-weather-app-vanilla-js

ajax babel css freecodecamp html5 javascript localstorage momentjs openweathermap openweathermap-api sass scss vanilla-javascript vanilla-js vanillajs weather-app webpack

Last synced: 2 days ago
JSON representation

A front-end web app that uses HTML5 Geolocation and the OpenWeatherMap API to get the user's current weather and forecast. Built with vanilla JS.

• Host: GitHub
• URL: https://github.com/autumnchris/local-weather-app-vanilla-js
• Owner: autumnchris
• Created: 2017-07-28T16:34:24.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2025-02-17T21:38:09.000Z (4 days ago)
• Last Synced: 2025-02-17T22:26:38.888Z (4 days ago)
• Topics: ajax, babel, css, freecodecamp, html5, javascript, localstorage, momentjs, openweathermap, openweathermap-api, sass, scss, vanilla-javascript, vanilla-js, vanillajs, weather-app, webpack
• Language: JavaScript
• Homepage: https://autumnchris.github.io/local-weather-app-vanilla-js
• Size: 3.87 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Local Weather App (vanilla JS)

A front-end web app that uses HTML5 Geolocation and the OpenWeatherMap API to get the user's current weather and forecast. Built with vanilla JS.

Inspired by the [Weather App assignment](https://www.theodinproject.com/lessons/node-path-javascript-weather-app) as part of the curriculum for the [JavaScript Course](https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript) on [The Odin Project](https://www.theodinproject.com) as well as the [Show the Local Weather challenge](https://learn.freecodecamp.org/coding-interview-prep/take-home-projects/show-the-local-weather) as part of the curriculum for the [Coding Interview Prep](https://www.freecodecamp.org/learn/coding-interview-prep) on [freeCodeCamp](https://www.freecodecamp.org).

---

## Built With

* Vanilla JS

* JavaScript

* [Sass](http://sass-lang.com)

* CSS3

* HTML5

* Geolocation API

* [OpenWeatherMap API](https://openweathermap.org)

* [GeoDB Cities API](https://rapidapi.com/wirefreethought/api/geodb-cities)

* AJAX

* [Axios](https://axios-http.com)

* [Node.js](https://nodejs.org/en)

* [Webpack](https://webpack.js.org)

* [Moment.js](https://momentjs.com)

* [Weather Icons](https://erikflowers.github.io/weather-icons)

* LocalStorage

* [Babel](https://babeljs.io)

* [Normalize.css](https://necolas.github.io/normalize.css)

* [Font Awesome](https://fontawesome.com)

* [Google Fonts](https://fonts.google.com)

## Demo

View project demo at [https://autumnchris.github.io/local-weather-app-vanilla-js](https://autumnchris.github.io/local-weather-app-vanilla-js).

## Instructions

After forking and cloning, navigate to the repository in your command line and install the NPM packages:

```

npm install

```

Create an API key on [OpenWeatherMap](https://openweathermap.org) and create a `.env` file in the root of the repository and add the following variables:

```

API_KEY=

```

Run the following script in your command line to run the application:

```

npm start

```

Once the server is running, go to `http://localhost:8080` in your browser.

Before committing any changes, run the following script to update your static files for production:

```

npm run build

```