Shitpost generator

by dumptyd

HTML

<div class="container">
  <textarea id="input" placeholder="Type here..."></textarea>
  <textarea id="output" placeholder="Shitpost will show up here..." readonly></textarea>  
</div>

CSS

.container {
  display: flex;
  min-height: 300px;
  height: 100vh;
  flex-direction: column;
}

textarea {
  box-sizing: border-box;
  display: block;
  margin: 1rem;
  padding: 0.5rem;
  font-family: 'Helvetica', 'Arial', serif;
}

#input {
  height: 80px;
}
#output {
  flex: 1;
  margin-top: 0;
}

JavaScript

const $ = document.querySelector.bind(document);
const [input, output] = [$('#input'), $('#output')];

input.addEventListener('input', function(e) {
	const { value } = event.target;
  const shitpost = value.split(' ').filter(v => v).map(word => {
    let ret = word.split('').join('  ');
    ret += '\n' + word.slice(1).split('').join('\n');
    return ret;
  }).join('\n\n').toUpperCase();
  output.value = shitpost;
});