Remind ToKnight

Inspiration

As college students, it is exceptionally hard to keep track of our daily routines, especially during long periods of time. As a result, Remind ToKnight was born. It helps foster a healthy lifestyle that nurtures self-care while also keeping the user on top of their responsibilities in a punctual and organized manner.

What it does

The purpose of our website is to send reminders to students while they are working on their computer. The extension gives notifications to users based on their title and input time. We maintained the medieval theme across our webpage via an interesting storyline for users to follow. The user is given a personal knight that guides them through their journey by reminding them to drink water, take their vitamins, take a stretch break, take a brain break, or anything else the user might want to remind themselves. These reminders are displayed to the user in the form of notifications that pop-up when the current time matches any of the user’s reminders.

How we built it

Using HTML/CSS and JavaScript, we created a visually pleasing webpage that had underlying complexity in the form of back-end development that made use of various classes and functions. One of such functions is an alert system that reminds the user of the timed task that they had scheduled. Another function we implemented was AddRows(), which dynamically listed the reminders that the user had inputted in the form of a table. An example of a class we used was called “notify,” a text-box that displayed information about the storyline and instructions. These pop-ups can be closed at the user’s discretion.

Challenges we ran into

Our biggest challenge was attempting to sync the user’s notifications with the specified user’s time. Our approach to handling this was to find the difference between the user’s entered time and the current time, down to the last millisecond and anticipating the alert in the specified interval. We also faced small formatting issues with HTML and CSS, because of the meticulous nature of front-end development. However, after experimenting with the webpage and the visual elements included, we became much more comfortable in this expertise.

Accomplishments that we're proud of

As first time hackers, we are proud of the functionality of our application. Our webpage truly looked like the original plan we had envisioned, and perhaps even better. It is satisfying that there is so much potential that the extension has, especially if combined with all the skills we will surely acquire in the future.

What we learned

We learned how to connect the back-end and front-end of development through the usage of HTML/CSS and JavaScript. We also discovered how to export our code into a chrome extension that allows the users to receive notifications, complete with icons and click-on pop-ups that link to our webpage.

What's next for Remind To Knight

Our goals for the future of our application would be to make current or previous reminders editable and deletable by the user. A function that automatically deletes past reminders would also be very helpful in making Remind ToKnight more user friendly. Additionally it would be ideal to allow users to make weekly reminders or monthly reminders instead of solely daily ones. Furthermore, we could immerse the user in a complex storyline that relies on a progress system that might introduce more characters and playable content to encourage the user to maintain their daily routines.

Built With

• css
• html
• javascript
• replit