Skip to content

This particular project is an ode to one of my favorite Family Guy characters, Ollie Williams. If you weren't aware, Ollie Williams is a meteorologist on the fictional hit television show "Family Guy." He provides a quick bit of comic relief that always amused me so when this project came up in my boot camp there was only one name that came to m…

Notifications You must be signed in to change notification settings

SmithBWare89/ollie-williams-weather

Repository files navigation

Description

Update: This project has been update to showcase skills that I've learned. I've updated this project to use AngularJs (v17), Tailwind CSS, RxJS, and an Express server to serve the final build of the application on Heroku. In order to protect the API key, I've developed a backend that's also deployed on Heroku as a proxy server for my requests to the OpenWeather API.

This particular project is an ode to one of my favorite Family Guy characters, Ollie Williams. If you weren't aware, Ollie Williams is a meteorologist on the fictional hit television show "Family Guy." He provides a quick bit of comic relief that always amused me so when this project came up in my boot camp there was only one name that came to mind - Ollie. I hope that you enjoy this app, it's functionality, and the useful bits of information that it provides for you. I'm still very new in my journey as a developer but I wanted this to be a great representation of not only my skills but my ability to utilize the resources around me. Enjoy!

Acceptance Criteria

  • GIVEN a weather dashboard with form inputs
  • WHEN I search for a city
  • THEN I am presented with current and future conditions for that city and that city is added to the search history
  • WHEN I view current weather conditions for that city
  • THEN I am presented with the city name, the date, an icon representation of weather conditions, the temperature, the humidity, the wind speed, and the UV index
  • WHEN I view the UV index
  • THEN I am presented with a color that indicates whether the conditions are favorable, moderate, or severe
  • WHEN I view future weather conditions for that city
  • THEN I am presented with a 5-day forecast that displays the date, an icon representation of weather conditions, the temperature, and the humidity
  • WHEN I click on a city in the search history
  • THEN I am again presented with current and future conditions for that city

Methodologies

HTML 5 Logo

TypeScript

Javascript Logo

Heroku Logo

Tailwind CSS Logo

Stack Overflow Logo

Application Features

Form Validation

  • Input only accepts characters that are uppercase or lowercase letters and white space
  • Upon inputting a character that isn't accepted the input area will animate and turn read briefly
  • Text input field will clear itself allowing for additional user input

Animated picture demonstrating how the form input will shake and turn red if the users input is invalid.

Data Population

  • Upon page load the application displays as empty awaiting user input
  • When searching for a city the data for the city shows along with its date and current data
  • The cities 5 day forecast is also displayed in smaller data boxes below the forecast
  • The recently searched city is also saved to a list that's clickable

An animated photo showing how all screen data will fade in with an animation.

Data Persistence

  • Data persists in localStorage allowing the user to access their most recently visited cities upon page refresh.
  • Data also doesn't duplicate when clicking on a recently searched city.
  • New cities are added to localStorage and the recently viewed lists

An animation displaying user input data will persist on refresh and when inputting a new city.

Credits

About

This particular project is an ode to one of my favorite Family Guy characters, Ollie Williams. If you weren't aware, Ollie Williams is a meteorologist on the fictional hit television show "Family Guy." He provides a quick bit of comic relief that always amused me so when this project came up in my boot camp there was only one name that came to m…

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published