Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/PunctuOwlity/llms.txt

Use this file to discover all available pages before exploring further.

The PunctuOwlity web app is a zero-backend static project: five HTML pages for the core app flow, a stylesheet, and a single JavaScript file. There is no build step, no package manager, and no server-side code. You can open it directly from your filesystem for a quick look, or serve it with a local HTTP server for the most accurate experience — and when you’re ready to share it, it deploys straight to GitHub Pages with no configuration beyond pointing GitHub to the right branch.

​
Prerequisites

  • A modern web browser (Chrome, Firefox, Edge, or Safari — current versions recommended)
  • Recommended: A local HTTP server for full functionality. Good options include:
    • Python’s built-in http.server (available in any Python 3 installation)
    • The Live Server extension for VS Code
You can open index.html directly with File > Open in your browser, but some browsers restrict localStorage access for file:// URLs. Serving the project over http://localhost avoids those restrictions and is the recommended approach.

​
Getting Started

1

Clone or download the repository

Clone the repository from GitHub to your local machine:
git clone https://github.com/apursley2012/PunctuOwlity.git
cd PunctuOwlity
If you prefer not to use Git, you can download the repository as a ZIP file from the GitHub page and extract it to a local folder.
2

Start a local HTTP server

From inside the PunctuOwlity project folder, start Python’s built-in HTTP server:
python3 -m http.server 8080
# then open http://localhost:8080 in your browser
Alternatively, if you use VS Code, open the folder and click Go Live in the status bar to start Live Server. The browser will open automatically.The login page (index.html) is the entry point. You should see the PunctuOwlity logo, a “Welcome to PunctuOwlity!” heading, and a login form.
3

Create an account

Click Sign Up on the login page to open signup.html. Fill in all required fields:
FieldRequiredNotes
First Name✅
Last Name✅
Email Address✅Must be unique across accounts
Phone❌Optional; used for SMS alert preference
Username✅Must be unique across accounts
Password✅
Confirm Password✅Must match Password
Click Sign Up. You’ll see a “Account Created Successfully” toast and be redirected to the login page after a short delay.
4

Log in

On the login page, enter either your username or your email address along with your password, then click Login. Both identifiers are accepted — the app checks the value you type against both fields in the stored account.A successful login sets an authentication flag in sessionStorage and sends you to the SMS preference screen.
5

Set your SMS preference

The sms.html screen appears once, after your first successful login. PunctuOwlity asks whether you want to receive SMS alerts for upcoming events.
  • Click Allow SMS Notifications to save the allowed preference and continue to the events grid. Once the events grid loads, the app will request browser Notification permission so it can display a desktop notification on the day of any event with a reminder toggled on.
  • Click No, thanks to save the denied preference and skip notifications.
Either choice saves your preference to localStorage and redirects you to the events grid. This screen will not appear again once a preference has been saved.
6

Add your first event

On the events grid (events.html), click the ＋ floating action button in the lower-right corner to open add-event.html. Complete the form:
  • Event Title — a short name for the event (required)
  • Date — the date of the event using the date picker (required)
  • Time — the time using the time picker (required)
  • Reminder toggle — switch on if you want a browser notification on the day of the event
Click Save Event. You’ll see an “Event Added” toast and be returned to the events grid, where your new event card will appear in the two-column grid.To edit an event, click the pencil icon on its card. To delete one, click the trash icon.

​
Deploying to GitHub Pages

Publishing PunctuOwlity to the web takes only a few clicks — no build tools or CI pipeline needed.
1

Push the repository to GitHub

If you cloned the original repo, create a new repository on your GitHub account and push the project files to the main branch:
git remote set-url origin https://github.com/YOUR_USERNAME/PunctuOwlity.git
git push -u origin main
2

Enable GitHub Pages

In your repository on GitHub, go to Settings → Pages. Under Source, select Deploy from a branch, choose the main branch, set the folder to / (root), and click Save.
3

Visit your Pages URL

GitHub will build and publish the site within a minute or two. Your public URL will be:
https://YOUR_USERNAME.github.io/PunctuOwlity/
The login page will load automatically because index.html is the root file. All app functionality works identically on GitHub Pages — localStorage is available in every modern browser when served over HTTPS.
User accounts and events are stored in your browser’s localStorage and will persist across browser sessions on the same device. They are local to that specific browser profile — data created in Chrome will not be visible in Firefox, and data is not synced across devices. Clearing the site’s browser storage (via DevTools or browser privacy settings) will remove all accounts and events.
When you first visit the events grid without any saved events, PunctuOwlity automatically displays four seed events so the grid is never empty on a first run: Project Two Due (Sat Apr 5, all day), Nich’s Birthday (Sat Apr 12 at 06:30 PM, with reminder on), Dentist (Mon Apr 14 at 01:30 PM), and Jessica’s Wedding (Sun Apr 20 at 03:00 PM). These seed events come from the seedEvents array in app.js. As soon as any event array is written to localStorage, the app reads and displays your stored events instead of the seeds.

Build docs developers (and LLMs) love

Get started for freeTalk to us