Stop-watch

A web app which shows digital and mechanical stop-watch with minute and second hands using only CSS animations.

DEMO

Technologies used

• HTML5
• CSS3
• Sass (SCSS)
• BEM methodology

How to run the project locally

• Fork and clone this repository
• Run npm install in your terminal
• Open http://localhost:8080/ in your browser
• Run npm start to start the project locally

Dependencies

• Node v14.17.1 or higher
• npm v8.19.2 or higher

Reflections

The main goal of the project was to practice with CSS animations and deeply understand how different animation and transform properties work. Another important thing was to practice Sass (SCSS) preprocessor using its advantages and features, such as variables, nesting, mixins, functions, conditional statements, etc.

The most challenging part of the project was positioning the hands of the stop-watch using transform-origin property. Also I've written a Sass function which calculates hand's width and height depending on the size of the stop-watch. Another challenge was to synchronize mechanical and digital stop-watches.

At the end of the day, I've created my own app design and implemented the entire stop-watch logic using pure CSS only.