All solutions

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

I am very pleased with how I made the design look identical with the expected result.

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

I would like with making sliding images that do not display partially when the screen width is suddenly changed.

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

I am most proud of how I took control of the rendering of the stages of the form and the javascript implementation of the final data to be set to the backend

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

I encountered the challenge of creating a responsive form stage, I overcame that by doing a light reading on when to use grid and when to use flexbox.

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

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

I am most proud of my javascript. This was by far the most difficult project I have taken on thus far and I happen to complete it in the shortest time compared to other projects I have taken on thus far.

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

I encountered challenges trying to use an HTML Template tag. It wouldn't work as expected so I resolved to take a "react" like approach using vanilla javascript by writing functions to create and handle element behaviour and program flow

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

I would like help with creating the glow effect shown in the design folder. I would also like help getting my circular element to have the gradient effect in the design folder.

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

I am most proud of my filtering algorithm capable of automatically updating and controling the filter section

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

I am most pleased with how I used grid and flexbox to control the placement of elements in the html file to make the order as similar as possible. Next time I'll do a better job of placing the background images.

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

I would like help with the placement of the background images on the page.

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

I am most proud of how I implemented most feature (except the arrows) without any online help. It proves that I am making great progress.

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

The only challenge I encountered was implementing the two arrows in css only. A quick search online solved that problem for me.

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

I am most proud of how I followed the "Don't Repeat Yourself" rule when writing my Javascript. As Liked my solution to finding the time to from a randomly generated date and time.

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

I encountered the challenge of utilizing the display Flex property. I solved it by trying multiple use cases. I will master it eventually.