Password Generator

Overview

Password Generator is a minimal, zero-dependency web tool that instantly generates a random 16-character password and copies it to your clipboard — all before you even think about clicking a button. It’s hosted on GitHub Pages and loads in milliseconds, making it a handy bookmark for day-to-day password needs.

Try it live at jadujoel.github.io/password-generator.

How It Works

The entire app lives in a single index.html file. On page load, a short inline script generates a password by picking 16 random characters from the full printable ASCII range (character codes 33–126), covering uppercase, lowercase, digits, and symbols:

const n = 16
let password = ''
for (let i = 0; i < n; i++) {
  const rand = Math.floor(Math.random() * 94) + 33
  const char = String.fromCharCode(rand)
  password += char
}
textarea.value = password
copy()

The result is displayed in a <textarea> and immediately selected and copied via document.execCommand('copy'). A “Copy” button lets you re-copy if needed.

Features

• Instant Generation — Password is created and copied the moment the page loads, no interaction required
• Full ASCII Range — Uses all 94 printable ASCII characters (codes 33–126) for high entropy
• One-Click Copy — Textarea-based copy mechanism with a dedicated copy button
• Dark Minimal UI — Clean dark theme (#303030 background) with grid layout, comfortable on the eyes
• Zero Dependencies — No frameworks, no build step — just vanilla HTML, CSS, and JavaScript
• Custom Bun Dev Server — Includes a serve.ts with ETag-based caching, gzip compression, and content-type detection for local development

Dev Server

The project includes a custom development server built with Bun.serve() in serve.ts. It’s a small but well-featured static file server:

• ETag support — Computes SHA-256 hashes of files and returns 304 Not Modified when the content hasn’t changed
• Gzip compression — Detects Accept-Encoding: gzip and compresses responses on the fly using node:zlib
• Content-type mapping — Maps file extensions to MIME types for HTML, CSS, JS, images, and JSON
• API route stub — Supports /api/* routes by dynamically importing TypeScript handler modules

// ETag + conditional GET in serve.ts
const fileHash = createHash('sha256')
  .update(Buffer.from(fileBuffer))
  .digest('hex')

const ifNoneMatch = request.headers.get('If-None-Match')
if (ifNoneMatch === fileHash) {
  return new Response(null, { status: 304 })
}

Tech Stack

Language	JavaScript, HTML, CSS
Runtime	Bun (dev server)
Hosting	GitHub Pages
CI/CD	GitHub Actions (pages.yml)
License	MIT

Source Code

The source code is available on the project’s GitHub repository.