JSFiddle - React, Tailwind, and code Playground

by Ankur Anand

HTML

<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<body>
  <div class="wrapper">


  </div>
</body>

JavaScript

const createDOMFromSring = (domstring) => {
	const div = document.createElement('div');
  div.innerHTML = domstring;
  return div
}

class UpVoteButton {
	constructor() {
  	this.state = {isUpVoted: false}
  }
  
  changeUpVotedText() {
  	const upVotedText = this.elem.querySelector(".upvote-text");
    this.state.isUpVoted = !this.state.isUpVoted;
    upVotedText.innerHTML = this.state.isUpVoted ? 'Upvote': 'Cancel'
  }
  
  render() {
  	this.elem = createDOMFromSring(`
  	<button class='upvote-btn'>
    <span class='upvote-text'>Upvote</span>
    <span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
    </button>
  `)
  this.elem.addEventListener('click', this.changeUpVotedText.bind(this))
  return this.elem;
  }
}

class DownVoteButton {
	constructor() {
  this.state = {
  isDownVoted: false
  	}
  }
  
  changeDownVotedText() {
  	const downVotedElem = this.elem.querySelector(".downvote-text");
    this.state.isDownVoted = !this.state.isDownVoted;
    downVotedElem.innerHTML = this.state.isDownVoted ? 'Cancel': 'Downvote'
  }
  render() {
  this.elem = createDOMFromSring(`
    <button class="downvote-btn">
    <span class="downvote-text">Downvote</span>
    <span><i class="fa fa-thumbs-down" aria-hidden="true"></i></span>
    </button>
    `)
    this.elem.addEventListener("click", this.changeDownVotedText.bind(this))
    return this.elem
  }
}

// as render() method now returns an Object of HTMLDivElement
// it cannot be appended like innerHTML, instead use DOM
// API to append it
const wrapper = document.querySelector(".wrapper");
const upVoteButton = new UpVoteButton();
wrapper.appendChild(upVoteButton.render())

const downVoteButton = new DownVoteButton();
wrapper.appendChild(downVoteButton.render())