i have a problem with showing result section i did excatly like he did and i can't understand what the problem is. can anyone help me?

Got stuck at the videos showing section if i write this in my code "if(!exerciseVideos.length) return 'Loading...'" it shows undefined reading length and if cut the length in if block i got only the Loading text and getting any videos tried everything possible did what excatly he did but not able to do this can anyone help please?

'exercisesPerPage' is declared but its value is never read.
Would anyone be able to help me solve this problem?

OKAY, so the problem with the horizontal Scroll Bar lies in the App.css.
First of all install latest 4.1.0 version use --force if you have to go through the documentation HERE
Then in app.css add the following styles-
.react-horizontal-scrolling-menu--scroll-container {
width: 75vw;
} (take it out of the media query at the bottom )

in your BodyPart component change width and height to 20vw

In the ScrollMenu in Horizontal Scroll Bar component change the width to 20vw as well of the box and margin 0

asset folder is empty

I changed all my dependencies , tried --force , tried --legacy-peer-deps, npm i [email protected] , and arrows still didnt work for me. Anyone with solution?

I am facing the same challenge if you got a solution share it with me

I changed all my dependencies , tried --force , tried --legacy-peer-deps, npm i [email protected] , and arrows still didnt work for me. Anyone with solution?

I am facing the same challenge if you got a solution share it with me

.react-horizontal-scrolling-menu--wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.react-horizontal-scrolling-menu--inner-wrapper {
width:100%;
}
.react-horizontal-scrolling-menu--scroll-container {
width: calc(100vw - 104px);
}
Works for me on v4.1.0
The main issue is that you have to provide all these yourselves took some time but if it doesn't work try and refresh a few times

i am getting this error after completing the overall project?? can any one solve this?

Hello, please how did you solve this problem, I am facing the same

i am getting this error after completing the overall project?? can any one solve this?

Hello, please how did you solve this problem, I am facing the same

Please provide the fetchExercisesData code.

i am getting this error after completing the overall project?? can any one solve this?

Hello, please how did you solve this problem, I am facing the same
did you solve this

I changed all my dependencies to what he has in the git here and then ran npm install --legacy-peer-deps. Scroll arrows now work!

Just not in the same place as his but I dont mind that

go to your fetchData.js from you const res and await res, there is a typo there, change that res to response and your arrows should work out fine

Has anyone else noticed that the exerciseDb api on Rapid shows few results now. unlike the video. I even search for some values on the api and it comes up empty. sometimes it show 2 or 3 results max. Is this from the api or from my end ?

I changed all my dependencies , tried --force , tried --legacy-peer-deps, npm i [email protected] , and arrows still didnt work for me. Anyone with solution?

I am facing the same challenge if you got a solution share it with me

.react-horizontal-scrolling-menu--wrapper { width: 100%; display: flex; flex-wrap: wrap; } .react-horizontal-scrolling-menu--inner-wrapper { width:100%; } .react-horizontal-scrolling-menu--scroll-container { width: calc(100vw - 104px); } Works for me on v4.1.0 The main issue is that you have to provide all these yourselves took some time but if it doesn't work try and refresh a few times

This worked for me. Thanks a lot for the solution.

hope it is interchangeable in vite

Has anyone else noticed that the exerciseDb api on Rapid shows few results now. unlike the video. I even search for some values on the api and it comes up empty. sometimes it show 2 or 3 results max. Is this from the api or from my end ?

const exercisesData = await fetchData(
'https://exercisedb.p.rapidapi.com/exercises?limit=900',
exerciseOptions);

Put this limit 900 as parameter

if you are facing difficulties positioning the arrows in the larger screen adjust the position to static not absolute. and incase you want all the css file i have attached it down here.

body {
font-family: 'Josefin Sans';
background-color: #FFFAFB;
}

• {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;

}

::-webkit-scrollbar {
width: 0px;
}

.right-arrow,
.left-arrow {
cursor: pointer;
background: transparent;
outline: none;
border: none;
display: flex;
justify-content: center;
align-items: center;
color: #FF2625;
font-size: 25px;
border-radius: 4px;
position: static;
bottom: -20px;
right: 80px;
transform: scale(1, 1);
transition: 0.3s all ease-in-out;
}

.right-arrow {
right: 140px;
}

.right-arrow:hover,
.left-arrow:hover {
transform: scale(1.3, 1.3);
}

.react-horizontal-scrolling-menu--wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
}

.react-horizontal-scrolling-menu--inner-wrapper {
width:100%;
}

.react-horizontal-scrolling-menu--scroll-container {
width: calc(100vw - 104px);
}

/* .react-horizontal-scrolling-menu--scroll-container {
width: 75vw;
} */

.detail-image {
width: 729px;
height: 742px;
}

.hero-banner-img {
position: absolute;
right: 40px;
top: 0px;
width: 700px;
height: 900px;
margin-top: -330px;

}

.exercise-card {
width: 400px;
height: 445px;
background: #fff;
border-top: 4px solid #FF2625;
border-bottom-left-radius: 20px;
text-decoration: none;
display: flex;
justify-content: space-between;
flex-direction: column;
padding-bottom: 10px;
transform: scale(1, 1);
transition: 0.3s all ease-in-out;
}

.exercise-card img {
height: 326px;
}

.bodyPart-card {
transform: scale(1, 1);
transition: 0.3s all ease-in-out;
}

.exercise-card:hover,
.bodyPart-card:hover {
transform: scale(1.1, 1.1);
}

.search-btn:hover {
color: #FF2625 !important;
border: 1px solid #FF2625 !important;
}

.exercise-video {
display: flex;
flex-direction: column;
gap: 24px;
width: 387px;
height: 381px;
text-decoration: none;
}

@media screen and (max-width:1200px) {
.detail-image {
width: 300px;
height: 300px;
}

.react-horizontal-scrolling-menu--scroll-container {
    width: 75vw;
}

.left-arrow,
.right-arrow {
  position: static !important;
}

.hero-banner-img {
  display: none;
}

.exercise-card {
  width: 320px;
}

.exercise-video {
  width: 320px;
  height: 300px;
}

}

@media screen and (max-width:400px) {
.exercise-card {
width: 280px;
}
}

i am using the v4 of the horizontal scrollbar

Has anyone else noticed that the exerciseDb api on Rapid shows few results now. unlike the video. I even search for some values on the api and it comes up empty. sometimes it show 2 or 3 results max. Is this from the api or from my end ?

yes i noticed the same thing too...do you perhaps know why its showing that way?

??

i faced this error "You are not subscribed to this API."

You have to click the subscribe button, its free for 550 requests per day.

how to resolve ? i have double checked the api key and host name ..

on downloading assests folder show empty how can i download assests floder

directly access it from his git repo

how to resolve ? i have double checked the api key and host name ..

Have you solved this issue? I'm also facing the same problem.

Jo bhi key .env file me daali hogi . Usko as it is write krdo code me .env process mt kro . Then it will work .
…
On Mon, Apr 15, 2024, 12:08 rasikabule @.> wrote: @.* commented on this gist. ------------------------------ [image: Screenshot 2024-03-12 011202] https://private-user-images.githubusercontent.com/135583999/311845867-198b9d46-c9d4-4e43-9260-b827273c2818.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTMxNjMyMDIsIm5iZiI6MTcxMzE2MjkwMiwicGF0aCI6Ii8xMzU1ODM5OTkvMzExODQ1ODY3LTE5OGI5ZDQ2LWM5ZDQtNGU0My05MjYwLWI4MjcyNzNjMjgxOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNDE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDQxNVQwNjM1MDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kMDk4MTQ2MjQ5NDQ2NmU4MzEwMzkxN2I3NWNmNmYwMWY4N2I5Y2I5OTgwZTVlMDcyMmNlNzU0M2I1ZThiODU1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.W8q0l94PlItbDWIBLctQrihghh8ZXVy5Y2mDwmFIraE how to resolve ? i have double checked the api key and host name .. Have you solved this issue? I'm also facing the same problem. — Reply to this email directly, view it on GitHub https://gist.github.com/adrianhajdin/65d0f830036fd72b22f2d921ae3e29ad#gistcomment-5023480 or unsubscribe https://github.com/notifications/unsubscribe-auth/BAKNR74F6ZXXS34FWDYFL6LY5NYYFBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNRXG43TSOBQU52HE2LHM5SXFJTDOJSWC5DF . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub .

Thank you so much. It works.

i am getting this error

i am getting this error

i am also getting this same issue

i am getting this error after completing the overall project?? can any one solve this?

i am getting this error after completing the overall project?? can any one solve this?

Hello, please how did you solve this problem, I am facing the same
did you solve this

here is the code i used. The error handling I corrected it import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { Box } from '@mui/material';

import { exerciseOptions, fetchData } from '../utils/fetchData';
import Details from '../components/Details';
import ExerciseVideos from '../components/ExerciseVideos';
import SimilarExercises from '../components/SimilarExercises';

const ExerciseDetail = () => {
const [exerciseDetail, setExerciseDetail] = useState({});
const [exerciseVideos, setExerciseVideos] = useState([]);
const [targetMuscleExercises, setTargetMuscleExercises] = useState([]);
const [equipmentExercises, setEquipmentExercises] = useState([]);
const { id } = useParams();

useEffect(() => {
window.scrollTo({ top: 0, behavior: 'smooth' });

const fetchExercisesData = async () => {
  const exerciseDbUrl = 'https://exercisedb.p.rapidapi.com';

  if (!id) {
    console.error('No id provided');
    return;
  }

  console.log('Fetching data for id:', id);
  
  try {
    const exerciseDetailData = await fetchData(`${exerciseDbUrl}/exercises/exercise/${id}`, exerciseOptions);
    console.log('Fetched exercise detail data:', exerciseDetailData);
    setExerciseDetail(exerciseDetailData);
  } catch (error) {
    console.error('Error fetching exercise data:', error);
  }
};

fetchExercisesData();

}, [id]);

if (!exerciseDetail || Object.keys(exerciseDetail).length === 0) return

return (
<Box sx={{ mt: { lg: '96px', xs: '60px' } }}>

on downloading assests folder show empty how can i download assests floder

Can you able to download i am also facing the same issue

turn off privacy on your browser!

Did you find the solution for this issue?