Responsive and Dynamic Product Preview Component with Image Change

1.) What did you find difficult while building the project?

What I found challenging is to get around when the screen is changing, the image will also change from mobile to desktop.

Also making sure the whole component is responsive:

• text
• margin
• display
• and padding

2.) Which areas of your code are you unsure of?

This code from my "script.js":

document.addEventListener('DOMContentLoaded', function () {
  const image = document.getElementById('responsiveImage');

  function changeImage() {
    if (window.innerWidth <= 800) {
      image.src = './images/image-product-mobile.jpg';
    } else {
      image.src = './images/image-product-desktop.jpg';
    }
  }

  window.addEventListener('resize', changeImage);
});

Overall, this piece of code DID the job, when the screen is less than 800px then the image will be in mobile mode then pass that pixel it will be in a desktop mode.

BUT

I think this cause some problems, because when the page/web first load the image turns into './images/image-product-mobile.jpg. Then after I resize or refresh the page/web, it'll became './images/image-product-desktop.jpg'

I'm not quite sure how that happened

3.) Do you have any questions about best practices?

Yes, but it's all in my styles.css.

Whenever I style, I just keep going and I add the necessary CSS properties that needs to be look like what the design is be, and even though I'm managing to complete the styling, I can't help but to have some thoughts about doing CSS asking Is this a good enough? or did I over did it again when it comes to styling?

With that said, here is some of my CSS concern for references:

.card button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  font-family: var(--ff-Montserrat);
  font-weight: var(--fw-700);
  color: var(--clr-neutral-white);
  background-color: var(--clr-primary-darkCyan);
  border: none;
  border-radius: 10px;
  transition: background-color 0.3s ease-in-out;
}

Also this one:

.main {
  display: flex;
  flex-direction: column;
  margin: 1rem;
  box-shadow: 0 0 5px 4px var(--clr-neutral-DgrayishBlue);
  border-radius: 1rem;
}

@media screen and (min-width: 800px) {
  .main {
    flex-direction: row;
    margin-top: 6rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
  }

  .hero img {
    border-radius: 1rem 0 0 1rem;
  }

  .card {
    padding: 2em;
    border-radius: 0 1rem 1rem 0;
  }
}

Also

• I use a bunch of display: flex whenever I do some styling. I'm not sure when to use display: grid and what would be the best time to use it.

Check Out My Repositories

Check Out this on Netlify

I would love you guys to check it out and give any kind of help, suggestions, tips, best-practices and criticism.