JSFiddle - React, Tailwind, and code Playground

by alex bollbach

HTML

<link rel="stylesheet" type="text/css" href="/style.css">

<div id="mainText" contenteditable="true">
This is an <span class="redHighlight">editable</span> <span class="redHighlight">paragraph</span></div>
<div style="width:100%"></div>
<br />
<button id="submitText">submit</button>

<div id="console-log"></div>

CSS

.redHighlight {
	color: red;
}


#mainText {

	width:100%;
}


#submitText {
	width : 100%;
}

.container {
 background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}

JavaScript

function alog(title, string) {
console.log(title + ": " + JSON.stringify(string));
}

function showMissingWords(missingWords, userWords) {

	console.log('missing words: ' + missingWords);
  
  userWords.forEach(function(word) {

        //word = "paragraph";
        var wasMissing = missingWords.indexOf(word) > -1;

        console.log('word: ' + word);
		console.log('wordLength: ' + word.length);

        if (wasMissing) {
          console.log('was missing');
        } else {
            console.log('was not missing');
        }

      console.log("\n---");
  });
}

var userWordsText = $('#mainText').text();
// userWordsText = "this is an editable paragraph";

alog('userWordsText', userWordsText);
var userWords = userWordsText.split(' ');

console.log('userWords: ' + userWords);
console.log('userWords length: ' + userWords.length);


var missingWords = ["editable", "paragraph"];


userWords.forEach(word => {

  alog("word", word);
  console.log('length: ' + word.length);
  
  if (word == 'paragraph') {
    console.log('found word in initial loop: ' + word);
  }
  
});
console.log('---')
// showMissingWords(missingWords, userWords);
 

console.log('---')