Article Preview Component

Community feedback

• 

  Dun•290

  @DundeeAPosted about 2 years ago

  Hey, great job completing this challenge. I'm going to try to answer your questions but let me know if you need further explanation.

  "How would I be able to implement that triangular focus"

  I recommend you take a look at the pseudo-elements "before" and "after", they're a really good way to stylize your page without adding extra html. Read more here

  Here's how you would utilize the "after" pseudo-element to achieve the triangle.

  .social__media:after {
      content: '';
      position: absolute;
      display: block;
      width: 0;
      z-index: 1;
      border-style: solid;
      border-color: #607a78 transparent;
      border-width: 20px 20px 0;
      bottom: -20px;
      left: 50%;
      margin-left: -20px;
  }
  

  Now, as for your javascript, the event listener you implemented actually works as you intended, your problems seems to be with how you styled the class "active", so funny enough your javascript problem is a CSS problem in disguise.

  When you click share, you add the class "active" to the element you want to hide, I would actually just change that class name to "not-active" and in the css do

  .not-active{
   display: none;
  }
  

  Marked as helpful

  1