added search funcionality

src/views/muscles/Back.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="back">
       <h1>Back</h1>
-      <label> Search</label>
-      <div v-for="exercise in exercises" :key="exercise.name">
+      <input type="text" v-model="input" placeholder="Search..." />
+          <div v-for="exercise in filterExercises()" :key="exercise.name">
         <button>{{ exercise.name }}</button>
       </div>
     </div>
@@ -21,6 +21,13 @@
       }
       )
 
+  let input = ref('');
+  function filterExercises(){
+    return exercises.value.filter((exercise) => {
+      return exercise.name.toLowerCase().includes(input.value.toLowerCase());
+    });
+  };
+
 </script>
 
   <style>

src/views/muscles/Biceps.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="biceps">
       <h1>Biceps</h1>
-      <label> Search</label>
-      <div v-for="exercise in exercises" :key="exercise.name">
+      <input type="text" v-model="input" placeholder="Search..." />
+      <div v-for="exercise in filterExercises()" :key="exercise.name">
         <button>{{ exercise.name }}</button>
       </div>
     </div>
@@ -21,6 +21,13 @@
       }
       )
 
+  let input = ref('');
+  function filterExercises(){
+    return exercises.value.filter((exercise) => {
+      return exercise.name.toLowerCase().includes(input.value.toLowerCase());
+    });
+  };
+
 </script>
 
   <style>

src/views/muscles/Chest.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="chest">
     <h1>Chest</h1>
-    <label> Search</label>
-      <div v-for="exercise in exercises" :key="exercise.name">
+    <input type="text" v-model="input" placeholder="Search..." />
+      <div v-for="exercise in filterExercises()" :key="exercise.name">
         <button>{{ exercise.name }}</button>
       </div>
     </div>
@@ -21,6 +21,13 @@
       }
       )
 
+  let input = ref('');
+  function filterExercises(){
+    return exercises.value.filter((exercise) => {
+      return exercise.name.toLowerCase().includes(input.value.toLowerCase());
+    });
+  };
+
 </script>
 <style>
 @media (min-width: 1024px) {

src/views/muscles/Legs.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="legs">
       <h1>Legs</h1>
-      <label> Search</label>
-      <div v-for="exercise in exercises" :key="exercise.name">
+      <input type="text" v-model="input" placeholder="Search..." />
+      <div v-for="exercise in filterExercises()" :key="exercise.name">
         <button>{{ exercise.name }}</button>
       </div>
     </div>
@@ -21,6 +21,13 @@
       }
       )
 
+  let input = ref('');
+  function filterExercises(){
+    return exercises.value.filter((exercise) => {
+      return exercise.name.toLowerCase().includes(input.value.toLowerCase());
+    });
+  };
+
 </script>
   
 <style>

src/views/muscles/Shoulder.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="shoulder">
       <h1>Shoulder</h1>
-      <label> Search</label>
-      <div v-for="exercise in exercises" :key="exercise.name">
+      <input type="text" v-model="input" placeholder="Search..." />
+      <div v-for="exercise in filterExercises()" :key="exercise.name">
         <button>{{ exercise.name }}</button>
       </div>
     </div>
@@ -21,6 +21,14 @@
       }
       )
 
+  let input = ref('');
+  function filterExercises(){
+    return exercises.value.filter((exercise) => {
+      return exercise.name.toLowerCase().includes(input.value.toLowerCase());
+    });
+  };
+
+
 </script>
   
   <style>

src/views/muscles/Triceps.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="triceps">
       <h1>Triceps</h1>
-      <label> Search</label>
-      <div v-for="exercise in exercises" :key="exercise.name">
+      <input type="text" v-model="input" placeholder="Search..." />
+      <div v-for="exercise in filterExercises()" :key="exercise.name">
         <button>{{ exercise.name }}</button>
       </div>
     </div>
@@ -21,6 +21,14 @@
       }
       )
 
+  let input = ref('');
+  function filterExercises(){
+    return exercises.value.filter((exercise) => {
+      return exercise.name.toLowerCase().includes(input.value.toLowerCase());
+    });
+  };
+
+
 </script>
   
   <style>