Tracking user's insertion mark within two different texts simultaneously, excluding certain signs

Question

My problem is a logical one rather than one pertaining to code directly. I'm having problems planning out what should happen exactly step by step. (I'm writing a program to create palindromic pairs of text in JavaScript)

My desired effect is: Having a two-part palindrome input field, constantly modifiable, that tracks the position of user's insertion mark (the flashing "|" line while typing) in both fields, mirrors them, then, once the user types something, mirrors the typed text to the other side, excluding spaces and punctuation marks. Let's take two strings as both sides of the palindrome:

[bards loop] [pools drab]

At this stage both fields are editable input fields. If the user clicks on the left side, between "d" and "s", here how it should look like:

[bard|s loop] [pools| drab]

Now, if the user types in the left field five characters, " mood" (space first), here's how it should look like after:

[bard mood|s loop] [pools|doom drab]

Notice how the space wasn't added in the right field. Space and punctuation marks are not being translated into the 'unactive' field.

I'm not sure what the logic of such code should be like. I need to keep track of:

1. The active field selected by the user.
2. Whether the character in the field is other than a letter.
3. Whether the character typed by the user is other than a letter.
4. Every letter in the string and how it maps onto the other field's string that isn't the same, yet always selects a proper place between two other letters as in the selected field.

Does anybody have an of how I can divide these into smaller, managable tasks so that I could write code needed to accomplish them?

Thank you in advance!

Answer 1

I think you're on the right track with the four points you listed out in your question.

Point 1:

• You need 2 text fields
• You need something to keep track of which text field is currently selected
• You may want to also keep track of where the cursor is in the selected field and what that corresponds to in the other field (may help with point 4)

Point 2/3:

• You want a mechanism for checking characters this is probably a good thing to work on as its own function, things to consider:
  • What is the purpose of allowing spaces in the first place? This may help determine how you design answers to the rest of these questions.
  • Do you need to filter out spaces for adding chars to the opposite field?
  • How do you account for spaces when determining where the cursor is in the "inactive" field?
  • Do you want to display other special characters at all? If not, you need to filter, if so, then handle them the same as spaces.

Point 4:

Without spaces (or other characters) this becomes a simple string reversal. Think about clever ways to handle spaces and special characters and the rest of the problem may be fairly easy.

Hope this helps!