{"id":18290929,"url":"https://github.com/hichemtab-tech/tickwatch-js","last_synced_at":"2026-02-26T06:52:36.569Z","repository":{"id":243761921,"uuid":"813374221","full_name":"HichemTab-tech/TickWatch-js","owner":"HichemTab-tech","description":"TickWatch is a powerful jQuery plugin designed to create dynamic electronic clocks. Whether you need a count-up or count-down timer, TickWatch offers a range of customizable options to suit your needs. Perfect for dashboards, timers, and real-time applications.","archived":false,"fork":false,"pushed_at":"2024-06-28T17:50:03.000Z","size":133,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-09T17:49:06.632Z","etag":null,"topics":["clock","clock-widget","countdown","countdown-timer","countup","countup-timer","digital-clock","digitalclock","electronic-clock","jquery","jquery-plugin","jquery-ui","time-display","timemanagement","timer"],"latest_commit_sha":null,"homepage":"https://hichemtab-tech.github.io/TickWatch-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HichemTab-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-11T00:56:46.000Z","updated_at":"2025-03-22T22:29:32.000Z","dependencies_parsed_at":"2025-03-25T23:28:17.569Z","dependency_job_id":"2aedb679-c39c-4a94-86e9-28f4a1f811b2","html_url":"https://github.com/HichemTab-tech/TickWatch-js","commit_stats":null,"previous_names":["hichemtab-tech/tickwatch-js"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/HichemTab-tech/TickWatch-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HichemTab-tech%2FTickWatch-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HichemTab-tech%2FTickWatch-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HichemTab-tech%2FTickWatch-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HichemTab-tech%2FTickWatch-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HichemTab-tech","download_url":"https://codeload.github.com/HichemTab-tech/TickWatch-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HichemTab-tech%2FTickWatch-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29851087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T22:37:40.667Z","status":"online","status_checked_at":"2026-02-26T02:00:06.774Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clock","clock-widget","countdown","countdown-timer","countup","countup-timer","digital-clock","digitalclock","electronic-clock","jquery","jquery-plugin","jquery-ui","time-display","timemanagement","timer"],"created_at":"2024-11-05T14:12:41.603Z","updated_at":"2026-02-26T06:52:36.543Z","avatar_url":"https://github.com/HichemTab-tech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TickWatch jQuery Plugin\n\n## Overview\n\n**TickWatch** is a versatile jQuery plugin that enables you to create dynamic electronic clocks in your web applications. The plugin allows users to display clocks that can count up or down with customizable formats, and provides various control methods to manage the clock's behavior.\n\n## Table of Contents\n\n- [Requirements](#requirements)\n- [Features](#features)\n- [Installation](#installation)\n    - [npm](#npm)\n    - [CDN](#cdn)\n    - [Local Download](#local-download)\n- [Usage](#usage)\n- [Example](#example)\n- [Options](#options)\n- [Methods](#methods)\n- [Events](#events)\n- [Demo](#demo)\n- [Contributing](#contributing)\n- [Author](#author)\n- [License](#license)\n\n## Requirements\n\nTo use the TickWatch jQuery Plugin, you need the following dependencies:\n- jQuery (minimum version 3.7.0)\n\nYou can include these dependencies in your HTML file via CDN or by downloading the files locally.\n\n## Features\n\n- Count up or down clocks.\n- Customizable time formats (hours, minutes, seconds, and days).\n- Control methods to start, stop, and set the time.\n- Event triggers for start, stop, update, and end actions.\n- Easy integration with existing jQuery projects.\n- Lightweight and minimal design.\n\n## Installation\n\nTo use the TickWatch jQuery Plugin in your project, you can include the necessary files via npm, CDN,\nor by downloading the files locally.\n\n### npm\n\nYou can install TickWatch via npm:\n```bash\nnpm install tickwatch-js\n```\n\n### CDN\n\nYou can also include TickWatch directly from a CDN by adding the following script tag to your HTML file:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/tickwatch-js@latest/dist/TickWatch.min.js\"\u003e\u003c/script\u003e\n```\n\n### Local Download\n\nIf you prefer to host the library locally,\nyou can download the latest release from the source code and include it in your project:\n```html\n\u003cscript src=\"path/to/TickWatch.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nTo use the TickWatch jQuery Plugin, follow these steps:\n\n- Include the necessary scripts and stylesheets as described in the installation section.\n- Create a target element in your HTML to initialize the clock.\n- Initialize TickWatch on the target element using jQuery:\n\n```html\n\u003cdiv id=\"myClock\"\u003e\u003c/div\u003e\n\u003cbutton id=\"startBtn\"\u003eStart\u003c/button\u003e\n\u003cbutton id=\"stopBtn\"\u003eStop\u003c/button\u003e\n\u003cbutton id=\"setBtn\"\u003eSet to 5 minutes\u003c/button\u003e\n\n\u003cscript src=\"https://code.jquery.com/jquery-3.7.0.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/TickWatch.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n$(document).ready(function() {\n    const options = {\n        direction: 'up',\n        format: 'hh:mm:ss',\n        startTime: '00:00:00'\n    };\n    \n    $('#myClock').TickWatch(options);\n\n    $('#startBtn').click(function() {\n        $('#myClock').TickWatch('start');\n    });\n\n    $('#stopBtn').click(function() {\n        $('#myClock').TickWatch('stop');\n    });\n\n    $('#setBtn').click(function() {\n        $('#myClock').TickWatch('set', '00:05:00');\n    });\n});\n\u003c/script\u003e\n```\n\n## Example\n\n### Time Clock\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eTickWatch - Example\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"myClock\"\u003e\u003c/div\u003e\n    \u003cbutton id=\"startBtn\"\u003eStart\u003c/button\u003e\n    \u003cbutton id=\"stopBtn\"\u003eStop\u003c/button\u003e\n    \u003cbutton id=\"setBtn\"\u003eSet to 5 minutes\u003c/button\u003e\n\n    \u003cscript src=\"https://code.jquery.com/jquery-3.7.0.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"path/to/TickWatch.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n    $(document).ready(function() {\n        $('#myClock').TickWatch({\n            direction: 'up',\n            format: 'hh:mm:ss',\n            startTime: '00:00:00'\n        });\n\n        $('#startBtn').click(function() {\n            $('#myClock').TickWatch('start');\n        });\n\n        $('#stopBtn').click(function() {\n            $('#myClock').TickWatch('stop');\n        });\n\n        $('#setBtn').click(function() {\n            $('#myClock').TickWatch('set', '00:05:00');\n        });\n    });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Number display\n\n```html\n\u003ch2 class=\"h2\"\u003eDisplay\u003c/h2\u003e\n\u003cdiv class=\"display d-flex justify-content-center\"\u003e\u003c/div\u003e\n\u003cdiv class=\"mb-3\"\u003e\n    \u003clabel for=\"number\" class=\"form-label\"\u003eNumber\u003c/label\u003e\n    \u003cinput type=\"text\" class=\"form-control\" id=\"number\" name=\"number\" placeholder=\"Enter a number\"\u003e\n\u003c/div\u003e\n\u003cbutton type=\"button\" class=\"btn btn-primary\" id=\"set\"\u003eSet\u003c/button\u003e\n\n\u003cscript\u003e\n$(document).ready(function() {\n    const displayElement = $('.display');\n    displayElement.TickWatch({\n        displayOnly: true,\n        displaySize: 2,\n    });\n\n    $('#set').on('click', function () {\n        displayElement.TickWatch('set', $(\"#number\").val());\n    });\n});\n\u003c/script\u003e\n```\n\n## Options\n\n| Option              | Type    | Default                               | Description                                                                                                                    |\n|---------------------|---------|---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|\n| `partsKeys`         | Array   | `['seconds', 'minutes', {hours: 24}]` | Defines each part of the clock and its maximum value. Example: `['seconds', 'minutes', {hours: 24}, {days: 31}, {month: 12}]`. |\n| `direction`         | String  | 'up'                                  | The direction of the clock ('up' for count up, 'down' for count down).                                                         |\n| `startTime`         | String  | null                                  | The initial time of the clock.                                                                                                 |\n| `endTime`           | String  | null                                  | The end time of the clock. Used in countdown mode.                                                                             |\n| `activeCellClass`   | String  | 'active-cell'                         | The class to add to the active segment of the electronic cell (e.g., red or high opacity).                                     |\n| `inactiveCellClass` | String  | 'inactive-cell'                       | The class to add to the inactive segment of the electronic cell (e.g., low opacity).                                           |\n| `displayOnly`       | Boolean | false                                 | If true, displays static numbers instead of a clock.                                                                           |\n| `displaySize`       | Number  | null                                  | Number of digits to display when `displayOnly` is true.                                                                        |\n\n\n\n## Methods\n\nThe TickWatch jQuery Plugin provides the following methods:\n\n- **`start()`**: Start the clock.\n- **`stop()`**: Stop the clock.\n- **`set(time)`**: Set the clock to a specific time or set the display to a specific value.\n- **`get()`**: Get current value of the clock or the display.\n- **`clear()`**: Clear the current time and reset to the start time.\n- **`option(key, value)`**: Get or set an option dynamically.\n- **`destroy()`**: Destroy the clock instance.\n\n## Events\n\nTickWatch triggers the following events:\n\n- `TickWatch.start`: Triggered when the clock starts.\n- `TickWatch.stop`: Triggered when the clock stops.\n- `TickWatch.update`: Triggered when the clock updates.\n- `TickWatch.end`: Triggered when the clock reaches the end time.\n- `TickWatch.clear`: Triggered when the clock is cleared.\n- `TickWatch.destroy`: Triggered when the clock instance is destroyed.\n\n## Demo\n\nHere's a Demo example :\n\n[Demo](https://hichemtab-tech.github.io/TickWatch-js)\n\n\n\n## Contributing\n\nContributions are always welcome!\n\nIf you have any ideas, improvements, or bug fixes,\nplease [open an issue](https://github.com/HichemTab-tech/TickWatch-js/issues)\nor [submit a pull request](https://github.com/HichemTab-tech/TickWatch-js/pulls).\n\n## Author\n\n- [HichemTab-tech](https://www.github.com/HichemTab-tech)\n\n## License\n\n[MIT](https://github.com/HichemTab-tech/TickWatch-js/blob/master/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhichemtab-tech%2Ftickwatch-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhichemtab-tech%2Ftickwatch-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhichemtab-tech%2Ftickwatch-js/lists"}