vickykoblinski / collab-timer Goto Github PK

Using Animate.css, let's add some animations in the process of clearing the timer. This is a two-step ticket.

Step 1:

When STOP is pressed, clear the timer to its default 00:00:00 position and the counter animation stops. Make sure that when you press START, the counter starts back from 0.

Step 2:

We're going to modify the behavior of Step 1 a little. Now when the Stop button is pressed:
1 Play the Animate.css fadeOutUp animation
1 Once that animation completes, set the timer numbers to 00:00:00
1 Play the Animate.css fadeInDown animation

You will need to use the event animationend and maybe animationstart

I would like to submit a PR that would add recording of start and stops times as laps (array), change function to a self executing function

When the START button is pressed, we expect the stopwatch to start incrementing. Javascript needs to run on an interval and update the DOM every second to manipulate the timer. setInterval is a good solution but requestAnimationFrame would be even better!

We need a small description of what this project is.

Follow the "Getting Started" instructions on this page. We will need the CSS styling and the three JS script files.

Also make the buttons on the screen use the bootstrap buttons. https://getbootstrap.com/docs/4.3/components/buttons/

We need a favicon for this project. Up to the collaborator to decide what that favicon is!

Right now the timer is on the top right and it looks pretty ugly. We would like that centered to the middle of the screen.

If a css file does not exist, please create one.

@kluu1

Blocked by #2

Add ESLint to the project after #2 is complete.

We need a simple pull request template.

In the template, we need to ask for a link to the issue that the PR is for.

This would be nicer to develop with if we have webpack to hot reload the project.

To add dependencies and scripts, we also need to npm init the repo before we can do any installations, so that is part of this ticket too.

Follow the documentation here to integrate webpack:

• https://webpack.js.org/guides/getting-started/

Make sure to add watch mode to the npm scripst: https://webpack.js.org/guides/development/#using-watch-mode

Ticket for @reynoldsme

The timer looks very "blah" right now. It's the main component of the page and it needs to stand out. There is already a ticket for centering it, but let's make it bigger too.

Change the font size to something much bigger (try 24pt and mess around with it) but also let's add a third party font.

Go to Google Fonts and find one that you think would look best for this application and install/apply it.

This documentation might be helpful.

@Koblinskis

This application is pretty plain on the white background. Let's instead change it to a blue background with a radial gradient.

@Koblinskis