The Hyper Flexible Timer

The Hyper Flexible Clock is a timer/stopwatch hybrid that focuses on flexibility and simplicity. Built with Vue 3 and Astro (previously Vue 2 and Nuxt.js), it is also a showcase of my capabilities on the front-end development.

Description

Features

Start, pause, and stop buttons
Ability to add, remove, and run multiple timers
Changable time and title
Switching betwwen counting up (as a stopwatch) and counting down (as a timer)
A nice and responsive interface (works on mobile, tablet, computer, etc)

Instructions

To start the timer, press the start button.
To stop the timer momentarily, press the pause button.
To stop and reset the timer, press the stop button.
Switch between counting up and counting down by pressing the Count Up/Down button.
Click the title to change the title of the timer. (default is Timer)
Click the time to change the time of the timer. (default is 00:00:00).
To add a timer, click the dotted box.
To remove a timer, click the Remove button.

Build Setup

Command	Action
`npm install`	Installs dependencies
`npm run dev`	Starts local dev server at `localhost:3000`
`npm run build`	Build your production site to `./dist/`
`npm run preview`	Preview your build locally, before deploying
`npm run astro ...`	Run CLI commands like `astro add`, `astro check`
`npm run astro --help`	Get help using the Astro CLI

License