Skip to content

Writing a Vanilla JavaScript Class

Now let's write a class in a separate file. We will use some really useful proposals like the nullish coalescing operator, string templates, private class properties or class getter and setter. All these proposals will be transpiled into JavaScript that runs in mostly each relevant browser out there:

src/amazing-button-vanilla.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
export default class {
  #maximumNumber = 9;
  #button;
  get maximumNumber() {
    return this.#maximumNumber;
  }
  set maximumNumber(value) {
    this.#maximumNumber = value;
    this.#button.innerHTML = `Show number from 1 to ${this.#maximumNumber}`;
  }
  constructor(element) {
    console.debug("Starting Vanilla Button");
    element.style.border = "1px solid red";
    element.style.textAlign = "center";
    this.#button = document.createElement("button");
    this.#button.innerHTML = `Show number from 1 to ${this.#maximumNumber}`;
    this.#button.style.marginTop = "20px";
    this.#button.addEventListener("click", () => {
      resultDiv.innerHTML = Math.floor(Math.random() * this.#maximumNumber);
    });
    element.appendChild(this.#button);
    let resultDiv = document.createElement("div");
    resultDiv.style.border = "1px solid blue";
    resultDiv.style.margin = "20px";
    resultDiv.innerHTML = "No Result";
    element.appendChild(resultDiv);
  }
}

We have to a container in our static HTML file which will be used from our class:

static/index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>CodeCoupler</title>
    <style>
      .test-container {
        width: 400px;
        height: 350px;
        margin: 100px;
        border: 1px solid green;
        float: left;
      }
    </style>
  </head>

  <body>
    <div id="test-container-vanilla" class="test-container"></div>
    <div class="test-container" style="overflow: scroll">
      <%= htmlWebpackPlugin.tags.headTags %>
    </div>
    <div class="test-container" style="overflow: scroll">
      <%- include inc/part.html %>
    </div>
  </body>
</html>

Now let's remove our document.write("Hello World!"); from our index.js and let's use our class:

src/index.js

1
2
3
import { default as MyVanillaApp } from "./amazing-button-vanilla";

new MyVanillaApp(document.getElementById("test-container-vanilla"));

Now you should see a page with a button. Pressing the Button will display a random number from 0 to 9 in the box below.

Let's try our class setter and raise the maximum number to 99:

src/index.js

1
2
3
4
5
6
import { default as MyVanillaApp } from "./amazing-button-vanilla";

let myVanillaInstance = new MyVanillaApp(
  document.getElementById("test-container-vanilla")
);
myVanillaInstance.maximumNumber = 99;

Now the button generate numbers from 0 to 99.