Skip to content
Submitted almost 2 years ago

interactive-rating-component

Ahmed Osama•80
@ahmedd-osama
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I want to know more about the best practice for DOM manipulation, more specifically, the appending of HTML elements created using JS. I am used to create an element with javascript and change the innerHTML of that element. After that, I append it to the body or other element within the body. Howevet, I directly changed the innerHTML of the element DIreclty in this small project because it is on a small scale.

Community feedback

  • Muhammad Adam•210
    @Muhammad-adam778Posted almost 2 years ago
    • عاش يا بطل .احنا عرب اه لكن هستأذنك أتكلم انجليزي عشان الكلام بيدخل في بعضه هنا ومش هتفهم مني حاجه
    • There is some tips to improve design & solve accessibility problems:
    • First About Accessibility : In Html file delete role attribute from <main> and <footer> elements, you don't need it.
    • Second About Design:
    • You need to hide the scrollbar & center the footer horizontally, to do that check this steps:
    • To hide scrollbar :
    1. Set the margin of <body> to zero
    2. Set the position property of <footer> to absolute and the bottom property to zero.
    • To center the footer horizontally, check code below:
    footer {
    left: 50%;
    transform: translateX(-50%);
}

    • For mobile : Add text-align: center to the <footer>

    • I hope you find that helpful.

    Marked as helpful
    1
    Ahmed Osama•80
    @ahmedd-osamaPosted almost 2 years ago

    @Muhammad-adam778 Thanks for the tips, they are helpful indeed. Are you from Egypt BTW?

    1
    Muhammad Adam•210
    @Muhammad-adam778Posted almost 2 years ago

    @ahmedd-osama Yes, i'm from Egypt, and i am so glad it was helpful.

    0
    Ahmed Osama•80
    @ahmedd-osamaPosted almost 2 years ago

    @Muhammad-adam778 I am from Egypt too :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord