Project Docs

Practice Ground Plan

Goal

Improve the JavaScript and TypeScript practice grounds so they feel like a proper coding workspace, not a small text area.

Implemented Improvements

  • Larger side-by-side editor and console layout on desktop.
  • Separate copy buttons for:
    • code input,
    • console output.
  • Support Tab inside the editor for indentation.
  • Add Alt + ArrowDown shortcut for quick copy.
  • Add Ctrl/Command + Enter shortcut for running code.
  • Add a compact editor shortcuts reference.
  • Apply the same UX to both JavaScript and TypeScript practice pages.

UX Notes

The editor and console should remain visible together on desktop. On mobile, they can stack vertically with stable dimensions.

The shortcuts reference should be visible but compact, designed for quick recall during practice.

Next Improvements

  • Add saved snippets per language.
  • Add side-by-side JavaScript and TypeScript comparison drills.
  • Add output-question presets from the handbook chapters.