Skip to content

Importing CSS

Now we create a stylesheet file. As in the JavaScript files we will use some really useful CSS proposals like nesting classes and variables. All these proposals will be transpiled into CSS that runs in mostly every relevant browser out there:

src/amazing-button.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
:root {
  --my-color: #f30000;
}
.amazing-button {
  & .card-header {
    color: var(--my-color);
  }
  & .card-title {
    text-decoration: underline;
  }
}

This time we will just modify our last JavaScript file and add one line:

src/amazing-button-bootstrap.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
import $ from "jquery";
import htmlTemplate from "./amazing-button.html";
import "./amazing-button.css";
export default class {
  #maximumNumber;
  get maximumNumber() {
    return this.#maximumNumber;
  }
  set maximumNumber(value) {
    this.#maximumNumber = value;
  }
  constructor(element) {
    $(element).html(htmlTemplate);
    $(element).css({
      border: "1px solid red",
      textAlign: "center"
    });
    $(element)
      .find("button")
      .on("click", () => {
        this.resultDiv.html(
          Math.floor(Math.random() * (this.#maximumNumber ?? 9))
        );
      });
    this.resultDiv = $(element).find("div.result");
  }
}

Now the title should be red and the text over the button underlined.