Frontend Mentor | Can Cömertpay's profile

All comments

@aybeguSubmitted 9 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

Can Cömertpay•440

@cancomertpayPosted 9 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!

Josh Michael•1,050

@joshmichael23Submitted 10 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

@cancomertpayPosted 10 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

@JJacobPRSubmitted 12 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

Can Cömertpay•440

@cancomertpayPosted 12 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