Skip to content
Submitted over 1 year ago

Interactive Comment Section

Borko•230
@borkk85
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive comments section
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

This was a tough one, for the life of me, I couldn't get to make the counter svg's active... Any suggestion with that?

Community feedback

  • Eileen dangelo•1,600
    @EileenpkPosted over 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!

    Marked as helpful
    0
    Borko•230
    @borkk85Posted over 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...

    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 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
    0
    Borko•230
    @borkk85Posted over 1 year ago

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

    0
    C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    @borkk85 it's our duty bro 👍

    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