<div class="banner">
  <p class="banner-message"></p>
</div>

<div class="product-hero">
  <img src="http://placehold.it/800x800" alt="" class="product-image">
  <div class="product-description">
    
    <h1 class="product-title">Super Power Bubble Gum</h1>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.</p>
    <button class="button add-to-cart">Add To Cart</button>
  </div>
</div>
h1 {
  font-size: 50px;
}

.button {
  display: inline-block;
  border: 0;
  margin-top: 10px;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 25px;
  cursor: pointer;
  background-color: #2980b9;
  color: white;
  transition: background-color .25s ease-out;
  
  &:hover {
    background-color: darken(#2980b9, 10%);
  }
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background-color: green;
  color: white;
  padding: 10px 50px;
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-100%);
  transition: transform .25s ease-out;
  
  &.is-active {
    transform: translateY(0);
  }
}
const ee = new EventEmitter();

const button = document.querySelector('.add-to-cart');
const banner = document.querySelector('.banner');
const udpateAndDisplayBanner = (product) => {
  const message = banner.querySelector('.banner-message');
  message.innerHTML = `${product.quantity} of ${product.title} was added to your cart`;
  
  banner.classList.add('is-active');
  
  setTimeout(() => {
      banner.classList.remove('is-active');
  }, 1000)
}

button.addEventListener('click', (e) => {
  ee.emit('cart-update', {
    product: {
      title: document.querySelector('.product-title').textContent,
      quantity: 1
    }
  });
});

ee.on('cart-update', (cart) => {
  udpateAndDisplayBanner(cart.product)
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/eventemitter3/3.1.0/index.min.js