abiever / simple-pink-weather-app

A simple weather web app made with mostly vanilla Javascript, HTML, and CSS.

Javascript-Weather-App

A simple weather web app made with mostly vanilla Javascript, HTML, and CSS.

A Quick Intro

As one of my very first projects displayed publicly, this one was created specifically to showcase my budding design skills with CSS rather than my ability to create an application completely from scratch. As such, and in order to give credit where credit is due, a great deal of the Javascript base code for this project comes from Web Dev Simplified's YouTube video which can be seen here:

https://youtu.be/w0VEOghdMpQ

Given that the base Javascript is not entirely my own, the challenge I proposed to myself was to force myself to understand every line that was written rather than simply following along with the video's instructions and just typing what the instructor showed word for word.

Additionally, I strove to build a design that was entirely my own — and completely unrecognizable from the original's concept.

Challenges Overcome & Lessons Learned

• Learning how to work with an API and troubleshooting issues that arose with weather data not being communicated correctly
• Utilizing a second API for geolocation via IP Address to then display the user's city name and current time/date
• Understanding how to use CSS to force specific HTML elements to be responsive only to their respective containers

Current Known Issues

• The site is not currently optimized for mobile
• There are some spacing and resizing issues on the daily/hourly sections that become apparent when the browser window is made smaller
• The currently displayed location does not always appear to be as accurate as it should be (i.e. Displayed weather is for a nearby city, rather than the user's actual location)