INTERACTIVE DESIGN: FINAL PROJECT
Felice Lee (0381272)
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
FINAL PROJECT
FINAL PROJECT
Cupcake toronto redesign website: https://toronto-cupcake-by-feli.netlify.app/
google drive link:https://drive.google.com/drive/folders/1fOrnLtxscuCDMxHOHlklKDO5N6D9cy4T?usp=sharing
Toronto Cupcake redesign Progress
1. Introduction
This project started with a simple idea: how to build an online bakery shop that isn't just "pretty," but also actually works smoothly for the user. I decided to build "Toronto’s Cupcakes" as a Single Page Application (SPA). This means users can browse the menu, manage their cart, and head to checkout without ever having to wait for a page refresh. The goal was to mix dynamic data handling with a clean, responsive design.
2. The Development Process (How I Built It)
I broke the project down into a few main stages to keep things organized:
Data Management & Rendering: At first, I thought about typing every single product into the HTML manually, but I realized that would be a nightmare if the menu ever grew. Instead, I created a JavaScript array of objects. All the info—names, prices, and descriptions—is pulled automatically. This makes the whole site dynamic; if I change one line in my data, the entire menu updates.
SPA Navigation: To keep the transitions fast, I used a
Maps(pageId)logic. Basically, I’m just toggling CSS classes likeactiveanddisplay: none. The result is a site that feels instant, with no lag between tabs.Dynamic Modal & Cart Logic: This was the most challenging part. I built a modal that changes its content depending on which cupcake you click. I also added a Quantity (Qty) system. When a user clicks "Add to Cart," the JavaScript checks: "Is this item already in the cart?" If it is, it just bumps up the count. If not, it adds a brand-new row.
Styling & UI: I went with a pastel pink palette to really lean into that "bakery" vibe. I used Flexbox for almost everything, especially to make the modal layout look professional and clean.
3. Challenges Faced (The "Behind the Scenes" Drama)
Building this wasn't all smooth sailing. I hit a few technical walls along the way:
Syncing the Cart Badge: Early on, when I added items to the cart, that little number on the cart icon wouldn't change. It turned out to be a simple but annoying ID mismatch between my HTML and my JavaScript.
Responsive Layout: Making a modal that looks great on a laptop (two columns: image on the left, text on the right) but doesn't break on a phone (stacking into one column) took some trial and error with CSS.
Quantity Calculation: I had a bug where adding the same item twice would sometimes create two separate rows in the cart instead of just updating the total number. It was a logic error in how I was filtering my array.
4. How I Overcame Them (The Solutions)
I didn't let those bugs win. Here’s how I fixed them:
Global UI Functions: I created a dedicated function called
updateCartUI(). I made it a rule that this function has to be called every time the cart array changes. This ensures the badge count is always accurate in real-time.Flexbox Media Queries: For the responsive issues, I set the modal to
flex-direction: rowfor desktops and used a@mediaquery to force it intoflex-direction: columnwhen the screen is smaller than 600px. This fixed the layout on mobile instantly.Logical Operations: To fix the quantity bug, I used the
.find()method in JavaScript to check for existing products first. I also usedparseInt()to make sure the Qty input was treated as a number and not a string, which prevented some weird math errors.
5. Final Thoughts
Building "Toronto’s Cupcakes" really leveled up my skills, especially regarding manipulating the DOM with Vanilla JS. The site is now fully functional—from browsing the menu to automatically calculating the total price in the cart.
Comments
Post a Comment