Review One: Word History

The next mission pulls together everything we have covered so far.

You will revise the code from the prior dynamic kids exercise to maintain and display a history of words "entered" by the user, meaning they actually hit the 'Enter' key.

No new concepts are required, but we will demonstrate the Matrix observer mechanism as a diagnostic tool. It does more, but we have not needed it for our missions so far.

lesson objective

Solidify our grasp of Matrix/mxWeb basics by implementing a modest RFE:

• keep track of spelling bee words as they are entered;
• display them in a separate view as they are accumulated;
• allow the user to delete a word from the history simply by clicking it in the history list.

mission implementation.

Feel free to tackle this on your own, without our guidance. But here is how we would proceed, holding back details you should be able to handle:

step one: tracking the history

• add a custom "history" property to the input widget named :word-to-spell;
• initialize the custom property with an input Cell starting at nil;
• add an onchange handler to the widget :word-to-spell that:
  • does nothing if the value entered is blank or already in the history; ie, no blanks, no dups. Else
  • adds the novel word to the history.

step two: the history display

• add a DIV column to display the history:
  • create a formula that:
    • navigates to the widget :word-to-spell; and
    • creates a SPAN for each word.

step three: allow selective user delete from history

• add an onclick handler to each SPAN that:
  • navigates back to :word-to-spell; and
  • destructively deletes the clicked word from the history.

helpful notes:

• note that the deletion is from the actual history, not just the display;
• this is not ReactJS: the onchange handler will not fire on each keystroke;
• to determine the word associated with a history span, use (first (mget me :kids)). ie, the SPAN content becomes the first Matrix kid of a SPAN. This is our best approximation of HTML structure in which the content of a SPAN is a child;
• to execute the deletion, some actual code to round out:

(md/mswap! [find the :words-to-spell widget] :entered-words
  (fn [words]
    (remove #{[the SPAN word]} words)))