Feat(JS & HTML) Added code

ViktorSvertoka · Dec 17, 2023 · 95bb8da · 95bb8da
1 parent 8d5e020
commit 95bb8da
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/js/12-exercises.js b/src/js/12-exercises.js
@@ -4,6 +4,8 @@ import icons from '../img/sprite.svg';
 const apiService = new APIService();
 const listItem = document.querySelector('.js-list');
 const searchForm = document.querySelector('.search__form');
+const span = document.querySelector('.exersices__span');
+const text = document.querySelector('.exersices__text');
 listItem.addEventListener('click', onCardClick);
 
 async function onCardClick(event) {
@@ -32,11 +34,18 @@ async function onCardClick(event) {
   try {
     const data = await apiService.getExercises(filter, name);
     renderExercises(data);
+    textExercises(data);
   } catch (error) {
     console.log(error);
   }
 }
 
+function textExercises(data) {
+  text.innerText = `${data[0].bodyPart}`;
+  text.classList.remove('hidden');
+  span.classList.remove('hidden');
+}
+
 export function renderExercises(data) {
   listItem.innerHTML = '';
   const markup = data
@@ -78,9 +87,6 @@ export function renderExercises(data) {
   listItem.insertAdjacentHTML('beforeend', markup);
 }
 
-/**
- * Filter buttons toggle
- */
 document.addEventListener('DOMContentLoaded', () => {
   const buttons = document.querySelectorAll('.exercises__btn');
 
@@ -89,6 +95,8 @@ document.addEventListener('DOMContentLoaded', () => {
       buttons.forEach(btn => btn.classList.remove('active'));
       button.classList.add('active');
       searchForm.classList.add('hidden');
+      text.classList.add('hidden');
+      span.classList.add('hidden');
     });
   });
 });
diff --git a/src/partials/03-exercises.html b/src/partials/03-exercises.html
@@ -2,8 +2,8 @@
 <section class="section">
   <div class="exersices__container container">
     <h2 class="exersices__title">
-      Exercises<span class="exersices__span">/</span>
-      <p class="exersices__text"></p>
+      Exercises<span class="exersices__span hidden">/</span>
+      <p class="exersices__text hidden"></p>
     </h2>
     <div class="exersices__search-btn-wrap">
       <form class="search__form hidden">