Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
1

misty

@mistyb0170 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

  • News homepage with CSS Grid and Sass

    #sass/scss

    misty•70
    Submitted over 2 years ago

    1 comment
  • Calculator with React, Grid & Flexbox

    #react

    misty•70
    Submitted over 2 years ago

    0 comments
  • Notifications page with Vanilla CSS & JS


    misty•70
    Submitted almost 3 years ago

    0 comments

Latest comments

  • Alex Couture•250
    @demenciel
    Submitted almost 3 years ago

    Notification Page

    1
    misty•70
    @mistyb01
    Posted almost 3 years ago

    Hi! I'm not sure if my approach is the best way to do it, but here's what I did:

    • For the red dot, I made an empty span element, and for its style I gave it a red background, and defined its width, height, and border-radius to make it a circle. Then I manually added it to the html of the unread notifs. (I'm guessing in a real implementation, the red dot element would be appended to the DOM of an unread notif.)

    • Then when I mark all as read, I remove all the red dots by selecting them all by their class (which results in a nodelist), then I loop through each element and remove them from the DOM, using the parentNode.removeChild(). Another way to 'remove' them is to set their display property to none.

    Nice job with your code tho, let me know if you find a cleaner solution for this :)

Frontend Mentor logo

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