Skip to content
OverviewSolutions
13
Comments
14
P

Azzumar

@AzzumarithmMalaysia340 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Azzumar•340
    @Azzumarithm

    apply display : block onto the product image element to solve the 2nd problem.

    Marked as helpful
  • P
    Azzumar•340
    @Azzumarithm

    Hey there, there seems to be a problem with the image. The img doesn't appear, you need to use <img/> element. Put your image path in the src attribute like this <img src="example.jpg"/> . You also can put class attribute if you want to. You also want to make sure you push the image as well into github.

  • P
    Azzumar•340
    @Azzumarithm

    Hey congrats for finishing this challenge. Here are some suggestions that you can try out:

    I suggest you to understand my explanation first and try to create your own solution before looking at my code here:

    if you want to add the styling when you click it the rating number, you can do it using JS. Firstly, you need to make sure that every rating number element has a default class which is class = "rating-number". Then whenever you click on it you want to add the another class which is "active" using JS so now one of the rating number elements will have class = "rating-number active". Make sure you already apply styling to .rating-number.active like this. Make sure that you also create a variable called selectedNumber to store the rating Number value so that after you submit it you can use it in the thank you container by using template literal by using 'You Selected ${selectedNumber} out of 5' (I can't use the backtick ` symbol so I substitute it with ' ):

    Then if you want to remove the styling you just have to loop all .rating-number elements using forEach (outer loop) and then you also want to nest another forEach (inner loop) to remove any styling to any of the elements that contains "active" class. The outer loop will add "active" class to the selected ratingNumber and The inner loop will remove the "active" class from any of the ratingNumber elements. Make sure to execute the inner loop first within the outer loop before adding the "active" class to the selected rating number element.

    If you want to remove the display of a container or make it appear, you can use display : none; (remove) ; or display : block or flex (appear); . You can only change the display styling of the container if the selectedNumber is not undefined meaning you can't submit it if you don't select any of the rating Number.

    /* Default styling*/
.rating-number {
  color: grey; (or whatever color you're using)
}

/* Changing the color when "active" class is added to one of the .rating-number elements*/
.rating-number.active{
    color: orange;
}


    ratingNumbers.forEach(function(ratingNumber) {
    ratingNumber.addEventListener("click", function(e) {
        // Remove 'selected' class from all numbers
        ratingNumber.forEach(function(ratingNumber) {
            ratingNumber.classList.remove("active");
        });
        
        // Add 'selected' class to the clicked number
        ratingNumber.classList.add("selected");
        
        // Set selectedValue to the clicked number's text content
        selectedValue = ratingNumber.textContent;
        
    });
});

    submitButton.addEventListener("click", function(e){
    e.preventDefault();


    if (selectedValue !== undefined) {
        
        ratingContainer.style.display = 'none';
        thanksContainer.style.display = 'flex';
        descriptionSelection.textContent = `You selected ${selectedValue} out of 5`;
    }

    
 });

    Good luck in your coding journey

  • P
    Azzumar•340
    @Azzumarithm

    You can reduce the border radius a little bit to 10 px. To align the text at the center, you can use text-align: center;

  • P
    Azzumar•340
    @Azzumarithm

    I've looked into your code, here are some suggestions that you can try out.

    1.Clock image: Make width and height of clock image the same.

    2.Make the image and text appear on the same line, centered vertically, and aligned beside each other.:

    HTML:

    <div class="icons">
        <div class="img-text ETH">
              <img class="etherium_img"src="images/icon-ethereum.svg"/>
              <p>0.041 ETH</p>
        </div>
        <div class ="img-text clock">
              <img class="clock_img" src="images/icon-clock.svg" alt="" />  
              <p>3 days left</p>
        </div>
</div>

    CSS:

    .img-text{
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
}
  • P
    Azzumar•340
    @Azzumarithm

    Hey congratulations on completing this project.

    There're some issues that you need to check out.

    1. It doesn't work for leap years.
    2. The arrow icon doesn't appear
    3. The year can take negative number as input

    The condition for checking leap years is birthYear % 4 === 0 && birthYear % 100 !== 0) || birthYear % 400 === 0

View more comments