Recoding Coding Challenge #38: Word Interactor by the Coding Train

https://thecodingtrain.com/challenges/38-word-interactor

​

Sample input text from Pickled Watermelon Rind recipe by Just One Cookbook

https://www.justonecookbook.com/pickled-watermelon-rind/

​

​

version 1.2

​

Clicking on a word will replace it with rainbow and highlight it in a random color. The word will then appear inside the word inventory.

​

Clicking on the most recently changed rainbow will randomly change the rainbow into one of the words from the word inventory. 

​

*/

​

let textfield;

let output;

let submit;

​

let words;

let rainbowArray = [];

let span

​

let currentRainbow

let index

let inventoryString

let wordInventory

let inventory

​

let prev

let next

function setup() {

  noCanvas();

  textfield = select("#input");

  output = select('#output');

  submit = select("#submit");

  submit.mousePressed(newText);

  colorMode(HSB)

  inventory = select('#inventory')

}

​

function newText(){

  // createP("Click on words to add to inventory.")

  let s = textfield.value();

  words = s.split(/(\W+)/);

  for(let i=0; i<words.length; i++){

    span = createSpan(words[i]);

    span.parent(output); 

    if(/\w+/.test(words[i])){

      span.mousePressed(highlight) 

    }

  }

  createP("Word Inventory:")

  output.mouseReleased(updateInventory)

  //cant use span or currentRainbow since already bound to something. even tried mousereleased for span and didnt work

​

}

​

​

function highlight(){

  rainbowArray.push(this.html())

  i = rainbowArray.length

​

  currentRainbow = this.html('rainbow');

  let colr = color(random(0, 180), 50, 100)

  this.style('background-color',colr)

  // console.log(rainbowArray)

  // console.log(currentRainbow.elt)

  currentRainbow.mousePressed(revert)

  prev = rainbowArray.length

  // next = prev-1

}

​

​

function updateInventory(){

  if (prev != next){

    spanArray = createSpan(rainbowArray[rainbowArray.length-1]);

    let spanSpace = createSpan(' ');

  }

  next=prev

​

  // inventoryString = rainbowArray.join(' ')

  // console.log(inventoryString)

}

​

​

​

function revert(){

  index = int(random(rainbowArray.length))

  currentRainbow.elt.textContent=rainbowArray[index];

  // console.log(index, currentRainbow.elt)

}

​

​