todo-list familiars

todo.js

function loadFont(container) {
  const familiarsFont = new FontFace(
    "Junction Regular",
    "url(https://cors-anywhere.herokuapp.com/https://cdn.discordapp.com/attachments/617372365520896027/892619268854792202/FamIo8.ttf)"
  );
  familiarsFont
    .load()
    .then(loaded_face => document.fonts.add(loaded_face))
    .catch(() =>
      console.log(
        "visit https://cors-anywhere.herokuapp.com/corsdemo to get access"
      )
    );
}

function setupStyleSheet() {
  const oldStyleSheet = document.getElementById("task-style");
  if (oldStyleSheet) return;
  const styles = `
    #task-list {
        position: absolute;
        left: 1rem;
        top: 1rem;
        display: flex;
        flex-direction: column;
        width: 25%;
        font-family: Junction Regular;
        font-size: 32px;
    }
    #task-list .reset-button {
        width: 50%;
        padding: 0.5rem 0;
        margin: 1rem 0;
        align-self: center;
        font-family: Junction Regular;
        font-size: 32px;
    }`;
  const styleSheet = document.createElement("style");
  styleSheet.type = "text/css";
  styleSheet.innerHTML = styles;
  styleSheet.setAttribute("id", "task-style");
  document.head.appendChild(styleSheet);
}

function resetTasks() {
  const checkboxes = document.querySelectorAll("#task-list input");
  checkboxes.forEach(checkbox => {
    checkbox.checked = false;
  });
}

function setupTasks(tasks = []) {
  const container = document.createElement("div");
  container.setAttribute("id", "task-list");
  container.insertAdjacentHTML(
    "beforeend",
    `
  <div>
    ${tasks
      .map(
        (task, i) => `<div>
        <input type="checkbox" id="task${i}">
        <label id="task-label${i}">${task}</label>
      </div>`
      )
      .join("")}
    <button class="reset-button">Reset</button>
  </div>`
  );
  const oldContainer = document.getElementById("task-list");
  if (oldContainer) oldContainer.replaceWith(container);
  else {
    loadFont(container);
    document.body.appendChild(container);
  }
  document
    .querySelector("#task-list .reset-button")
    .addEventListener("click", resetTasks);
}

function setup() {
  setupStyleSheet();
  const tasks = ["get 2 flasks", "lemonade"];
  setupTasks(tasks);
}