Latest solutions
Frontend Quiz App | Vue.js | Vite | TailwindCSS | Pinia
#accessibility#tailwind-css#vite#vue#piniaSubmitted 10 months agoAudiophile E-commerce Website | Next.js | Tailwind | Framer Motion
#next#react#tailwind-css#framer-motionSubmitted 12 months agoDevlinks Full Stack App | Next.js | Firebase | TailwindCSS
#firebase#next#tailwind-css#reactSubmitted about 1 year agoDictionary Web App | Next.js | Framer Motion | Tailwind
#next#react#tailwind-css#framer-motionSubmitted about 1 year agoProject Tracking Intro Component | Next.js | Framer Motion | Tailwind
#framer-motion#next#react#tailwind-cssSubmitted about 1 year agoSpace Tourism Company Website | Next.js | Framer Motion | Tailwind
#framer-motion#next#tailwind-css#reactSubmitted about 1 year ago
Latest comments
- @aybegu@cancomertpay
Selam Ayça, böyle bir proje için CSS kütüphanesi kullanmaman iyi olmuş fakat kodun okunabilirliği açısından ve stil çakışmalarını önleme açısında React'ın React CSS Modules özelliğini kullanabilirsin, bu işini daha da çok kolaylaştıracaktır. Başarılar!
- @joshmichael23@cancomertpay
Hi Josh,
You can try more basic carousel logic like this:
... const [currentImgIndex, setCurrentImgIndex] = useState(0); const nextImage = () => { if (currentImgIndex < images.length - 1) { setCurrentImgIndex((prev) => prev + 1); } else { setCurrentImgIndex(0); } }; const prevImage = () => { setCurrentImgIndex((prev) => prev - 1); if (currentImgIndex === 0) { setCurrentImgIndex(images.length - 1); } }; const handleThumbnailClick = (index) => { setCurrentImgIndex(index); }; ... return images.map((item,index) => ( <div style={{ opacity: index === currentImgIndex ? 1 : 0, transition: "opacity 1s ease", width: index === currentImgIndex ? "100%" : "auto", }} > <img src={item} alt={"..."} /> </div> ))
This was just an example to explain the logic, I hope it helped. :)
Marked as helpful - @JJacobPR@cancomertpay
Hey Jacob, great work! But, when you send a random number between 1 and 224, if it happens to be 67, you encounter an error because the API isn't perfect. You could try using the 'do while' method like this :
do { let randomNumber = Math.floor(Math.random() * 224) + 1; const response = await fetch( `https://api.adviceslip.com/advice/${randomNumber}` ); if (response.ok) { const result = await response.json(); if (result?.message?.type !== "error") { setAdvice(result); break; } } else { throw new Error("Something went wrong, please refresh the page"); break; } } while (true);
Marked as helpful