Skip to content
OverviewSolutions
23
Comments
7
P
Godwin
@itadori-kun

All comments

  • Godwin•410
    @itadori-kunPosted almost 2 years ago

    Hello Pri89yanka,

    Congratulations on completing the challenge, here are a few suggestions.

    • Stick with one type of unit call ie choose either px or rem and not both.
    • body{width: 100%; background-color: hsl(212, 45%, 89%); display: grid; min-height: 100vh; row-gap: .5rem; font-family: "Outfit", sans-serif; place-content: center;}

    This keeps your code right at the center, the other code was being pushed down the viewport because of the padding you used with the rem unit.

    Also, check this link web.dev to know the reasons why specific units are used.

    hope it helps, once again Happy coding 👻

    Marked as helpful
    1
  • Pretty Kunene•690
    @nonozaSubmitted almost 2 years ago

    Hi com!!!

    Please review this project for me. I built it using Vanilla Js and I get to experience the use of " :root CSS pseudo-class" in the project.

    Please check it out and let me know what I can do better.

    Thanks! Happy Coding!!!

    Interactive rating component using Vanilla Js

    2
    Godwin•410
    @itadori-kunPosted almost 2 years ago

    Hello Pretty, Great work and nice code, it is fantastic. Here is a little suggestion.

    • You forgot the: hover and :active on the class ratings.
    • Validate your submit btn to only submit when a rating number has been selected to avoid pushing out blank on the innerHTML part.
    • Try using more semantic tags instead of non-semantic tags like("divs"). Check this out to understand more: "https://www.w3schools.com/html/html5_semantic_elements.asp" or "https://www.freecodecamp.org/news/semantic-html5-elements/".

    Hope you find this helpful!!!. Happy coding 👻💜💜

    Marked as helpful
    0
  • Sebastian•220
    @SebastianLakaSubmitted almost 2 years ago

    Hi it's my first interactive project with JS. All is in repo at my github.

    Interactive rating

    2
    Godwin•410
    @itadori-kunPosted almost 2 years ago

    Hello Sebastian, Great job completing the project. Your work is fantastic. Here is a suggestion, you should validate the submit button to work only when the rating number has been selected instead of returning blank when the submit button is selected without the ratings being selected.

    Happy coding, 💜👻

    Marked as helpful
    0
  • Godwin•410
    @itadori-kunPosted about 2 years ago

    Hello kylejrhoden, I want to congratulate you for the awesome work you have done with the code, great work. Though I do have a few suggestions:

    • Try to write more semantic-UI instead of the use of Divs which are non-semantic to aid accessibility. Check out the link, and learn to know what each tag does https://www.w3schools.com/html/html5_semantic_elements.asp

    • On this line of code <img src="images/bg-pattern-card.svg" id="pattern" aria-hidden="true">, add an alt="" just like this since it is presentational.

    • On this line of code <img src="images/image-victor.jpg " alt="Victor Profile Image">, the alt should not contain any words like pictures, images, and related since it is automatically been read by the screen reader to avoid repetition.

    I hope you find this helpful, 👻 Happy coding.

    0
  • Godwin•410
    @itadori-kunPosted about 2 years ago

    The attribution section should be out of the top-parent container. Then use your flex-direction column to get everything in a column instead of a row.

    Also, learn more about semantic UI for accessibility. This might help a bit https://www.w3schools.com/html/html5_semantic_elements.asp to know what each tag does.

    Check this out should tell you more about how to go about responsiveness. https://web.dev/learn/design/

    I hope it does help a bit. Happy coding

    1
  • Jorge Freitas•40
    @JorgeNevesFreitasSubmitted about 2 years ago

    When the buttons get active, the size increases and it is also increasing the size of whole card. Should it be like that?

    Order Summary card

    1
    Godwin•410
    @itadori-kunPosted about 2 years ago

    Hello JorgeNevesFreitas Great work. Regarding your question,

    1. There are two different font-sizes and font-weight on your #checkout-buttons__proceed and the hover state. The weight and font-sizes should only be placed on the #checkout-buttons__proceed state. The hover state inherits the normal state.

    2. You only wrote the code for the .checkout-preview__change a: hover state and not the .checkout-preview__change a state. Apply point 1. when editing and should help.

    Happy coding

    0
  • Godwin•410
    @itadori-kunPosted about 2 years ago

    Hello @anoopkundu567, Congratulations on completing the challenge, it's awesome but I do have a few suggestions.

    • You should write a code to validate that the submit button will only go through when the ratings have been clicked so it does not give you the '[object HTMLSpanElement]' but the value.

    • The hover effects on the ratings <span> should have the color (var(--orange)) when hovered on and the active state color (var(--light-grey)).

    • It would do well to add a font size to your submitted text.

    • Try using more Semantic UI. Check out: https://www.w3schools.com/html/html5_semantic_elements.asp for how this can be done or what each tag does to reduce the many uses of "DIVs" in your code.

    • Try using less of the !important keyword except extremely necessary.

    Good luck and Happy Coding Itadori-kun

    Marked as helpful
    0