I often have difficulty starting even simple tasks, since there tends to be a lot hidden behind the scenes. For instance, making a PB&J sandwich seems easy, right? But to do that, I have to go upstairs, check if there's peanut butter (but wait before I go up I have to put socks on because it's cold), take the jam out of the fridge (now where did I put it?), find a clean knife... This list of things seems (to my brain) to take way too much energy for the end goal of a sandwich, so I end up simply grabbing a granola bar from my desk to save time. One way of coping with this issue, which extends to many parts of my life (and to people who have ADHD or other disorders that impair decision-making), is to break down a larger task and set smaller goals rather than focusing on the end goal.

I've also been wanting to learn software development elements for quite some time, since I've never formally learned them. My experience in CS has been mostly research-based with emphasis in robotics, so I haven't ever worked with HTML, CSS, or JavaScript extensively. Thus, this task seemed like a good place to start for a solo hack, even if I might not have the opportunity to integrate all the features I would like.

What it does

A user can create a new Tree, which represents a task. They can then add branches to the tree, which represent subtasks. I meant to implement further items, such as noting that subtask is incomplete when indicated with a leaf, and a flower marks completion; other things to add could be deadlines, reminders, and multiple tasks. Instead, I added a function that spawns flowers randomly, since I knew I wouldn''t finish in time. This setup is meant to be a more fun implementation of a to-do list, as well as a way of visually managing subtasks.

How we built it

I used replit to host my files, learned HTML, CSS, and JavaScript, and used GIMP to edit my images. For the interactive element of the webpage, I figured JavaScript had a ton of resources for beginners, so I opted for this rather than something fancier (I like to hit the ground running).

Challenges we ran into

I started off not knowing much at all about web development, and I didn't really know where to start. Fortunately, I attended both development workshops, where I learned about replit as well as some basics that could help me.

Another big challenge I had was working around my busy schedule, since I am home for the holiday weekend. A large portion of the time, I was somewhere without my laptop or wifi, so I had to attend workshops or do research on my phone instead, which was fairly difficult--I only got about 8 of 24 hours on my laptop, which is kind of a bummer. However, it was definitely worth it!

Finally, since I didn't have the tool I am making, it was difficult for me to get organized and split things into subtasks (very ironic). I did get to iterate designs when using actual to-dos, though, so that was something.

Accomplishments that we're proud of

I got something on the internet to look pretty and function at least a little bit! For someone with little to no experience with the tools and languages I used, I think I did all right for just a few hours of learning and work (especially after attending the workshops and learning on the fly; working around no wifi or laptop is hard for a hackathon!). Even though the project is kind of niche, I can definitely apply the skills I learned elsewhere, which is something I am quite pleased with.

What we learned

I learned how to use HTML/CSS/JavaScript in tandem to create a decent-looking webpage. However, I learned lots of cool things from the workshops as well, which I hope to apply later on (maybe at future hackathons...?). The most relevant thing to my goals was learning about full-stack development in general, since I may be working on a project utilizing both front- and back-end this coming year. I think it is useful to have skills in both areas, especially for someone like me, who may be following a career path in research that doesn't always involve web development.

Built With

Share this project: