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