PicoBlaze Simulator in JavaScript

[FlatAssembler]

I say so because free hosting of sites involving data access (uploading or downloading media, etc.) are horribly slow and unreliable

I don't mean to upload or download media. I mean to upload and download small text files.

A typical API will be very small: usually taking in JSON, parsing it

The list of examples is already stored in as JSON, it is fetched and parsed as this:

Code:

fetch("https://flatassembler.github.io/PicoBlaze/examples.json")
    .then((response) => {
      if (!response.ok)
        throw new Error(response.status);
      else
        return response.text();
    })
    .then((jsonFromGithub) => {
      const examplesArray = JSON.parse(jsonFromGithub);
      let examplesHTML = examplesArray
                             .map((example) => `
    <div class="exampleCodeLink" onclick="fetchExample('${example.file_name}')">
      <img
        src="${example.image}"
        alt="${example.image_alt}"
      />${example.name}
    </div>
        `).join("") + `
    <div class="exampleCodeLink" style="display: flex">
      <div class="callForMoreExamples">
      Maybe you'd like to try <a href="https://flatassembler.github.io/Duktape.zip">my examples of x86 assembly</a>,
      that <a href="https://flatassembler.github.io/AEC_specification.html#HowToCompile">AEC compiles</a> to?
      </div>
    </div>
    <div class="exampleCodeLink" style="display: flex">
      <div class="callForMoreExamples">
        Have some example you would like to add here?
        <a
          href="https://github.com/FlatAssembler/PicoBlaze_Simulator_in_JS/issues"
          >Contact me on GitHub</a
        >!
      </div>
    </div>
    <div style="width: 1px; flex-shrink: 0">
      <!--
          Because, apparently, CSS ignores the right-margin on flex
          elements that cause overflow.
     -->
    </div>
      `;
      document.getElementById("examples").style.justifyContent = "initial";
      document.getElementById("examples").style.alignItems = "initial";
      document.getElementById("examples").innerHTML = examplesHTML;
    })
    .catch((error) => {
      document.getElementById("fetchingExamples").innerHTML =
          "Failed to fetch the examples JSON from GitHub: " + error;
    });