Inspiration

When thinking of fun ways to motivate people to do their work and tasks, we wanted to create something unique and that was not just your average agenda or productivity tool. We thought it would be fun to see what tasks your friends could be doing, and the user can try to beat them by finishing their tasks and homework faster than your friends.

What it does

The website allows you to see what your friends are currently working on and how much time it would take for them to complete that task. The user would have that same amount of time to finish their tasks, and if they can click the "stop timer" button before the timer runs out, they can win points. This means they have "beaten" their friends at that task! You can pick to see one friend and what they are currently working on. The user can also see a leaderboard of which of their friends, or themselves are doing the best at accumulating points and getting their tasks done! The way you accumulate points is by multiplying however many minutes you have left by 10. For example, if the user stops a timer with 5 minutes remaining, they would get 50 points.

How we built it

We mapped out the design of the project using Figma. We built the front-end using HTML, CSS, and JavaScript. HTML was used for each of the pages, while there was one style CSS file, and JavaScript was used to provide functionality for the timer function. It also provides a randomized time every time the page is refreshed. Right now, the project uses hard-coded data for 10 "friends" or user profiles.

Challenges we ran into

Some challenges we ran into was with using GitHub and pushing and committing our changes to the main. In addition, implementing the functionality for the timer and figuring out the most efficient way to show the remaining time was something interesting to figure out. In addition, we created a backend API using Django to help more with the functionality of the scores/high scores, create randomized NPC data for the users' friends, the leaderboard ranking, and loading a comparison of the friend's task and the user's task. However, due to time, we decided to only showcase the front-end portion.

Accomplishments that we're proud of

Figuring out and understanding how this project fits in within the software development process! We first thought of something, created a mock design, and then implemented our vision. Also being able to combine all HTML, CSS, and JavaScript elements together cohesively is something great.

What we learned

We learned a lot about front-end development, and how to utilize given frameworks to our best advantage. We learned how to collaborate as a team and divide up the work into achievable, doable tasks.

What's next for Escape from Your Wonderland!

Implementing the backend work in Django and implementing in randomized data. Once we have that secure model, then it would be great to end up using real, actualized data from people and start building our dataset.

Built With

Share this project:

Updates