From 310edd32de958b38212443daec727ccf1c57c60a Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Thu, 20 Jul 2023 02:37:12 +0200
Subject: [PATCH] alert close button

---
 index.html | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 673b59b..acd8099 100644
--- a/index.html
+++ b/index.html
@@ -94,12 +94,7 @@
                                                             <input type="text" id="sigleInput" class="fr-input" style="text-transform: uppercase;"/>
                                                         </div>
                                                     </div>
-                                                    <div id="alertDiv" class="fr-fieldset__element">
-                                                        <div class="fr-alert fr-alert--info">
-                                                            <p>Suggestion :</p>
-                                                            <h3 class="fr-alert__title" id="nomDiv"></h3>
-                                                        </div>
-                                                    </div>
+                                                    <div id="alertDiv" class="fr-fieldset__element"></div>
                                                     <div class="fr-fieldset__element">
                                                         <ul class="fr-mt-2v fr-btns-group fr-btns-group--between fr-btns-group--inline">
                                                             <li>
@@ -260,10 +255,16 @@
             function regen() {
                 if (sigleInput.value.length) {
                     listNoms = Array.from(sigleInput.value).map((lettre, position) => trouveMot(lettre, position))
-                    nomDiv.innerText = listNoms.join(" ")
-                    alertDiv.style.display = ""
+                    alertDiv.innerHTML = `
+                                                        <div class="fr-alert fr-alert--info">
+                                                            <p>Suggestion :</p>
+                                                            <h3 class="fr-alert__title" id="nomDiv">${listNoms.join(" ")}</h3>
+                                                            <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)">
+                                                                Masquer le message
+                                                            </button>
+                                                        </div>`
                 } else {
-                    alertDiv.style.display = "none"
+                    alertDiv.innerHTML = ""
                 }
                 copyButton.innerText = "Copier"
                 copyButton.classList.remove('fr-icon-checkbox-circle-line')