Week 12 - Week 14
Wong Khye Qing / 0361000
Application Design 2/ Bachelor of Design (Hons) in Creative Media
Final Project
Application Design 2/ Bachelor of Design (Hons) in Creative Media
Final Project
Instructions
Previously on Task 3...
I have managed to create about 95% of the UI Design for the interface, being what's left are the images and some of the placements of elements in the layouts. Around 65% of the coding have been transferred into HTML, CSS and JavaScript, majority that's left are the page transitions between pages.
Here is the scoreboard on what I have completed and accomplished in Task 3:
- Enhanced Horizontal Scrolling with JavaScript (Swiper.Js)
- Ticket Counter that calculates the Ticket Amount, Ticket Price and Total Ticket Price
- Improvised on using Radio Buttons for selection of Payment and reviewing the purchased Tickets
- Call to Action buttons that ask users to book or purchase the tickets and many more
- Responsive event description section that able to retract to minimum paragraphs or expand to show entire paragraphs
- Responsive and interactive buttons that will animate when pressed
- Side Panel that is responsive
- Pop up Overlay which will be overlaying on top pages
Where as these are may next step into concluding my Final Project:
- Integration of animation for transition of pages
- More Responsive Login input boxes
- Integration of showing and hiding of password
- Working summarization for the total ticket price in Payment Pages (Currently only in Ticket Details Page)
Issues and Fixes
With all the pages being established from the Task 3, there are unavoidably some changes along the way and some of the features that might not be able to be carried towards the final product. There are some limitations and understandings that I have tried my best to trial and error and understand it, in order to make sure that what I have proposed were able to realized into a working prototype.
Below are some of the issues I have encountered and fixes during the completion of this task:
- Jerking Animation for page transitions
- Birthday input
- Patched Swiper.js
Jerking Animation
I have encountered this issue when I was trying to create transitions between pages. The animation for the next page was supposed to be moving from Right to Left. Unfortunately, there was a jerking animation that makes the next page moves from Left to Right, then Right to Left. I had a hard time in pin pointing out the problem, below is the script for the transition
- <script>gsap.to("#page1", { opacity: 100, duration: 0.5, delay: 0.5, ease: "expo.in"});function nextPage1(){document.getElementById("page1").style.display = "none";document.getElementById("page4").style.display = "block";gsap.from("#page4", { x:"350", duration: 0.5 });}</script>
Fig 1.1 Initial Script for Page Transition, JavaScript
This script features to animate the Launch Page (page1) from opacity 0 to 100. The "function nextPage1()", will be the function which can be pressed to go to the Sign Up Page (page4), it will get the page1 and turn its display to none while making page4 display to block. Then the page4 will be moving from the right, outside of the phone frame into the scene. Which I thought it would be able to work but unfortunately the jerking animation was there to interrupt the flow.
- <script>
function nextPage1() {
document.getElementById("page4").style.display = "block";
gsap.timeline()
.to("#page1", { opacity: 0, duration: 0.6, ease: "expo.inOut" })
.to("#page4", { left: "0%", opacity: 1, duration: 0.5,
ease: "expo.inOut" )
.set("#page1", { display: "none" });
}
</script> Fig 1.2 Fixed Script for Page Transition, JavaScript
Fortunately, I was able to find the solution to fixed the animation issue. The main solution was to use left right instead of x y. The lines is to set the page4 to become display block, then the timeline will be ensuring that the page1 will lower down the opacity to 0. Then the page4 will be moving from outside of the frame 100% to 0% left, into the page and opacity from 0 to 1. After that, it will set the page1 into display none, making it not visible.
Fig 1.3 Fixed Page Transition from Right to Left, Fixed Animation
With that, the animation has been fixed and the transitions works normally now!
Birthday Input
Fig 1.4 Dropdown button and Placeholder in Birthday Input
<style>
input[type="date"] {
background: url(vectors/calender.svg) no-repeat 90%;
background-size: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: transparent;
}
</style>
Fig 1.5 Code to Solve the Dropdown Icon, CSS
Fig 1.5 Final Look of Dropdown in Mobile
The Dropdown icon is solve, but I was unable to solve the Placeholder letter issue, but luckily there was an icon for the users to press on it so that they could choose their birth dates, through a pop up.
Patched Swiper.js
Fig 1.5 Box Shadow Comparison Before and After
<script>
document.addEventListener('DOMContentLoaded', function () {
const swiper = new Swiper('.swiper', {
effect: 'cards',
cardsEffect: {
slideShadows: false,
},
grabCursor: true,
loop: true,
});
</script>
Fig 1.6 Fixed Swiper.js Script, JavaScript
Turns out switching off the slideShadows is able to remove the shadow beneath the cards. Then the grabCursor was also added in order for user to swipe the card left and right.
Summary of Issues and Fixes
Below are the gist of what issues I have faced and fixed:
- Jerking animation solved by using position absolute with left right, instead of using x y
- Solved the Dropdown icon by using "-webkit-appearance: none; -moz-appearance: none; appearance: none;"
- Usage of slideShadows false to remove the shadows beneath the boxes
Final Project
Features Added & Improved
With most of the issues being solved, it was time to move on to the follow ups from previous tasks and achievements done for this task that will be wrapping up the event app. Below are the things that I have achieved for this task.
- Completed page transition animation
- Responsive Login input boxes when being selected
- Show and Hide function in Password input
- Amount of Ticket, Ticket Price and Sum Ticket Price added in Payment Page
Simple Web Server
Fig 1.7 Simple Web Server
Mr Razif have also suggested us to use the Simple Web Server to host our prototype on a server and access it in our phones. It is a great for us to gauge how the app will look like in mobile as there might be a tendency to look different.
Page Transitions
Fig 1.8 Page Transitions Animation
I have finally coded in the page transition animations for the each pages for the event app. Each pages will feature Macro animations that allows page to transition to another. The most common one was the page transition to the next page which moves from Right to Left.
I have removed some of the Macro animations in which the elements will preload when the page transitions was being activated as it might cause visual overload or being too bombastic. I have opted in by integrating the opacity reveal into one of the page transition animations, as to creating a smooth animation with the page moving.
Responsive Input Boxes
Fig 1.9 Input Box that Highlights When Being Selected
<style>
.type-email:focus, .type-password:focus{
outline: none;
border: 2px #c4f275 solid;
}
</style>
Fig 1.10 Code for the Input Box
As mentioned in Task 3, I have finally patched on the input boxes by making slight improvements on it by highlighting the input box with Green color when selected, this was able to be done by using the "Focus" in the CSS code. The box will be highlighted as long as the user is using the input box.
Hide & Reveal Password
Fig 1.11 Password Reveal Icon
<script>
document.getElementById('reveal-password').addEventListener('click', function () {
const passwordInput = document.getElementById('password-space');
const passwordIcon = document.getElementById('show-password-icon');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
passwordIcon.src = 'vectors/show-password.svg';
} else {
passwordInput.type = 'password';
passwordIcon.src = 'vectors/hide-password.svg';
}
});
</script>
Fig 1.11 Script to Reveal Password, JavaScript
The script will get the button to reveal the password and the censored password as well as switching the hide password icon to reveal password icon. It goes the opposite if the reveal password is being pressed then it will censored the password and change the icon back to the hide password icon.
Payment Info Updated
Fig 1.12 Price and Ticket Amount Updates, JavaScript
Previously the Ticket Price and Sum Amount were not updated in the payment page. Fortunately, right now the amount of tickets for different tickets will be updated (x1, x2, x3), then the price of each ticket will also be updated as well as the Sum Total being shown in the Ticket details Page. All the price were transferred and shown in two different pages to make it more immersive and responsive.
Fig 1.13 Script to update the Price and Ticket Amount in Two Pages, JavaScript
// function that takes the amount of ticket and multiply by the ticket price
function updatePaymentPagePrice2() {
let totalPrice2 = data2 * ticketPrice2;
document.getElementById("total-price5").innerText = "$" + totalPrice2.toFixed(2);
}
// update ticket counts in page10
function updateTicketCounts() {
document.getElementById("ticket-num1").innerText = "VIP1 Ticket x" + data;
document.getElementById("ticket-num2").innerText = "CAT1 Ticket x" + data2;
document.getElementById("ticket-num3").innerText = "CAT2 Ticket x" + data3;
// Update the prices on the payment page
updatePaymentPagePrice();
updatePaymentPagePrice2();
updatePaymentPagePrice3();
}
// TOTAL COUNT
// sum up of 3 multiplication from 3 different ticket prices and ticket amount
function calculateTotalSum() {
let totalSum = data * ticketPrice + data2 * ticketPrice2 + data3 * ticketPrice3;
// make sure ticket is shown on the button
document.getElementById("counting4").innerText = "Total $" + totalSum.toFixed(2);
document.getElementById("counting5").innerText = "$" + totalSum.toFixed(2);
Fig 1.14 Mixture of Scripts that Allows Amount to be Shown, JavaScript
The "updatePaymentPagePrice2()", enable the price total price to be shown in the Payment Page. The "updateTicketCounts()", allow the Ticket amount to be shown (x1, x2, x3) for different types of tickets. Then the "counting5", allow the sum from the Ticket Details Page to be shown in the Payment Page as well.
Bug Fixed
Fig 1.15 Misalignment in My Tickets Page
Misalignment could be seen in the recorded presentation video. Luckily, the alignment has been fixed prior recording of presentation video. It has also been updated in the uploaded Netlify site and functioned properly.
Summary of Features Added & Improved
Below are the summary of features added and improved:
- Usage of Simple Web Server to gauge mobile appearance
- Page Transition Animations added as Macro Animation
- Responsive Password Input Box
- Hide & Reveal Password icon feature
- Payment Info Updated for Tickets Details Page and Payment Page
Finalized Mind Map & User Flow
Fig 2.0 Final User Flow Map
Fig 2.1 Final App Flow Map
Fig 2.2 Final Plan Overview
Fig 2.3 Flow Maps and Overview, FigJam
With changes throughout the tasks, it would be inevitable to have changes in between and modifications along the way. Which was why the User Flow, especially the App Flow Map and Plan Overview have some amendments and updates in order to have clear documentation of the event app.
Onto Netlify
Fig 2.4 Uploading to Netlify
I have uploaded my app's file into Netlify upon final checking and test runs to ensure that everything will run smoothly. It was rather easy and convenient to upload it onto the site by just signing up and drag and drop the file, without any hassle.
Submission Final Project
Final Spot Event App Link:
Fig 3.0 Video Presentation, YouTube
Fig 3.1 Zip File for Mobile App
The Final Scoreboard
Finally this is a summarize on my progress for this Final Project
- Page Transition Animations added as Macro Animation
- Responsive Password Input Box
- Hide & Reveal Password icon feature
- Payment Info Updated for Tickets Details Page and Payment Page
The Summarize on the features for the Overall App:
- Macro animations are featured across the transitions between pages
- Integration of GSAP JS animation for the page transitions and integration of Swiper JS for the Cards effect for the Featured Event cards
- Completed the Price and Amount Counter to reflect on the amount of tickets selected and the final ticket price, increasing responsiveness and immersion
- Usage of Input Radio buttons to create Payment Method selections and My Tickets preview
- Completed the arrangement and animation for the tickets preview in My Tickets using CSS
- Completed the color changing for the Tabs Panel and Side Panel
- Researched and completed the Description Expand and Retract, Reveal and Hide Password Icon
Reflection
It has been a journey towards the end of application design 2, it was such a pleasure seeing that I have coded out a complete app. I was quite surprise on myself for some parts of the assignment, as I thought I couldn't able to code certain page. I was quite lucky that I have challenged myself into making a some pages that I was deemed out of my ability, but with a splash of persistence and patience, I was able to nail the pages and make it came true. I have learnt quite a lot of JavaScript along the way and it has opened my horizon besides just HTML and CSS, I will have more things to learn and improve moving on. Finally, special thanks to Mr Razif, that have given me a lot chances in this tasks and giving me guidance in throughout the tasks. Besides, thanks for the classmates that has helped me along the way, with the cheers and encouragements.