Labels

Application Design II: Final Project/Completed App

14/12/2024 - 7/1/2025 / Week 12 - Week 15
Janice Marie Eng Chia Hui /0361521
Application Design II/Bachelor of Design in Creative Media / Taylor's University 
Application Design II: Final Project/Completed App

Table of Contents:

Instructions


Task

To-do list:
  • Additional Pages
    • City council page
    • Parking pop-up that is unfilled
    • Location and Vehicle plate number filled notification
  • Linking all the pages

Additional Pages

City council page

The city council page was easy to make. I just duplicated the dropdown menu locations file and edited it to have the layout and content of the city council page. I went back and forth with the other files to make sure that all the font sizes were consistent. No problems here.

Figure 1.1 City Council Page (3/1/25)

Unfilled Parking pop-up

The flow of the parking pop-up

The parking pop-up is basically the pop-up that appears when you click to pay for parking. For the flow that I have chosen to make for the final project, the parking pop-up will have the following actions:
  1. When the app is first loaded, users can click and open the parking pop-up. The location and vehicle plate number section will be empty.
  2. Users will click on the 'edit location' text field to select their location.
  3. After the location is selected, users will be redirected back to the pop-up where the location text field is filled up. A notification will play slightly after saying the location is selected.
  4. They will then select their vehicle plate number.
  5. Once selected, they will be redirected back to the parking pop-up where all fields are filled up and the price preview appears. A notification will play slightly after saying the plate number is selected.
So my plan was to make 3 separate parking pop-up screens. 
  1. One for the completely unfilled pop-up that is not open on load.
  2. One for the pop-up that has the location selected and is open on load.
  3. One is for the pop-up that is completely filled, has the price preview, and is open on load.

Implementing the flow of the parking pop-up

Now comes the question, how do I open the modal window on load? Below are some of the things I tried out and how it did not work.
  1. Adding 'open' into the HTML of the modal window
    • Why it didn't work: There was no backdrop. I wanted a backdrop
  2. Adding the class tag 'modal_open' into the modal window HTML
    • Why it didn't work: the modal window could not be closed and was permanently open T^T.
Finally, I realised my problem. I was controlling it with HTML when I could just be using the GSAP timeline function (Java) to play the function modalOpen() on load. I tried this and it worked.

Implementing feedback notifications for the pop-up

As I wanted some visual feedback for the users to tell them that their action was successful, I planned to make small notifications appear after the location and plate number were entered. Making the animation for the notification was simple enough. I just had to manipulate the display and opacity of the element.

The problem I was faced with was that the notification would appear behind the opened modal window backdrop. 

Figure 1.2 Notification being shown behind the modal window backdrop (3/1/25)

Of course, my first reaction was to change the z-index. However, that did not work. So I inspected the code in the browser and realised that when the modal window opens, it is placed in something called 'Top Layer'.

Figure 1.3 Top Layer as seen in the inspect tool (3/1/25)

The top layer is basically the layer that sits at the topmost of all your layers. Any elements wrapped in a <dialog> tag will be opened here. After some research, I realised to make the notification appear on top of the modal window, I could just wrap it in a <dialog>(source) tag so that it opens up above the parking modal window.

After that, I had to open back my Task 3 blog to read about what I did so I can apply it here with the animations. Looking at the code, I wasted so much time for this little bit of code (┬┬﹏┬┬).

Figure 1.4 Final Javascript code used to control the modal windows (3/1/25)

Linking the pages

This process started off with my friends @ me in our WhatsApp group chat on how to link up the pages. At that point, I of course did not know how to do that. So based on what Sit had told me, I bullshitted some nonsense. Then they asked me how to do it. So I did a quick Google search and found this post where they link their folders with the <a href> tag. This method worked. But Joey managed to find out how to do it with the onclick function.

Her method was basically using Javascript, which is better for my work as some of the pages need to be auto-redirected to a different folder. I was thinking of using gsap timeline feature to auto-redirect to the next page. 

Figure 2.1 Original way I was linking the pages (3/1/25)

Figure 2.2 Joey's Way (3/1/25)

So to start it off, I reorganized my file by making the first screen of my flow, the splash screen, and the main folder. After that, I moved the rest of the folders into the main folder. Linking the screens was easy, literally, just add an onclick function to your elements and declare the function in Java.

Figure 2.3 Snippets of the code to link to my other files (4/1/25)

Some last-minute design changes

After the user selects to pay for their parking, a message notification will appear. The initial design of the notification was just a basic rectangle with text. I decided to download a notification template from Figma and replace the basic message notification with it.

Moving on, I had an hour counter in the modal window. The initial design was for the plus and minus buttons to be green and red respectively. Additionally, the plus and minus signs were not centred initially. I was going to leave it be, but Joey pointed it out and said why it's not centred. So I went home and changed it. 

Figure 3.1 New message notification (4/1/25)

Figure 3.2 Update hour counter design (4/1/25)

Final Submission



Video Presentation:

Video Walktru:

Feedback

No feedback was given

Reflection

What I have learnt:
  • There is a lot of code that can be created by the browser itself like the top layer one.
  • Using plugins like Bootstrap, Daisy Ui and GSAP is extremely helpful. However, we should not be using Bootstrap and Daisy Ui in the same file.

Observations:
Coding all the screens in the last task has made this one really simple lmao. I did not actually know that we could link to another folder, so my initial plan for this task was to quite literally copy-paste all my code together. But thank god I clarified with Sir how to link the files.
Findings:
  • Having a clear plan on what I wanted to do really helped me manage this entire module. 
  • Understanding the code is easier than actually typing it out from scratch.

Comments

Post a Comment