Application Design II / Final Project

19.6.2023- 16.7.2023 (Week 12 - Week 15)
Cheryl Voo Yie Qi / 0349878
Application Design II / Bachelor of Design in Creative Media
Final Project / Final Application

---

Final Project / Final application

We had to code the previous app that we redesigned and added animations and interactions using Adobe Dreamweaver.

I started by coding every layout first, then only I focus on the animations and transitions. 

Here are some special coding things that I wanted to record here:

Login and sign up page

I started from the login page, the thing that I tried for the first time is the password view icon, I set that to be able to view the password by clicking the eye icon on the right, then the password is viewable when the eye icon is clicked and the icon's color gets darker. The same goes to hide the password, is just that the icon will turn lighter when the password is hidden. (Fig 1.3)

Fig 1.1, Login page

Fig 1.2, Sign-up page

Fig 1.3, Sign-up page 

( Password is viewable when the eye icon is clicked and the icon's color gets darker)

Fig 1.4, Script for the eye icon (show and hide the password)

Home page

Other than that, I added a scrollable container which I never tried before. Because I only wanted the specific section to be scrollable, so I found some solutions for that specific scrollable content online.

Fig 1.5, Home page

Creating 2 div for the scrollable content:

Fig 1.6, Scrollable content in HTML 

Adding overflow-y: scroll to enable scrolling the content:

Fig 1.7, Scrollable content in CSS

Ticket page

I also added an accordion to my page, clicking the arrow will expand the content box.

Fig 1.8, Accordion Expanded

Fig 1.9, Accordion in HTML

Script to click and expand the accordion:

Fig 1.10, Script for accordion

Basically, CSS is just adjusting the positions and the colors of the accordion.

Fig 1.11, Accordion in CSS

Fig 1.12, Accordion in CSS

Select ticket page

I added a counter here to let users select the quantity of the ticket they want to purchase. And I also found the solution to this online.

Fig 1.13, Select ticket page with counter

Fig 1.14, Counter in Html

Adding a script to increase the number when clicking the increase button, and same goes to decrease.

Fig 1.15, Script for counter 1

Adjusting the position, colors, and size of the counter and the buttons:

Fig 1.16, Counter 1 CSS

Fig 1.17, Counter 1 CSS

I also added a calendar here by clicking the arrow in the date section (Fig 1.18), which will lead to a calendar (Fig 1.19). I thought this will be difficult to do but after searching online, it does not require scripting to achieve the interactive calendar which I think is easier than those required scripting.

Fig 1.18, the Arrow of the date section will lead to the calendar (Fig 1.19)

Fig 1.19, Calendar

Fig 1.20, Calendar in HTML 

I changed one of the days as a button to trigger navigation to another section, but that means the users are able to click only the day that I set it as a button.
But if I wanted to make every day to be able to click and navigate to other sections, I should make every day as buttons. Not sure if it is the right way to do that, but that's the way that comes to my mind to let it trigger navigation to other sections.

Fig 1.21, Calendar in HTML 

Adjusting the positions and colors in CSS:

Fig 1.22, Calendar in CSS

Setting up the calendar grids in .calendar-grid:

Fig 1.23, Calendar in CSS

The day button that I set to trigger navigation to another section;

Fig 1.24, Calendar in CSS

Other than these special things to code, I think others are fine and nothing special.

Final video walkthrough

Fig 1.25, Final video walkthrough

Final Netlify link (use iPhone 12 pro phone size to inspect):

https://jovial-semifreddo-0dd715.netlify.app

---

REFLECTIONS

Finally, it's the end, the coding part makes me happy when it works, but when it doesn't works, I'm just feeling like crying. But the process is quite interesting because I'm new to some of the things like coding the scrollable container, calendar, and counter. I didn't know they can be coded out like that so it feels very interesting to me. To be honest, I was regretting redesigning so many pages at first, because I saw others were only a few pages, and mine is a lot compared to theirs and I was afraid I can't finish it on time. But after finishing them, I enjoy a great sense of accomplishment that comes after completing the project even under time pressure. And again, I wanted to thank Mr. Razif for spending his time to give us consultation even after class.