I realised that my CSS, especially flexbox and css grid, is not really that good. How can I use them in a better way? I always find myself guessing random pixel numbers for the font sizes or grid sizes.
The bottom of my image element is not really touching the box that I made. I am not quite sure how to fix this.
I am still very new to HTML and CSS. I hope you guys can provide good feedback for me. Thank you!
apply display : block onto the product image element to solve the 2nd problem.
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.
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
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;
any suggestions and comments are much appreciated
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;
}
Any correction is welcomed
Hey congratulations on completing this project.
There're some issues that you need to check out.
The condition for checking leap years is birthYear % 4 === 0 && birthYear % 100 !== 0) || birthYear % 400 === 0
Hello guys! How do i make to activate the active class in only 1 button, removing the class from the previous buttons i clicked?
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);
});
});
This is my first project that I tried to do all by myself using CSS and HTML. I still have no trouble trying to optimize the CSS code part and apply some customizations.
I didn't find it difficult to build this project, it took me a while because I still don't have practice. I tried to customize it a bit more, to try and explore other features.
I wanted to know if there is anything I can improve in optimizing the code.
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
As this is my first time, there may be many mistakes. Please give me a lot of feedback.
The image doesn't appear. There's no images being pushed to the repository.
I used HTML and CSS. I centered the whole thing with Flexbox, I don't know if that was the right way to go though? The readme file of the challenge gave the width for mobile and desktop. But I didn't use that in my code, how should I use this? When checking in inspector mode in chrome on the exact width of the mobile version it already looked exactly as it should be without having to do anything in CSS to scale it, is this because of flexbox?
Feedback is welcome. I was wandering if I was using things that are unnecessary. Also, for some reason the live deployment of github doesn't show the image...?
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).
What did you find difficult while building the project?
Which areas of your code are you unsure of?
Do you have any questions about best practices?
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.
Hello (:
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.
