vickykoblinski / collab-timer Goto Github PK
View Code? Open in Web Editor NEWA timer!
A timer!
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.
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:
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.
This application is pretty plain on the white background. Let's instead change it to a blue background with a radial gradient.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.