Skip to content

Commit d8e3c38

Browse files
rushhiiirushhiii
committed
Update README.md
1 parent a9f909c commit d8e3c38

1 file changed

Lines changed: 158 additions & 7 deletions

File tree

‎Countdown Widget/README.md‎

Lines changed: 158 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,170 @@
1-
# ⏰ Countdown Widget
1+
2+
# ⏰ Interactive Countdown Widget Script
3+
24
![Scriptable](https://img.shields.io/badge/Scriptable-Compatible-purple)
35
![Widget Size](https://img.shields.io/badge/Supports-Small%2C%20Medium%2C%20Large-blue)
46
![Data Source](https://img.shields.io/badge/Data-Google%20Sheet%20Web%20App-brightgreen)
57
![Customization](https://img.shields.io/badge/Configurable-Color%20%2B%20Icon%20%2B%20Age%20%2B%20Pages-orange)
6-
![Offline Support](https://img.shields.io/badge/Fallback-Offline%20Cache%20%2B%20Auto%20Sync-lightgrey)
8+
![Offline Support](https://img.shields.io/badge/Offline%20Cache%20%2B%20Auto%20Sync-lightgrey)
79
![Status](https://img.shields.io/badge/Status-Stable-brightgreen)
810
![Last Updated](https://img.shields.io/badge/Updated-June%202025-yellow)
911

10-
![countdown widget](https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdow_showcase.png)
12+
<p align="center">
13+
<img src="https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdow_showcase.png" width="500" alt="Countdown Widget Screenshot"/>
14+
</p>
15+
16+
---
17+
18+
## 📋 Overview
19+
20+
The Interactive Countdown Widget is a lightweight, customizable JavaScript widget for displaying dynamic countdowns to important events (birthdays, anniversaries, deadlines, etc.) on your iOS home screen using the [Scriptable app](https://scriptable.app). Data is fetched from a Google Sheet, making it easy to update events without editing code.
21+
22+
---
23+
24+
## ✨ Features
25+
26+
- **Dynamic Countdown**: Shows days remaining to each event.
27+
- **Age/Anniversary Display**: Automatically calculates and displays age or years together.
28+
- **Google Sheets Integration**: Manage events via a simple spreadsheet.
29+
- **Customizable Appearance**: Set unique colors and icons for each event.
30+
- **Multiple Layouts**: Supports list and grid views, with pagination.
31+
- **Offline Support**: Caches data for use when offline.
32+
- **Widget Parameter Support**: Filter, paginate, or change display modes via widget parameters.
33+
34+
---
35+
36+
## 🛠️ Installation
37+
38+
### 1. Download or Clone the Repository
39+
40+
```sh
41+
git clone https://github.com/rushhiii/Scriptable-IOSWidgets.git
42+
```
43+
Or download the ZIP and extract it.
44+
45+
### 2. Add the Script to Scriptable
46+
47+
- Copy `Countdown Widget/MyCountdowns.js` to your iCloud Drive’s `Scriptable` folder.
48+
- Or, open Scriptable, create a new script, and paste the contents of `MyCountdowns.js`.
49+
50+
### 3. Include the Script in Scriptable
51+
52+
No HTML `<script>` tag is needed—this widget runs inside the [Scriptable app](https://scriptable.app) on iOS.
53+
54+
### 4. Dependencies
55+
56+
- **Scriptable app** (iOS, free on App Store)
57+
- **Google Sheets** (for event data)
58+
- No external JS/CSS dependencies required.
59+
60+
---
61+
62+
## 🚀 Usage Example
63+
64+
### Basic Setup
65+
66+
1. **Prepare your Google Sheet** (see below for format).
67+
2. **Set your Google Sheets Web App URL** in the script:
68+
```js
69+
const SHEET_API_URL = "https://script.google.com/macros/s/YOUR_ID/exec";
70+
```
71+
3. **Add the widget** to your home screen via Scriptable.
72+
73+
### Example Widget Initialization
74+
75+
- In Scriptable, select the script and add it as a widget.
76+
- Configure widget parameters for advanced options (see below).
77+
78+
---
79+
80+
## ⚙️ Customization Options
81+
82+
You can customize the widget’s behavior and appearance using parameters and by editing the Google Sheet.
83+
84+
### Widget Parameters
85+
86+
| Parameter Example | Effect |
87+
|-----------------------|----------------------------------------------|
88+
| `age` | Show age/years for the event |
89+
| `col` | Grid view (medium/large widgets only) |
90+
| `2` | Show the 2nd event in the list |
91+
| `john,age` | Show John's event with age display |
92+
| `pg2` | Show page 2 of events |
93+
| `col,pg3` | Grid view, page 3 |
94+
95+
- **Small widget**: Show a single event (by name or index).
96+
- **Medium/Large**: Show a list or grid of events, with pagination.
97+
98+
### Google Sheet Format
1199

12-
A lightweight and customizable countdown widget built using the [Scriptable app](https://scriptable.app), powered by Google Sheets. It helps you track upcoming events like birthdays, anniversaries, or deadlines—right from your iOS home screen.
100+
| name | date | icon | color |
101+
|------|------------|------|---------|
102+
| Mom | 2003-09-25 | 🎂 | #2980b9 |
103+
| Dad | 1975-07-01 | 🎂 | #F79F39 |
104+
105+
- Dates must be in `YYYY-MM-DD` format.
106+
- Icons can be any emoji.
107+
- Colors are hex codes (optional).
108+
109+
### Customizing Appearance
110+
111+
- Change event colors/icons in your Google Sheet.
112+
- Edit the color palette in the script for default colors.
113+
- Replace the repeat icon by placing a PNG in your Scriptable `.assets` folder.
114+
115+
---
116+
117+
## 🧩 Advanced Usage
118+
119+
- **Offline Caching**: The widget automatically caches data and syncs daily.
120+
- **Recurring Events**: Use the repeat icon for recurring events.
121+
- **Custom Fonts/Icons**: Place custom assets in the Scriptable iCloud folders as described in the script comments.
122+
123+
---
124+
125+
## 🤝 Contribution Guidelines
126+
127+
1. **Fork** the repository.
128+
2. **Create a branch** for your feature or fix.
129+
3. **Commit** your changes with clear messages.
130+
4. **Submit a pull request** describing your changes.
131+
132+
---
133+
134+
## 📄 License
135+
136+
This project is licensed under the [MIT License](../LICENSE).
137+
138+
---
139+
140+
## 📬 Contact & Support
141+
142+
- **Instagram**: [@the.tirth12](https://www.instagram.com/the.tirth12)
143+
- **Email**: rushiofficial1205@gmail.com
13144

14-
> **Mention:** Minimal design widget
15-
> https://jvscholz.com/blog/countdown.html
16-
> if the links dosent work look in the [backup](./backup) foolder
145+
Feel free to reach out for help, feature requests, or collaboration ideas!
146+
147+
---
148+
149+
## 🖼️ Screenshots / GIFs
150+
151+
> _Add screenshots or GIFs here to showcase the widget in action._
152+
153+
| <img src="https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdown_s.PNG" width="160"/> | <img src="https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdown_age_s.PNG" width="160"/> |
154+
|:--:|:--:|
155+
| <img src="https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdown_bday_s.PNG" width="160"/> | <img src="https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdown_1_s.PNG" width="160"/> |
156+
157+
| <img src="https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdown_m.PNG" width="260"/> | <img src="https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdown_col_m.PNG" width="260"/> |
158+
|:--:|:--:|
159+
160+
| <img src="https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdown_l.PNG" width="360"/> | <img src="https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdown_col_l.png" width="360"/> |
161+
|:--:|:--:|
162+
163+
---
164+
165+
<p align="center">
166+
Enjoy using the Interactive Countdown Widget!
167+
</p>
17168

18169
## ✨ Features
19170

0 commit comments

Comments
 (0)