<section role="main" class="app">
    <h1 class="title">My Messaging App</h1>  
    
    <div class="notification bottom-margin padded">
        Message delivered!
    </div>

    <textarea class="message bottom-margin padded">This is a dummy message. Lorum ipsum etc.</textarea>

    <button class="send padded">Send</button>
</section>
* {
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

.bottom-margin {
    margin-bottom: 10px;
}

.padded {
    padding: 10px;
}

.app {
    max-width: 380px;
    margin: 0 auto;
    position: relative;
}

.title {
    text-align: center;
}

.notification {
    opacity: 0;
    transition: opacity 0.7s;
    background: black;
    color: white;
    text-align: center;
    font-size: 16px;
    position: absolute;
    width: 100%;
}

.notification--active {
    opacity: 1;
}

.message, .send {
    width: 100%;
    font-size: 14px;
}

.message {
    height: 200px;
}
(function () {
  'use strict';
  
  const app = document.querySelector('.app');
  const send = app.querySelector('.send');
  const notification = app.querySelector('.notification');
  const context = new AudioContext();
  
  send.onclick = () => {
      displayNotification();
      playSound();
  };
  
  function displayNotification() {
      notification.classList.add('notification--active');
  }
    
function playSound() {
  const oscillatorNode = context.createOscillator();
  const gainNode = context.createGain();

  oscillatorNode.type = 'sine';
  oscillatorNode.frequency.setValueAtTime(150, context.currentTime);
  oscillatorNode.frequency.exponentialRampToValueAtTime(500, context.currentTime + 0.5);

  gainNode.gain.setValueAtTime(0.3, context.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, context.currentTime + 0.5);

  oscillatorNode.connect(gainNode);
  gainNode.connect(context.destination);

  oscillatorNode.start();
  oscillatorNode.stop(context.currentTime + 0.5);
}
}());
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.