November 30, 2024

Application Design II: Task 3/Interactive Component Design & Development

12/11/2024 - 14/12/2024 / Week 8 - Week 12
Janice Marie Eng Chia Hui /0361521
Application Design II/Bachelor of Design in Creative Media / Taylor's University
Application Design II: Task 3/Interactive Component Design & Development

Instructions

Task

To-do List:

Determine 5 to 6 components that you wish to create for this task
You can make the components separately from each other
Make sure you can make one complete task flow for the final project.

During week 9, I determined what I would be coding (some of these will be done in the Final Project). These were all from my Parking Payment Flow, which I would be doing for the final project. These will be the things that I plan on coding:

Intro to App

Splash Screen animation
Log in/Sign Up page
Log in page

Homepage

Side menu animation
Parking pop-up (2btns)
Hour counter
Elements move in from the bottom (macro)

Location Screen

Dropdown menus
Heart Icons
A pop-up appears asking if the user wants to use the GPS
City Council screen
Elements move in from the bottom (macro)

Vehicle Plate number

Cards to add in vehicles
Pop-ups that appear when you press on the empty cards
Radio buttons to select your plate number
Elements move in from the bottom (macro)

Parking Information

Loading Animation
Parking Session info
Elements move in from the bottom (macro)

For this task, I made use of Daisy UI, GSAP, Bootstrap and Blackbox Ai to come up with my components. I tried to only use the Ai as a last resort if I really could not do what I wanted even after following videos. Code made with AI will be pointed out (Ai only used for Javascript code as im still not familier with it).

Additionally, I first did all the components in separate files. However, this turned out to be a very inconvenient idea. As I am typically very messy with my code, and tend to use the same keywords for my id and class tags, when I was combining the files together, some of the class and id tags were the same and I had to comb tru the code again to change the tags or redo the entire component;-;.

Parking Pop up in the home page

I started doing the parking pop-up first. Initially, I coded and styled the pop-up with no animation or script. Just bare. After It looked like how I wanted it to look, I opened up Daisy UI and took(stole lol jk) the code from there. The component I used was the 'modal window' component.

After both my code and the modal window code were placed into the file, I used the inspect function in the Chrome window to identify what tag was tied to each section of the modal window code from Daisy Ui. After that, I inserted my code into those sections and edited the modal window to fit my liking.

Initially, my original design of the pop-up had the title icon sticking half out of the modal window. However, in the end, I do not have sufficient skill to make the icon stick out of the modal (using the transform style in CSS causes the icon to be cut off when it exits the modal window), so the icon is in the modal window.

Figure 1.1 How the modal from Daisy UI looked like initially (left) VS how it looked after I inserted my stuff in (2/12/24)

Figure 1.2 The icon getting cut off when you make it exit the window (2/12/24)

Figure 1.3 Code snippet of parking pop up, highlighted area is my code section added into Daisy UI code (2/12/24)

Initially, I wanted to leave the component without any background. Meaning, I just wanted it to be a button and the modal window for this task. However, looking at my friends' and classmates' work, it seems that they were all making the components with the background. So, I went back and coded the entire homepage with the modal window button in and everything. ಥ_ಥ

For the homepage, I just coded them with basic HTML and CSS code. However, I was having some trouble with the nav bar, so I took the code for the bottom nav bar from Daisy UI again (link). The nav bar also had a floating QR code button (not working cause I'm not coding that). For this, I just made the position of the QR element 'relative'.

Figure 1.4 Nav bar made with Daisy UI + the floating QR button (2/12/24)

The last thing I did for the parking pop-up window, was to make a working hour counter. For this (sub)component, I followed this VIDEO to help make it. Later, I just customized it with CSS to get what I wanted.

Following that, the initial counter did not have an animation, but I wanted it to have an animation (counter animation inspired by my friend, Hui Yi's, counter animation. I, however, had no clue how to do it. So after Google-ing how to do it and coming up with nothing, I went to AI for help, lmao. AI spat out some code based on my instructions and I put it in, and it worked lmao.

Figure 1.5 Javascript code made with Blackbox AI (using GSAP) (2/12/24)

Figure 1.5 Final results of modal window (2/12/24)

The side menu moving in on the Home page

For the side menu, I coded it with the help of Bootstrap at first (link). It was working fine and I was happy with it. So then, I tried combining the side menu code with the parking pop-up code (as I coded them in 2 diff files, and the side menu should be on the home page).

However, this is where I ran into an issue. As the parking pop-up code used code from Daisy UI and the code from the side menu file used Bootstrap code, combining both codes caused the Daisy Ui button to stop working. (┬┬﹏┬┬)

I concluded that it was because I imported the script file from Daisy and Bootstrap into the same file, which caused some of the class/id tags to clash (yet again).

Due to this, I decided to make my life easier (or harder) deleted the old side menu code and restarted again. For this new side menu, I decided to use GSAP with the help of this VIDEO.

It was smooth sailing from there, or so I thought. I don't know why this always happens, but whenever I type out Javascript myself from scratch, they don't work. It could be half because of my fat fingers and half because I don't understand Javascript. But in the end, the code I used from the video did not work.

So I went into Blackbox AI and cried to them for help. And they spat out some code yet again. And it worked, bless.

After that, I just combined both the side menu code with the parking pop-up code and styled it to look nicer.

Figure 2.1 Javascript code spat out by Blackbox AI (with GSAP) (2/12/24)

Figure 2.2 Final Results of Side Menu Animation (2/12/24)

Parking Information that shows up after paying for parking

Now for this section, I coded it separately at first as well. This section is the screen/animation that plays after the users pay for their parking. There will be some animation in this section and that animation is as follows:

User click on the 'Pay for Parking' btn in the modal window
The modal window closes
A loading cursor shows up first after the user pays for parking
The loading cursor disappears and the parking session information moves in from the bottom.
After the information moves in a notification will appear from the top to inform the user that their parking has been paid for.

I coded all the required elements in HTML and CSS at first. After that, I went straight to Blackbox AI and asked it to help me code the animation for the loading cursor and parking information first. The code worked but needed some changes. This included changing the display of the loading cursor to none so that the information container could be centred.

Figure 3.1 Layout when the display of the loading cursor wasn't 'none' (top) vs layout when the display of the loading cursor was 'none' (bottom)(3/12/24)

After this animation was completed, I wanted to make it so that it would play onClick of the 'Pay for Parking' button. To do this, I Googled how to show/hide elements with java and managed to follow this VIDEO. I did edit the code provided in the video a bit, as the initial sequence was to only hide or show one element, while I wanted to hide one element while showing another one at the same time. So to do this, I just declared one new variable and added an extra line of code to the if/else statement.

Figure 3.2 Code taken from following the tutorial video, codes in brackets were what I added in to obtain my desired effect (3/12/24)

Once I had what I wanted with the animation, I decided to combine the code with the homepage code. There were no issues here (even though I did delete the code to redo it again -_-). The next thing to be done was to make it so that the modal window closed when the user clicked on 'Pay for Parking' so that they could see the parking session information.

I googled a bit and found that we could use the code document.getElementById('my-modal-4').checked = true; (source) to make the modal window close. However, after trying this out, it dint work. I then went to Blackbox Ai to find out how I could do it. They recommended the same code. It was then that I realised that this code was for the modal window with an <input> tag. But the modal window was using one with a < dialogue> tag. So I asked AI again and managed to get the code modal.close();.

Figure 3.3 Input tag used in the solution found online (top) VS dialogue tag used by Daisy UI (3/12/24)

After all that was done, I remembered getting some feedback from Sir, where he mentioned that it would be helpful to get a notification from the phone, informing the user that their parking has been paid. So I coded a simple pop-up notification and added that animation to my existing Gsap timeline for this function.

Figure 3.4 Javascript code for the entire animation, all wrapped in the function hideShow which is tied to the 'Pay for Parking' btn in the modal window (3/12/24)

Figure 3.5 Final Result for the sequence that happens after paying for parking (3/12/24)

Location

The location screen appears after the user clicks on the location text input in the parking pop-up screen. The location screen should go something like this:

The background of the location screen loads first.
The elements move in from the bottom.
A pop-up appears after elements load, asking if users wish to use the GPS or not.
Using GPS will lead back to the homepage, not using the GPS will lead back to the location screen.
Picking one of the city councils will lead to the locations screen of that area.
Pick your location and be led back to the homepage.

There were some dropdown menus on the location screen. As usual, I took this component from Daisy UI (source), though they called it an accordion. The layout and contents of the dropdown were coded first before being placed into the component I got from Daisy UI.

Additionally, I needed a 'heart' or 'favourite' button so that users could personalise their locations. I was google-ing how to do this initially but I need help finding a solution. However, upon further digging, I realised I could use the swap component in Daisy Ui to make this feature.

Following that, I needed to make a pop-up that would ask users if they wanted to use GPS or not. This would appear automatically after the location page loads. To do this I used the gsap.timeline() feature. I would have to redeclare the function when I am combining the files later on (kill me), but for now, I used the window.onload = function() to make the animation.

After the Javascript was typed out, it dint work. I was stumped, so I went to ask Ai to generate a code for me, but it didn't work either. After a while, I realised I had forgotten to link the Js file..... After linking the file..... the code worked.... Anyway, I also added an onclick function to the button so that the pop-up could be closed when the user clicked on 'no'. After that, I just set the pop-up display to 'none' onclick of the button.

Figure 4.1 Javascript for location screen as of now, will probably need to change the window.onload to the onclick function when I combine the file(4/12/24)

Figure 4.2 Final result of the location page as of now (4/12/24)

Vehicle Plate Number

This screen was the easiest to make because it did not require Javascript (largely because I am still not used to it). Below is the list of components I took from Daisy UI to make this screen:

Honestly, the major thing I struggled with in this part was the stupid car icon. I had initially used a real car image for it but was advised to change it to an icon to keep it generic. Understandable. I found an icon and used it, however, it did not fit the theme of the app, so I thought what the hell, and customized another icon to look like my other icons.

After leaving the file to marinate for weeks, I went back to it and decided to add in all the on clicks functions. I thought it would be hard, but to my surprise, I managed to code the onclick functions with the help of 3 google searches only (lol). The main thing I did not know was what code I should be calling (is that how to describe it??) for each of the tags used in the HTML (ex, <details>, < dialogue>). I manage to figure it out by just searching 'how to close/open a <tag name> in Javascript'.

Figure 5.1 (from left) 1st car design, 2nd car icon (source), final customized car icon(source) (4/12/24)

Figure 5.2 Javascript code for the vehicle plate number screen (11/12/24)

Figure 5.2 Results with no onclick events (left) vs Final results of the 'add vehicle plate number' page with onclick events (right)(11/12/24)

Splash Screen & Login pages

So for the splash screen, I jumped straight into using Ai lmao. This was one of the first few components I tried to code using Javascript so I had a lot of help from Ai. The animation timeline for the splash screen is as follows:

The 'Smart Selangor' logo loads in first
The text smart selangor moves out from the bottom
The S logo moves into the center
the S logo fades into the Smart Selangor Parking(SSP) app logo
The SSP logo shrinks and fades out

As mentioned for this part I used Ai, so there's not much explanation of the process.

Figure 6.1 Code (Javascript) for the splash screen taken from Ai, I tried to connect it to the Login pages but it needed some adjusting, which I have yet to get to (4/12/24)

For the login pages, I made use of the onclick function for the buttons to make the screen change. For this section, I wrote the Javascript by myself (hehe). There is a lack of animations because of that, but I'm just proud that it works. Additionally, I also used the text input and buttons component from Daisy Ui.

Figure 6.2 Javascript code for the login pages (4/12/24)

Figure 6.3 Final result of (from left) Splash Screen and Login Pages (4/12/24)

Things to be done for the Final Project:

Link all different screens together (parking pop-up, side menu and parking information are done)
Make the city council screen for the location screen
Make an empty parking pop-up so that it can be clicked on

Final Submission

Google Drive Link:

https://drive.google.com/drive/folders/1i8NCZMCb8aczJPCaBK0pSMjG4jNidwTJ?usp=sharing

Walkthru Presentation:

Walkthrough (No talking just pure walktru):

Feedback

Week 9

You can go ahead with your suggested components. You can focus more on the parking flow.
For the confirmation of parking payment, you can make a small message notification move in from the top to confirm that the payment is successful.
For the vehicle plate number, double-check if motorbikes need to pay for parking or not. If they don't, you can take it out.
You can try out Booleen for the hour counter and jump menus for the dropdown menu
Your dropdown menu and heart icon can be considered 2 components but for now, consider it one.

Week 10

Try doing at least 6 components
Your car icon looks a bit off. Maybe try customizing or making your own icon.

Week 13

For your password text field, since you used the Daisy Ui component, you can change the input tag to password to make the text be censored when you type
For the location screen, its best if you made the city council screen
For the pop up you don't have to make an empty text field (but i want to lmao)

Reflection

What I have learned:

Remember to link your Javascript and CSS files
Don't do your components separately (T^T), the class/id tags get mixed up.
You can't import both Daisy Ui and Bootstrap script files
Daisy Ui and GSAP is so helpful, that and Ai but I'm trying to rely less on them.

Findings:

Still not too sure what the difference between var, const and let is, but from what I can tell, const is usually written inside a function and its value should never be changed while var is written outside the function and connects the work with some information
gsap.timeline() feature saves lives, it helps you organize your animations so you can create an after-delay effect
onclick allows us to make animations at *surprise surprise* on click of an element.

Observations:

Javascript is hard
I write very messy code, and I need to clean up my code more. it is too messy and long

Me trying to understand how to use Javascript

Search This Blog

Janice Marie Eng Chia Hui (0361521)