first commit with existing project files

app.js

@@ -0,0 +1,180 @@
+import {User} from './models/User.js';
+import {Address} from "./models/Address.js";
+import {Geo} from "./models/Geo.js";
+import {Company} from "./models/Company.js";
+
+const usersTab = [];
+
+const contactList = document.getElementById('contact-list');
+const loadBtn = document.getElementById('load-contacts');
+const contactForm = document.getElementById('contact-form');
+
+function fetchUsers(limit) {
+    return fetch(`https://jsonplaceholder.typicode.com/users?_limit=${limit}`)
+        .then(response => response.json())
+        .then(data => data.forEach(user => {
+                addUserToTab(user);
+            })
+        );
+
+}
+
+function addUserToTab(user) {
+    const newUser = new User(
+        user.id,
+        user.name,
+        user.username,
+        user.email,
+        user.address,
+        user.phone,
+        user.website,
+        user.company
+    );
+
+    if (!usersTab.some(existingUser => existingUser.email === user.email)) {
+        usersTab.push(newUser);
+        createContactItem(user);
+    }
+}
+
+function createEditButton() {
+    const btn = document.createElement('button');
+    btn.classList.add('btn');
+    btn.classList.add('btn-secondary');
+    btn.innerHTML = `<i class="bi bi-pencil-square"></i>`;
+    btn.style.margin = '0 3px';
+    return btn;
+}
+
+function createDeleteButton() {
+    const btn = document.createElement('button');
+    btn.classList.add('btn');
+    btn.classList.add('btn-danger');
+    btn.innerHTML = `<i class="bi bi-trash"></i>`;
+    btn.style.margin = '0 3px';
+    return btn;
+}
+
+function createContactItem(user) {
+
+    const editBtn = createEditButton();
+    const deleteBtn = createDeleteButton();
+
+    const card = document.createElement('div');
+
+    const li = document.createElement('li');
+    li.classList.add('list-group-item');
+    li.classList.add("card");
+    li.classList.add("shadow-sm");
+    li.classList.add("p-4");
+    li.innerHTML = `
+        <div>
+        <h5>${user.name}</h5>
+        <p><strong>Email:</strong> ${user.email}</p>
+        </div>
+    `;
+    li.style.margin = '5px 0';
+    li.appendChild(deleteBtn);
+    li.appendChild(editBtn);
+
+    editBtn.addEventListener('click', () => {
+        li.innerHTML = `
+        <h5 id="form-title">Modifier le contact</h5>
+        <div class="mb-3">
+            <label for="name" class="form-label">Nom</label>
+            <input type="text" id="newName" class="form-control" name="name" required>
+        </div>
+        <div class="mb-3">
+            <label for="email" class="form-label">Email</label>
+            <input type="email" id="newEmail" class="form-control" name="email" required>
+        </div>
+        <button type="submit" class="btn btn-secondary btn-success update-btn">Mettre à jour</button>
+        <button type="button" class="btn btn-secondary btn-danger cancel-btn">Annuler</button>
+    `;
+
+        const updateBtn = li.querySelector('.update-btn');
+        updateBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            const newName = li.querySelector('#newName').value;
+            const newEmail = li.querySelector('#newEmail').value;
+
+            usersTab[usersTab.findIndex(u => u.email === user.email)].name = newName;
+            usersTab[usersTab.findIndex(u => u.email === user.email)].email = newEmail;
+
+            user.name = newName;
+            user.email = newEmail;
+
+            createContactItem(user);
+            contactList.removeChild(li);
+        });
+
+        const cancelBtn = li.querySelector('.cancel-btn');
+        cancelBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            createContactItem(user);
+            contactList.removeChild(li);
+        })
+    });
+
+    deleteBtn.addEventListener('click', () => {
+        const index = usersTab.findIndex(u => u.email === user.email);
+        if (index !== -1) {
+            usersTab.splice(index, 1);
+            contactList.removeChild(li);
+        }
+    })
+
+    contactList.appendChild(li);
+}
+
+function createUserFromForm() {
+    const formData = new FormData(contactForm);
+    return new User(
+        usersTab.length + 1,
+        formData.get('name'),
+        formData.get('username'),
+        formData.get('email'),
+        new Address(
+            formData.get('street'),
+            formData.get('suite'),
+            formData.get('city'),
+            formData.get('zipcode'),
+            new Geo(formData.get('lat'), formData.get('lng'))
+        ),
+        formData.get('phone'),
+        formData.get('website'),
+        new Company(formData.get('companyName'), formData.get('catchPhrase'), formData.get('bs'))
+    );
+}
+
+function postNewUser(newUser) {
+    fetch(`https://jsonplaceholder.typicode.com/users`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(newUser)
+
+    })
+        .then(response => {
+                console.log(response);
+                if (response.ok) {
+                    addUserToTab(newUser);
+                }
+            }
+        );
+}
+
+loadBtn.addEventListener('click', async (e) => {
+    e.preventDefault();
+    await fetchUsers(2);
+});
+
+contactForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const newUser = createUserFromForm();
+    postNewUser(newUser);
+    contactForm.reset();
+});
+
+