All comments

Ayça Gürler• 180
@aybegu
Submitted 7 months ago
This was first project that I did not use a height property 😄 If you have any suggestions to improve my code, please feel free to share!
Recipe Page using React
1
P
Can Cömertpay• 440
@cancomertpay
Posted 7 months ago
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!
1

@joshmichael23

Submitted 8 months ago

I am having a layout shift sometimes when loading the images. Could this be related to Images component? Thanks in advance.

E-commerce using Next.JS

Can Cömertpay• 440

@cancomertpay

Posted 8 months ago

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• 240
@JJacobPR
Submitted 11 months ago
Hey!

This app is the beginning of my TS journey and I hope you like it.

As this API tends to have bugs with random data, I just added ID of hint as parameter and generated it myself. 😀
Advice Generator using React + TS
1
P
Can Cömertpay• 440
@cancomertpay
Posted 10 months ago
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
0

Can Cömertpay

All comments

Recipe Page using React

E-commerce using Next.JS

Advice Generator using React + TS