This web application isn't anything deeper than writing down things you need to do in general. It's just done in a "cutting pictures out of a magazine" way.
This picture is of the first version of this website. I went through a major asthetic change because this was a last-minute scramble to get something, anything functional working. I revisited this project after knowing more and wanted to create somthing that worked while looking at the original sketches/design for this project.
I had basically trashed the sketches and threwaway a nice visual rendition of the site which is lost forever now. Instead of a notepad to put all the tasks to do on, I put each task in a little box and pushed in the form to make more tasks. Because of I was working from a sveltekit template, my data was nested and couldn't react to new tasks being added. In this new version, I went back to the notepad and evolved that as a content page or outline of all the tasks. I still ditched the tab categories because in the end, this is just things you need to do. If you need that many categories, it's suddenly turning everything into a planner. It's been awhile since the planning, but I also really didn't have much on the forms and how the tasks would be modifiable. The asthetic also changed a lot. Initially, I had been going for a kitchin theme which had become a theme of whimsy in the first version. Then in this version, I went for an office theme with a blue color scheme.
I wish there were other things I could say that I changed from version 1 but unfortunately, version 1 didn't have much.
Screen.Recording.2024-12-14.001454.mp4
All that being said, this version also is missing some functionality as you can see in the video and that was due to time contraints. Features I missed was being able to modify information of current tasks and displaying more statistics of all the tasks the user did. Although, besides time, it was because I was a lot more ambitious. Going with the office theme, I had made the display of a task a post it note and was struck with inspiration to have it be move aroundabile on a corkboard. I'm still not sure how to unjank it and it was working better than the video before but I'm not sure what changes I made to make it worse, but basically in an ideal world, you would be able to select multiple tasks and move them around freely on the corkboard and when you successfully finished one you could drag it to the green button and when you failed or didn't want to do it anymore it would go to the red button.
Generally, there are 3 sections: table of contents, corkboard, and header.
First is what I tried to make look like a yellow notebook paper, the table of contents. You can click on the title and change the title name. In the left column there are two buttons, one to see the history of failed and successful tasks and another button to add tasks. In hindsight, as I write this, there should be a popup that says successfully made a task.
In the history, you can go between past successful and failed tasks with a dropdown selection. In the future, I would want to add more statistical information on top of all that.
This was something very spontaneous, but the primary function is to show a task in full detail since you can only see the name in the table of contents. This was because I didn't want to overload the table of contents with text. With a task selected, more of the information would be on display. The evolution to the corkboard also came from wanting to possibly have multiple tasks displayed at a max of 3 at a time. Even without that achieved, the real life simulation didn't feel too out of place for me since this was just a to-do list. I put a lot of emphasis on simplicity because telling yourself to do so much and giving yourself a huge list of things is overwhelming and hard to process.Tackling everything at once degrades life and the quality of the tasks themselves.
This really glues the whole color scheme together serving as a visual base. From left to right, this component includes the greeting for the whole website, user settings, and a date and time. The user settings doesn't implement anything but theoretically have additional settings on the overall website look.
Add settings - change color of post it notes - change color scheme - clear task history Include more kitchen theme - The office was a little unintentional but I want to mix in a kitchen tile background as a final touch Unjank the post-its and add magnets/pins "Successfully made a task" popup message Make the table of contents/tasks look more like a notepad Make multiple tasks selectable?