We went off the themes, choosing "Happy at Home." We wanted a more visual way of organizing what we needed to do.

What it does

You can generate different types of notes, such as a task note with a due date, a casual note, and a photo note. These notes can be dragged around and pinned down anywhere on the board, just like on a real bulletin board! You also have the option of using a bulletin board or a poster board.

How we built it

We used HTML, CSS, and JavaScript to create this app and hosted it using GitHub Pages. We also used some code from interact.js to make resizing possible.

Challenges we ran into

The sticky notes disappear on a page refresh; however, the app is still usable without needing to refresh the page. Resizing an image is still a little funky, as the image will move a little while resizing if it is not pinned.

We also had an unsuccessful email notification idea (didn't work due to G Suite being a requirement and neither of us being administrators in an organization).

Accomplishments that we're proud of

  • The CSS styling (gradient and shadows, specifically!)
  • The drag and drop function for moving around sticky notes
  • Creating a resizable image note with a maintained aspect ratio actually took so long, but it ended up working in the end!

What we learned

  • Lots of JavaScript
  • The little quirks of HTML forms (such as radio buttons not unsticking?!)
  • Front-end replacements for back-end functionality
  • That hackathons are really fun (even virtually) :D

What's next for Productivity Sticky Space

Some possible changes we'd like to implement involve backend coding, including making the notes stick and sending out scheduled email/text reminders.

Built With

Share this project: