Pet Portal

Animated Landing Page
Pet Selection
Task List

Inspiration

With the increasing academic workloads, it is common for people to procrastinate and avoid doing their tasks. Therefore, we wanted to create an engaging program that not only encourages but also holds the user accountable with a fun twist. :)

What it does

The program is a task manager where the user is able to set the task and duration with a twist. They are prompted to select from a variety of pets. Each pets are given unique names and attributes which affects not only the task duration but also the pet's health bars. Through the program, the users are encouraged to care for their pets by completing various tasks. Failing to do so lowers the health bars of the selected pets.

How we built it

We built the program using HTML, CSS, and JavaScript through Virtual Studio Code. All visual elements (background, icons) have been hand created by a team member using IbisPaint X.

Challenges we ran into

Implementing a timer for each individual tasks added was definitely a huge challenge as we had to track each tasks with separate counter, and JavaScript's syntax was somewhat unfamiliar since we hadn't used it for a while. Also, modifying the code to match the different traits for each pet was a struggle as we had to experiment with different javaScript variables and create new functions. Lastly, animating in the webpages was completely new to us and required learning in YouTube and online resources. We went back and forth throughout the code, changing each nitty gritty details that made the overall design successful.

Accomplishments that we're proud of

Learning how to create quite a responsive frontend and backend for the first time. Making a web applications which looks visually aesthetic. Creating a functional task manager with a visual mini-game.

What we learned

As a first time Hackers, we learned the intricacies of JavaScript in backend development, collaborated on designs and assigning individual roles in a team, and animated backgrounds and icons using CSS.

What's next for Pet Portal

There were a lot of ideas which we were not able to implement within the time constraints such as a verification system which would prevent dishonesty, adding a leveling systems for the pets, and storing user information using a database.