Article-preview-component - Grid, flexbox and toggle

Community feedback

• 

  Rajesh Janyani•330

  @Rajesh7rjPosted over 2 years ago

  @Stv-devl Nice one mate, Your solution looking very good.

  can you tell how you did that box thing when you click in share icon.

  It will great help if you guide about that and because I'm going to do this challenge very soon.

  0

  ---

  

  P

  Stevan-Dev•420

  @Stv-devlPosted over 2 years ago

  @Rajesh7rj

  Html => I add a class with 2 variables inside for the CSS : <div class="popup hide"> CSS=> I describe first the popup. For do a triangle you have to use an :after

  .popup {
    text-align: left;
    cursor: pointer;
    position: absolute;
    z-index: 0;
    /*flexbox for align elements*/
    .flexbox {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      width: 248px;
      height: 55px;
      position: relative;
      background: $VeryDarkGrayishBlue;
      border-radius: 7px;
      padding: 0 25px 0 25px;
      top: -80px;
  
      @media screen and (max-width: 900px) {
        width: 328px;
        height: 64px;
        border-radius: 0 0 7px 7px;
        top: 0px;
        transform: translateX(-36.75%);
        padding: 0 80px 0 0;
      }
      /*after for do a triangle*/
      &:after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        top: 55px;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 12px solid $VeryDarkGrayishBlue;
  
        @media screen and (max-width: 900px) {
          display: none;
        }
      }
  
  .hide {
    display: none;
  }
  

  and after I do '.hide { display="none";}' like this the popup will disappear

  With javascript I did a toogle who is link to the button so when we click 'hide' will be = 'display' When we click again popup will disappear

  const btn = document.querySelector(".circle");
  
  btn.addEventListener("click", () => {
    popup.classList.toggle("hide");
  });
  

  0

  

  Rajesh Janyani•330

  @Rajesh7rjPosted over 2 years ago

  @Stv-devl Thanks for help buddy...

  0