JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<input type="text" id="title" />
<input type="text" id="url" />
<input type="text" id="hashtags" />

<div id="output"></div>

CSS

.too-long {
  color: red;
}

JavaScript

function updateOutput() {
	var tweet = title.value + ' https://t.co/0123456789';
  if(hashtags.value !== '') {
  	tweet += ' ' + hashtags.value;
  }
  var tweetLength = tweet.length;
  if(tweetLength > 280) {
    output.classList.add('too-long');
  } else {
  	output.classList.remove('too-long');
  }
  output.innerHTML = tweet + ' (' + tweetLength + ')';
}

title.onchange = function() {
	updateOutput();
};
hashtags.onchange = function() {
	updateOutput();
};