From 248117ea911b28b82cbccfadeea2dbc3b02be96e Mon Sep 17 00:00:00 2001 From: Meira Tompkins Date: Thu, 12 Mar 2020 14:36:23 -0400 Subject: [PATCH] changes --- css/main.css | 2 ++ index.html | 5 ++-- js/main.js | 68 +++++++++++++++++++++++++++++++++------------------ js/profile.js | 5 ++-- profile.html | 3 ++- 5 files changed, 54 insertions(+), 29 deletions(-) diff --git a/css/main.css b/css/main.css index 4e8a1c5..abad4ef 100644 --- a/css/main.css +++ b/css/main.css @@ -5,6 +5,7 @@ body{ background-color: white; color: black ; font-family: 'Advent Pro'; + overflow: hidden; } h1{ text-align: center; @@ -22,6 +23,7 @@ h1{ right: 0px; left: 0px; top: 60px; + overflow-y: auto; } #chatInput{ diff --git a/index.html b/index.html index 48476eb..86a0773 100644 --- a/index.html +++ b/index.html @@ -16,13 +16,14 @@

Sending messages as {UserName} {Status}

~Meira's Mobile App Chat Room~

- Click! alt="">
+ +
- +
diff --git a/js/main.js b/js/main.js index 661cc6b..2c947ac 100644 --- a/js/main.js +++ b/js/main.js @@ -3,6 +3,15 @@ // A service worker is a piece of code the browser runs behind the scenes. var username = "Meira"; +let chatBox = document.querySelector("#chatBox") +var chatInput = document.querySelector("#chatInput"); +var sendBtn = document.querySelector("#sendBtn"); +var profilePicInput = document.querySelector("#profilePic"); +var saveProfileButton = document.querySelector("#saveProfile"); +var profilePicDisplayElement = document.querySelector("#profilePicDisplay"); +var profilePic = localStorage.getItem("userProfilePic") || "unknown.jpg"; +//let arrayOfallMessages = []; +//const allMessages = arrayOfallMessages.map((obj)=> {return Object.assign({}, obj)}); if ('serviceWorker' in navigator) { @@ -19,21 +28,22 @@ if ('serviceWorker' in navigator) { 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); + message:"Hello,this is a message." +} +//displayMessage(sampleMessage); +function saveProfileImageLocally() { + if (profilePicInput.files && profilePicInput.files[0]) { + var reader = new FileReader(); + reader.onload = function(e) { + localStorage.setItem("userProfilePic", reader.result); + } + reader.readAsDataURL(profilePicInput.files[0]); + } +} //function makeAndDisplaymMessage(sender,dateStamp,text){ //var newMessage = { @@ -44,10 +54,14 @@ console.log(allMessages); function displayMessage(message) { var messageParagraph = document.createElement("p"); + if (message.sentBy == localStorage.userName){ + messageParagraph.style.color = "magenta"; + } messageParagraph.innerHTML = message.dateStamp + " " + message.message + " " + message.sentBy; chatBox.appendChild(messageParagraph); - chatBox.scrollTop = chatBox.scrollHeight; + messageParagraph.scrollIntoView(); + //chatBox.scrollTop = chatBox.scrollHeight; }; @@ -59,32 +73,38 @@ console.log(allMessages); -document.querySelector("#sendBtn").addEventListener('click', function(){ - +sendBtn.addEventListener('click', function(){ + var chatInput = document.querySelector("#newMsg"); + let src = 'img/soothing_flute.mp3'; + let audio = new Audio(src); + audio.play(); + window.navigator.vibrate(200); + var msgObj = { - dateStamp:Date.now(), + dateStamp: Date.now(), message: chatInput.value, sentBy: username } +console.log(msgObj); + saveMessageToFirebase(msgObj); chatInput.value = ""; chatInput.focus(); +}); + - displayMessage("me","now", document.querySelector("#newMsg").value); + // 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(); - }); + //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"); diff --git a/js/profile.js b/js/profile.js index ece4497..904ec11 100644 --- a/js/profile.js +++ b/js/profile.js @@ -2,7 +2,7 @@ let usernameInput = document.querySelector("#usernameInput"); let statusInput = document.querySelector("#statusInput"); let profilePicInput = document.querySelector("#profilePicInput"); -let profileSaveInput = document.querySelector("#profileSaveInput"); +let profileSaveInput = document.querySelector("#saveProfile"); // setting the input values default @@ -19,8 +19,9 @@ function saveProfileImageLocally() { } } -profileSaveInput.addEventListener( 'click', function(e) { +profileSaveInput.addEventListener('click', function(e) { e.preventDefault(); + console.log(usernameInput.value); localStorage.setItem("userName", usernameInput.value); localStorage.setItem("userStatus", statusInput.value); diff --git a/profile.html b/profile.html index b7c6a5a..f6e3f05 100644 --- a/profile.html +++ b/profile.html @@ -12,7 +12,7 @@

- +

Go Back to Chat App

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt numquam, consequatur eos error ducimus quisquam nam ut quasi sint adipisci sit molestiae, ad dolorum iste possimus deleniti rerum ipsum repudiandae. @@ -33,4 +33,5 @@ + \ No newline at end of file