https://github.com/hans5958/hyper-flexible-timer

⏲ A simple yet flexible timer/stopwatch. Made as a showcase, with Vue 3 and Astro
https://github.com/hans5958/hyper-flexible-timer

astro tailwindcss timer vue vue3 vuejs

Last synced: about 2 months ago
JSON representation

⏲ A simple yet flexible timer/stopwatch. Made as a showcase, with Vue 3 and Astro

• Host: GitHub
• URL: https://github.com/hans5958/hyper-flexible-timer
• Owner: Hans5958
• License: mit
• Created: 2022-01-21T13:36:38.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-12-21T02:29:18.000Z (5 months ago)
• Last Synced: 2025-02-28T12:07:31.400Z (2 months ago)
• Topics: astro, tailwindcss, timer, vue, vue3, vuejs
• Language: Vue
• Homepage: https://hans5958.github.io/hyper-flexible-timer
• Size: 9.29 MB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# The Hyper Flexible Timer

[![Deployment status](https://img.shields.io/github/actions/workflow/status/Hans5958/hyper-flexible-timer/deploy.yml?label=deploy&style=flat-square)](https://github.com/Hans5958/hyper-flexible-timer/actions/workflows/deploy-site.yml) ![Current version](https://img.shields.io/github/v/tag/Hans5958/hyper-flexible-timer?label=version&style=flat-square) [![Demo available on hans5958.github.io/hyper-flexible-timer](https://img.shields.io/badge/demo-hans5958.github.io/hyper‑flexible‑timer-black?style=flat-square)](https://hans5958.github.io/hyper-flexible-timer)

The Hyper Flexible Clock is a timer/stopwatch hybrid that focuses on flexibility and simplicity. Built with [Vue 3](https://vuejs.org/) and [Astro](https://astro.build/) (previously [Vue 2](https://v2.vuejs.org/) and [Nuxt.js](https://nuxtjs.org/)), 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

This project is licensed under the terms of [MIT license](LICENSE).