Skip to content
OverviewSolutions
9
Comments
3

Eric Winkelspecht

@ericwink310 points

I am a Software Engineer specializing in Web Application Development. Let's build something great together.

Latest solutions

View more solutions

Latest comments

  • Eric Winkelspecht•310
    @ericwink

    Hi Atanu,

    Great work on the challenge! Keep up the great work and keep coding!

    It looks like you have your mobile view kick-in at a width of 420px. You may want to consider adjusting that to around 600px. Using the responsive view in inspector in Chrome, the edges of the card hit the sides of the screen at around 575px or so, resulting in the design squishing down until you reach the 420px. If you aren't already using inspector in whichever browser you prefer (Chrome or Firefox are great!) play around with the different view widths and set your breakpoints at the spots where the UI breaks down.

    Hopefully this helps!

    Marked as helpful
  • Eric Winkelspecht•310
    @ericwink

    Hi Saminstein,

    Great job on this challenge! Looks great and is responsive. I don't see a hover state on your button, so that might be a useful thing to add for user interactivity.

    Regarding your question on the prices, I would recommend surrounding both in a container, enabling flex, and separating them with gap.

    When approaching how to structure your code, I suggest drawing some things out by hand before you even begin writing a single line of code. Put boxes around elements, separate the items into columns and rows - draw as much as makes sense to you. This will help you figure out how many sub-containers you may need to help keep your elements organized, and will make CSS much easier to manage. This will be key when working with more complex layouts.

    Also, don't forget about semantic markup. DIVs can be replaced with SECTION which could also help organize your structure. https://developer.mozilla.org/en-US/docs/Glossary/Semantics

    Hopefully this helps!

    Marked as helpful
  • Eric Winkelspecht•310
    @ericwink

    Great job on this challenge, Noah! Nicely organized code and it works well. The only feedback I have is you could consider reducing the amount of JS by refactoring to a single function that handles any button press by accepting a parameter:

    function selection(input) {
    selection = input
}

    Each onClick can call the function with its specific argument:

    <li><button class="rating-btn" onclick="selection(1)">1</button></li>
<li><button class="rating-btn" onclick="selection(2)">2</button></li>

    etc...

    Awesome job for a first JS project! Keep up the great work!

    Marked as helpful