From 49d8ee57c93d97b0605d45f64536545ebea5a104 Mon Sep 17 00:00:00 2001
From: Fede Krenn <fedekrenn@gmail.com>
Date: Sat, 17 Feb 2024 01:18:08 -0300
Subject: [PATCH 1/3] Add function to refresh windows

---
 01-tinder-swipe/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/01-tinder-swipe/index.html b/01-tinder-swipe/index.html
index f2b219c..f580cfb 100644
--- a/01-tinder-swipe/index.html
+++ b/01-tinder-swipe/index.html
@@ -29,7 +29,7 @@ <h2>Leila <span>27</span></h2>
     </div>
 
     <footer>
-      <button class="is-undo" aria-label="undo"></button>
+      <button class="is-undo" aria-label="undo" id="restart"></button>
       <button class="is-remove is-big" aria-label="remove"></button>
       <button class="is-star" aria-label="star"></button>
       <button class="is-fav is-big" aria-label="fav"></button>
@@ -251,6 +251,7 @@ <h2>Leila <span>27</span></h2>
 
 <script>
   const DECISION_THRESHOLD = 75
+  const $resetBtn = document.getElementById('restart') // Para una mejor UX el usuario puede reiniciar
 
   let isAnimating = false
   let pullDeltaX = 0 // distance que la card se está arrastrando
@@ -341,4 +342,5 @@ <h2>Leila <span>27</span></h2>
 
   document.addEventListener('mousedown', startDrag)
   document.addEventListener('touchstart', startDrag, { passive: true })
+  $resetBtn.addEventListener('click', () => window.location.reload())
 </script>
\ No newline at end of file

From 8ee0435011db822a25ef021b30bd3cd1476b2aff Mon Sep 17 00:00:00 2001
From: Fede Krenn <fedekrenn@gmail.com>
Date: Sat, 17 Feb 2024 01:27:47 -0300
Subject: [PATCH 2/3] Refactor Tinder swipe functionality and add dynamic card
 generation

---
 01-tinder-swipe/index.html | 45 ++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/01-tinder-swipe/index.html b/01-tinder-swipe/index.html
index f580cfb..7a7bba2 100644
--- a/01-tinder-swipe/index.html
+++ b/01-tinder-swipe/index.html
@@ -7,21 +7,7 @@
       <img src="./tinder-logo.webp" alt="Tinder Logo" />
     </header>
 
-    <div class="cards">
-      <article>
-        <img src="./photos/2.webp" alt="Álex, brown hair man, 25 years old" />
-        <h2>Álex <span>25</span></h2>
-        <div class="choice nope">NOPE</div>
-        <div class="choice like">LIKE</div>
-      </article>
-
-      <article>
-        <img src="./photos/1.webp" alt="Leila, redhead, 25 years old" />
-        <h2>Leila <span>27</span></h2>
-        <div class="choice nope">NOPE</div>
-        <div class="choice like">LIKE</div>
-      </article>
-
+    <div class="cards" id="cards">
       <span>
         No hay más personas cerca de ti...<br />
         Vuelve a intentarlo más tarde
@@ -250,8 +236,20 @@ <h2>Leila <span>27</span></h2>
 </style>
 
 <script>
+  const PEOPLE = [
+    {
+      name: 'Álex',
+      age: 25,
+      photo: './photos/2.webp'
+    },
+    {
+      name: 'Leila',
+      age: 27,
+      photo: './photos/1.webp'
+    }]
   const DECISION_THRESHOLD = 75
   const $resetBtn = document.getElementById('restart') // Para una mejor UX el usuario puede reiniciar
+  const $cardsContainer = document.getElementById('cards')
 
   let isAnimating = false
   let pullDeltaX = 0 // distance que la card se está arrastrando
@@ -340,7 +338,22 @@ <h2>Leila <span>27</span></h2>
     }
   }
 
+  function drawCards(listOfPeople) {
+    listOfPeople.forEach(person => {
+      const card = document.createElement('article')
+      card.innerHTML = `
+        <img src="${person.photo}" alt="${person.name}, ${person.age} years old" />
+        <h2>${person.name} <span>${person.age}</span></h2>
+        <div class="choice nope">NOPE</div>
+        <div class="choice like">LIKE</div>
+      `
+      $cardsContainer.appendChild(card)
+    })
+  }
+
   document.addEventListener('mousedown', startDrag)
   document.addEventListener('touchstart', startDrag, { passive: true })
-  $resetBtn.addEventListener('click', () => window.location.reload())
+  $resetBtn.addEventListener('click', () => drawCards(PEOPLE))
+
+  drawCards(PEOPLE)
 </script>
\ No newline at end of file

From a7c454ff7f9e2acae6b4979738ffd313786855da Mon Sep 17 00:00:00 2001
From: Fede Krenn <fedekrenn@gmail.com>
Date: Sat, 17 Feb 2024 01:33:27 -0300
Subject: [PATCH 3/3] Refactor code to fix refresh bug

---
 01-tinder-swipe/index.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/01-tinder-swipe/index.html b/01-tinder-swipe/index.html
index 7a7bba2..3a67e1b 100644
--- a/01-tinder-swipe/index.html
+++ b/01-tinder-swipe/index.html
@@ -7,7 +7,8 @@
       <img src="./tinder-logo.webp" alt="Tinder Logo" />
     </header>
 
-    <div class="cards" id="cards">
+    <div class="cards">
+      <div id="cardsContainer"></div>
       <span>
         No hay más personas cerca de ti...<br />
         Vuelve a intentarlo más tarde
@@ -249,7 +250,7 @@
     }]
   const DECISION_THRESHOLD = 75
   const $resetBtn = document.getElementById('restart') // Para una mejor UX el usuario puede reiniciar
-  const $cardsContainer = document.getElementById('cards')
+  const $cardsContainer = document.getElementById('cardsContainer')
 
   let isAnimating = false
   let pullDeltaX = 0 // distance que la card se está arrastrando
@@ -353,7 +354,11 @@ <h2>${person.name} <span>${person.age}</span></h2>
 
   document.addEventListener('mousedown', startDrag)
   document.addEventListener('touchstart', startDrag, { passive: true })
-  $resetBtn.addEventListener('click', () => drawCards(PEOPLE))
+  $resetBtn.addEventListener('click', () => {
+    $cardsContainer.innerHTML = ''
+    drawCards(PEOPLE)
+  
+  })
 
   drawCards(PEOPLE)
 </script>
\ No newline at end of file