21.06.2023 - 16.07.2023 (Week 12 - Week 15) Abigail Kartika
Darmowinoto / 0350525 / Bachelor of Design in Creative Media Application
Design II / Taylor's University Task 3 : Final Project and
Portfolio
I started off with doing the screen HTML and CSS. I did this project in 4 days opening my laptop.
First attempt, I started on with doing these onboarding screens. Since at first I didn't know how to attempt to make an overlay effect, I decided to just dump every content I have until the end of the onboarding screen.
Since I realized that I'm using white background and it's difficult to see until when is the content, I decided to change the background to purple / cornflower blue during doing my project:
I figured out on how to make the overlay part, just use empty div and set the width height and color transparency. This make me feel motivated to go more to the next screen.
Thus, I decided on doing the home screen, and again I'm stuck :D
This is the part where I struggled most since I'm confused on how to do the layering part of expense and income bar, so I decided to do the GSAP for onboarding screens first.
One example of my GSAP:
After a while, a light has come to my thought. I have an idea on how to do the home part. I decided to play with the margin, position, and display, and after some hours of thinking, I finally did my homepage. (yay D:) So here's how it looked like:
Thus, I continued on doing the home part screen, excluding the income expand and income add. I actually can just put the function there, but I don't want it to be longer and if there'll be a problem it'll go confusing since I have to prioritize other screen first.
Next I did the add expense part. To be honest it took some time because I have to set the calculator manually.
Moving forward, I did the tapping indicator. I did it per number tapped, and for the button effect I just used GSAP.
Then the loaded indicator:
Moving forward I created the hamburger menu:
Challenge Part:
Character Part:
I decided to remove the leveling up feature since I don't have much time left, so I just add from the character screen a notification bar to claim the scarf and move to the UI where the Monny is wearing the scarf.
After finishing, I decided to do a final lookup of the things that I've been made and fixed things that I think is not suitable, changing animation duration, delay and flow. There are some things that I haven't covered up like the leveling up feature, as well as minor problems / bugs that I still can't solve, but for now I'm good with the things that I did.
So here's my submission: - (this is me at 14 July, I thought I'm done T.T)
Wait never mind. Sir said to add one more thing before we submit, it's about the device preview also the icons. So I was able to get back to work on my app a minutes before the final submission since I have a few things to do also I had a flight.
So upon following the tutorial my first problem was the PWA doesn't want to appear
Well stupid of me I didn't watch the tutorial until the end because I thought I need the PWA to proceed. Moving forward following the tutorial, I went to upload all my description and icons:
After following the tutorial and place the required link needed, I finally deployed it on Netlify again, and finally all the problems are solved and I got the PWA badge yay!
To be really honest, I'm proud of myself on finishing all the coding and I somehow feel like I'm actually capable and can do it. (aside from the bug and minor issues I hadđŸ™ˆ). In this project, I learned more and I think I understand more about how CSS and HTML works (not GSAP XD). I don't really understand on how it works actually, but as I worked on with my project, I started to realize the concept of the things.
What's a Jump Link? Jump Link or sometimes known as Anchor Link is a link that can direct user to a specific section of the post. Steps: Prepare your blog Add the HTML code Copy Permalink / Link Add the permalink + # Breakdown: 1. THE BLOG To create a jump link, first, create the documents, so it'll be easier to plan the jump link 2. HTML Add html code: <span id="LIST"></span> on a specific part where you want to jump to 3. PERMALINK Open permalink and copy the link 4. JUMP LINK Choose the text to place the link, then paste it like this: Link#NAME https://abigailkartikadarmowinoto.blogspot.com/2021/12/how-to-create-jump-link.html#NAME
Comments
Post a Comment