Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
2

Prince Chukwu

@cprincec250 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Implemented using React, React Router, Tailwind

    #react#tailwind-css

    Prince Chukwu•250
    Submitted about 2 years ago

    1 comment
  • Fully functional interactive comment section with React

    #accessibility#react

    Prince Chukwu•250
    Submitted about 2 years ago

    0 comments
  • React, CSS

    #accessibility#react

    Prince Chukwu•250
    Submitted about 2 years ago

    0 comments
  • HTML, CSS, JavaScript, Fetch API, Local storage

    #accessibility

    Prince Chukwu•250
    Submitted about 2 years ago

    0 comments
  • HTML, CSS and JavaScript

    #accessibility

    Prince Chukwu•250
    Submitted about 2 years ago

    1 comment
  • I used HTML, CSS, JavaScript for this project

    #accessibility

    Prince Chukwu•250
    Submitted about 2 years ago

    1 comment
View more solutions

Latest comments

  • denise•530
    @moncadad
    Submitted about 2 years ago

    Interactive Rating Component

    1
    Prince Chukwu•250
    @cprincec
    Posted about 2 years ago

    Hi Denise, you did a great job on the UI.

    One way you could keep the style for selected rating is to add a class to any of the ratings (circles) selected and remove that class from any other circle it may be applied to. Then in your css file, you can define the styles for that class.

    Here is a little example of what I mean. Assuming you have this html for the possible ratings:

    <ul> 
    <li class="rating">1</li>
    <li class="rating">2</li>
    <li class="rating">3</li>
    <li class="rating">4</li>
    <li class="rating">5</li>
    </ul>
    

    Now in your JavaScript file you could add click event listeners to each 'li' so as to assign a class to the clicked 'li'. Thus:

    const ratingElements = document.querySelectorAll(". rating");
    
    ratingElements.forEach(element => element.addEventListener("click", (e) => {
    
    // Remove the unique class from all the rating buttons
    ratingElements.forEach(li => li.classList.remove("selected"));
    
    // Add the unique class only to the clicked element 
    e.target.classList.add("selected");
    });
    
    

    Now in your css file you could now style the element with class of selected as you wish. Example:

    . selected {
    background-color: orange;
    color: black;
    }
    
    

    Good luck!

    Marked as helpful
  • Vishnu_31•230
    @vishnu-31
    Submitted about 2 years ago

    Responsive design Intereactive Rating component using flexbox

    2
    Prince Chukwu•250
    @cprincec
    Posted about 2 years ago

    Hi,

    The difficulty you have in adding a single whitespace on the left and right side of the dynamic rating number is due to the 'flex' display you set to the parent 'section' element (with class of bubble). Take that (flex) out then single whitespaces will work properly around the number.

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub