CL - Project 01

Date: Saturday, 10/03/2026

Class: Connections Lab

Name: Janice Vuong

Week: Week 4

Project 01 → Party Balloon Store Finder.. for 3 cities only (official name is still untitled)

Live Demo Link	party balloons!!!
GitHub Repo	GitHub Connections-Lab/04.5_Week-Project-01_Balloon at main · jkvuong-design/Connections-Lab

Key Concepts and Intentions

Project 01 theme was heavily influenced by my topic from Critical Experiences. My topic assigned was: Inflatables. And from Inflatables, I associated the word with balloons.

My Fall 2026 CritEx topic assigned to me: Inflatables

From there, my concept for my webpage, would be about party balloons, and for a user to find a store to “source” balloons for a party, or celebration.

Early wireframes for Project 01 about party balloon search finder

In my wireframes, I wanted to display interactivity with balloons appearing on the page, when a user clicks on the webpage but I didn’t really flesh out the concept in v3 (in my Project 01 presentation on Wed, 09/30).

In v1 (Wed, 09/23) my MVP (minimal viable product), I focused on making sure all my files worked / connected to each other.

The files of v1 of Project 01 being the: index.html file, to my app.js file (javascript), and my local .json data set (of 3 balloon stores), and style.css (but I did not heavily spend time on the .css) because I wanted to ensure the fetch (using that as a verb) in my project worked.

JSON constraints: Google Maps API required a key (???)

Also not every party balloon store search result, was relevant in Google Maps (like home/mobile party balloon artists). I wanted a real store front that someone could visit, and it is a real store as of 09/30/2026.

A screenshot displaying v1 (and MVP) of the party balloon search

As you can see in the screenshot above, v1 was my my MVP (minimal viable product). I was really happy it worked, after some trying hours ;-; but knowing the webpage worked, I could spend the following week on improving the CSS styling!!!

Concept, Design, Creative Direction

Are.na is a tool, I am using to “pin” my visuals / inspiration and themes. For inflatables, definitely balloons are on my design board. This is a screenshot of the are.na board I have for inflatables.

Janice’s are.na board on Inflatables

I actually spent a good 30 minutes on Myinstants, a website that has sound effects. I listened to a lot of different pop! sounds, and chose one that sounded satisfying to me. I am so happy to hear, during the Project 01 presentation, folks were delighted on the pop! sound effect <333

elements I incorporated to add “texture”

For letter foil balloons, there is only really 3 color options when purchasing (gold, rose gold, and silver foil). I am lucky that scrolling through Google Images, I found City Balloon Dallas, and I used their letter balloons and arranged them to form the word PARTY.

Why reinvent the wheel?

I think a lot of times, I am working after sunset / during the nighttime, so I was leaning towards a cool-tone palette.

Scrolling through unsplash (a wonderful website with free images to use!), I found a gradient image that left me struck (so beautiful!) Credit to Mohammad Alizade, for my background image for the webpage.

Major challenges and solutions

The lift from v1 → v2 → v3 (what was presented in class for Project 01, on 09/30)

So there was a v2, but the big lift from v1 to → v3, like v2 → v3 happened in a span over 3 days (09/27, 09/28, 09/29) and I tried to keep track what was v2 versus v3, but I do not have much screenshots.

v2 updates were:

Rounded corners on buttons (in the Find Store Now!) button (was a class, so you can use .button)
Rounded corners on input text box field (was an id, so used #city-input)
+ learning to add ~animations~

I didn’t really dive into animations deeply in week 1, but now because this week (week 4) I had more time, I wanted to add a simple animation of letters moving up when the mouse is hovering over it

so i needed to create separate classes for each of the letters in HTML

  <h1 class="balloon-word">    
	<img src="letter-P.svg" alt="P" class="balloon-letter letter-p">
	<img src="letter-A.svg" alt="A" class="balloon-letter letter-a">
	<img src="letter-R.svg" alt="R" class="balloon-letter letter-r">
	<img src="letter-T.svg" alt="T" class="balloon-letter letter-t"> 
	<img src="letter-Y.svg" alt="Y" class="balloon-letter letter-y">
	</h1>

+ adding alt text to each of the images

so the playfulness part (animation) of the PARTY letters, so the transform function did the heavy lifting

.balloon-letter {  
display: inline-block !important;  
width: 80px;                      
height: auto;                       
margin: 0 -7px;                    
transition: transform 0.25s ease; }

.letter-p { transform: translateY(5px); }
.letter-a { transform: translateY(-8px); }
.letter-r { transform: translateY(0px); }
.letter-t { transform: translateY(12px); }
.letter-y { transform: translateY(-4px); }   

.balloon-letter:hover {  transform: translateY(-15px);}

.balloon-letter class was just styling + formatting like making sure the images are the same size, and together

.letter-XYZ classes were positioning the letter at various heights (by changing the Y, with the function translateY)

- a party is a bit chaotic anyways (in my mind) so I wanted the letters to be at various heights)

.balloon-letter:hover class is the actual animation that when the mouse is hovering over the letter, the letter moves up 15 pixels

v3 updates were:

Adding images in the “search” results (learnt from poke.api video from Marthura!)

I’m not sure if anyone noticed, but “Map Images” weren’t from Google Maps. It was from Snazzy Maps. Snazzy Maps shows Google Maps, in different color themes, and it is a source for designers and developers to use! Since I am using cool colors, sunset color palette, I knew using just the regular color theme from Google Maps would “take me out of it” (in references like the colors were clash in my opinion).

OMG I compared so so many iterations (my “wireframes”) of different color combinations for “map image” displays.

a screenshot displaying: different layers/options of map color options

Tool-tips! I hijacked (repurposed) the alt text function, in the “P” letter in PARTY, and wrote a message in the alt text to be displayed as a the tooltip function. When the user, hovered over “P” letter in PARTY, the message would be displayed. This was done in javascript (app.js) file.

//using the tooltip function to as instructions to webpage visitors
document.querySelectorAll('.letter-p').forEach(el => {  

// pulls the text from the alt attribute in html and shows as a browser tooltip  
el.addEventListener('mouseenter', () => el.title = el.alt);});

For far, I added sound!! And I added some fun animations. But I felt like, what if the visitor to my webpage, did not know that you could hover over the party letters. Or that sound existed (so turn your sound up?) ← I added a message in tool-tips to “turn on your sound”. But what if a visitor is deaf?

So the only other point of interaction available was my search button (Find Stores Now!). I added the color changing animation when the user clicked on the button (from Week 1 HW), but I wanted more.

I was a bit tired and I definitely had no idea how to enact it, but I had a concept (I wanted 3 balloons) that appears when the user clicked on the button, and for it float and disappeared after some time.

I used Gemini, and it gave this code to add to my javascript file (app.js)

I remember I had to argue with Gemini for a bit to get this final version of this code, but I don’t remember why it took that long (also it was 2 AM and I started to get really tired).

// balloon emojis released when store button pressed (gemini)
function launchEmojis(buttonElement) {    
const emoji = '🎈';    
const count = 3;

// get exact button position on screen    
const rect = buttonElement.getBoundingClientRect();    
const startX = rect.left + (rect.width / 2);    
const startY = rect.top;
    for (let i = 0; i < count; i++) {        
const emojiEl = document.createElement('span');        
emojiEl.classList.add('floating-emoji');        
emojiEl.innerText = emoji;

// slight horizontal offset so all 3 are visible        
const offset = (i - 1) * 16; 
emojiEl.style.left = `${startX + offset}px`;        
emojiEl.style.top = `${startY}px`;

document.body.appendChild(emojiEl);
// remove element after animation ends        
setTimeout(() => {            
emojiEl.remove();        
}, 1200);    
}
}

I like to keep project files “minimal”, so I knew with the 5 photos already for PARTY, and an audio file for the balloon (pop!) sound, and already 4 files (.html, .css, .js, and .json). I did not want to upload more pictures of balloons to display a balloon “launching” effect from the submit/Find Stores Now! button

I love emojis, because it easily recognizable, and on every PC/Mac device compatible and viewable, so I knew I wanted to use the balloon emoji to sprout from the button. Also because I didn’t want to deal with file format issues and resizing. 3 balloons seem like a reasonable amount to be displayed on the screen to not overwhelm the visitor on my webpage. I find at times, some websites have too much, micro-interactions and it is overwhelming to me to view/interact with the webpage so I wanted some light interactions, but still a delight.

v4 version on my webpage (last minute design changes, not shown)

adding a footer!!

Having my own personal website, I know components like favicon, footers, etc. as choices I like changing for design / style. But I don’t do the back-end on my personal website. Connections Lab introduces me to these topics, learning how the .html (frame/the foundation) connects to the .css (styling), and the .js (javascript) bringing a static page to life.

I knew a footer, is a static object so I had to add to my index.html file and my style.css file and nothing with app.js. But for some reason it wouldn’t display properly on my webpage? It kept showing my footer section to the middle of my webpage, so this where I also used Gemini to help me write the code (most fix the css styling) to add a footer.

Including a footer mattered to me on this webpage, because this was my idea, concept, and I executed on this idea, but this time, the balloon letters, the background images, were not my own, so I feel like it would be proper to source/credit them on the bottom of my webpage.

At least writing the html part (the text portion of the footer) I wanted to display, and the hyperlinks I knew how to write the code, but I couldn’t fix what was wrong with the css styling for the footer.

a screenshot displaying my final v4 of Project 01: featuring a footer!

Reflections

I am really happy how my Project 01 turned out!! I don’t have any official name, despite the party balloons, and the webpage serving as a search to find party balloons in 3 different cities. To me it will be untitled, however it was fun to make it! Learned how to really beef up my CSS styling skills!!

skills learned:

~~adding animation in a fun, playful way~~

~~rounded corners in buttons and text boxes~~

~~tool-tips!~~

~~adding sound to a webpage~~

~~adding a favicon to a webpage~~

I think an area I wanted to explore more would be custom fonts. I know how to upload a font, but again, regarding feelings about keeping project files “minimal” mentioned previously. I hate things breaking, and moving one step at the time and being intentional on what I want to focus, on I think helps me learning how to code to not be overwhelming to me (or I am trying to).