mazipan / mazipan/html-tools

feat: add URL Encoder / Query String Builder tool

Open
#124 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
HTML
Stars
5
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Summary

Add a url-tools.html tool with two tabs: a URL encoder/decoder and a visual query-string builder/parser.

Motivation

URL encoding/decoding is a constant need when debugging API calls, reading logs, or sharing links. Combining it with a query-string builder (key-value table ↔ URL) in one page makes it more useful than a plain encode/decode box and meaningfully differentiates it from simple online converters.

Proposed UX

Tab 1 — Encode / Decode

  • Textarea input + output
  • Mode toggle: encodeURIComponent (component-safe) vs encodeURI (full-URL-safe)
  • Encode and Decode buttons; auto-detects direction on paste if one side is empty
  • Copy output button

Tab 2 — Query String Builder

  • Parse mode: paste a full URL or query string → decompose into an editable key-value table (rows with key input, value input, enabled toggle, delete button)
  • Build mode: add rows → live-assembled URL shown above the table
  • Copy full URL and copy query-string-only buttons
  • "Add row" button; drag-to-reorder rows

Implementation notes

  • Category: Code
  • Slug: url-tools
  • Icon: 🔗
  • No npm dependencies — encodeURIComponent, decodeURIComponent, URL, URLSearchParams, all native
  • All logic inline in <script>
  • Follow src/_tool-template.html and run bun run generate:sections, bun run generate:index, bun run generate:favicon after adding to tools.json

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/_tool-template.html and tools.json to understand the single-file tool structure and registration flow. Add url-tools.html with the two described tabs and native URL APIs, then run bun run generate:sections, bun run generate:index, and bun run generate:favicon; done means encoding, parsing, building, copying, row editing, and reordering work in the browser.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
tooling, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.