Posts

11.implement bodypart/category funcitnality

.    in exerxises.jsx file :Add     useEffect (() => {     const fetchExercisesData = async () => {       let exercisesData = [];       if ( bodyPart === "all" ) {         exercisesData = await fetchData (           "https://exercisedb.p.rapidapi.com/exercises" ,           exerciseOptions         );       } else {         exercisesData = await fetchData (           `https://exercisedb.p.rapidapi.com/exercises/bodyPart/ ${ bodyPart } ` ,           exerciseOptions         );       }       setExercises ( exercisesData );     };     fetchExercisesData ();   }, [ bodyPart ]); .We have prop drilled and setbodypart to an item such as waist ,legs ,etc on clicking o...
Post a Comment
Read more

10.Whole exerscise section to display exercise cards with pagination

 . import React , { useState , useEffect } from "react" ; import { Pagination } from "@mui/material" ; import { Box , Stack , Typography } from "@mui/material" ; import { exerciseOptions , fetchData } from "../../utils/fetchData" ; import ExerciseCard from "../ExerciseCard/ExerciseCard" ; const Exercises = ({ exercises , setExercises , bodyPart }) => {   // console.log(exercises); // only appear when you serach something   const [ currentPage , setCurrentPage ] = useState ( 1 );   const exercisesPerPage = 9 ;   const indexOfLastExercise = currentPage * exercisesPerPage ;   const indexOfFirstExercise = indexOfLastExercise - exercisesPerPage ;   const currentExercises = exercises . slice (     indexOfFirstExercise ,     indexOfLastExercise   );   const paginate = ( e , value ) => {     setCurrentPage ( value );     window . scrollTo ({ top : "1800px" , behavior : "...
Post a Comment
Read more

9.exerxise card

  import React from "react" ; import { Link } from "react-router-dom" ; import { Stack , Typography , Button } from "@mui/material" ; const ExerciseCard = ({ exercise }) => {   // console.log(exercise); // only appear when you serach something eg:back   return (     < Link className = "exercise-card" to = { `/exercise/ ${ exercise . id } ` } >       < img src = { exercise . gifUrl } alt = { exercise . name } loading = "lazy" />       < Stack flexDirection = "row" >         < Button           sx = { {             ml : "21px" ,             color : "#fff" ,             backgroundColor : "#ffa9a9" ,             fontSize : "14px" ,             borderRadius : "20px" ,         ...
Post a Comment
Read more

8.bodypart card / category

. import React from "react" ; import { Stack , Typography } from "@mui/material" ; import Icon from "../../assets/icons/gym.png" ; const BodyPart = ({ item , bodyPart , setBodyPart }) => {   return (     < Stack       type = "button"       alignItems = "center"       justifyContent = "center"       spacing = { 4.7 }       className = "bodyPart-card"       sx = { {         borderTop : bodyPart === item ? "4px solid #ff2625" : "" ,         backgroundColor : "#fff" ,         borderBottomLeftRadius : "20px" ,         width : "270px" ,         height : "280px" ,         cursor : "pointer" ,         boxShadow : "0 0 25px rgba(0,0,0,0.2)" ,       } }       onClick = { () => {     ...
Post a Comment
Read more

7. Horizontal Scroll bar

 First lets do prop drilling (of course u can use context api but for now lets use props only): in home.jsx . import React , { useState } from "react" ; import { Box } from "@mui/material" ; import HeroBanner from "../../components/HeroBanner/HeroBanner" ; import SearchExercises from "../../components/SearchExercises/SearchExercises" ; import Exercises from "../../components/Exercises/Exercises" ; const Home = () => {   const [ bodyPart , setBodyPart ] = useState ( "all" );   const [ exercises , setExercises ] = useState ([]);   return (     < Box >       < HeroBanner />       < SearchExercises         bodyPart = { bodyPart }         setExercises = { setExercises }         setBodyPart = { setBodyPart }       />       < Exercises         bodyPart = { bodyPart }     ...
Post a Comment
Read more

6 .Fetch Data

 .To fetch data for rapid api, we will use api provided by exercisedb of rapid api. so search exercisedb in rapid api, click on test endpoints , login , subscribe freee version(500 request per month allowed), then click subscribe. Then you will see something like this:(instruction to use it): const axios = require ( "axios" ) ; const options = { method : 'GET' , url : 'https://exercisedb.p.rapidapi.com/exercises/bodyPartList' , headers : { 'X-RapidAPI-Key' : 'API_KEY' , 'X-RapidAPI-Host' : 'exercisedb.p.rapidapi.com' } } ; axios . request ( options ) . then ( function ( response ) { console . log ( response . data ) ; } ) . catch ( function ( error ) { console . error ( error ) ; } ) ; Here i removed my api key for security reason.USe your api key instead of API_KEY. (Dont forget to restart react app if u used .env file to store the api key) Now we will use fetch() to fetch the dat...
Post a Comment
Read more

5. Create SearchExercise Section

 ....Here is how you make UI.Later we will fetch data for this section. import React , { useState , useEffect } from "react" ; import { Box , Typography , Stack , TextField , Button } from "@mui/material" ; const SearchExercises = () => {   return (     < Stack justifyContent = "center" alignItems = "center" mt = "37px" p = "20px" >       < Typography         fontWeight = { 700 }         sx = { { fontSize : { lg : "44px" , xs : "30px" } } }         mb = "50px"         textAlign = "center"       >         Awesome Exercises You < br />         Should Know       </ Typography >       < Box position = "relative" mb = "72px" >         < TextField           sx = { {         ...
Post a Comment
Read more