First commit

Lab 7/createcard.js

@@ -0,0 +1,154 @@
+/* Default users in the invitation list */
+let userList = [
+  { shortName: "Alice", fullName: "Alice N. Wonderland" },
+  { shortName: "Bob", fullName: "Bob Malooga" },
+  { shortName: "Charlie", fullName: "Charlie Bucket" },
+];
+
+/* STEP 1:
+ * Update a field of the card preview based on the current value of the
+ * preview-form field. For the preview-form, use the field's .value field.
+ * Find the corresponding preview-X field (i.e., for the preview-form host
+ * field, you should update preview-host's textContent. */
+function updateField(field) {
+  document.querySelector(`#preview-${field.name}`).textContent = field.value;
+}
+
+/* STEP 1:
+ * When the Clear Form button is clicked, set all of the preview-area's
+ * fields back to the default values as given in the HTML file. */
+function defaultPreview() {
+  document.querySelector("#preview-host").textContent = "HOST";
+  document.querySelector("#preview-title").textContent = "TITLE";
+  document.querySelector("#preview-message").textContent = "YOUR MESSAGE HERE";
+  document.querySelector("#preview-date").textContent = "DATE";
+}
+
+/* STEP 2:
+ * Update the preview of the card to show the selected user. Use the
+ * user parameter to search through the userList, trying to match the
+ * shortName field. You should do a case-insensitive match, meaning
+ * the shortName field should be passed to the toLowerCase() function.
+ * Get the preview-guest field and set its textContent to the user's
+ * fullName field. */
+function previewCard(user) {
+  const guestPreview = document.querySelector("#preview-guest");
+  const listUser = userList.find(
+    (listUser) => listUser.shortName.toLowerCase() === user.id
+  );
+  guestPreview.textContent = listUser.fullName;
+}
+
+(function () {
+  // STEP 1:
+  // Get the preview form. For each of the text fields (host, title, message),
+  // add a keyup event listener to call updateField on that field name. For
+  // the date field, use a change event listener to do the same.
+  const form = document.querySelector("#preview-form");
+  const { host, title, message, date } = form;
+  host.addEventListener("keyup", updateField.bind(null, host));
+  title.addEventListener("keyup", updateField.bind(null, title));
+  message.addEventListener("keyup", updateField.bind(null, message));
+  date.addEventListener("change", updateField.bind(null, date));
+
+  // STEP 1:
+  // When the reset-btn button is clicked, call defaultPreview() to restore
+  // the preview fields to their original values.
+  document
+    .querySelector("#reset-btn")
+    .addEventListener("click", defaultPreview);
+
+  // STEP 2:
+  // For each of the existing users in the invitation list, add a click
+  // listener that will put their name into the card preview.
+  // HINT: You can grab all of them and use .forEach:
+  document
+    .querySelectorAll("#guest-list > li")
+    .forEach((userCard) =>
+      userCard.addEventListener("click", previewCard.bind(null, userCard))
+    );
+
+  // STEP 3:
+  // Grab all elements with the "modal" class. When clicked, remove the
+  // "show" class from the target element.
+  const modal = document.querySelector(".modal");
+  modal.addEventListener("click", (event) => {
+    if (event.target === modal) {
+      modal.classList.remove("show");
+    }
+  });
+
+  // STEP 3:
+  // For each of the btn-edit-guest buttons, add a click event listener. When
+  // clicked, get the data-user attribute from the clicked item and find the
+  // guest from the userList with that shortName. Store the guest's fullName
+  // and shortName into the user-form fields and show the modal. Also store
+  // the shortName in the old-short field and stop the event propagation.
+  const userForm = document.querySelector("#user-form");
+
+  document.querySelectorAll(".btn-edit-guest").forEach((btn) => {
+    btn.addEventListener("click", (event) => {
+      event.stopPropagation();
+
+      const dataUser = btn.dataset.user;
+      const listUser = userList.find(
+        (listUser) => listUser.shortName.toLowerCase() === dataUser
+      );
+      userForm["guest-full"].value = listUser.fullName;
+      userForm["guest-short"].value = listUser.shortName;
+      userForm["old-short"].value = listUser.shortName;
+
+      modal.classList.add("show");
+    });
+  });
+
+  // STEP 3:
+  // When the modal form is submitted, user the user-form's old-short field
+  // to find the user from the userList. Also look for the new short-name value
+  // in the userList. If the new short-name is found and it is not the same
+  // user as before (e.g., the new name conflicts with someone else), add the
+  // "invalid" class to the guest-short input and return.
+  //
+  // If the short-name is valid, get the guest-short and guest-full values from
+  // the form and update the user in the userList. Hide the modal.
+  //
+  // BONUS: Update the short name that appears in the guest-list item. Note
+  // that you'll need to first get the item, then access its firstChild. Otherwise,
+  // setting the textContent will accidentally remove the edit button.
+  userForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+
+    const guestFull = userForm["guest-full"].value;
+    const guestShort = userForm["guest-short"].value;
+    const oldShort = userForm["old-short"].value;
+
+    const newId = guestShort.toLowerCase();
+    const oldId = oldShort.toLowerCase();
+
+    const listUserIndex = userList.findIndex(
+      (listUser) => listUser.shortName.toLowerCase() === oldId
+    );
+
+    for (let i = 0; i < userList.length; i++) {
+      const shortNameMatches = userList[i].shortName.toLowerCase() === newId;
+      if (i !== listUserIndex && shortNameMatches) {
+        userForm["guest-short"].classList.add("invalid");
+        return;
+      }
+    }
+
+    userList[listUserIndex].fullName = guestFull;
+    userList[listUserIndex].shortName = guestShort;
+
+    const oldListItem = document.querySelector(`#guest-list > li#${oldId}`);
+    oldListItem.id = newId;
+
+    const newNode = document.createElement("div");
+    newNode.textContent = guestShort;
+    oldListItem.replaceChild(newNode.firstChild, oldListItem.firstChild);
+    oldListItem.firstElementChild.dataset.user = newId;
+
+    userForm["guest-short"].classList.remove("invalid");
+    modal.classList.remove("show");
+  });
+})();