A focus web-app inspired by my town's church bell that wakes me up every night.

The main idea for this project was to build a simple countdown timer for the user to set up the desired amount of time to focus before the church bell "wakes them up". I've decided to also include an 'objectives' feature that can be accessed by clicking 'Your Tasks' on the header. This feature is essentialy a dynamic to-do list. The structure of this project was made with HTML, styled with CSS and scripted with JavaScript..

For the timer logic i re-used the logic from my first web-app project (that you can find in my profile as 'Mate-Water-timer'), wich consisted of transforming the input into a quantity of seconds and changing the display each time a second passes. I re-adapted that logic to admit hours, and implemented Local Storage functions in order to keep the timer running even if the users switches to the 'Your Tasks' page. I also implemented the 'Start To Lock In' button, which will start the timer, and the 'Let's Start Over' button which will reset the timer before the bell rings.s.

The task page is very simple as it consist of a list that displays the tasks, an imput to record your task's text content, and a button that appends that task to the list. Each task contains a little circle that is showed empty when the task is un-fulfilled and filled when the task is completed. The tasks text content is cross-lined when the task is completed as well. You can click either the circle or the text to mark a task as completed. There is also an X button to the right of each task that de-appends the task to the list.t.

I've uploaded this project to a github page => t; https://julietasegovia.github.io/Church-Bell-Lock-In/