Skip to content
OverviewSolutions
7
Comments
6

Catalin Banici

@CatalinBaniciRomania260 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!

I’m currently learning...

React, Redux

Latest solutions

View more solutions

Latest comments

  • Catalin Banici•260
    @CatalinBanici

    Nice!

    You could use a Loading Spinner when you select a country, instead of that simple Loading text in the top left corner.

    And you can also add a Loading Spinner when you click on a Border Country. First time I clicked on a Border Country it took about 1 sec to fetch the data, there was nothing showing me that its processing, and I thought it was broken or something.

    Marked as helpful
  • Catalin Banici•260
    @CatalinBanici

    Nice! With Context API seems legit! I also done this challenge and I was prop drilling the heck out of it. It was a mess 😅

  • Catalin Banici•260
    @CatalinBanici

    For the little orange dot, I basically added a <span> element in the <p> tag containing the other tags, and after the other tags inside that <span> I put a <i> tag with the font awesome icon fa-solid fa-circle, and dynamically that <span> element getting removed as onclick event. I did not use :after pseudo.

    scroll to the right

     <li class="notification new-notification">
        <div>
          <a href="#"><img class="avatar" src="./assets/images/avatar-mark-webber.webp" alt="User Avatar"></a>
        </div>
        <div class="text-div">
          <p><a class="name" href="#">Mark Webber</a> reacted to your recent post <span class="link"><a href="#">My first tournament today!</a></span><span class="new-icon"><i class="fa-solid fa-circle"></i></span></p>
          <p>1m ago</p>
        </div>
      </li>

    You can try replacing the :after with <i class='fa solid fa solid></i> and make it orange, I hope it helps

    Marked as helpful
  • Catalin Banici•260
    @CatalinBanici

    That's really nice actually, after seeing this I might consider reworking on mine.

    But don't forget to add the hover effects, I can only see one on mark as read/unread buttons, and there should be more.

    Also try to add a function to remove the classlist for each notification, not only from the Mark All As Read button, as realistically , when you click on a individual notification, it should go on a read state.

  • Catalin Banici•260
    @CatalinBanici

    Use this for the input border on focus:

    input:focus {
  outline: none;
  padding: 15px;
  border: double 1px transparent;
  border-radius: 7px;
  background-image: linear-gradient(white, white),
    linear-gradient(to right, hsl(249, 99%, 64%), hsl(278, 94%, 30%));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

    Not sure what it does or if everything is used in there.. but it works... for me at least. Try it

    Marked as helpful
  • Catalin Banici•260
    @CatalinBanici

    You should use an <ul> tag for the container and each notification inside an <li> tag. The avatars and every link should be in a empty anchor <a> tag, empty, because there is nothing behind them. The private message also should be in a different element tag, not sure which one, but in my solution I used <aside>, just to be different from the others.

    edit: I just noticed, you did put the links in <a> tags, but you should also put the <img> tags from the avatars, usually you can click either on the user's avatar or user's name to see its profile in most cases, I guess...

    Marked as helpful