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.

Pet Triangle is a deliberately minimal project — three files, zero dependencies, no build step. Understanding the structure makes it easy to extend or fork.

​
File overview

pet-triangle/
├── index.html   # App shell, all UI elements
├── style.css    # Visual styling and dark mode
└── script.js    # Interactive logic (event listeners)

​
index.html — Element reference

The HTML document is a flat, single-page shell. Every interactive element is identified by an id that script.js is written to reference. Note that index.html does not currently include a <script src="script.js"> tag, so the JavaScript is not loaded by the browser until that tag is added. The table below documents each key element.
Element IDTagPurpose
#top-nav<header>Black header bar containing the app title (<h1 class="hero">Pet Triangle</h1>) and author credit (💛 JC), laid out as a flex row with justify-content: space-between
#pet-name<input type="text">Free-text field for naming the pet; max="30", placeholder "Pet name", rendered with a transparent background and large font so it reads like an inline title
#pet<svg>150×150 px SVG canvas containing the triangle path, scaled and centred via a transform matrix
#pet-color<input type="color">Native colour picker styled as a wide pill swatch; intended to control the triangle’s fill colour once event-handler logic is wired up in script.js
#feed / #food-count<button> / <span>Feed action button (🍎) and its integer counter, initialised to 0
#drink / #drink-count<button> / <span>Drink action button (🥤) and its integer counter, initialised to 0
#play / #play-count<button> / <span>Play action button (🛝) and its integer counter, initialised to 0
#actions-container<div>Absolutely-positioned wrapper anchored to the bottom of the viewport (bottom: 20px); holds the colour picker and #button-row
#button-row<div>Flex row that spaces the three action buttons horizontally
Below is the complete markup for the <main> section, exactly as it appears in index.html: 
<main>
  <input type="text" id="pet-name" max="30" placeholder="Pet name">
  <svg viewBox="0 0 2048 2048" id="pet">
    <g transform="matrix(2.443914,0,0,2.443914,-1478.568019,-1478.568019)">
      <path d="M1024,605L1443,1443L605,1443L1024,605Z" />
    </g>
  </svg>
  <div id="actions-container">
    <input type="color" id="pet-color">
    <div id="button-row">
      <button id="feed" class="action">🍎 <span id="food-count">0</span></button>
      <button id="drink" class="action">🥤 <span id="drink-count">0</span></button>
      <button id="play" class="action">🛝 <span id="play-count">0</span></button>
    </div>
  </div>
</main>
The SVG viewBox is 0 0 2048 2048. The <g> element applies a scale-and-translate matrix so the path coordinates sit correctly inside the 150×150 rendered box. The path M1024,605L1443,1443L605,1443L1024,605Z draws a closed equilateral triangle.

​
script.js — JavaScript hooks

All logic runs inside a single DOMContentLoaded listener, which ensures the DOM is fully parsed before any element references are resolved: 
document.addEventListener('DOMContentLoaded', () => {
  // all references and event listeners live here
});
Inside that callback, every interactive element is captured into a named constant: 
const feedBtn    = document.getElementById('feed');
const drinkBtn   = document.getElementById('drink');
const playBtn    = document.getElementById('play');

const foodCount  = document.getElementById('food-count');
const drinkCount = document.getElementById('drink-count');
const playCount  = document.getElementById('play-count');

const petColor   = document.getElementById('pet-color');
const petName    = document.getElementById('pet-name');
Each constant maps directly to one of the element IDs documented in the HTML section above. Having all references declared at the top of the callback means any new event listener you add can reference them immediately without further querySelector calls.
The event listener bodies in script.js are empty scaffolding — all element references are declared, but no addEventListener calls have been wired up yet. This is intentional: it’s the perfect entry point for contributors who want to add features such as persistent counters, pet health meters, colour-change animations, or name validation. Start by adding a click handler to one of the action buttons, then build from there.

​
style.css — Key CSS selectors

The stylesheet is structured top-to-bottom: global resets, layout, interactive element overrides, then a @media block for automatic dark mode.
SelectorDescription
bodyFlex column, align-items: center, height: 100vh, white background, color: black, font-family: Arial, Helvetica, sans-serif. Sets the full-page centred layout.
#top-navbackground-color: black, color: white, display: flex, justify-content: space-between, padding: 12px 16px, width: 100%, box-shadow: 0 12px 12px rgba(0,0,0,0.1). Spans the full page width with title on the left and credit on the right.
#pet-namebackground: transparent, border: none, font-size: xx-large, text-align: center. Renders as an invisible overlay so it looks like a heading until focused, at which point a 2px solid black outline appears.
#pet-colorwidth: 200px, height: 30px, border-radius: 20px, border: 2px solid black, cross-browser appearance: none overrides. Swatch pseudo-elements (::-webkit-color-swatch, ::-moz-color-swatch) are given matching border-radius so the colour fills a pill shape. Scales to 0.95 on :active.
#petwidth: 150px; height: 150px — constrains the SVG canvas to a fixed square regardless of the internal viewBox.
.actionfont-size: 32px, border: 2px solid black, border-radius: 8px, background-color: white, padding: 10px 20px, transition: all 0.12s ease. Scales to 0.95 on :active for a tactile press feel.
#actions-containerposition: absolute; bottom: 20px — pins the colour picker and button row to the bottom of the viewport so they don’t interfere with the vertically-centred pet.
@media (prefers-color-scheme: dark)Overrides body background to rgb(20,20,20), flips #pet-name outline to white, sets #pet fill to rgb(100,100,100), updates #pet-color border and color-scheme for native dark picker UI, and inverts .action button colours to a black background with white border and text.

Build docs developers (and LLMs) love

Get started for freeTalk to us