-
Image of the Weekly App
Inspiration
As a student, I wanted a way to keep track of all the tasks I had for each day in the span of a week and the ability to mark the tasks complete.
What it does
Using the input box, type in the name of your task. Then click the "weekday button" to add your task into that box (i.e. 'Monday'). The next time you reload the page, you will find it saved. To mark a task complete, click the white "toggle button" in front of the task item. When marked completed, the toggle button will turn light-blue. To remove all tasks, click the red "remove all" button. To clear out all the tasks in a day, click the "weekday" button of the weekday box while your input textbox is empty.
How I built it
I built it as I learned the fundamentals of building a website using HTML, CSS, and JavaScript. Initially I built this web application in just HTML and CSS. I would manually write code to add the homework assignments and other tasks that I had. Afterwards I would save the file to update the website. After I completed the task, I would go back to the code and add "✓" - which is the html entity for a checkmark. However, I wanted to upgrade this webpage to an interactive website which would handle the process of adding, completing, and removing tasks. That is when I started to learn JavaScript.
Challenges I ran into
- Learning to format the webpage using HTML and CSS
- Learning to code in JavaScript
- Adding tasks to the weekday boxes and then reloading the task array to display the tasks in the proper order.
- Ability to use generative HTML to create a toggle button for each task, which would then change color based on whether a task is complete or not. <-- This challenge took the longest to complete compared to the time I started. I overcame this challenge on 11/14/2023.
Accomplishments that I'm proud of
What I learned
This project was a catalyst in enabling myself to learn HTML/CSS/JS.
Log in or sign up for Devpost to join the conversation.