Github Repo: https://github.com/daisyslu/Final-Project
Users will first see an input page, where they fill in their information - their "diary" at the current state. By clicking "continue," their entry will be stored in a random balloon shown on the next page. At the same time, the page will display the live temperature & weather in the city they're currently located (data pulled from weather API). Then, they can randomly choose a balloon to view another person's input (a "diary" in the past) to feel the connection with others. They can keep clicking the balloons to read more diaries, and there is a chance that they might pick their own. This is an on-going never-ending page that people all over the world can participate! All the entered data is stored automatically without a limit.
Programming languages used: HTML, CSS, Javascript (p5.js, express, node.js, API, JSON)
Web page visuals
By clicking "continue":
By clicking a balloon:
The color of the balloons is based on the user's current weather:
All weather types are visually categorized by the balloon color displayed on the screen. There are 4 colors in total -
Red: sunny or clear sky
Yellow: few, scattered or broken clouds
Grey: overcast clouds, rain, drizzle, fog, or mist
Blue: other weathers (ex. snow), or blank like the example shown above (users don't input their entry on the first page)
Technical steps
1) Getting the client-side ready (input page, button on-click, weather API, data shown on the second page and animated ocean waves)
2) Working on the server side - firstly was to store data info (name, mood, city, weather, temp) into the db file
3) Making the floating balloons appear above the ocean waves and the balloons change colors based on the weather
4) Creating the visual of the diary page (html and css)
5) The interaction when users click the balloons and a random entry from the db file will show on the dairy page
Major challenges and solutions
I still think that working on the server-side was much more confusing than the client-side. With the help from Brian (our TA resident), I was able to get the second step done successfully - this step was challenging because I was not only storing the input data but also the weather API data, which required some additional lines of code. Another challenging part was the last step, and I encountered many trials and errors.
Potential next steps if the project continues
I received a lot of feedback in class and some were really good ideas, so here are some potential next steps:
1) make the "balloons" look more like balloons visually
2) change the first page "wall" to a diary paper too, so the visuals are more consistent
3) add sounds/background music to enhance user experience
4) perhaps add a landing page, which could provide some instructions & background introduction so users know more about the idea/concept
5) enhance interactivity - drag balloons to the bottom of the page to open the "diary page"
6) make each balloon's color corresponds to their weather and the number of balloons shown on the page corresponds to time
7) store date data and display it in the dairy page as well, so users would know when or what season it was written
