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.
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.
- Semantic HTML
- Tailwind CSS - Styling
- Swiper.js - JavaScript slider library
- Vanilla JavaScript
- 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.
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.
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
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.
Your contribution is always welcome, please follow these steps:
- Fork the project.
- Create your feature branch:
git checkout -b feature/branch-name
. - Make sure to follow instructions in the style guide section.
- Stage all changes you made:
git add -A
. - Commit all staged changes with a descriptive commit message:
git commit -m 'feat: add foo bar baz'
. - Push everything to your feature branch:
git push origin feature/branch-name
. - Create a new Pull Request.
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.