Ollie Williams Weather (https://ollie-williams-angular-2cb6f6d5653d.herokuapp.com/)
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!
- 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
- 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
- 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
- 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
