Skip to content
OverviewSolutions
13
Comments
14
P
Azzumar
@Azzumarithm

All 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

  • P
    Azzumar•340
    @Azzumarithm

    Hey good job on completing this challenge.

    Code Improvements

    Before selecting another .rating-btn, you have to remove all the "active" class that you added to the previous .rating-btn meaning you have to loop again all the .rating-btn elements to find all the .rating-btn elements that contains the "active" class and remove the "active" class.

    ratings.forEach((element) => {
  element.addEventListener("click", (e) => {
   
   //Code changes
    ratings.forEach((element) => {
       if (element.classList.contains("active"){
           element.classList.remove("active")
        }
      }

    e.target.classList.add("active");

    ratingScore = element.value;
    console.log(element);
  });
});
  • P
    Azzumar•340
    @Azzumarithm

    Good job on completing your first project but I can't view your code.

    Code Improvement:

    I assume that you do everything within the body element(if not then target the suitable parent element). If you want to center it horizontally, vertically then you can do it like this :

    body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    the default flex-direction is row(but you can change it to column but that's unnecessary for now) so in this case justify-content is to center horizontally and align-items is to center vertically (if you change to flex-direction: column, justify-content will center vertically and align-items will center horizontally)

    min-height : 100vh - ensures that the body element is at least 100vh (viewport height) tall, but will expand vertically as needed based on its content.

    Good luck on coding your journey

    Marked as helpful
  • P
    Azzumar•340
    @Azzumarithm

    The image doesn't appear. There's no images being pushed to the repository.

    Marked as helpful
  • P
    Azzumar•340
    @Azzumarithm

    not sure about the image, you might want to check if the path is accurate in the src img attribute and see if the image is in the right directory.

    About the centering, just make the body height : 100vh and then display: flex, justify-content: center (for horizontal center), align-items : center (for vertical centering).

    Marked as helpful
  • P
    Azzumar•340
    @Azzumarithm

    Just to make it more clean, when you click other rating numbers after you have selected one rating number, make sure that you set the background color of the previous selected rating number to the default color. You can add another class ("selected") in JS to the rating number that you have clicked (and not the other rating numbers) and then let say if you click another rating number again, you'll remove that "selected" class from the previous selected rating number and then add another "selected" class to current selected rating number. Don't forget to apply the css to the .selected class. Hopefully this makes sense.

    Marked as helpful
  • P
    Azzumar•340
    @Azzumarithm

    I notice that I can still submit without selecting the rating number. I suggest to only submit or make any changes after clicking the submit button if the variable that holds the value is not undefined.

    Marked as helpful
  • P
    Azzumar•340
    @Azzumarithm

    Have you used Google Fonts before? I add the fonts to my project. I'm not sure about the font they use, but I used Roboto.

  • P
    Azzumar•340
    @Azzumarithm

    hi, I can't preview your site. If you don't know how, you can use github pages. It's free.