main.js

// Register a service worker, this one located in serviceworker.js
// A service worker is a piece of code the browser runs behind the scenes.

var username = "Meira";


if ('serviceWorker' in navigator) {
    console.log('CLIENT: service worker registration in progress.');
    navigator.serviceWorker.register('sw.js').then(function() {
      console.log('CLIENT: service worker registration complete.');
    }, function() {
      console.log('CLIENT: service worker registration failure.');
    });
  } else {
    console.log('CLIENT: service workers are not supported.');
  }

var sampleMessage = {
  sentBy:"Meira", 
  dateStamp:"02/20/2020 at 2:50", 
  text:"Hello,this is a message."

}


  let allMessages = [];
  let chatBox = document.querySelector("#chatBox")


allMessages.push(sampleMessage);
console.log(allMessages);





//function makeAndDisplaymMessage(sender,dateStamp,text){
  //var newMessage = {
    //sentBy: sender, 
    //dateStamp: dateStamp, 
   // text:text
  //}

  function displayMessage(message) {
    var messageParagraph = document.createElement("p");
    messageParagraph.innerHTML = message.dateStamp + " " + message.message + " " + message.sentBy;

    chatBox.appendChild(messageParagraph);
    chatBox.scrollTop = chatBox.scrollHeight;

  };

  watchFirebaseForChanges(
    function(msg){
        displayMessage(msg.data())
    }
  );
  


document.querySelector("#sendBtn").addEventListener('click', function(){
 
  var msgObj = {
    dateStamp:Date.now(),
    message: chatInput.value,
    sentBy: username
}

saveMessageToFirebase(msgObj);

chatInput.value = "";
chatInput.focus();

  displayMessage("me","now", document.querySelector("#newMsg").value);
  //document.querySelector("#newMsg").value = "";
  //document.querySelector("#newMsg").focus();
  let src = 'img/soothing_flute.mp3';
  let audio = new Audio(src);
  audio.play();
  window.navigator.vibrate(200);

  let curr_date = new Date();
  let month = curr_date.getMonth() + 1;
  let date_str = month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString();

  });

  document.getElementById("usernameInput").innerHTML = localStorage.getItem("userName");
  document.getElementById("statusInput").innerHTML = localStorage.getItem("userStatus");
  document.getElementById("profilePicInput").src = localStorage.getItem("userProfilePic");