Bucket-List-for-a-Perfect-Day
By
@mian
- 2 Devlogs
- 7 Total hours
A checklist to organise your day to ensure it’s the perfect day!
Ship #1
@mian
on
Bucket-List-for-a-Perfect-Day
About
This is a checklist that users can use to plan their day to ensure it’s the perfect day! It has a pixel theme differing from other normal checklists. Users are able to add, edit, and delete tasks. Completed tasks can be checked with the pixel star next to each activity.
Challenge
What I found a bit challenging was that I needed three files in different languages to make this work. This was my first time not making a static site, so although it’s normal to have an HTML, CSS, and JavaScript file when creating a website, I found it quite an unusual experience. I found that the majority of my bugs and issues came from forgetting to reference classes and IDs in my JavaScript code. Overall, this project was really fun to do, as I could see my work come to life as it became actually functional.
What am I proud of?
I am really, really proud that I was able to make a functional site with input. I am especially happy that there is local storage. It makes the website feel like a proper one.
What should you guys know?
This was the first time I’ve coded using JavaScript, so the coding is a bit messy and confusing. If there are any bugs or recommendations, please let me know! I will be very happy to improve this site. In the future, I plan to enable users to create multiple sticky notes around the page so all the tasks aren’t clumped in one area. I also hope to let people delete one task without having to delete them all at once.
@mian
on
Bucket-List-for-a-Perfect-Day
4h 48m 3s logged
I coded the javascript which made my website functional. There are floating bubbles in the background, which make the screen feel less still. You can add, delete, and edit tasks. I also wanted the website to look prettier, so I made it a pixel theme, all drawn by me!
While coding this, I realised a lot of the functions were only known to be so I had to put some changing-colour hover animation over it to make it noticeable. The bubble animation was probably the hardest part here, as that was a whole step away from the guide I used. It involved a bit of math lol, and I realised I accidentally wrote .png instead of .PNG, which completely stopped the bubbles from appearing.
However, as you can see in the image below, I wanted to make the to-do list my own, so I incorporated pixel elements. I chose to do a star as the checkbox instead to make it feel more like an achievement. Not to mention that the white box was really annoying to make, as I had to make it look pixelated, which was very hard. It took a long time of trial and error to get those pixel corners, but I managed in the end! :D
@mian
on
Bucket-List-for-a-Perfect-Day
2h 39m 21s logged
So I started my project and decided to do the HTML and CSS first (well, of course). I finished the basics of my HTML and CSS, so it looks like an average checklist. I would have included it in the picture below, but only one was allowed. Below, you can see my HTML code. What I learnt in this session was all the HTML shortcuts. I had no idea; honestly, I could just write div and enter and it would make all the <> for me. It saved so much time when I was coding.
Currently, the website is a static website, but soon I’ll code the JavaScript, making it interactive! I am really excited to see my to-do list come to life. I hope to make some sort of animation in the background as the checklist is looking pretty plain
