<section class="shopping-section">
      <button type="button" class="shopping-btn">
    Click this Button!
  </button>
  <div class="shopping-popup">
    <h3>
      Do you like Simple Laptop?
    </h3>
    <p>
      Tell us about your favorite 
      laptop and what features you 
      want to see in the future!
    </p>
    <p>
      A short review will only take
      seconds and help us a lot
    </p>
    <div class="popup-btns">
      <button  type="button" class="no-btn">
        No
      </button>
      <button  type="button" class="sure-btn">
        Sure
      </button>
    </div>
  </div>
</section>

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

body,
button {
  margin: 0;
  font-family: 'Pretendard-Regular',san-serif;
}

button {
  cursor: pointer;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.shopping-section {
  position: relative;
  display: grid;
  place-items: center;
/*   display: flex;
  justify-content: center;
  align-items: center; */
  width: 300px;
  height: 500px;
  background-color: #ddd;
  border-radius: 20px;
  box-shadow: 2px 2px 22px 8px rgba(230,230,230,0.75);
}


.shopping-btn {
  padding: 5px 10px;
   border: none;
  border-radius: 5px;
  background:#fff;
  transition: all .2s linear;
}

.shopping-btn:hover {
  background-color: #206ab5;
  color: #fff
}

.shopping-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 230px;
  border-radius: 10px;
  padding: 10px;
  background-color: #fff;
}

.shopping-popup.active {
  display: block;
}

.shopping-popup h3 {
  font-size: 14px;
  text-align: center;
}

.shopping-popup h3::before {
  content: '';
  display: block;
  background-image: url('https://products.ls.graphics/blaaamm/images/iPhone-Right-4.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 70%;
  height: 170px;
  margin: 0 auto;
}

.shopping-popup p {
  font-size: 12px;
}

.popup-btns {
  text-align: center;
}

.popup-btns button {
  width: 70px;
  margin: 0 5px;
  border-radius: 7px;
  border: 2px solid #206ab5;
}

.popup-btns .no-btn {
  background-color: #fff;
}

.popup-btns .sure-btn {
  background-color: #206ab5;
  color: #fff;
}

//  JAVASCRIPT

// document.querySelector('.shopping-section').addEventListener('click',e=>{
//  if(e.target.tagName !== 'BUTTON') return;
//  const shoppingPopup = document.querySelector('.shopping-popup');
  
//   if(e.target.classList.contains('no-btn')){
//     shoppingPopup.classList.remove('active');
//     alert('싫으시군요, 알겠습니다 ㅠㅠ');
//   }
  
//   if(e.target.classList.contains('sure-btn')){
//     shoppingPopup.classList.remove('active');
//     alert('감사합니다. 좋은 하루 되세요 ㅎㅎ');
//   }
  
//   if(e.target.classList.contains('shopping-btn')){
//     shoppingPopup.classList.add('active');
//   }
// })

//JQUERY

$(function(){
  $('.shopping-section').on('click','button',function(e){
    if($(e.target).hasClass('shopping-btn')){
      $('.shopping-popup').addClass('active');
    }
    
    if($(e.target).hasClass('no-btn')){
      $('.shopping-popup').removeClass('active');
      alert('싫으시군요, 알겠습니다 ㅠㅠ');
    }
    
    if($(e.target).hasClass('sure-btn')){
      $('.shopping-popup').removeClass('active');
      alert('감사합니다. 좋은 하루 되세요 ㅎㅎ');
    }

  })
})