Sakura Productivity Dashboard

Final Devlog!! I am finally done with this one! I have polished UI as much as I could. The CSS is a nightmare. I tried to change the entire UI but it broke the entire thing and I kept adding new attributes at the bottom instead to redoing the already existing ones so it became so messed up that I could not tell what was working and what was not. So I just kept adding until everything just worked out and it somehow works and I am not going to touch it. I also tried to make audio play instantly as site opens but failed. The grid in which the main three apps are placed is a nightmare I have made it symmetrical after at least 20 tries. The weather and pomodoro kept fighting each other. I also added the scroll feature to the to do list so whenever too many tasks are added it will just become scrollable. And I removed the scroll bar because it looks bad. With this it is officially over. This project was way out of my league as a beginner. Thanks for reading!!!!!

I am tired of CSS now. After the last devlog I first redesigned the layout of the music player. Then I decided that my weather app missed an important functionality which was location detection. So I had to learn how to do that and then I also made it so that when the user opens the website it will automatically ask for location. If the user denies it will default to Tokyo. Then I added song progress control and refined the UI of the music player. Then I remade it 5 more times until what we have here. Still not satisfied. I did the. background again to make it look like the sky a little bit. Plain pink looked bad. I am going to make it again. Then started my nightmare. I tried to make my three apps into a dashboard so I created a new div and made it into a grid and then tried to fit all three inside the grid and make it look like it does now. Firstly I had to learn all about how this works and then I had to try it for the first time. The pomodoro and weather kept breaking. All their contents kept spilling out. No matter what I did it was not working. I could not understand what the error was so I wrote new rules at the bottom of the css and due to all that My css is now a 1000 lines long. I am afraid to clean it up because I don’t want it to break. There were so many problems with creating the dashboard. The background was moving when scrolling. The credits are now inside the music player for some reason. When adding the location detector I broke the code and spent 2 hours figuring out what the problem was only for it to be wrong linking of html id of a div. My CSS currently must have at least 4 duplicates of the the Pomo and weather and the dashboard. There is still refinement to do. But it’s almost over. I think this was too much as a second project. Thanks for reading.

Added background music. Selected a few royalty free quality lofi songs from the yt channel Tama’s little music shop. I will credit them in the readme. Adding the music and its basic ui was fairly simple. I just created a div, added two options and linked the music. Added a button to play and an input to set volume. Then added all their functionality in the javascript took very simple functions and It is all working properly. I am going to add a couple more sings maybe but for now All the features I wanted to add are there and I just have to polish the UI properly so it looks like a proper focus dashboard instead of a 4-in-1 project. Thanks for reading!!

I have finally added petals to the project and boy was it tough. Maybe the most difficult thing I have done in this project. They are still not perfect after hours of making nd remaking. Trying to make different petals, animating their flow in the wind. Making them look like they are falling from the tree. At first I made them look horrendous so I had to design them a bit. They still look not good enough so maybe I will change the look. But the most difficult part was the animation. I must have written the keyframes more than a hundred times because it looks so unnatural every time. I just could not figure out how to make it look natural. But I have now reached a point where I believe it looks decent enough for me to move forward towards the completion of the project and after I have finally added everything I want in there I will polish it and possibly assign an sig to each petal. I am not sure tho. Thank you for reading!!

Added the sakura tree properly. I tried to make an svg myself but I heavily underestimated the skill requirement to do it. So I gave up and added a free premade sakura tree svg which has been attributed in the bottom of the page as asked by the source website. I have given is -1 z index so it appears properly and gave my cards an alpha value so that I can have transparency as it look pretty. And I have to say sag is some serious stuff. All these vectors were destroying me and I couldn’t do any better than before so I decided I should use this. I hope it is allowed. Going to add the falling petals next. Thanks for reading!! Credit: https://www.vecteezy.com/free-vector/sakura-tree

This is kind of an embarrassing devlog. I have been trying to polish the theme so I decided to add a sakura tree and also reverse the pallets in the background and the cards. Well as you can see the tree looks nothing like it should because what I tried to do was create a few new divs in html for the tree like the trunk, branches and the blossoms. I created individual classes and spans for each and tried to design them in css and I failed miserably as we can see there. I have now found out that in these situations we are supposed to use an svg file to make the tree which is what I am gonna do next. I really regret the past three hours I spent rotating branches to make it look like I wanted to. My vision is to make a tree and then change the background into a sky and have all three of my applications under the tree with petals falling and loft music playing. I hope I can reach there. I genuinely spent so much time in the html and css to make this tree which looks like a brown explosion. Thanks for reading.

No visible changes this time but I added Data persistence finally. I was holding up on it because it was looking too complicated but it was no too bad, took me a couple of hours. Did break my code once when I tried to change my previous functions but then found out that I can just add new ones to do the work instead of modifying the old ones. THAT is something important I learnt. I am going to do devlogs more often as in this project I have posted too less. I tried to add recommendations for search in the weather search but it’s too complicated. Thanks for reading!!

Added the weather app. I am getting way faster than before. This would have taken me so much time before but this worked out fairly simply. I am more efficient in function building now. I sped through it this time while I struggled with it before. CSS was also way easier as I just copied the theme of my previous two features. Most of the time of spent learning and experimenting with all the new things like Async, Await, JSON data, APIs etc. Of course it was not as smooth sailing as I am saying I of course ran into a lot of problems as a beginner with a weak base and weak concepts but it was way better than before. I am not going to add more features after this. I am going to make it aesthetically pleasing and ship it as I want to try a new project. I still have to add a few more features like a default weather display, search recommendations, revamp of the entire aesthetic, background music and I want to add sakura petals floating on the screen falling from a tree. I have no idea how to do it right now but I will when I finish. Thanks for reading everyone!!

Finally added the pomodoro. It was more complicated than I thought it would be. I had to learn a lot of how JavaScript processes math. I had to find help to do it because I was unable to make the timer run properly. Sleep deprivation didn’t help as well. I want to make it sakura theme but that is kinds hard cause I don’t know my colour theory. It’s still very hard to add features to this. I cannot think about how I would format this because they are kinda awkward like this. It was fun understanding how to convert seconds into unites and seconds in Javascript and make it display on screen like that. also had to learn about how the interval works I still don’t understand is very properly but I know I how to make it work in this situation. Next up a little bug fixes with the pomodoro and then another feature will be added to this. Thanks for reading!!:>

Hello everyone! I am done with the to-do list now. It now functions properly. You can add tasks, delete tasks. complete tasks. The javascript for it was very easy to do once I looked back at my previous project but the CSS destroyed me. I have spent so many hours on it. It is so difficult to design it because I don’t have a tutorial to copy the design from. Also damn is everything so difficult. I spend two hours trying everything to figure out how to add different properties to different things which were essentially in the same list because I had appended them from Javascript. After figuring that out. I got into trouble with the delete button. I was using the general button class in CSS not realising that the add task button falls under the same category and was wondering why whenever I add a margin to the delete button the add task button started moving. I eventually figured out I had to add a different class to the delete button which I now realise is so obvious. I added hover animations to everything, click animation to everything. And now everything works perfectly. I do think I should add a better animation to when we complete a task so I will work on it. Oh I forgot one thing. It is so freaking Hard to make a theme from scratch. like I was so lost trying to making everything look good. every text every hover. every button every background it look so long to perfect. thankfully I can select the rep visually instead of having to type it down everytime. Next I am going to work on adding the pomodoro. Let’s see what new things I learn! Thank you for reading!

Starting development on a to-do app. I believe it’s a good project for a beginner like me. For now I have added just added container, input box, add task button and the task list in the HTML. I have also done the basic CSS styling so it currently looks like the image below. After that I have added the basic function of a todo list in javascript. The button adds the text from the input text box to the test list which exists below. That is all I have done for now. I am not using any tutorials this time I am using the knowledge from the previous project I built. I plan on adding a lot of features to this project. I plan to add pomodoro. Background music. Weather. And a calendar. Let’s see how many I actually am able to add by the end.