fetch("/data/sketchbook.json")
  // (B) RETURN DATA AS JSON
  .then((res) => res.json())
  .then((data) => {
    // Create Images Function
    function createSubmission(i) {
      let name = data[i].username;
      let date = data[i].date;
      let title = data[i].title;

      // Submission Wrapper
      var container = document.createElement("div");
      container.setAttribute("class", "images-containers");

      // Original Image Link
      var preview_link = document.createElement("a");
      preview_link.href = "/images/sketchbook/submission_" + i + ".png";
      preview_link.setAttribute("class", "preview-links spotlight");
      preview_link.setAttribute("title", title);

      // Image Thumbnail
      var image_link = document.createElement("img");
      image_link.src = "/images/sketchbook/thumbnails/submission_" + i + ".jpg";
      image_link.setAttribute("loading", "lazy");

      // Image Caption
      var caption = document.createElement("span");
      caption.innerText = "By" + " " + name + " " + "(" + date + ")";
      caption.setAttribute("class", "gallery-captions");

      // Attach images to preview links
      preview_link.appendChild(image_link);

      // Attach other elements to container
      container.appendChild(preview_link);
      container.appendChild(caption);

      // Add container to gallery
      document.getElementById("gallery").appendChild(container);
    }

    for (let i = 0; i < data.length; i++) {
      createSubmission(i);
    }
  });