• Don't stop until you're proud.
  • Good things take time.
  • Imagine Believe Achieve
  • Never forget why you started.

"Congratulations is DONE πŸš€ "

Information about this project.

This project was built in order to be added to my portfolio website and this is also the reason why it has some similarities with it and the main focus of this project was a create a todo list that is different from the other lists that we see online.

The loading page is exactly the same with the main website and the colors of the header, footer and the hover details on them match the colors of the main page.

Let’s talk details…

The main feature of the header is a list of quotes that is animated that way so the user will see one quote at the time. The purpose of this list is to give motivation to the users to keep working on their tasks (p.s. that one helped me a lot while building this project too)

The header also contains a title that if you hover over it, it changes its color and an information button that opens a pop up window which includes that paragraph that you are reading right now. In order for that popup window to close the user have to click anywhere else on the page.

In the main part of the page above the todo lists, there is a welcome message that welcomes the user according to the day. This message is connected to JavaScript variables that checks in real time what day it is and if it’s the weekend then it welcomes the user with a different message.

The todo lists are build that way so it will seem like they are on a carousel. Depending on which day is it the carousel is landing on that day and when it’s the weekend the carousel lands by default on Monday.

The users can add a task, delete it, check it and also delete all of them. The tasks are saved in a JSON file and the user can also see how many tasks are pending. When all the tasks are checked then a message appears that congratulates the user for finishing each day.

Lastly, the footer contains a small title with hover animations and the link to my portfolio.

Things that will be added to the next version of this project:

  • Saving the checked status of the tasks.
  • More animations.