aggiunto gatti salvati

spa-gatti/index.html

@@ -10,7 +10,7 @@
             #gatto-casuale {
                 height: 420px;
             }
-            #bottone-ricarica {
+            button {
                 font-size: 24px;
                 background-color: blueviolet;
                 padding: 6px;
@@ -21,19 +21,36 @@
             #bottone-ricarica:hover {
                 border: 3px solid black;
             }
+            #gatti-salvati {
+                display: flex;
+                justify-content: space-around;
+                flex-wrap: wrap;
+            }
+            #gatti-salvati img {
+                height: 200px;
+                margin: 10px;
+            }
         </style>
     </head>
 
     <body>
         <div class="centrato">
-            <button id="bottone-ricarica">Ricarica gatto</button></br></br>
+            <button id="bottone-ricarica">Ricarica gatto</button>
+            <button id="bottone-salva">Salva</button></br></br>
             <img id="gatto-casuale" src="" alt="Gatto casuale">
         </div>
 
+        <div id="gatti-salvati">
+        </div>
+   
 
         <script>
             const immagine = document.getElementById("gatto-casuale");
             const bottone = document.getElementById("bottone-ricarica");
+            const bottoneSalva = document.getElementById("bottone-salva");
+            const salvati = document.getElementById("gatti-salvati");
+
+            let arrayGatti = [];
 
             async function getRandomCat() {
                 const url = "https://cataas.com/cat?json=true";
@@ -51,6 +68,22 @@
                 }
             }
 
+            bottoneSalva.addEventListener("click", () => {
+                arrayGatti.push(immagine.src);
+                renderizzaGatti();
+            });
+
+            function renderizzaGatti() {
+                salvati.innerHTML = ""; // svuoto il div con i gatti salvati
+
+                // riempiamo con tutti i gatti nell'array
+                for (let i=0; i<arrayGatti.length; i++) {
+                    const nuovoGatto = document.createElement("img");
+                    nuovoGatto.src = arrayGatti[i];
+                    salvati.appendChild(nuovoGatto);
+                }
+            }
+
             /*
             bottone.addEventListener("click", () => {
                 getRandomCat();