Responsive Comment Section with CSS and Javascript

What are you most proud of, and what would you do differently next time?

I am most proud of the modularity in my javascript and how I implemented the optionsGenerator function below

function optionsGenerator(parent, chat, forUser = false) {
  const options = document.createElement("div");
  options.classList.add("options");
  if (!forUser) {
    const replyWrapper = document.createElement("div");
    replyWrapper.classList.add("reply", "lineup");
    multipleAppend(replyWrapper, [
      imgCreate("reply icon", replyImage),
      paragraphCreate("", "Reply"),
    ]);
    replyWrapper.addEventListener("click", () => {
      /* `@${chat.dataset["username"]}, ` */
      /* remove any and all tempreply from be4 */
      document.querySelectorAll(".tempReply").forEach((tempReply) => {
        tempReply.parentElement.removeChild(tempReply);
      });
      /* Then continue with normal work flow */
      const replyBox = document.createElement("div");
      replyBox.classList.add("tempReply");
      const img = imgCreate(
        "user image",
        fileChat["currentUser"]["image"]["png"]
      );
      const textarea = document.createElement("textarea");
      textarea.classList.add("tempTextare");
      const reply_btn = document.createElement("button");
      reply_btn.innerText = "REPLY";
      reply_btn.addEventListener("click", () => {
        let newParent = parent;
        if (![...parent.classList].includes("subChat")) {
          newParent = parent.children[1];
        }
        newParent.appendChild(
          chatCreate(
            fileChat["currentUser"]["image"]["png"],
            fileChat["currentUser"]["username"],
            "now",
            textarea.value,
            "0",
            newParent,
            true,
            chat.dataset["username"]
          )
        );
        parent.removeChild(replyBox);
      });
      multipleAppend(replyBox, [img, textarea, reply_btn]);
      parent.appendChild(replyBox);
      textarea.focus()
    });
    options.appendChild(replyWrapper);
  }
  if (forUser) {
    //continue here with the creation of the edit and delete icon
    const deleteWrapper = document.createElement("div");
    const editWrapper = document.createElement("div");
    deleteWrapper.classList.add("delete", "lineup");
    editWrapper.classList.add("edit", "lineup");
    multipleAppend(deleteWrapper, [
      imgCreate("delete icon", deleteImage),
      paragraphCreate("", "Delete"),
    ]);
    multipleAppend(editWrapper, [
      imgCreate("edit icon", editImage),
      paragraphCreate("", "Edit"),
    ]);
    /* Add event listeners */
    deleteWrapper.addEventListener("click", () => {
      parent.removeChild(chat);
    });
    editWrapper.addEventListener("click", () => {
      const edit = chat.children[1];
      const text = edit.innerText;
      if (text) {
        edit.innerText = null;
        const area = document.createElement("textarea");
        area.value = text;
        edit.appendChild(area);
        edit.style["display"] = "grid"
        area.focus();
        const update_btn = document.createElement("button");
        update_btn.innerText = "UPDATE";
        update_btn.addEventListener("click", () => {
          if (edit.children[0].value) {
            chat.children[1].innerHTML = edit.children[0].value;
          }
        });
        edit.appendChild(update_btn);
      }
    });
    options.appendChild(deleteWrapper);
    options.appendChild(editWrapper);
  }
  return options;
}

What challenges did you encounter, and how did you overcome them?

I encountered the challenge of loading the json file with the fetch api. I overcame the problem by using a brief timeout (600ms) before loading the html page

What specific areas of your project would you like help with?

Using the fetch api to read a json file and storing data in a variable