JS

listeIngr.js

@@ -1,20 +1,48 @@
 document.addEventListener("DOMContentLoaded", function(){
 
-    function modifier_button_ingr(element){
-
-        let modif = element.parentElement.previousSibling.previousSibling;
-        //modif.style.color = "red";
-        console.log("click")
-    }
-
-
 
     let modifier_button = document.getElementsByClassName("ingr-modifier");
 
     console.log(modifier_button);
 
     for (const element of modifier_button) {
-        element.addEventListener('click', modifier_button_ingr(element));
+        element.addEventListener('click', function () {
+            let modif = element.parentElement.previousSibling.previousSibling;
+
+            let data = element.getAttribute("data-id");
+            
+            let form = document.createElement("form");
+
+            form.setAttribute("method", "POST");
+            form.setAttribute("action", "/ingredient/edit/" + data);
+            form.setAttribute("class","liste-ingr-elem-text")
+
+            let input = document.createElement("input");
+
+            input.setAttribute("type", "text");
+            input.setAttribute("class", "form-control");
+            input.setAttribute("name","modif_ingr");
+            input.setAttribute("placeholder", "modificiation");
+
+            let hidden = document.createElement("input");
+
+            hidden.setAttribute("type","hidden");
+            hidden.setAttribute("name","id");
+            hidden.setAttribute("value", data);
+
+            let button = document.createElement("button");
+
+            button.setAttribute("type", "submit");
+            button.setAttribute("class", "btn btn-primary");
+            button.innerText = "Submit Modification";
+
+            form.append(input)
+            form.append(hidden)
+            form.append(button)
+
+            modif.replaceWith(form);
+
+        });
     };
 
 });

listeIngr.php

@@ -18,7 +18,7 @@
                     Un Element
                 </div>
                 <div class="liste-ingr-elem-modif">
-                    <a class="recette-button ingr-modifier">Modifier</a>
+                    <a class="recette-button ingr-modifier" data-id="juh">Modifier</a>
                     <a class="recette-button ingr-suppr">Supprimer</a>
                 </div>
             </div>

listeTag.js

@@ -0,0 +1,62 @@
+document.addEventListener("DOMContentLoaded", function(){
+
+
+    let modifier_button = document.getElementsByClassName("tag-modifier");
+
+    console.log(modifier_button);
+
+    for (const element of modifier_button) {
+        element.addEventListener('click', function () {
+            let modif = element.parentElement.previousSibling.previousSibling;
+
+            let data = element.getAttribute("data-id");
+            
+            let form = document.createElement("form");
+
+            form.setAttribute("method", "POST");
+            form.setAttribute("action", "/tag/edit/" + data);
+            form.setAttribute("class","liste-tag-elem-text")
+
+            let input = document.createElement("input");
+
+            input.setAttribute("type", "text");
+            input.setAttribute("class", "form-control");
+            input.setAttribute("name","modif_tag");
+            input.setAttribute("placeholder", "modificiation");
+
+            let hidden = document.createElement("input");
+
+            hidden.setAttribute("type","hidden");
+            hidden.setAttribute("name","id");
+            hidden.setAttribute("value", data);
+
+            let button = document.createElement("button");
+
+            button.setAttribute("type", "submit");
+            button.setAttribute("class", "btn btn-primary");
+            button.innerText = "Submit Modification";
+
+            form.append(input)
+            form.append(hidden)
+            form.append(button)
+
+            modif.replaceWith(form);
+
+        });
+    };
+
+    let suppr = document.getElementsByClassName("tag-suppr");
+
+    for (const element of suppr) {
+        element.addEventListener('click', function () {
+            let confirm = window.confirm("Voulez vous supprimez ?");
+            
+            let data = element.getAttribute("data-id");
+            
+            if (confirm) {
+                window.location.href = "/tag/delete/" + data;
+            }
+        })
+    }
+
+});

listeTag.php

@@ -12,10 +12,56 @@
 
     <div class="main-body">
         <div class="content">
+            <div class="liste-tag-elem">
+                <div class="liste-tag-elem-text">
+                    Un Element
+                </div>
+                <div class="liste-tag-elem-modif">
+                    <a class="recette-button tag-modifier" data-id="juh">Modifier</a>
+                    <a class="recette-button tag-suppr" data-id="juh">Supprimer</a>
+                </div>
+            </div>
+            <div class="liste-tag-elem">
+                
+                <div class="liste-tag-elem-text">
+                    Un Element
+                </div>
+            </div>
+            <div class="liste-tag-elem">
+                
+                <div class="liste-tag-elem-text">
+                    Un Element
+                </div>
+            </div>
+            <div class="liste-tag-elem">
+                
+                <div class="liste-tag-elem-text">
+                    Un Element
+                </div>
+            </div>
+            <div class="liste-tag-elem">
+                
+                <div class="liste-tag-elem-text">
+                    Un Element
+                </div>
+            </div>
+            <div class="liste-tag-elem">
+                
+                <div class="liste-tag-elem-text">
+                    Un Element
+                </div>
+            </div>
+            <div class="liste-tag-elem">
+                
+                <div class="liste-tag-elem-text">
+                    Un Element
+                </div>
+            </div>
         
         </div>
     </div>
 
     <?php include "footer.php"?>
 </body>
+<script src="listeTag.js"></script>
 </html>

main.css

@@ -515,6 +515,36 @@ ul {
     padding-right: 20px;
 }
 
+.liste-tag-elem {
+    display: flex;
+    height: 40px;
+    padding:5px;
+    background-color: #c6fdefe0;
+    color: #000000;
+    border: 1px solid black;
+    border-radius: 10px;
+    box-shadow: 1px 1px 1px black;
+}
+
+.liste-tag-elem:hover {
+    border:3px solid #007054;
+    box-shadow: 2px 2px 10px black;
+}
+
+.liste-tag-elem-text {
+    width: 100%;
+    height: 100%;
+    flex:12;
+    padding-left: 20px;
+    line-height: 40px;
+    color: #000000;
+}
+
+.liste-tag-elem-modif {
+    line-height: 40px;
+    padding-right: 20px;
+}
+
 .ingr-image {
     flex: 1;
     border: 1px solid black;