feat: refine ui ux

bearmentor-1 · Apr 2, 2024 · 5c2172c · 5c2172c
1 parent e9c827e
commit 5c2172c
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 51 deletions.
diff --git a/contact/index.html b/contact/index.html
@@ -3,15 +3,27 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Contact Details</title>
+    <title>Address Book - Contact Details</title>
     <link rel="stylesheet" href="/index.css" />
   </head>
   <body>
-    <h1>Contact Details</h1>
+    <header>
+      <h1>Address Book</h1>
+      <nav>
+        <ul>
+          <li>
+            <a href="/">Dashboard</a>
+          </li>
+          <li>Contact Details</li>
+        </ul>
+      </nav>
+    </header>
 
-    <div id="contact-container">
-      <!-- One Contact Data -->
-    </div>
+    <main>
+      <div id="contact-container">
+        <!-- One Contact Data -->
+      </div>
+    </main>
 
     <script src="/storage.js"></script>
     <script src="index.js"></script>

diff --git a/contact/index.js b/contact/index.js
@@ -12,22 +12,27 @@ function renderContactById() {
   const id = getCurrentContactId();
   const contact = loadContactById(id);
 
+  if (!contact) {
+    contactContainerElement.innerHTML = "<p>Contact not found</p>";
+    return;
+  }
+
   contactContainerElement.innerHTML = `
 <h2>${contact.fullName}</h2>
 <p>${contact.email}</p>
 <p>${contact.phone}</p>
 <div>
-  <button onclick="renderContactEditFormById(${contact.id})">Edit</button>
+  <button onclick="renderEditContactFormById(${contact.id})">Edit</button>
   <button onclick="deleteContactById(${contact.id})">Delete</button>
 </div>
   `;
 }
 
-function renderContactEditFormById(id) {
+function renderEditContactFormById(id) {
   const contact = loadContactById(id);
 
   contactContainerElement.innerHTML = `
-  <form id="edit-contact-form" method="post">
+<form id="edit-contact-form" method="post">
   <div>
     <label for="full-name">Full name:</label>
     <input
@@ -61,9 +66,38 @@ function renderContactEditFormById(id) {
   </div>
   <button type="submit">Save</button>
 </form>`;
+
+  const editContactFormElement = document.getElementById("edit-contact-form");
+
+  editContactFormElement.addEventListener("submit", editContact);
 }
 
-function editContactById(id) {}
+function editContact(event) {
+  event.preventDefault();
+  const contactFormData = new FormData(event.target);
+
+  const contacts = loadContacts();
+
+  const newContact = {
+    id: getCurrentContactId(),
+    fullName: contactFormData.get("fullName"),
+    email: contactFormData.get("email"),
+    phone: contactFormData.get("phone"),
+    age: Number(contactFormData.get("age")),
+  };
+
+  // Update by using map, to find by id, not adding a new one
+  const updatedContacts = contacts.map((contact) => {
+    if (contact.id === newContact.id) {
+      return newContact;
+    } else {
+      return contact;
+    }
+  });
+
+  saveContacts(updatedContacts);
+  renderContactById();
+}
 
 function deleteContactById(id) {
   const contacts = loadContacts();

diff --git a/index.html b/index.html
@@ -7,53 +7,69 @@
     <link rel="stylesheet" href="/index.css" />
   </head>
   <body>
-    <h1>Address Book</h1>
+    <header>
+      <h1>Address Book</h1>
+      <nav>
+        <ul>
+          <li>
+            <a href="/">Dashboard</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
 
-    <form id="search-contacts" method="get">
-      <input
-        id="search-input"
-        type="text"
-        name="q"
-        placeholder="Enter keyword..."
-      />
-      <button type="submit">Search</button>
-    </form>
-
-    <hr />
-
-    <form id="add-contact-form" method="post">
-      <div>
-        <label for="full-name">Full name:</label>
+    <main>
+      <form id="search-contacts" method="get">
         <input
-          id="full-name"
-          name="fullName"
+          id="search-input"
           type="text"
-          placeholder="Elon Musk"
-        />
-      </div>
-      <div>
-        <label for="email">Email address:</label>
-        <input
-          id="email"
-          name="email"
-          type="email"
-          placeholder="[email protected]"
+          name="q"
+          placeholder="Enter keyword..."
         />
-      </div>
-      <div>
-        <label for="phone">Phone number:</label>
-        <input id="phone" name="phone" type="phone" placeholder="+1234567890" />
-      </div>
-      <div>
-        <label for="age">Age:</label>
-        <input id="age" name="age" type="number" placeholder="30" />
-      </div>
-      <button type="submit">Add Contact</button>
-    </form>
+        <button type="submit">Search</button>
+      </form>
+
+      <hr />
+
+      <form id="add-contact-form" method="post">
+        <div>
+          <label for="full-name">Full name:</label>
+          <input
+            id="full-name"
+            name="fullName"
+            type="text"
+            placeholder="Elon Musk"
+          />
+        </div>
+        <div>
+          <label for="email">Email address:</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            placeholder="[email protected]"
+          />
+        </div>
+        <div>
+          <label for="phone">Phone number:</label>
+          <input
+            id="phone"
+            name="phone"
+            type="phone"
+            placeholder="+1234567890"
+          />
+        </div>
+        <div>
+          <label for="age">Age:</label>
+          <input id="age" name="age" type="number" placeholder="30" />
+        </div>
+        <button type="submit">Add Contact</button>
+      </form>
 
-    <ul id="contacts-container">
-      <!-- Contacts Data -->
-    </ul>
+      <ul id="contacts-container">
+        <!-- Contacts Data -->
+      </ul>
+    </main>
 
     <script src="/storage.js"></script>
     <script src="/index.js"></script>

diff --git a/index.js b/index.js
@@ -57,6 +57,7 @@ function addContact(event) {
     age: Number(contactFormData.get("age")),
   };
 
+  // Update by adding a new object in the array
   const updatedContacts = [...contacts, newContact];
   saveContacts(updatedContacts);