zeaez

//👉 Grâce à la notion d'événement, apposez une écoute sur le bouton “Add" afin de détecter les clics de l'utilisateur.

document.querySelector('#btn-add').addEventListener('click',
    function () {
        console.log('Click detected!');
    }
);

function majCompteur() {
    const messagesCount = document.querySelectorAll('p').length;
    document.querySelector('#count').textContent = messagesCount;
}

// 👉 Lorsque le clic sur le bouton “Add” est capté, récupérez la valeur du champ input et assignez la à une nouvelle variable nommée “message”.

const boutonAdd = document.getElementById("btn-add");
const champInput = document.getElementById("add-message");

boutonAdd.addEventListener("click", function () {
    const message = champInput.value;

    //👉Réinitialisez ce champ à chaque fois que le message est validé pour éviter de devoir le supprimer manuellement.

    champInput.value = '';

    //👉 A la suite, toujours dans la fonction de l’événement du clic sur le bouton “add”,  matérialisez votre nouveau message dans la liste. 

    document.querySelector('#msg-container').innerHTML += `
        <div class="row new-row">
            <img class="avatar" src="avatar-1.jpg" />
            <div class="text-container">
                <h6>John Doe</h6>
                <p>${message}</p>
            </div>
            <span class="delete">&#x2716;</span>
        </div>
        `;

    for (let i = 0; i < document.querySelectorAll('.delete').length; i++) {
        document.querySelectorAll('.delete')[i].addEventListener('click',

            //👉 Coder l’instruction de suppression de message  (nom, prénom, avatar, texte, picto poubelle) grâce au DOM. Pensez également à mettre à jour le compteur 😉

            function () {
                this.parentNode.remove();
                const messagesCount = document.querySelectorAll('p').length;
                document.querySelector('#count').textContent = messagesCount;
            }
        );
    }

    majCompteur()

});

//👉 Après avoir ajouté le message, ajoutez les instructions nécessaires pour mettre à jour le compteur.