JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<div id="input-container">
  <textarea id="input"></textarea>
</div>
<div id="output-container">
  <ol id="output"></ol>
</div>

CSS

body {
  font-family: helvetica;
}

#input-container {
  display: block;
  width: 47.5%;
  position: absolute;
  right: 50%;
  top: 0;
  left: 0;
  bottom: 0;
}

#input {
  font-size: 18px;
  padding: 6%;
  width: 100%;
  height: 92%;
  border: none;
  line-height: 20px;
  outline: none;
}

#output-container {
  position: absolute;
  right: 0;
  top: 0;
  left: 52.5%;
  bottom: 0;
  list-style: number;
  background: #666;
  color: #fff;
  overflow: scroll;
}

#output {
  padding-right: 20px;
}

#output li {
  margin-bottom: 2px;
}
#output li:nth-child(3n+3) { 
  margin-bottom: 24px;
}

JavaScript

var specialInterrogatories = [
	'State all facts that support YOUR contention that :question.',
	'Identify any and all documents that support YOUR contention that  :question.',
	'Identify by name, address, and telephone number each person who can support YOUR contention that :question.'
];

var $input = $('#input'),
	$output = $('#output');
		
$input.bind('blur focus change keyup keydown', function () {
	var interrogatories = [];

	$(this).val().trim().split('\n').forEach(function (question) {
		if (!question) return;
		
		specialInterrogatories.forEach(function (template) {
			interrogatories.push(template.replace(':question', question));
		});
	});

	interrogatories.map(function (item) {
		return '<li>' + item + '</li>';
	});

	$output.html(interrogatories.map(function (item) {
		return '<li>' + item + '</li>';
	}).join(''));
});