Upvote

Why needed react

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

class UpVoteButton {
  render() {
    return `
  	<button class='upvote-btn'>
    <span class='upvote-text'>Upvote</span>
    <span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
    </button>
  `
  }
}

class DownVoteButton {
  render() {
    return `
 			<button class="downvote-btn">
      <span class="downvote-text">Downvote</span>
      <span><i class="fa fa-thumbs-down" aria-hidden="true"></i></span>
    	</button>
`
  }
}

// using this class to build the upVote and DownVote button and inserting them 
// into the dom
const wrapper = document.querySelector(".wrapper");
const upVoteButton = new UpVoteButton();
wrapper.innerHTML = upVoteButton.render()

const downVoteButton = new DownVoteButton();
wrapper.innerHTML += downVoteButton.render()