@devhnry
Latest solutions
Latest comments
- @RodrigoHLC
Looks very good man, and the responsiveness works great! I did find one issue though that pretty much breaks the app: if all your tasks are unchecked, and you click on "Completed", the bottom selection bar disappears and it's impossible for the user to see the list again. (Same thing if all tasks are checked and you click on "Active", though at least in this case you can add a new task and that will make the bottom bar popup again).
Marked as helpful - @Yinkajay@RodrigoHLC
I know there are a few ways to create the tooltip:
-
Some people will create a single <div> element set to opacity:0 and position: absolute, and use the "mouseover" eventListener to change the opacity to 1 (and "mouseout" to set it back to 0), and change its position and textContent depending on which bar you're hovering over.
-
I believe it's possible to create tooltips with only CSS using ::before and ::after, but I've never looked into it. Here's the tutorial: https://www.youtube.com/watch?v=ujlpzTyJp-M&ab_channel=WebDevSimplified
-
I created a <div class="tooltip"> after each <div class="bar"> on my graph (so, multiple tooltips), then changed the "order" property to have each .tooltip appear before each .bar (even if they're after the .bar in my html) and set opacity: 0. Then, since each .tooltip is still AFTER .bar on the html, you can use ".bar:hover + .tooltip {opacity: 1}", and everytime you hover over a .bar element, the .tooltip that's immediately after it in the html will have its opacity set to 1 (I used ".bar:hover ~ .tooltip {opacity: 1}" in my code, but "+" would have been more specific).
Hope this helps!
-
- @josuez2006@RodrigoHLC
Hey man, if I understood correctly what you mean, you might want to give your <img> element a CSS property of "object-fit: cover". Provided that the <img> is contained within a <div> or whatever containing element, if this parent element changes in size, the img size will also change but always maintaining its aspect ratio (which means the image will get clipped if the parent element has a different aspect ratio, but the image won't get distorted). If the image is not a <img> element but rather a background image, you can use "background-image: cover". This link might be useful: https://www.bisign.es/css/
Also, if I may offer some extra advice, you might want to give your .newsletter a maximum width so that it doesn't stretch too much on large screens.
EDIT: one last detail: the email address shown in the success state does not match the address the user enters.
Marked as helpful - @WismalWhat are you most proud of, and what would you do differently next time?
Some better updates
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@RodrigoHLCHey there, all you need to do is add an eventListener to your "email" variable. Use the eventListener "input" and remove the .error class. As soon as the user types anything, the .error class will be removed and the input element will go back to its original color.
I just finished this challenge myself so you can take a look at my code if you want to.
Marked as helpful - @jaojogadez@RodrigoHLC
Seems to me like the "num/100" are further from the right edge the shorter the word is. Here's where your problem lies: .icon1 > p, .icon2 > p, .icon3 > p, .icon4 > p { padding-right: 80px; padding-left: 8px; }
Each of your <p> elements will always push the "number/100" text 80 px to the right, so the shorter the word inside <p> is, the further from the right edge "number/100". The problem is that you're pushing the "number/100" elements a set amount of pixels to the right of the <p> elements. You need to find a way to have "number/100" always pushing against the right edge, instead of pushing X amount of pixels to the right of <p>. Hope this helps!
- @nikkehtine@RodrigoHLC
Ohhh that's pretty neat how you filled the bars depending on the score 🙌🙌
