Link to GitHub: https://github.com/daisyslu/connections-lab/tree/main/Project-1
Relevant references/resources:
(The first link is the weather API that I used to retrieve the current weather data in particular cities, and the second link was the place I went to when I had troubles with coding/how to make something work)
Key Concepts:
My original goal was to create a weather website "Sounds of the Weather" that focuses on listening to some particular music/soundtrack and watching some simple animations while feeling each city's weather. I'm always the type of person who is curious about the weather in other parts of the world, therefore, I wanted to make a relaxing and enjoyable experience for users to be able to check the weather in other cities, and at the same time, feeling the vibes. That's how the sounds/animations idea came to mind.
Original website look.
However, I started to realize there are so many things I'm trying to do in a short amount of time. So I need to give up some parts and prioritize on what elements are more important. So I eventually did not do sounds, but focuses on getting the weather API data and implementing p5 animations. Due to time restrictions, I was only able to do one city "London".
Current website look:
Production Decisions:
Design/ creativity wise, I want to use gifs to represent each city and having the text hovering effects when mouse is over the gif to show its name. The layout idea was just based on one of the wireframes I created in the first week - simple and clean look was the intention. Decided to add a header image to visually show different weathers and to give it the website more colorful details to match the 6 gifs. Also make a button to change the background color based on user preference or mood: greyscale, dark (night), mauve (like a sunset color) and teal (feels like morning and refreshing).
HTML
HTML codes are responsible for the website elements and ordering. Used 3 sections: 1) the top that contains the headings and weather info, 2) the grid - the set of 6 images and 3) the "London" section of the weather info and p5 when the button is clicked.
CSS
CSS is for website styling, and I tried using it for inserting a section background image, adjusting padding and margin, aligning the elements, the use of "flex", and last but not least, the hover text over image effect.
JavaScript
I think JavaScript was the most difficult part. I feel like the major parts of HTML/CSS were already completed in the first 2 weeks while the rest of the time was all spent on doing the JS part. I divided the code into 4 sections: 1) button to change background color 2) change font size of the instructions when mouse is over it 3) fetching some current weather API data to show it on particular parts of the page 4) adding the animation - p5 canvas in.
Major Challenges and Solutions:
There are so many things that I did not know and trying to solve on my own, such as the hovering effects, making a section hide/show when clicking a button, aligning the p5 sketch to the right position to display it just right, and using the OpenWeather API. These were successfully solved by watching helpful tutorials, going into Stack over Flow for solutions, and getting familiar with what kind of data is available on the OpenWeather API.
Remaining challenges and not yet solved: 1) making an image clickable and not directing to a new page but just to show a new section 2) Implementing another API to retrieve user's location/IP address so that the heading section can automatically update based on where user is located, because the weather API needs me to specify a city when fetching its weather data.
Lessons Learned & Potential Next Steps:
Most important lesson learned: less is more! Ruta mentioned this in class after I presented my project idea and I think it's really helpful for my future projects. Oftentimes, I have too many thoughts on the variety of features and eventually forget what my main goal is. It's necessary to make an idea cohesive with a clear intention.
Right now the website is not even half complete and did not meet my goals. Next steps:
1. Fetching the location API so it reflects the user's city
2. Replacing that button and instead, can click on the images
3. Finishing the other 5 cities' animations and weather data
4. Having instrumental music to go with the animations