Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions12Comments5

All comments

  • Iulian Cenușă• 330

    @iulian-cenusa

    Submitted

    The project is mostly complete but I have some things that I could not done as in design files:

    • On the slider thumb in the design files, there are different cursors on hover and thumb grabbing. I put cursor: grabbing; property on it and works for grabbing but on hover it did nothing. Can someone help me with this ?
    • For the background of the slider I used linear-gradient and changed it from JS but it doesn't look so good. Could someone give any advice on how to build it better ?

    If someone could help me with the questions above or with general advice on how good I used margins, padding and positioning it would be great. Any other feedback is appreciated !

    Mobile first with CSS flexbox, relative and absolute positioning

    2

    Tyson W• 305

    @Tyson-Wellings

    Posted

    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

    1
  • Tyson W• 305

    @Tyson-Wellings

    Posted

    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

    1
  • Tyson W• 305

    @Tyson-Wellings

    Posted

    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

    1
  • Anwar• 375

    @Anwar11234

    Submitted

    I would love feedback on my CSS code quality also, any note about accessibility would be great

    HTML and CSS and JS website

    2

    Tyson W• 305

    @Tyson-Wellings

    Posted

    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

    0
  • Tyson W• 305

    @Tyson-Wellings

    Posted

    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!

    0