@iulian-cenusa
Tyson W
@Tyson-WellingsAll comments
- @Tyson-Wellings
Hey! Just wanted to say that your background gradient solution is very clever! When I attempted the same challenge I overlapped the slider with divs to take the place of the thumb and slider bar. One div would show the filled areas! The width of this div would change according to the slider with some javascript! If that explanation is hard to understand have a look at my code. Your solution is elegant and has fewer moving parts :). There is just a minor flaw in your logic! the white gradient should start at the same percentage as the green part of the gradient. for example if the green gradient stops at 25% have the grey gradient start at 25%! To prevent the color fading you can some extra stops to your gradient of the same color. background: linear-gradient(90deg, green 0%, green 25%, white 25%, white 100%); I hope that helps!
Marked as helpful - @ManuelD10@Tyson-Wellings
Hey! Your solution looks great! You've added all functionality required and the design looks very close to the original jpegs. If you are looking for a challenge I would encourage the use of transitions on the slider as well as figuring out a way to have the slider shade the areas of the slider that have been filled (hard to explain but notice how in the design photos the slider is half green and half grey?)! I recently submitted my solution to this challenge myself, feel free to glance over at it for inspiration if you get stuck on those two smaller challenges :) Once again great work! I look forwarded to seeing more of your submissions on this wonderful website
Marked as helpful - @Ezzaldin97@Tyson-Wellings
Well done completing the challenge! I just submitted my solution for the same challenge myself. Unfortunately on my screen I notice a few errors in the functionality.
The tip buttons don't stay highlighted when another input is clicked. Ideally they should stay highlighted to give the user visual feedback. Otherwise you wouldn't know what tip percent you decided on. Also I have clicked around and filled the inputs in different orders. I have yet to be able to get the tip calculator to actually spit out a result. The error messages are not working either so I can currently input 0 and negative numbers without any error messages popping up.
The reset buttons works! Visually you've managed to recreate the layout and it is responsive! Overall is seems like the JS needs a little more testing while the html and css are ready to go.
Marked as helpful - @Anwar11234@Tyson-Wellings
You are getting an error in your report related to landmarks. I too had the same issues with my projects. What I learned is that you must divide the body section into
body header/header main/main footer/footer /body
Since doing so I no longer receive this error.
https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html
I'm quite early on in my CSS development so I do not feel qualified to give feedback on that portion however I would like to say I found your use of REM units for text interesting. I personally would also like to utilize these units more so I would love to hear your reasoning behind their use.
Marked as helpful - @3filian@Tyson-Wellings
To add the purple wrapper to the image you can create a wrapper div around the image. Set the background the wrapper div to the color that style guide provides you!
