my_article_preview_component_solution

Community feedback

• 

  Jordane Gengo•590

  @jgengo-altPosted over 2 years ago

  Hello!

  To complete changing color when you click you could have use Javascript ;) I did it that way:

  const toggle_share = () => {
    const b = document.querySelector('#share');
    const s = document.querySelector('#tooltip');
  
    const isDisplayed = b.dataset.toggle == 1;
  
    if (isDisplayed) {
      b.dataset.toggle = 0;
  
      b.style.backgroundColor = "var(--clr-4)"
      s.style.display = 'none';
    } else {
      b.dataset.toggle = 1;
  
      b.style.backgroundColor = "var(--clr-1)";
      s.style.display = 'grid';
    }
  }
  

  I added an attribute data-toggle='0' to my button that I toggle to 1 or 0 to say if it is active or not, and the javascript check the value to know the state of my button when I click it. and change the style :)

  my HTML element looks like so:

  <div class="author-rounded" id="share" data-toggle="0" onclick="toggle_share()"> .. </div>
  

  Also, your website is not responsive.

  I would suggest you take a look at flexbox and html grid that could also help you in the future :)

  Hopefully, I've been helpful!

  Don't hesitate to go take a look to my solution and returns me feedback <3

  Have fun!

  Marked as helpful

  0

  ---

  

  Usanase Makala•330

  @usanCodePosted over 2 years ago

  @jgengo-alt , I read your feedback and thank you for sharing it. I wrote a code very different of yours and found out how to completely change the background-color. I really thank you for sharing your opinion concerning my code.

  0