JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<textarea class='input'></textarea>
<button id='say'>
go
</button>
<div id='text'>

</div>

CSS

div {
  font-size: 18px;
  line-height: 25px;
  font-family: calibri;
}

JavaScript

$(function() {
  /*var text = $('#text');
  function one() {
  	var firstWord = "home_community_activities";
    var underscore = "_";
    var period = ".";
  	var r = "r";
    var ids = ['how_often', 'with_child', 'comment', 'how_important'];
    var ar = [];
    for(var i = 1; i < 31; i++) {
    	var word = '';
    	for(var j = 0; j < ids.length; j++) {
      	word = firstWord;
        word += period;
        word += r;
        word += i;
        word += period;
        word += ids[j];
        ar.push(word);
      }
      
    }
    return ar;
  }
  function printArray(array) {
  	for(var i = 0; i < array.length; i++) {
    	$(text).append('<div>' + array[i] + '</div>');
    }
  }
  $('#text').text(printArray(one()));
  */
  $('#say').on('click', function() {
  	two($('.input').val());
  });
  three();
});

function two(words) {
  var split = words.split('home');
  for(var i = 0; i < split.length; i++) {
  	word = 'home' + split[i];
    $('#text').append('<div class="red">"' + word + '",</div>');
  }
}

function three() {
	var ar = [
  	"Q08_LeaveSitterHowOft ",
    "Q08_LeaveSitterWithChild ",
    "Q08_LeaveSitterComm ",
    "Q08_LeaveSitterHowImp ",
    "Q09_PlayYardHowOft ",
    "Q09_PlayYardWithChild ",
    "Q09_PlayYardComm ",
    "Q09_PlayYardHowImp ",
    "Q10_WalkHowOft ",
    "Q10_WalkWithChild ",
    "Q10_WalkComm ",
    "Q10_WalkHowImp ",
    "Q11_GrocStoreHowOft ",
    "Q11_GrocStoreWithChild ",
    "Q11_GrocStoreComm ",
    "Q11_GrocStoreHowImp ",
    "Q12_ErrandHowOft ",
    "Q12_ErrandWithChild ",
    "Q12_ErrandComm ",
    "Q12_ErrandHowImp ",
    "Q13_PlayParkHowOft ",
    "Q13_PlayParkWithChild ",
    "Q13_PlayParkComm ",
    "Q13_PlayParkHowImp ",
    "Q14_PlaneTripHowOft ",
    "Q14_PlaneTripWithChild ",
    "Q14_PlaneTripComm ",
    "Q14_PlaneTripHowImp ",
    "Q15_CarTripHowOft ",
    "Q15_CarTripWithChild ",
    "Q15_CarTripComm ",
    "Q15_CarTripHowImp ",
    "Q16_RestHowOft ",
    "Q16_RestWithChild ",
    "Q16_RestComm ",
   ...