Latest solutions
FAQ accordion card built with JavaScript, CSS BEM and HTML
#accessibility#bemSubmitted over 2 years agoInteractive rating component built with HTML, CSS and JavaScript
#accessibility#bemSubmitted over 2 years ago
Latest comments
- @henrikkudesu@rafdidact
Hey, Leonardo! I did the same as @chicaboom-73 for the overlay, you should check that documentation out.
I see you're almost there, but I got a suggestion that would make your code even better:
- There's no need for two
source
elements inside of yourpicture
element. You can just add the source of the image of the first layout your working on to theimg
element, and then add the remaining one in asource
element to display only if it meets the condition you declare.
You can check my solution for reference. Hope it helps.
Marked as helpful - There's no need for two
- @kartikp962@rafdidact
Hey, Kartik!
I got a few suggestions that would make your code even better:
- Your layout should be responsive. This means the components of your design should be properly reorganized depending on the width of the device your viewing it from. When I switch to mobile view, your design stays the same. You can make your CSS automatically apply new styles depending on the width of the device your viewing it from with a
@media
rule. - Your button should take all the width available and change cursor to pointer when hovering. You can achieve this with a
width: 100%
and acursor: pointer
.
You can check my solution for reference. Hope it helps.
- Your layout should be responsive. This means the components of your design should be properly reorganized depending on the width of the device your viewing it from. When I switch to mobile view, your design stays the same. You can make your CSS automatically apply new styles depending on the width of the device your viewing it from with a
- @hanzala-bhutto@rafdidact
Hey, Hanzala!
I got a few suggestions that would make your code even better:
-
I can't see the font family this design's supposed to be applied. If you don't know what I'm talking about, check the
style-guide.md
file in this challenge's folder. -
When on a desktop view, the text inside your modal should be aligned to the left. You can achieve this by applying
text-align: left
to yourh1
andp
elements inside of.contents
.
You can check my solution for reference. Hope it helps.
Marked as helpful -
- @anggaanugrah@rafdidact
Hey, Angga!
I like your JavaScript, maybe even more than mine. It's very clean, but there's a common user error you have to catch.
If the user doesn't select any rating and then clicks submit, the form is submitted and the thank you message is presented without a rating. This should not happen.
In my code, this throws an error to the console. I catch it with a
try
statement wrapping the code that might break and acatch
statement wrapping the code that should run if so.You can check my solution for reference. Hope it helps.
Marked as helpful - @edward-hong@rafdidact
Hey, Edward!
Your rating options should get selected when you click on them, not immediately submit the rating given. You can look at my code for reference.
Now, about the colors, I actually have the same problem with this challenge. It might be a problem of the starter code folder or we might both be wrong lol. Let me know if you find the right approach to this.
Marked as helpful - @charleseffiongjr@rafdidact
Hey, Charles!
Bootstrap doesn't allow for much customization of the styles being applied to your HTML, which has a reason to be, but sucks in cases like this. I suggest you to look at other people's approach to this challenge and try to solve it with CSS.
You can start with my code. Hope it helps.