Motion

Home Page
Planning Page
The Pomodoro Page
Pomodoro Page-Dark Mode Version
Resources Page

Inspiration

We were inspired to create Motion because we want to promote productivity to students. As students, it's hard to be successful without staying productive and organized. We formed this idea to make it easier for students to finish their tasks and have less stress.

What it does

Motion is an interactive website that provides resources to students to help with time management and organization. The planning page includes a to-do list and calendar so students can remember and prioritize their tasks. The Pomodoro page includes a study method with timers so students are able to pace themselves with schoolwork without feeling burnt out. Finally, the resources page provides motivational speeches and book recommendations for students looking to expand their learning.

How we built it

We built our website through Replit. We used Webdev (HTML, CSS, and JavaScript). We had four pages so we split them between ourselves with one person on each page. We used GitHub to keep track of our changes. We also created multiple HTML and CSS files so our code was organized for each page.

Challenges we ran into

We tried using Apache NetBeans to write our program, but we had difficulties committing our changes to the GitHub repository. We ended up utilizing the resource Replit for our website because we were familiar with it and it was easier to collaborate on the same project.

We wanted to create a to-do list and calendar for our website. We used tutorials online to figure out how to make this work.

We wanted to animate a fish on the homepage. We researched animations and discovered keyframes, which moved the picture across the screen in a loop.

We wanted to put a different font on only one part of the website. However, when we put this code in the HTML, it caused the font to apply to all texts of the website. To solve this problem, we used font-family in CSS to make the font only apply to one part of the website.

Accomplishments that we're proud of

We are proud of the cohesiveness of our website and how the colors and text stays within theme. We are glad the website has multiple functions that interact with the user differently, such as the to-do list where the user inputs items and a Pomodoro timer where the user can play music. We are proud that we were able to create a cohesive and functioning website considering we are all new to coding!

What we learned

We learned about linking different files with each other, making the code more organized and easy to change. We were able to link multiple HTML files to the same CSS, which helped with changes we wanted to apply to the entire website. We learned about making animations, saving changes the user has made to the website, and how to add a light/dark mode feature.

What's next for Motion

For Motion's next steps, we want to expand its functions. We may add a notification system that emails people based on what they put onto the calendar. We also want to add to the Pomodoro by including an option where the user can upload their own music to the timer. We would like to add in collaboration features for team functionality where users can share to-do lists and set goals. We want to implement AI into our website for personalized suggestions or tips on productivity. Our main goal is to make our website interactive and helpful to students!