Skip to content

Commit 7e404fa

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

1 file changed

Lines changed: 7 additions & 158 deletions

File tree

‎Countdown Widget/README.md‎

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

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
10+
![countdown widget](https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/countdown/countdow_showcase.png)
9911

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
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.
14413

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>
14+
> **Mention:** Minimal design widget
15+
> https://jvscholz.com/blog/countdown.html
16+
> if the links dosent work look in the [backup](./backup) foolder
16817
16918
## ✨ Features
17019

0 commit comments

Comments
 (0)