Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mr-sunset/pet-triangle/llms.txt

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

These are the most common questions about Pet Triangle — from browser compatibility to customizing the source.
No. Pet Triangle has no persistence layer. The #pet-name and #pet-color inputs hold their values only for the lifetime of the current browser tab — closing or refreshing resets them to defaults (empty name, browser-default colour). The action counters (#food-count, #drink-count, #play-count) always display 0 because the event-handler logic has not been implemented yet (see “Why is the counter not incrementing when I click?” below).To add persistence, use the Web Storage API in script.js. Call localStorage.setItem each time a value changes, and read it back with localStorage.getItem inside the DOMContentLoaded callback:
// Save on update
feedBtn.addEventListener('click', () => {
  const next = parseInt(foodCount.textContent) + 1;
  foodCount.textContent = next;
  localStorage.setItem('foodCount', next);
});

// Restore on load
const savedFood = localStorage.getItem('foodCount');
if (savedFood !== null) foodCount.textContent = savedFood;
Any modern browser that supports inline SVG and <input type="color"> will work. That includes:
  • Chrome / Chromium (desktop and Android)
  • Firefox (desktop and Android)
  • Safari (macOS and iOS)
  • Edge (Chromium-based)
The project uses no JavaScript APIs beyond document.getElementById and document.addEventListener, so compatibility is extremely broad. The ontouchstart="" attribute on <body> enables CSS :active states on iOS Safari.
Yes. Pet Triangle is entirely static and loads no external resources — no CDN scripts, no web fonts, no remote images. Once the three files (index.html, style.css, script.js) are loaded into the browser, the app works with no network connection.This also means it can be opened directly from the local filesystem via a file:// URL without any local server.
Edit the SVG <path> element inside index.html. The current path data:
<path d="M1024,605L1443,1443L605,1443L1024,605Z" />
draws an equilateral triangle within the 0 0 2048 2048 viewBox. Each M/L command is an absolute coordinate. Change the three L points (and the closing M) to any polygon you like — a square, pentagon, or freeform shape — and the SVG will update immediately on the next page load.The <g transform="matrix(2.443914,0,0,2.443914,-1478.568019,-1478.568019)"> wrapper scales and translates the path into the visible area. If you draw a shape with very different coordinates you may need to adjust or remove this transform.
Use the localStorage API inside script.js. The general pattern is:
  1. On every state change, call localStorage.setItem(key, value).
  2. On page load (inside DOMContentLoaded), call localStorage.getItem(key) and apply the stored value if it exists.
document.addEventListener('DOMContentLoaded', () => {
  const petColor = document.getElementById('pet-color');
  const petName  = document.getElementById('pet-name');

  // Restore saved values
  const savedColor = localStorage.getItem('petColor');
  const savedName  = localStorage.getItem('petName');
  if (savedColor) petColor.value = savedColor;
  if (savedName)  petName.value  = savedName;

  // Persist on change
  petColor.addEventListener('input', () => {
    localStorage.setItem('petColor', petColor.value);
  });
  petName.addEventListener('input', () => {
    localStorage.setItem('petName', petName.value);
  });
});
Apply the same pattern to the three counters (foodCount, drinkCount, playCount).
Yes. Upload all three files to any static hosting service and they will work immediately — no server-side configuration, no build step, no package.json.Popular options:
HostMethod
GitHub PagesPush the repo and enable Pages in repository settings
NetlifyDrag-and-drop the folder onto the Netlify dashboard
Vercelvercel CLI or import from GitHub — zero config needed
Cloudflare PagesConnect the repo; framework preset set to “None”
Make sure all three files are in the same directory so the relative href="style.css" reference in index.html resolves correctly. If you add a <script src="script.js"> tag to wire up the JavaScript, keeping all three files together ensures that reference resolves too.
The event listener bodies in script.js are intentionally empty scaffolding. The element references are all declared, but no logic has been written yet. Clicking a button does nothing until you add a handler yourself.To wire up the feed counter, add this inside the DOMContentLoaded callback:
feedBtn.addEventListener('click', () => {
  foodCount.textContent = parseInt(foodCount.textContent) + 1;
});
Repeat the same pattern for drinkBtn/drinkCount and playBtn/playCount:
drinkBtn.addEventListener('click', () => {
  drinkCount.textContent = parseInt(drinkCount.textContent) + 1;
});

playBtn.addEventListener('click', () => {
  playCount.textContent = parseInt(playCount.textContent) + 1;
});
The project has no build tooling, so the contribution workflow is as simple as it gets:
  1. Fork the repository on GitHub.
  2. Edit any of the three source files (index.html, style.css, script.js) directly — in your editor, in the GitHub web UI, or via Codespaces.
  3. Test by opening index.html in a browser (no local server needed).
  4. Open a pull request against the original repo.
Because there are no dependencies to install and no build step to run, the full edit-test loop is just save → refresh.

Build docs developers (and LLMs) love

Get started for freeTalk to us