Multi-Function Timepiece

Multi-Function Timepiece is a collection of 3 handy tools including a live analog clock, a stopwatch, and an interactive countdown timer all gathered in a cube.

Overview

The challenge

Users should be able to:

• Either swipte the cube or tap on a link and navigate to the corresponding tool.
• See the current date and time on a live analog clock.
• Start, stop, and reset the stopwatch.
• Set a countdown timer between 1 to 60 minutes. It may be stopped or reset at any time.
• See the "finished!" message and reset the countdown after the time is up.

Links

• Project homepage
• GitHub repository
• Issues
• Pull requests
• My other projects

My process

Built with:

• Semantic HTML
• Tailwind CSS - Styling
• Swiper.js - JavaScript slider library
• Vanilla JavaScript

I learned:

• How to display live date and time.
• How to create a live analog clock with HTML, CSS, and JavaScript.
• How to create an interactive stopwatch and countdown timer with JavaScript.

Development setup

1. First, you need to clone the project:

git clone https://github.com/ShayanTheNerd/multi-function-timepiece.git

Alternatively, you can copy the source of the project directly to your local environment using Degit:

pnpm i -g degit

degit https://github.com/ShayanTheNerd/multi-function-timepiece new-project-folder

2. Then, install required packages:

pnpm i

3. Finally, run the dev script to start the dev server:

pnpm run dev

Now, you can preview the project on a local server of your choice. My personal recommendation is the Live Server Extension.

Deployment and production

Before deploying the project or creating a new pull request, run the following commands and make sure there are no errors:

pnpm run format

pnpm run build

Style Guide

If you want to develop this project, please stick to these rules:

• Follow the current architecture, coding paradigm, and project folder structure.
• Follow the current character case principals for ids, classes, variables, file and folder names, etc.
• Code based on the current libraries, frameworks, and packages included in the project.
• For styling, utilize Tailwind's features as much as possible, but also make sure to use BEM methodology for naming custom CSS classes.
• In case you need to access an HTML element in JavaScript by a class name, prefix the class name with js-. For example, js-submit-btn.
• Add Git commit messages considering Conventional Commits.

Contribution

Your contribution is always welcome, please follow these steps:

1. Fork the project.
2. Create your feature branch: git checkout -b feature/branch-name.
3. Make sure to follow instructions in the style guide section.
4. Stage all changes you made: git add -A.
5. Commit all staged changes with a descriptive commit message: git commit -m 'feat: add foo bar baz'.
6. Push everything to your feature branch: git push origin feature/branch-name.
7. Create a new Pull Request.

License

This project is licensed under MIT license. You're free to use it, but a link to this page and mentioning the author's name is mandatory. Created by Shayan Zamani.

back to top ⬆️