Check current weather with condition-specific background video
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
weatherTemp
README.md
header.png
index.html
weather.html
weatherLocation.html

README.md

VideoWeather

Overview

This was a side project I made at DevMountain. This project was inspired by the Momentum extension for Google Chrome. I enjoy the simplicity of the Momentum app. I wanted to take the simplicity of Momentum's design, but incorporate weather statistics with live video backgrounds. The screenshots do not reflect it, but this app plays a live video background related to the conditions in the city you enter. This project is server-less and includes heavy use of Angular Routing with a different view being used for each potential weather condition. I was able to successfully use a GET request to pull weather information for the city the user enters.

Lessons Learned

One of the major challenges I ran in to was taking the weather conditions determined from one controller and passing it on to the controller for the specific location. I was able to achieve this by using $routeParams. This allowed me to bridge the city entered in to the other controller that determined the views/routing. Now that I'm familiar with this process I will not get hung up on something like this in the future.

Screenshots

Splash Page
Thunderstorm Example
Clouds Example *Look at that temp!!!*

Libraries/Frameworks/Resources Used

Weather API
Normalize.css
AngularJS
Angular Routes
Font Awesome