Skip to content
OverviewSolutions
18
Comments
10

Erel Ropeta

@ereljapco385 points

A mom, wife, and developer :)

I’m currently learning...

HTML, CSS, JS, React, NodeJS, Firebase

Latest solutions

View more solutions

Latest comments

  • Erel Ropeta•385
    @ereljapcoPosted over 2 years ago

    Hey, MirTynan!

    Try to use rem. 0.65rem worked for mine :)

    And if I may add some suggestions:

    Re: accessibility

    • You can wrap your container inside main.
    • You can add alt="Add a description here" for the image

    Re: style

    • You can use flexbox on main to place your item in the center of the viewport. Consider setting your height to 100vh
    • You can add the font-family that is in the style-guide.md
    Marked as helpful
    0
  • Erel Ropeta•385
    @ereljapcoPosted over 2 years ago

    Hey, Shay! Nice to see your finished solution for this challenge. Just submitted mine, as well :)

    Just some few points:

    Re: accessibility

    • You could wrap the container inside the main tags and the attribution inside the footer tags.
    • For the icon tag, since its for decoration only, you could add a blank alt alt=""

    Re: styles

    • If you will use the main tags, as I suggested, you could set its height to 100vh and place your container in the center using flexbox on the main
    • You can decrease your breakpoint (i.e. the value of min-width on media query) to make your solution more responsive :)
    Marked as helpful
    0
  • Erel Ropeta•385
    @ereljapcoPosted over 2 years ago

    Re: styles

    • The select should be be light grey colored, while the hover state should be the orange colored
    • You forgot to add cursor: pointer
    • You forgot the hover state for the submit button

    Re: accessibility

    • wrap your main contents with the main tag
    • wrap your attribution with the footer tag
    • since the image is for decorative, you could add alt=""

    More information regarding accessibility here https://www.w3.org/WAI/tutorials/images/

    Overall, great job on finishing the challenge! Hope to see more finished challenges from you :)

    Marked as helpful
    0
  • Erel Ropeta•385
    @ereljapcoPosted almost 3 years ago

    Hello!

    • You can wrap the dollar sign and the input element in a container. And add styles to it :)
    <div class="bill__input-container">
  <p class="bill__dollar-sign">$
<input class="bill__input" />
</div>
    • You're currently using tipchoosen, which is a nodelist, to get the value of the button clicked. tipchoosen.value returns undefined. Instead, use the event.target to get the value.

    Some things I noticed that you could look into:

    • 50% tip button's value was set to 0.25
    • NaN is appearing when billVal is empty. You can add an if condition so you can set a value to billVal if it becomes empty.
    Marked as helpful
    0
  • Erel Ropeta•385
    @ereljapcoPosted about 3 years ago

    Hello, Alif. Great work! Tried the functionality of your work. The amount backed and number of total backers is updating, however the number of items left isn't.

    Marked as helpful
    1
  • Erel Ropeta•385
    @ereljapcoPosted over 3 years ago

    1. You can make the on hover effect by adding a div inside the div container of the equilibrium image. Then add the view image inside the newly created div. Make use of the position property where the new div is placed on top of the equilibrium. Set the background-color of the new div to the primary. Then set the opacity of the new div to 0. Then set the opacity of the new div on hover to 0.x.

    2. For the accessibility issues, you can use main tag instead of div tag for the div.container and footer tag for the div.attribution.

    Marked as helpful
    0
View more comments