SmartList

Experience Bar
Completed History
Level up!
Tasks on to-do list

Inspiration

As high school students during the quarantine, we wanted to make something simple but useful for education. Our goal was to brainstorm something that could be used by students to supplement, help, or improve learning in any way. The inspiration finally came after we came up with the idea to make a special to-do list.

What it does

Our project is a small website -- that organizes all your responsibilities in a fun way! The special part of this to-do list comes from the unique leveling system, inspired by RPG games, that allows you to gain experience and level up by creating tasks. You can create new tasks with ease -- state the task name, description, difficulty, and importance. The program calculates the experience given by the task, and when you press complete, you gain that experience! The website also has a history feature that allows you to see completed tasks. You can always remove any tasks from both the completed or to-do list with just the click of a button!

THE BEST PART about our website is that it saves your data even when you leave the page! You can always come back to it later, and all your tasks, levels, and experience will be saved.

How we built it

We built it using HTML, CSS, and JavaScript.

We first made the input elements and functionality,
Made the list functional with the ability to add items
Added functional buttons to the lists
Stored completed tasks
Created functions to save data to localstorage for user data to be saved in the browser
Finally, we made the experience and leveling system

Challenges we ran into

One of the hardest parts was having all the moving parts working together -- saving the data in the local storage, loading that data when the page is loaded, and updating the page when tasks are created. Creating the formatting also was difficult at times, because of the different buttons and sections we had to manage.

Accomplishments that we're proud of

We're most proud of the leveling system, which adds a unique element to a to-do list -- having the experience scale based on tasks and letting the user see progress as they complete more tasks is one of the highlights of this project.

What we learned

We definitely learned a lot about modal systems and how to store items in local storage. We also learned a lot about CSS and how the elements work together, whether it be making styles or changing the positioning of an element.

What's next for SmartList

If we have more time, SmartList aims to have achievements, more customizability to tasks, and potentially a leaderboard system to compete with friends!