Intention Timer

A simple countdown timer web application

Contributors

Anna Johnson
Phil Than
Nate Sheridan

Languages and Libraries

HTML - ◘ - CSS - ◘ - JAVASCRIPT

Info

In this project, we were expected to build a web app that allows a user to set goals for their health and productivity. With the use of a form to collect user input, a new page is rendered providing the view of a custom countdown timer. Users can also keep track of past events that have occurred using local storage. Stylings and format based on an instructor provided a comprehensive preview. <+>

You can demo our app on our deployed site, or follow the install instructions below to install the app locally.

App Use (and screenshots)

Our web app starts the user off at a home screen where they are asked for 3 items to start the timer - category , description of what the user would like to accomplish during the time, and the length of the timer with a minutes and a seconds input.

From there the user can select a category and fill in the input fields All buttons react differently and have specified colors that tie into the rest of the apps use and legibility

After the user clicks start activity they are presented with the timer view page where the timer starts will happen as soon as they click "START"

When the user has completed the timer it will congratulate them and offer the user an option to "Log Activity", which saves the activity to local storage and pushes the activity to the past activities pane on the right side.

After clicking log activity they are presented with a screen to start a new activity if they desire, also their past activity is now listed on the right side in the Past Activities pane. After Several uses the web app has the possibility of looking something like the image below:

Local Installation

Local install is easy with a web app like this one

Either use the green "download code" button at the top of the page to copy a clone link or right-click here and click "Copy link address"

From there open your Terminal and navigate to the directory you would like to store the web app inside of

Once you are in the directory execute the following command:

git clone https://github.com/natesheridan/intention-timer.git

(this command assumes that the Github link you copied above matches.)

then navigate inside of the directory

cd intention-timer

then open the index.html file using the following command

open index.html

From there you are ready to start setting countdown timers yourself!