This project continues from our previous work. Our goal is to create a
complete design and prototype of our proposed app design flow using
HTML, CSS, and JavaScript. We are required to demonstrate and apply the
knowledge and skills gained this semester to showcase our understanding.
Submission Requirements:
Your app project files and folders (HTML, CSS, JavaScript, images,
etc.)
Video walkthrough or presentation of your app
Published link (Netlify)
Blog link directly to your final project blog post
Code Overview and Explanation
- General Settings
*applicable to all pages
Figure 1.1 - HTML Structure: Head Section
1. Meta Tags:
charset="UTF-8": Specifies the character encoding for the HTML
document, ensuring proper display of text and symbols.
viewport: Sets the viewport to control layout on mobile browsers.
width=device-width ensures the page uses the full width of the device
screen, and initial-scale=1.0 sets the initial zoom level.
2. Title:
The title of the page is set to "
name the page ".
3. External Resources:
Google Fonts: The Inter font family is imported with various
weights (300 to 700).
Custom Stylesheet: Links to an external CSS file (styles.css)
for styling.
DotLottie Player: A module for handling Lottie animations,
imported from an external source.
GSAP: A JavaScript library for creating animations, included via CDN.
Figure 1.2 - CSS: Global Styles
margin: 0; padding: 0;: Removes default margin and padding from all
elements, providing a clean slate for layout.
box-sizing: border-box;: Ensures that the padding and border are
included in the element's total width and height. This simplifies layout
calculations and prevents overflow issues.
font-family: 'Inter', sans-serif;: Sets the default font for all
elements to 'Inter', ensuring a consistent typographic style across the
app.
Figure 1.3 - HTML and Body Styles
html, body: Ensures the page takes up the full viewport size.
display: flex;: Centers content both horizontally and vertically.
background-color: #f9f9f9;: Sets a light gray background for the
entire page.
body: Specifies a fixed size for the app, matching typical mobile
dimensions (390px by 844px). This ensures the layout remains consistent
across different devices.
Figure 1.4 - Container Styles
display: flex; flex-direction: column;: Arranges child elements in
a column, making it easy to stack sections vertically.
padding: 0 16px;: Adds padding on the left and right, ensuring
content doesn't touch the edges of the screen.
overflow-y: hidden;: Prevents vertical scrolling within the
container.
- Page 1: Menu Page
Figure 1.5 - Menu Page Inspect
Figure 1.6 - Drink Item Styles
.drinks-grid: Arranges drink items in a grid layout with two
columns and gaps between them.
Figure 1.7 - Keyframes for Animations
slideInFromBottom: Defines an animation for sliding elements in
from the bottom. The element starts fully off-screen (translateY(100%))
and becomes visible as it slides in (translateY(0); opacity: 1;).
slideInFromRight: Similar to slideInFromBottom, but the animation
starts from the right.
Figure 1.8 - Button and Content
1. Button Click Event Listeners
popularBtn: When
clicked, this button becomes active, the brownSugarBtn becomes inactive,
and the drink items in the popular section are animated. The content
scrolls smoothly to the top of the popular section.
brownSugarBtn: Similar to the popularBtn, it activates when
clicked, animates the brown sugar drink items, and scrolls to the brown
sugar section.
2. Scroll Event Listener
This listener updates the active state of the buttons based on the
scroll position of the content. It switches the active state between
popularBtn and brownSugarBtn as the user scrolls through
the sections.
- Page 2: Customising Page
Figure 1.9 - Customising Page Inspect
Figure 1.10 - Buttons
.buttons: A scrollable horizontal container for the buttons.
overflow-x: auto: Allows horizontal scrolling.
gap: Sets space between the buttons.
-webkit-overflow-scrolling: touch;: Enables smooth scrolling on
touch devices.
.buttons::-webkit-scrollbar: Hides the scrollbar for a cleaner
look.
Figure 1.11 - Buttons State and Formatting
.buttons button.selected: Styles for the selected button, adding
a border and removing left margin.
.buttons button.shrink: Hides the button when it's in a "shrink"
state.
Figure 1.12 - Buttons Click Event Listeners
Figure 1.13 - Animation Steps
- Page 3: Cart Page
Figure 1.14 - Cart Page Inspect
Figure 1.15 - Horizontal Scroll List
1. .product-cards-wrapper
overflow-x: auto;: Enables horizontal scrolling if the
content exceeds the container's width, showing a horizontal
scrollbar.
overflow-y: hidden;: Hides vertical overflow,
preventing a vertical scrollbar and keeping the layout clean and
consistent.
Figure 1.16 - Prevent Vertical Scrolling
The wheel event listener on .product-cards prevents
vertical scrolling, enabling horizontal scrolling for product cards.
Figure 1.17 - Animation Steps
- Page 4: Activity Page
i) Pop Up Window
Figure 1.18 - Pop-up Window
Figure 1.19 - Notification Panel
1. Animation Complete Event Listener
lottiePlayer: To enable the "Done" button after the Lottie
animation completes.
2. Button Click Event Listener
doneButton: To handle the "Done" button's functionality, hiding
the notification panel and animating the receipt ID.
ii) Activity Page
Figure 1.20 - Activity Page Inspect
Figure 1.21 - Tab Bar
1. Click Event Listener
orderHistoryTab: To switch the active tab to "Order History."
rewardsTab: To switch the active tab to "Rewards."
Figure 1.22 - Animation Steps
- Page 5: Order Status Page
Figure 1.23 - Order Status Page Inspect
Figure 1.24 - Animation Steps
- Page 6: Tracking Page
Figure 1.25 - Order Tracking Page
Figure 1.26 - Overlay Content
.content-overlay: Positioned relative and above the
map-image (z-index: 1). It spans the entire container and
organises its children in a column layout, with space distributed evenly
between them (justify-content: space-between).
Figure 1.27 - Lottie Animations
.lottie-first, .lottie-second: Positions for the Lottie
animations with absolute positioning (manually position) and
pointer-events: none to prevent interaction.
Figure 1.28 - Animation Steps
From Development to Deployment
Figure 1.29 - Combine Files and Folders
Previously, I separated each page into different folders, which made it
time-consuming to combine the icons and images and link the pages together.
Figure 1.30 - Simple Web Server
Despite following the publishing tutorial, I was still unable to view it on
my phone, even after trying both local network and mobile data. However,
when I copied the URL from Safari/Chrome and pasted it into my mobile
browser, it ultimately worked.
Figure 1.31 - Deploy in Netlify
Figure 1.32 -
PWA Test in Lighthouse
It is expected the performance to be this low as each of my code files,
including HTML and CSS, has around 300 lines of code per page. Additionally,
I noticed some misalignment or misformatting on other pages. However, the
formatting appears as desired when I open it from Dreamweaver and my local
site folder.
In addition, adding a viewport meta tag to your HTML helps to improve
performance ratings.
Figure 1.33 - App Icon Generator
Favicon is much simple and faster at this point.
Figure 1.34 - PWA in SimiCart
I ultimately gave up on doing this since I already set up the manifest with
the favicon previously. I also managed to make the icon appear after adding it
to my Home Screen. However, skipping these steps prevents me from getting the
PWA certification when inspecting in Chrome.
Figure 1.35 - Add to Home Screen
The first attempt was unsuccessful, but after clearing the cache and related
history and repeating the steps, the icon successfully appeared after adding
it to the Home Screen and upon opening, users won't see the browser's
navigation controls.
With the help of ChatGPT, the coding process has become much smoother and
faster. However, it's still necessary to thoroughly read through the code to
identify and manually fix issues when they arise. When working with similar
components, it's useful to copy their specific code and integrate it
carefully. It's also important to stay with the initial plan and make
changes afterward as needed. Regularly checking the console can help
identify problems early on. While ChatGPT can be an invaluable tool for
saving time and resolving formatting and layout issues, it's essential to
maintain control over the project. Rather than letting the chatbot dictate
the outcome, it's better to clearly communicate your desired result.
However, sometimes allowing the chatbot to explore creative solutions can
lead to unexpectedly better outcomes.
✨ Something Personal ✨
Taking three modules with Mr. Razif has been intense, and this one was the
most challenging module, as I've mentioned multiple times. I had no idea
about the concept of coding, making it difficult for me to code the
layout. However, with current technology, I would rather code two more
apps than develop games. Just joking! Although I didn't enjoy these three
modules, I see them as part of my learning and life experience. Most
importantly, never procrastinate. If you are an overachiever or someone
who has high expectations for yourself and your work, it's better to work
on every task as soon as it's assigned. It might seem overwhelming and
confusing at first, but refer to senior blogs, read the latest MIB, and
talk to your lecturer. Even if they seem frustrated or something, you'll
realize that as long as you keep working and submit your work by the
deadline, you can still make changes and improve in the next task. As
someone who struggles to stand firm and is easily influenced by others,
this is what I can say: keep working on it and make changes all the way
until the final submission.
30 Aug 2022 - 26 Sept 2022 (Week 1 -Week 5) Vincent Lee // 0359386 Typography // Bachelor of Design (Hons) in Creative Media // Taylor's University (TDS) Task 1: Exercises (Text Expression and Text Formatting) Instructions Exercise 1: Type Expression Exercise 2: Type Formatting Feedback Reflection Further Reading LECTURES LECTURE LIST Lecture 1: Typo_0_Introduction Lecture 2: Typo_1_Development Lecture 3: Typo_2_Basic Lecture 4: Typo_2_Text_P1 Lecture 5: Typo_3_Text_P2 Lecture 6: Typo_5_Understanding Lecture 7: Typo_6_Screen&Print Week 1 Class Summary 1 Mr. Vinod showed us how to use the Typography Facebook group and create an e-portfolio using a YouTube video. He also gave us advice on how to succeed in his class by explaining the dos and don'ts in the Module Information Booklet. Mr. Vinod suggested that we read not only our own feedback but also feedback given to others. This ...
17 Apr 2023 - 08 May 2023 (Week 4 - Week 6) Vincent Lee // 0359386 Interactive Design // Bachelor of Design (Hons) in Creative Media // Taylor's University Project 1: Prototype Design
