<body>
<div class="wrapper">
</div>
</body>
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())