Cookie-Jar

A productivity app that rewards its users with a cookie as encouragement. If the cookie jar is filled, the user is rewarded with a mouse character.

Comment

Inspiration

We were inspired by the book "If you give a mouse a cookie" for our project. Since being productive can be a difficult task to stay committed to, our app encourages its users with a digital cookie that can be collected to unlock a mouse character.

What it does

Our app has a cookie jar graphic that adds cookies as you work. For every 10 minutes of work, that is equivalent to 1 cookie. If you fill up your jar with 18 cookies, you get a mouse character! Each mouse is different, and has its own personality! There is a countdown timer that lets you know when you have reached your 10 minutes, and a progress bar that allows you to gauge how much time is remaining.

How we built it

This was built in the repl.it IDE using HTML, CSS, and JavaScript. We followed a pastel color scheme and used a few Bootstrap components to help stylize the site.

Challenges we ran into

There were a lot of issues with sorting out the progress bar and the timer, but towards the end we did not have much time to save the data between sites, so every time you visit the site your progress is lost. There were also issues centering our text and overall aesthetics of the site.

Accomplishments that we're proud of

We're most proud of the timer feature, and the animation aspect of cookies entering the jar.

What we learned

We learned more about navigating Javascript and implementing code between pages.

What's next for Cookie-Jar

We will be working on saving user data locally and more mouse characters for our users to unlock. Also detection of when a user leaves the page.

Built With

Share this project:

Updates