Frontend Mentor | Interactive Comment Section coding challenge solution

Community feedback

@Eileenpk

Posted about 1 year ago

Hi Borko, your project looks great!

In regards to you getting the counters SVGs active (I'm guessing on hover?) I have sent you a pull request on GitHub so that you can see the changes I've made better.

In short, the only way that I know of to change the fill of an SVG is to:

Put the SVG directly in your code.
Add a class name to the SVG
In CSS selector should target the class of the SVG on hover and then the path
Add property name fill to the declaration block
The value should be the color you want the SVG to be.

<svg alt="plus-icon" class='plus' width="11" height="11" xmlns="http://www.w3.org/2000/svg"><path d="M6.33 10.896c.137 0 .255-.05.354-.149.1-.1.149-.217.149-.354V7.004h3.315c.136 0 .254-.05.354-.149.099-.1.148-.217.148-.354V5.272a.483.483 0 0 0-.148-.354.483.483 0 0 0-.354-.149H6.833V1.4a.483.483 0 0 0-.149-.354.483.483 0 0 0-.354-.149H4.915a.483.483 0 0 0-.354.149c-.1.1-.149.217-.149.354v3.37H1.08a.483.483 0 0 0-.354.15c-.1.099-.149.217-.149.353v1.23c0 .136.05.254.149.353.1.1.217.149.354.149h3.333v3.39c0 .136.05.254.15.353.098.1.216.149.353.149H6.33Z" fill="#C5C6EF"/></svg>
             
          <span class="counter">${comment.score}</span>
              
          <svg alt="minus-icon" class='minus' width="11" height="3" xmlns="http://www.w3.org/2000/svg"><path d="M9.256 2.66c.204 0 .38-.056.53-.167.148-.11.222-.243.222-.396V.722c0-.152-.074-.284-.223-.395a.859.859 0 0 0-.53-.167H.76a.859.859 0 0 0-.53.167C.083.437.009.57.009.722v1.375c0 .153.074.285.223.396a.859.859 0 0 0 .53.167h8.495Z" fill="#C5C6EF"/></svg>

.plus:hover path,
.minus:hover path {
  fill: var(--Moderate-blue);
}

Hope you found this helpful!

Let's connect on LinkedIn! - @Eileenpk

Marked as helpful

Borko• 230

@borkk85

Posted about 1 year ago

@Eileenpk Thank you for the pull request, and the thorough explanation, it is very helpful. Yes, it was for the on hover effect. I'm reviewing the request right now...

Muhammad Abdullah 🎯• 2,650

@0xabdul

Posted about 1 year ago

Hey there well congrats on completing the Interactive Comment Section..😃

A few lines suggestions for improve your code
In Html :
The html document must be contained one heading so fix the problem
solve the problem we use the non semantic elements what are they ? Like <span> and the <div>
for two line code to clear the all Accessibility reports
Ex :

<body>
<div class="container" role="main">
//Whole html code here 🏷️
</div>
<body>

I Hope it's useful for you
Happy Coding

Borko• 230

@borkk85

Posted about 1 year ago

@0xAbdul Thanks for the useful tip, will read up on that, and fix my mistake...

Muhammad Abdullah 🎯• 2,650

@0xabdul

Posted about 1 year ago

@borkk85 it's our duty bro 👍

Interactive Comment Section

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community