HTML/CSS - Javascript Code Coach Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
  <head>
    <title>JS Coach</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/mocha@8.0.1/mocha.css"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prettier@2.0.5/standalone.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prettier@2.0.5/parser-babel.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chai@4.2.0/chai.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mocha@8.0.1/mocha.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify@2.0.12/dist/purify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

css

:root {
  --clr-prm:  #212121;
  --clr-prm-light:  #484848;
  --clr-prm-dark:  #000;
  --clr-scd:  #ccff90;
  --clr-scd-light:  #ffffc2;
  --clr-scd-dark:  #99cc60;
  --on-prm:  #fff;
  --on-scd:  #000;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  background-color: var(--clr-prm);
  height: 100vh;
}
button,
input,
select {
  border: none;

(() => {
  window.addEventListener("load", async () => {
    // import to access Github Rest API
    const { request } = await import("https://cdn.pika.dev/@octokit/request");
    // Github repo
    const owner = "SusuTawar";
    const repo = "JsCodeCoach";
    // prettify code when lost focus
    const code = document.querySelector("code");
    code.addEventListener("blur", (e) => pretty(e.target));
    // take all challenges from github
    const challenges = await fetchTests(request, owner, repo);
    // variable for chosen challenge
    let ch;
    // populate dropdown with challanges
    const selectChallenges = document.querySelector("#sl-ch");
    if (challenges)
      for (const challenge of challenges) {
        const option = document.createElement("option");
        option.value = challenge.id;
        option.innerText = DOMPurify.sanitize(
          challenge.filename
            .slice(0, challenge.filename.lastIndexOf("."))

BROWSER

Console