Skip to content

golightstream/studio-capital-challenge

Repository files navigation

Capital Selector

This simple application demonstrates a "Capital Selector" similar to the MacOS Emoji Selector:

image

While typing in a textarea, use the keyboard shortcut shift + . to bring up a country capital selection list. Select from a list of contries to insert its capital city as text into the active textarea.

image


Getting started

Navigate your browser to the running server:
http://localhost:8080


Problems

  1. The modal's caret does not point to the cursor's current position.
  2. The capital selector modal may be partially off screen under certain circumstances.
  3. The city is always inserted at the end of the text (instead of the cursor's current position).
  4. The search filter is case-sensitive ('ar' does not match 'Argentina').

(Do you notice any others? We'd love to hear your thoughts on improving the user experience)


Application Structure

public/index.html

The root of the application. Contains the initial HTML rendered to the page (including the textarea). Loads the root script.

src/index.jsx

The root script. Contains all logic for rendering the selector modal and updating the textarea with the selected country's capital.

src/Menu.tsx

The capital selector modal, exported as a React component.


Resources

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published