Skip to content
OverviewSolutions
31
Comments
12

Fox

@urboifoxAlexandria550 points

Web Developer👨‍💻📌

I’m currently learning...

DSA

Latest solutions

View more solutions

Latest comments

  • Fox•550
    @urboifox

    I dont understand the comment but i hope Gabriel explained how 😄

  • Fox•550
    @urboifox

    Hey Mohamed, Congrats on completing this challenge🔥

    I have some tips that you might find interesting!

    first things first:

    html 📄

    • you shouldn't use the <main> element as your card in the page, The content inside the <main> element should be unique to the document 🙌. It should not contain any content that is repeated across documents, (it just contains the main elements in the page)
    • instead of using the img element you can use the picture element and change the img depending on the user screen size 👀, you can learn more about picture element from here📌
    • instead of using the <div class="container"> element you could have used the <article> element, the <article> element represents a self-contained composition in a document, page and it's perfect for such cases when you have one or multiple cards.

    CSS 🎨

    • you dont have to use values like 0.875rem and 0.625rem thats not practical, if you want to come up with a solution that matches the original design you can use extenstions like perfectPixel🙌 keep in mind that on style_guides.md you had the recommended font size, and for the padding sizes you shouldnt write more than one decimal point so keep that in mind.
    • you should use @media media queries to change the style of your card depending on the user screen width, you can learn more about media queries from here💻: for example on the screens that are smaller than (767px) you want your card flex-direction to be column instead of row so the code will be something like this:
    media (max-width:767px) {
  .card {
    flex-direction:column;
  }
}

    I hope this helps!🙌

    good luck on your next solutions😄

    Marked as helpful
  • Fox•550
    @urboifox

    hey there, congrats on completing this challenge! I have some small tips that might interest you! css 👀:

    • you can change the justify-content: space-evenly in the .product-price-section element to justify-content: space-between
    • you shuoul use the rem and em instead of px since pixel value is not responsive! away from that I think It's a great solution! good job
    Marked as helpful
  • Fox•550
    @urboifox

    Hey Pi3guss, you solution looks pretty fine heres some more tips that might interest you and help you in future projects tho😊

    • in your solution you made the numbers as buttons, and when the user focuses them then the color changes, and thats cool but heres the problem: when the user clicks outside the buttons the focus gets removed then the style also gets removed 🫤 and that is not so practical in bigger projects🫤 so heres my advice: you can add this function to your buttons
    rates.addEventListener(("click"), (e) => {
  if (e.target.classList.contains(btn)) {
    rates.forEach((rate) => {
      rate.classList.remove("active");
    })
    e.target.classList.add("active")
    rating.innerHTML = e.target.innerHTML;
  }
})

    this basically add a class named active on the button you click on and removes it from the other buttons.🙌 then in your css file you can select the .active class and style it the same as the button:focus element and this should give you the same result without the click away problem 👌😁.

    • another problem is when the user doesnt choose a number he still can hit submit and send the data... in this case: the <span id="rate"></span> element will be empty in the second card🫤 to solve this problem you can check if the user selected a number then you will only excute the condition that switches the card. heres an example:
    submit.addEventListener(("click"), (e) => {
  if (rating.innerHTML !== "") {
    secondCard.classList.remove('hidden')
    mainCard.style.display = 'none'
  }
})

    and I hope this solves the problem !😁📌 and i also really hope this helps you in the future and with your JS code, if you need any thing else just ask! good luck!🌹

    Marked as helpful
  • Fox•550
    @urboifox

    Hey Marcus, nice solution!😁 I have some tips that might help you👨‍💻 -📌you might want to wrapp your button (<p>) with an <a href=""> element to make it clickable.

    • 📌in smaller screens (smaller that 767px) your card goes out of the frame! here are some solutions to fix it! you might want to decrease the font size in normal screens, and make the height and width of the card fit-content so they wont be static and change depending on the font size of the inside content!
    • 📌the <section> element represents a generic standalone section of a document, or we can call it the whole section in a website. as for this challenge you could switch the <section> element with an <article> element or a <div> with a class of card! I hope this helps! goodluck Marcus🌹⌨️
    Marked as helpful
  • Fox•550
    @urboifox

    Hey Michel, nice solution!

    • the <article> tag is fine here because it specifies independent, self-contained content.

    • a tip for using hover state is to put a transition: .3s on the element with the hover state so it makes it animate smoother 👌 and there are a lot of css shadows and gradient generators out there which can help you make more cool shadows! like this one

    • the <header> element is intended to usually contain the section's heading (an h1 – h6 element or an h group elements) in this case it's not a section it's a card so in the big projects you might just use a <div> with a class name called heading or header or anything you like😊👌

    I hope this helps atleast a little bit, good luck 👨‍💻🌹

    Marked as helpful
View more comments