new cat card

index.html

@@ -37,11 +37,11 @@ <h1>AdaKitten</h1>
         <section class="new-form collapsed js-form">
             <h2 class="title">¿Agregamos un nuevo gatito a Adalab?</h2>
             <form class="form js-formcats">
-                <input class="input" type="text" placeholder="Url de la foto" required />
-                <input class="input" type="text" placeholder="Nombre" required />
-                <input class="input" type="text" placeholder="Raza" />
-                <input class="input" type="text" placeholder="Descripción" required />
-                <button type="submit" class="button">Añadir</button>
+                <input class="input js-kittenImage" type="text" placeholder="Url de la foto" required />
+                <input class="input js-kittenName" type="text" placeholder="Nombre" required />
+                <input class="input js-kittenRace" type="text" placeholder="Raza" />
+                <input class="input js-kittenDesc" type="text" placeholder="Descripción" required />
+                <button type="submit" class="button js-buttonSubmit">Añadir</button>
                 <button type="button" class="button-cancel js-cancel">Cancelar</button>
             </form>
         </section>

js/main.js

@@ -7,7 +7,11 @@ const buttonCancel = document.querySelector(".js-cancel");
 const formCats = document.querySelector(".js-formcats");
 const searchButton = document.querySelector(".js-button-search");
 const input_search_desc = document.querySelector(".js_in_search_desc");
-
+const kittenImage = document.querySelector (".js-kittenImage");
+const kittenName = document.querySelector (".js-kittenName");
+const kittenRace = document.querySelector (".js-kittenRace");
+const kittenDesc = document.querySelector (".js-kittenDesc");
+const buttonSubmit = document.querySelector (".js-buttonSubmit");
 
 // kittenOne
 
@@ -26,9 +30,9 @@ const kittenDesc1 =
 
   // kittenThree
   const kittenImage3 = "https://dev.adalab.es/maine-coon-cat.webp" ;
-const kittenName3= "Cielo";
-const kittenRace3 = "Maine Coon";
-const kittenDesc3 =
+  const kittenName3= "Cielo";
+  const kittenRace3 = "Maine Coon";
+  const kittenDesc3 =
   "Tienen la cabeza cuadrada y los ojos simétricos, por lo que su bella mirada se ha convertido en una de sus señas de identidad. Sus ojos son grandes y las orejas resultan largas y en punta.";
 
 
@@ -141,6 +145,31 @@ let breedText = " ";
 
 
 
+function renderKitten (event) {
+  event.preventDefault();
+  const valuekittenImage = (kittenImage.value);
+  const valuekittenName = (kittenName.value);
+  const valuekittenRace = (kittenRace.value);
+  const valuekittenDesc = (kittenDesc.value);
+
+  catlist.innerHTML +=
+  `<li class="card">
+    <article>
+      <img class="card_img" src="${valuekittenImage}" alt="gatito1"/>
+      <h3 class="card_title">${valuekittenName}</h3>
+      <h4 class="card_race">${valuekittenRace}</h4>
+      <p class="card_description">${valuekittenDesc}</p>
+    </article>
+    </li>`;
+
+}
+
+
+buttonSubmit.addEventListener("click", renderKitten);
+
+
+
+
 
 //let kittenName = "whiskers";
 //kittenName = kittenName.toUpperCase();  // Convierte a mayúsculas