update html, css, js and readme file

[Gasta-Marc-Oliver]

Hello, I already updated my all the files as well as the readme please kindly check it. Thank you!

[netlify[bot]]

✅ Deploy Preview for gasta-marc ready!

Name	Link
🔨 Latest commit	5f62f7d7a9686b5208404963d0d79456557915a2
🔍 Latest deploy log	https://app.netlify.com/sites/gasta-marc/deploys/6644b21e8a855b0008adda9a
😎 Deploy Preview	https://deploy-preview-8--gasta-marc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[go-christianharrel]

https://github.com/PUP-BSIT/exercise-13-sixth_sense/blob/b7e45fab95a2bf462395992792fd7c43f392f473/gasta_marcoliver/index.html#L159

Your javascript file name seems wrong. change it to script.js

[go-christianharrel]

https://github.com/PUP-BSIT/exercise-13-sixth_sense/blob/b7e45fab95a2bf462395992792fd7c43f392f473/gasta_marcoliver/index.html#L93-L102

I suggest you make it like this:

      <p>
        I think the reason for the f-t-f class is because of cruciality 
        of the lesson. It might be hard for us to learn it if we did an class.
        For me, online class can be abused in a lot of ways. As the teacher 
        can't see as or observe us during the session. On the other hand, 
        it is helpfull especially to those persons who lives far from 
        the campus. Personally, I prefer face to face classes in this subject 
        because I think I learn more if its face to face rather than online 
        classes. As in online classes I can be very easily distracted 
        from other things.
      </p>

[go-christianharrel]

Suggested code on your javascript.

// Applied guard clauses for input validation and to prevent unnecessary code execution.
// Utilized querySelector instead of getElementById for more flexible element selection.
// Utilized querySelector instead of getElementById

Click here to view the guidelines.

function validate_input() {
    const input_field = document.querySelector("#name_input");
    const comment_field = document.querySelector("#comment_input");
    const submit_btn = document.querySelector("#submit_btn");

    // Guard clause to disable submit button if input fields are empty
    if (
      input_field.value.trim().length === 0 ||
      comment_field.value.trim().length === 0
    ) {
      submit_btn.disabled = true;
      submit_btn.classList.add("disabled");
      return;
    }

    submit_btn.disabled = false;
    submit_btn.classList.remove("disabled");
  }

  let comments = [];

  function render_comments(sort_order = "asc") {
    const comment_list = document.querySelector("#comment-list");
    comment_list.innerHTML = "";

    const sorted_comments = comments.slice().sort((a, b) => {
      const date_a = new Date(a.date);
      const date_b = new Date(b.date);
      return sort_order === "asc" ? date_a - date_b : date_b - date_a;
    });

    sorted_comments.forEach((comment) => {
      const comment_element = document.createElement("div");
      comment_element.classList.add("comment");
      comment_element.innerHTML = `
        <h4>${comment.name}</h4>
        <p>${comment.text}</p>
        <small>${comment.date.toLocaleString()}</small>`;
      comment_list.appendChild(comment_element);
    });
  }

  document.querySelector("#comment_form").addEventListener("submit", (e) => {
    e.preventDefault();
    const name_input = document.querySelector("#name_input");
    const comment_input = document.querySelector("#comment_input");

    // Guard clause to prevent submission if input fields are empty
    if (!name_input.value.trim() || !comment_input.value.trim()) {
      return;
    }

    const new_comment = {
      name: name_input.value,
      text: comment_input.value,
      date: new Date(),
    };

    comments.push(new_comment);

    name_input.value = "";
    comment_input.value = "";

    render_comments(document.querySelector("#sort_order").value);
  });

  document.querySelector("#sort_order").addEventListener("change", () => {
    render_comments(document.querySelector("#sort_order").value);
  });

  render_comments();

[netlify[bot]]

✅ Deploy Preview for gasta-marc ready!

Name	Link
🔨 Latest commit	7b612a1de41ff1e18f9949901b8c47b25663056a
🔍 Latest deploy log	https://app.netlify.com/sites/gasta-marc/deploys/6644b5cff400b400075a4cb1
😎 Deploy Preview	https://deploy-preview-8--gasta-marc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Gasta-Marc-Oliver]

Thank you @go-christianharrel!