Simple Password Generator(Grok)

I will generate passwords based on the specified length, such as 8 or 10 characters. You can easily copy them using the copy button.

Prompts:

Prompts(Optimized):

# Password Generator Source Code Specification

Create a source code for a password generator with the following specifications:

## Title
- Simple Password Generator

## Coding Requirements
- Use **HTML** for structure, **CSS** for styling, and **JavaScript** for functionality
- Code must be standalone (no external libraries or frameworks required)
- Ensure compatibility with modern web browsers (e.g., Chrome, Firefox)

## Screen Specifications
- Window size: **300x300 pixels** (set via CSS)
- Design theme: **Pastel-colored** (e.g., soft pink, mint green, light lavender) and **cute aesthetic** (e.g., rounded corners, subtle shadows)
- Layout: Simple, clean, and user-friendly with centered elements

## User Interface (UI) Components
- **Generate Button**:
  - Label: "Generate Password"
  - Action: Generates a random password based on selected length
  - Style: Pastel-colored button with hover effect (e.g., slight color change)
- **Radio Buttons**:
  - Options: Select password length of **8, 10, 16, or 32 characters**
  - Default selection: 8 characters
  - Style: Cute, circular radio buttons with pastel labels
- **Copy Button**:
  - Label: "Copy to Clipboard"
  - Action: Copies the generated password to the user's clipboard
  - Style: Small, pastel-themed button next to the password display
- **Password Display**:
  - A text area or readonly input field to show the generated password
  - Style: Pastel background with a cute border (e.g., dotted or rounded)

## Functionality
- **Password Generation**:
  - Use a mix of:
    - Uppercase letters (A-Z)
    - Lowercase letters (a-z)
    - Numbers (0-9)
    - Special characters (!@#$%^&* etc.)
  - Ensure randomness (e.g., using `Math.random()` or equivalent)
- **Copy Feature**:
  - Implement clipboard functionality (e.g., using `navigator.clipboard` API)
  - Provide feedback (e.g., alert or temporary text saying "Copied!") after copying

engine:

Grok

<< menu