From 37ead02ee16526bdd103bbc095754be5dd24af78 Mon Sep 17 00:00:00 2001
From: Amandine Arias <amandine.arias@gmail.com>
Date: Sun, 9 May 2021 21:00:13 +0200
Subject: [PATCH] feat (accessibility) : add handleEvents (#6)

---
 index.html          |  1 +
 js/gallery.js       |  1 +
 js/handleEvents.js  |  8 ++++++++
 js/likes_counter.js | 49 +++++++++++++++++++++++++--------------------
 propage.html        |  3 ++-
 5 files changed, 39 insertions(+), 23 deletions(-)
 create mode 100644 js/handleEvents.js

diff --git a/index.html b/index.html
index 4414ae6..2017ecd 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,7 @@
       <section id="contenu" tabindex="-1"></section>
     </main>
     <script type="text/javascript" src="js/elmt_factory.js"></script>
+    <script type="text/javascript" src="js/handleEvents.js"></script>
     <script type="text/javascript" src="js/index.js"></script>
     <script type="text/javascript" src="js/home_page.js"></script>
   </body>
diff --git a/js/gallery.js b/js/gallery.js
index 545538b..c0d3ccd 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -43,6 +43,7 @@ const setGallery = (media) => {
         elmtFactory('input', {
           class: 'gallery__likes--count',
           type: 'number',
+          readonly: "true",
           value: `${media.likes}`,
         }),
         elmtFactory('i', {
diff --git a/js/handleEvents.js b/js/handleEvents.js
new file mode 100644
index 0000000..b755564
--- /dev/null
+++ b/js/handleEvents.js
@@ -0,0 +1,8 @@
+function handleEvent(e) {
+  if (
+    e && // mouseEvent
+    e.keyCode === 13 // keypress "Enter"
+  ) {
+    console.log('click');
+  }
+}
diff --git a/js/likes_counter.js b/js/likes_counter.js
index 8cb5f4a..b781211 100644
--- a/js/likes_counter.js
+++ b/js/likes_counter.js
@@ -5,27 +5,32 @@ const likesCount = () => {
 
   for (let i = 0; i < likes.length; i++) {
     let like = likes[i];
-    like.addEventListener('click', function () {
-      like.classList.toggle('selected');
-      let input = like.parentElement.children[0];
-      console.log(input); // au click sur "like", l'input "counter" prend le focus
-      if (like.classList.contains('selected')) {
-        location.hash = "j'aime";
-        likesCounter = parseInt(input.value) + 1;
-        console.log(likesCounter);
-        input.value = likesCounter;
-        input.style.color = '#db8876';
-        // incremente de 1 le compteur global de likes
-        totalCounter.value++;
-      } else {
-        location.hash = "je n'aime plus";
-        likesCounter = parseInt(input.value) - 1;
-        console.log(likesCounter);
-        input.value = likesCounter;
-        input.style.color = '#901c1c';
-        // decremente de 1 le compteur global de likes
-        totalCounter.value--;
-      }
-    });
+    // handleEvent = keypress "Enter" + "click"
+    like.addEventListener(
+      'click',
+      (handleEvent = () => {
+        // like.addEventListener('click', () => {
+        like.classList.toggle('selected');
+        let input = like.parentElement.children[0];
+        console.log(input); // au click sur "like", l'input "counter" prend le focus
+        if (like.classList.contains('selected')) {
+          location.hash = "j'aime";
+          likesCounter = parseInt(input.value) + 1;
+          console.log(likesCounter);
+          input.value = likesCounter;
+          input.style.color = '#db8876';
+          // incremente de 1 le compteur global de likes
+          totalCounter.value++;
+        } else {
+          location.hash = "je n'aime plus";
+          likesCounter = parseInt(input.value) - 1;
+          console.log(likesCounter);
+          input.value = likesCounter;
+          input.style.color = '#901c1c';
+          // decremente de 1 le compteur global de likes
+          totalCounter.value--;
+        }
+      })
+    );
   }
 };
diff --git a/propage.html b/propage.html
index f5d728a..83b7e05 100644
--- a/propage.html
+++ b/propage.html
@@ -158,7 +158,7 @@ <h2 class="form__body--name"></h2>
     <!-- footer element -->
     <footer class="footer">
       <div class="footer__content">
-        <input id="total-likes" type="number"></input>
+        <input id="total-likes" readonly type="number"></input>
         <i class="fas fa-heart"></i>
       </div>
       <div class="footer__content">
@@ -168,6 +168,7 @@ <h2 class="form__body--name"></h2>
 
     <!-- appel des scripts js -->
     <script type="text/javascript" src="js/elmt_factory.js"></script>
+    <script type="text/javascript" src="js/handleEvents.js"></script>
     <script type="text/javascript" src="js/gallery.js"></script>
     <script type="text/javascript" src="js/profile.js"></script>
     <script type="text/javascript" src="js/sort.js"></script>