<div class="wrapper"> </div>
const createDOMFromString = domstring => { const div = document.createElement("div"); div.innerHTML = domstring; return div; }; class Component { constructor(props) { this.props = props; } setState(state) { const oldElem = this.elem; this.state = state; this._renderDOM(); if (this.onStateChange) this.onStateChange(oldElem, this.elem); } _renderDOM() { this.elem = createDOMFromString(this.render()); if (this.onClick) { this.elem.addEventListener("click", this.onClick.bind(this)); } return this.elem; } } class UpVoteButton extends Component { constructor(props) { super(props); this.state = { isUpVoted: false }; } onClick() { this.setState({ isUpVoted: !this.state.isUpVoted }); } render() { return ` <button class='upvote-btn' style="background: ${this.props.bgColor}"> <span class='upvote-text'>${ this.state.isUpVoted ? "Cancel" : "UpVote" }</span> <span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span> </button> `; } } class DownVoteButton extends Component { constructor(props) { super(props); this.state = { isDownVoted: false }; } onClick() { this.setState({ isDownVoted: !this.state.isDownVoted }); } render() { return ` <button class="downvote-btn" style="background: ${this.props.bgColor}"> <span class="downvote-text">${ this.state.isDownVoted ? "Cancel" : "Downvote" }</span> <span><i class="fa fa-thumbs-down" aria-hidden="true"></i></span> </button> `; } } const componentMount = (component, container) => { container.appendChild(component._renderDOM()); component.onStateChange = (oldElem, newElem) => { container.insertBefore(newElem, oldElem); container.removeChild(oldElem); }; }; const wrapper = document.querySelector(".wrapper"); const upVoteButton = new UpVoteButton({ bgColor: "green" }); const downVoteButton = new DownVoteButton({ bgColor: "red" }); componentMount(upVoteButton, wrapper); componentMount(downVoteButton, wrapper);