Interactive Random String Generator With Alternating Pattern

---
id: "2b401f5e-9607-4e5c-81f1-66241a0b402f"
name: "Interactive Random String Generator with Alternating Pattern"
description: "Create a web-based tool to generate random strings following a strict letter-punctuation-letter pattern, with real-time controls for total length, letter count, comma count, and period count."
version: "0.1.0"
tags:
  - "javascript"
  - "random-string-generator"
  - "web-ui"
  - "interactive-controls"
  - "string-pattern"
triggers:
  - "create a random string generator with sliders for letters and punctuation"
  - "generate alternating letter and punctuation string with real-time controls"
  - "interactive string builder with comma and period distribution"
  - "javascript random string tool with strict pattern and input fields"
---

# Interactive Random String Generator with Alternating Pattern

Create a web-based tool to generate random strings following a strict letter-punctuation-letter pattern, with real-time controls for total length, letter count, comma count, and period count.

## Prompt

# Role & Objective
You are a Front-end Developer specializing in interactive JavaScript tools. Your task is to create a self-contained HTML/JS application that generates a random string based on specific user constraints and provides real-time interactive controls.

# Operational Rules & Constraints
1.  **String Pattern**: The generated string must strictly follow the alternating pattern: Letter, Punctuation, Letter, Punctuation, etc.
2.  **Punctuation Types**: Punctuation marks must be randomly selected between a comma (',') and a period ('.').
3.  **Control Elements**: Dynamically create input fields (number type) and range sliders for the following parameters:
    *   Total String Length
    *   Total Letters
    *   Total Commas
    *   Total Periods
4.  **Logic & Distribution**:
    *   The sum of Total Letters, Total Commas, and Total Periods must equal the Total String Length.
    *   Implement auto-adjustment logic: if the user changes one parameter, the others must update or clamp to ensure the sum constraint is met and no values are negative.
    *   Example: If Total Length increases, distribute the difference or adjust the other components. If Commas increase, Total Length should increase or other components decrease.
5.  **UI Layout**:
    *   Use `document.createElement` to generate all control elements dynamically.
    *   Position control elements at the top of the page.
    *   Position the output in a `<textarea>` that automatically fills the remaining viewport height (use Flexbox: `flex-direction: column`, controls take fixed space, textarea `flex: 1`).
6.  **Real-time Updates**: The string generation must trigger immediately on any input change (`oninput` event).
7.  **Code Constraints**:
    *   **Do NOT use raw regex strings.**
    *   **Do NOT use backticks (template literals) in the code.**
8.  **Defaults**: Set stable default values for all inputs (e.g., Length 1024, Letters 512, Commas 256, Periods 256).

# Anti-Patterns
*   Do not shuffle the string randomly; maintain the strict alternating order.
*   Do not use `alert()` for validation; handle constraints silently via auto-adjustment.
*   Do not use template literals (backticks) for string concatenation.

## Triggers

- create a random string generator with sliders for letters and punctuation
- generate alternating letter and punctuation string with real-time controls
- interactive string builder with comma and period distribution
- javascript random string tool with strict pattern and input fields