Frontend Widgets

A curated collection of simple, standalone HTML + CSS + JavaScript projects you can download, customize, and remix.
Everything here is designed to be copy‑paste friendly, with minimal dependencies.

---

Quick Start

Option A — Download everything

1. Click “Code” → “Download ZIP” on the GitHub repo.
2. Unzip and open any index.html file in your browser.
3. Tweak the HTML/CSS/JS to fit your needs.

Option B — Grab one project

1. Navigate to the folder you want in this repository.
2. Download only the files in that folder (right‑click → Save link as).
3. Open the HTML in your browser and edit.

Option C — GitHub Pages (recommended)

1. Fork this repo (or use it as a template).
2. Push to your GitHub account.
3. In your repo: Settings → Pages → Source: main → /root.
4. Your projects will be live at https://<your-username>.github.io/<repo>/...

---

Projects Catalogue

Below is an auto‑generated index from the current files. If a project is missing a description, you can improve it by adding a <meta name="description"> tag or an <h1> with a meaningful summary in its HTML.

Project	Entry File	Summary
City Builder		Ready-to-play city builder game in old school pixel art style.
Kindle Cookbook Formatter		Easily format beautiful cookbooks ready to upload and publish on Amazon Kindle.
Dictionary Lookup		Lookup words in the Merriam-Webster dictionary.
Empty HTML Tag Generator		Generate empty HTML tags and add CSS classes (optional). Supports nested tags.
Goal Tracker		Track your savings towards large purchases using this goal tracker.
Quiz		Quiz that can be modified with any set of correct answers and customized to your needs.
List Generator		Generate to-do lists, export to HTML.
Movie Search		Search for movies.
Note Saver		Save text notes in the browser.
Philosophical Alignment Test		Which Philosophical Movements Align With You?
Pixel Art Drawboard		Canvas for drawing pixel art.
URL to QR Code		URL to QR Code generator.
Quote Graphic Generator		Generate quote graphics to share on social media. Choose your gradient colors, font, and enter your favorite quote.
Random Color Palettes		Generate random color palettes with hex codes.
Rhyme Search		Rhyming word finder powered by Datamuse API.
SMS Templates		Save frequently used text messages and easily copy and paste them into Google Voice while on desktop.
Editable HTML Table Generator		Generates editable HTML tables with custom headings and click-to-edit in place cells.
Synonym Lookup		Lookup word synonyms.
Voice Recorder		Record voice notes and download them in the browser.
Poetry Grid Helper		Try to write poems that read exactly the same horizontally and vertically!
Folder Structure Generator		Folder structure visualization generator.
Wikipedia Editor		Wikipedia-style editor for writing your own Wikipedia page.
Offline GPT		Load your conversations.json file from ChatGPT export and browse chats locally/offline.
Writing Deadline		Deadline countdown, word limit enforced and content saved in textarea.

How To Customize

• Change colors & fonts: tweak values in the :root CSS custom properties or the .css file in the same folder.
• Swap copy/content: edit text inside the HTML. Keep the structure, replace the words.
• Add images: place your images in the same folder and reference them with a relative path (e.g. ./hero.png).
• Disable features: comment‑out or remove event listeners in the JS files.
• Mobile tweaks: use CSS media queries (e.g. @media (max-width: 640px)).
• Accessibility: ensure sufficient color contrast, add alt text to images, and use semantic HTML elements.

---

Recommended File Layout (per project)

project-name/
├── index.html        # the main entry point
├── styles.css        # styles (or inline in HTML)
├── script.js         # optional interactive behavior
└── assets/           # optional images, fonts, etc.

---

Contributing

Got a fix, a feature, or a brand‑new mini‑project?

1. Fork this repo and create a branch: git checkout -b feature/your-idea
2. Add your project in its own folder (see layout above).
3. Include a short README.md inside your folder with: purpose, features, how to use, and license note.
4. Open a Pull Request describing your changes and screenshots/GIFs if relevant.

Please read the CODE_OF_CONDUCT.md and CONTRIBUTING.md before submitting.

---

License

Unless otherwise noted inside a project folder, this repository is released under the MIT License.
You can use these projects in personal or commercial work with attribution preferred but not required. See LICENSE.