feat (accessibility) : add handleEvents (#6)

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>

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', {

js/handleEvents.js

@@ -0,0 +1,8 @@
+function handleEvent(e) {
+  if (
+    e && // mouseEvent
+    e.keyCode === 13 // keypress "Enter"
+  ) {
+    console.log('click');
+  }
+}

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--;
+        }
+      })
+    );
   }
 };

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>