https://github.com/abkarim/stealthseminar-24hour-timer
JavaScript code for showing timer
https://github.com/abkarim/stealthseminar-24hour-timer
stealthseminar timer-clock
Last synced: 25 days ago
JSON representation
JavaScript code for showing timer
- Host: GitHub
- URL: https://github.com/abkarim/stealthseminar-24hour-timer
- Owner: abkarim
- License: mit
- Created: 2022-10-29T17:06:58.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-22T17:29:36.000Z (over 2 years ago)
- Last Synced: 2025-02-09T12:27:49.790Z (3 months ago)
- Topics: stealthseminar, timer-clock
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 24 hour timer
Add 24 hour timer in StealthSeminar registration page. But you have the option to **reduce or increase hours**. This timer is static, page refresh will reset the timer to default time.
## Usage
we will add custom javascript.
[ official doc about how to add custom javascript? ](https://help.stealthseminarapp.com/en/articles/2802201-custom-javascript)
Use the "Tracking Code Setup" in **"Miscellaneous"** menu, then click **"Tracking Code Setup"**.
We want to show timer in registration page so find **"Registration Page"** (you can use another option, if you want).
We will add our JavaScript code in the last field **BOTTOM OF PAGE** box.
If you want to edit something it is recommended that you first do editing the script.js file and then add it to the input.
```javascript
// ... script.js file content paste here
```
Then click **save**. \*By default this file will append timer as **first child on body.\***
But you have the option to change this behavior.
## How to change parent element of timer
Set parent selector in parentId
```javascript
const parentId = null; // element to append timer
//...
```
TO
```javascript
const parentId = "query selector here"; // element to append timer
//...
```
## Change style
Find following code and edit in script.js
```javascript
//...
// Styles
const styles = `
/*Container */
#ss-24-hour-timer-container {
display: flex;
gap: 1rem;
background-color: white;
width: 100%;
align-items: center;
justify-content: center;
padding-top: 1rem;
padding-bottom: 1rem;
}
/* Number */
#ss-24-hour-timer-container .hour,
#ss-24-hour-timer-container .minute,
#ss-24-hour-timer-container .second
{
background-color: #1a9dd1;
border-radius: 0.1rem;
color: white;
display: inline-block;
font-size: 2.5rem;
padding: 1rem;
}
/* Text */
#ss-24-hour-timer-container .text
{
color: #202020;
font-size: 0.8rem;
letter-spacing: 0.1rem;
margin-top: 0.1rem;
text-align: center;
}
`;
//...
```
## Change Hours
Find following code and edit in script.js. When using number less than 10, add a '0' before and place between quotes(') number, EX: '05'.
By the way hours can be bigger than 24.
```javascript
//...
const hour_number = createElement('span', 24, 'hour', hourElement); // Hours in second parameter
//...
```
## Change Text
Find following code and edit in script.js to change text. Text placed on the second parameter of createElement function
```javascript
//...
const hour_text = createElement('div', 'HOURS', 'text', hourElement); // Hour
const minute_text = createElement('div', 'MINUTES', 'text', minuteElement); // Minute
const second_text = createElement('div', 'SECONDS', 'text', secondElement); // Second
//...
```