text: const socket = io();
  
  //Elements
  const $messageForm = document.querySelector('.message');
  const $messageText = $messageForm.querySelector('#messageText');
  const $messageBtn = $messageForm.querySelector('button');
  const $locationBtn = document.querySelector('#shareLocation');
  const $messages = document.querySelector('#messages');
  const $sidebar = document.querySelector('#sidebar');
  
  //Templates
  const messageTemplate = document.querySelector('#message-template').innerHTML;
  const locationTemplate = document.querySelector('#location-template').innerHTML;
  const sidebarTemplate = document.querySelector('#sidebar-template').innerHTML;
  
  //Options
  const { username, room } = Qs.parse(location.search, { ignoreQueryPrefix: true });
  
  const autoscroll = () => {
      const $newMessage = $messages.lastElementChild;
  
      const newMessageStyles = getComputedStyle($newMessage);
      const newMessageMargin = parseInt(newMessageStyles.marginBottom);
      const newMessageHeight = $newMessage.offsetHeight + newMessageMargin;
  
      const visibleHeight = $messages.offsetHeight;
  
      const containerHeight = $messages.scrollHeight;
  
      const scrollOffset = $messages.scrollTop + visibleHeight; 
  
      if(containerHeight - newMessageHeight <= scrollOffset) {
          $messages.scrollTop = $messages.scrollHeight;
      }
  
  
  };
  
  socket.on('message', (message) => {
      const html = Mustache.render(messageTemplate, {
          username: message.username,
          message: message.text,
          createdAt: moment(message.createdAt).format('h:mm a')
      });
      $messages.insertAdjacentHTML('beforeend',html);
  
      autoscroll();
  });
  
  socket.on('locationMessage', (message) => {
      const html = Mustache.render(locationTemplate, {
          username: message.username,
          url: message.url,
          createdAt: moment(message.createdAt).format('h:mm a')
      });
      $messages.insertAdjacentHTML('beforeend',html);
  
      autoscroll();
  });
  
  socket.on('roomData', ({room, users}) => {
      const html = Mustache.render(sidebarTemplate, {
          room,
          users
      });
      $sidebar.innerHTML = html;
  });
  
  $messageForm.addEventListener('submit', (e) => {
      e.preventDefault();
      $messageBtn.setAttribute('disabled', 'disabled');
      const message = $messageText.value;
      socket.emit('sendMessage', message, (error) => {
          $messageBtn.removeAttribute('disabled');
          $messageText.value = '';
          $messageText.focus();
          if(error)
              alert(error);
          
      });
  });
  
  $locationBtn.addEventListener('click', (e) => {
      e.preventDefault();
      if(!navigator.geolocation)
          return alert('Geolocation is not support by your browser');
      
      $locationBtn.setAttribute('disabled', 'disabled');
      navigator.geolocation.getCurrentPosition((position) => { 
          socket.emit('sendLocation', {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude
          }, () => {
              $locationBtn.removeAttribute('disabled');
          });
      });
  });
  
  socket.emit('join', { username, room }, (error) => {
      if(error) {
          alert(error);
          location.href = '/';
      }
          
  });