Modern Vanilla.js Example

you can write apps without frameworks!

by Jeremy Likness

HTML

<div id="app">
</div>

CSS

body {
  font-family: sans-serif, arial, helvetica;
}

button {
  cursor: pointer;
  margin-top: 1em;
  padding: 1em;
  border-radius: 50%;
}

div.post {
  border-top: solid black 2px;
}

h1 {
  width: 95%;
  font-size: 1.5em;
  background: lightgray;
  padding: 0.2em;
  text-align: justify;
}

p {
  margin-left: 2em;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: gray;
  color: #fff;
  text-align: center;
  padding: 5px;
  margin-left: -5px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltiptext:hover {
  visibility: visible;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

JavaScript

class Wrapper {
  constructor(element, text, display = true) {
    this.element = document.createElement(element);
    this.element.innerHTML = text;
    this.display = !display;
    this.toggleDisplay();
  }
  click(val) {
    this.element.addEventListener("click", () => val());
    return this;
  }
  showSelectable() {
    this.element.style.cursor = "pointer";
    return this;
  }
  addClass(className) {
    this.element.classList.add(className);
    return this;
  }
  toggleDisplay() {
    this.display = !this.display;
    this.element.style.display = this.display ? "" : "none";
    return this;
  }
  appendChild(child) {
    this.element.appendChild(child.element);
    return this;
  }
  createChild(element, text, display = true) {
    var wrapper = new Wrapper(element, text, display);
    this.appendChild(wrapper);
    return this;
  }
  static generate(element, text, display = true) {
    return new Wrapper(element, text, display);
  }
}

class AnchorWrapper extends Wrapper {
  constructor(href, text, target = "_blank") {
    super("a", text);
    this.element.href = href;
    this.element.target = target;
  }
  static generate(href, text, target = "_blank") {
    return new AnchorWrapper(href, text, target);
  }
}

const renderPost = (post, user) => {
  const bodyDiv = Wrapper.generate("div", "", false)
    .createChild("p", post.body)
    .appendChild(Wrapper.generate("p", user.username).addClass("tooltip")
      .appendChild(Wrapper.generate("span", `${user.name} `)
        .appendChild(AnchorWrapper.generate(`mailto:${user.email}`, user.email))
        .createChild("br", "")
        .appendChild(AnchorWrapper.generate(
          `https://maps.google.com?q=${user.address.geo.lat}, ${user.address.geo.lng}`,
          "🌎 Locate"))
        .addClass("tooltiptext")));
  return Wrapper.generate("div", "")
    .addClass("post")
    .appendChild(Wrapper.generate("h1", `${user.username} &mdash; ${post.title}`)
      .showSelectable()
      .click(() =>...