added search funcionality

main
rYeti 2023-05-02 23:10:19 +02:00
parent 2b8b4f27ec
commit ba858e70c0
9 changed files with 59 additions and 15 deletions

File diff suppressed because one or more lines are too long

2
dist/assets/index-76441c37.js vendored Normal file

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="./logo.ico"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Gym Tracker</title><script type="module" crossorigin src="./assets/index-505cb6e5.js"></script></head><body><div id="app"></div></body></html> <!doctype html><html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="./logo.ico"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Gym Tracker</title><script type="module" crossorigin src="./assets/index-76441c37.js"></script></head><body><div id="app"></div></body></html>

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="back"> <div class="back">
<h1>Back</h1> <h1>Back</h1>
<label> Search</label> <input type="text" v-model="input" placeholder="Search..." />
<div v-for="exercise in exercises" :key="exercise.name"> <div v-for="exercise in filterExercises()" :key="exercise.name">
<button>{{ exercise.name }}</button> <button>{{ exercise.name }}</button>
</div> </div>
</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> </script>
<style> <style>

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="biceps"> <div class="biceps">
<h1>Biceps</h1> <h1>Biceps</h1>
<label> Search</label> <input type="text" v-model="input" placeholder="Search..." />
<div v-for="exercise in exercises" :key="exercise.name"> <div v-for="exercise in filterExercises()" :key="exercise.name">
<button>{{ exercise.name }}</button> <button>{{ exercise.name }}</button>
</div> </div>
</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> </script>
<style> <style>

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="chest"> <div class="chest">
<h1>Chest</h1> <h1>Chest</h1>
<label> Search</label> <input type="text" v-model="input" placeholder="Search..." />
<div v-for="exercise in exercises" :key="exercise.name"> <div v-for="exercise in filterExercises()" :key="exercise.name">
<button>{{ exercise.name }}</button> <button>{{ exercise.name }}</button>
</div> </div>
</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> </script>
<style> <style>
@media (min-width: 1024px) { @media (min-width: 1024px) {

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="legs"> <div class="legs">
<h1>Legs</h1> <h1>Legs</h1>
<label> Search</label> <input type="text" v-model="input" placeholder="Search..." />
<div v-for="exercise in exercises" :key="exercise.name"> <div v-for="exercise in filterExercises()" :key="exercise.name">
<button>{{ exercise.name }}</button> <button>{{ exercise.name }}</button>
</div> </div>
</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> </script>
<style> <style>

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="shoulder"> <div class="shoulder">
<h1>Shoulder</h1> <h1>Shoulder</h1>
<label> Search</label> <input type="text" v-model="input" placeholder="Search..." />
<div v-for="exercise in exercises" :key="exercise.name"> <div v-for="exercise in filterExercises()" :key="exercise.name">
<button>{{ exercise.name }}</button> <button>{{ exercise.name }}</button>
</div> </div>
</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> </script>
<style> <style>

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="triceps"> <div class="triceps">
<h1>Triceps</h1> <h1>Triceps</h1>
<label> Search</label> <input type="text" v-model="input" placeholder="Search..." />
<div v-for="exercise in exercises" :key="exercise.name"> <div v-for="exercise in filterExercises()" :key="exercise.name">
<button>{{ exercise.name }}</button> <button>{{ exercise.name }}</button>
</div> </div>
</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> </script>
<style> <style>