Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
test
  • Loading branch information
Joel Salisbury committed Feb 27, 2020
1 parent e07ae51 commit 5275a9f
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 31 deletions.
Binary file added for-sure.mp3
Binary file not shown.
2 changes: 1 addition & 1 deletion index.html
Expand Up @@ -10,7 +10,7 @@
</head>
<body>

<header><h1>Welcome to Room of Chat for DMD 3440</h1></header>
<header><h1>Sending messages as <span id="usernameInput" contenteditable="true">{UserName}</span></h1></header>
<div id="chatBox"></div>
<div id="chatInput">
<input id="newMsg" type="text" placeholder="type a message!">
Expand Down
14 changes: 11 additions & 3 deletions main.css
Expand Up @@ -4,7 +4,7 @@

body {
background-color: rgb(32, 49, 88);
color:black;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}

Expand All @@ -17,6 +17,8 @@ body {
left:0px;
background:#eee;
border:1px solid #333;
color:#000;
padding:15px;
}

#chatInput {
Expand All @@ -27,13 +29,19 @@ body {
background-color:#ccc;
display: flex;
justify-content: space-between;
height: 70px;;
height: 70px;

}

#chatInput input {
width:100%;
text-indent: 15px;
}

#chatInput button {
margin:0px 10px;
margin:0px 0px;
padding:0px 10px;
background-color:#333;
color:#fff;
border:1px solid #333;
}
81 changes: 54 additions & 27 deletions main.js
Expand Up @@ -11,47 +11,74 @@ if ('serviceWorker' in navigator) {
console.log('CLIENT: service workers are not supported.');
}

var sampleMessage = {
sentBy:"Joel",
dateStamp:"02/20/2020 at 2:49",
text:"Hello, this is a new message."
}

let allMessages = [];
let chatBox = document.querySelector("#chatBox");
let newMsgInput = document.querySelector("#newMsg");
let userName = localStorage.getItem('userName') || "me";
let notifSound = 'for-sure.mp3';
let notifSoundElement = new Audio(notifSound);
let usernameInput = document.querySelector("#usernameInput");
usernameInput.innerHTML = userName;

function clearChatInput() {
document.querySelector("#newMsg").value = "";
document.querySelector("#newMsg").focus();
}

console.log(allMessages);
function displayNewMessage(msg) {
var newMsgP = document.createElement("p");
newMsgP.innerHTML = "<strong>" + msg.sentBy + "</strong>: " + msg.message;
chatBox.appendChild(newMsgP);

window.navigator.vibrate(200);

function makeAndDisplayMessage(sender, dateStamp, text) {
notifSoundElement.play();
clearChatInput();
}

// make message
var newMessage = {
sentBy: sender,
dateStamp: dateStamp,
text: text
function makeNewMessageFromLocalUser() {
let usrMsg = {
sentBy: userName,
dateStamp: Date.now(),
message: newMsgInput.value
}

allMessages.push(newMessage);
// end make message

// display message
if(usrMsg.message !== "") {
allMessages.push(usrMsg);
// end make message
displayNewMessage(usrMsg)
}
}

var newMsgP = document.createElement("p");
newMsgP.innerHTML = "<strong>" + sender + "</strong>: " + text;
//** All the triggers and event listener assignments down here... */

chatBox.appendChild(newMsgP);
// assign the "Make New Message" function to the button click
document.querySelector("#sendBtn").addEventListener('click', function(){
makeNewMessageFromLocalUser()
});

// end display message
// since we're not using a real form, assign it to the "keyup return" of the message input too

document.querySelector("#newMsg").addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
makeNewMessageFromLocalUser();
}
});

console.log(allMessages);
}
// when username input is changed, update localstorage and global variable
usernameInput.addEventListener('blur', function() {
var oldUsername = localStorage.getItem("userName");
var newUsername = this.innerHTML;

document.querySelector("#sendBtn").addEventListener('click', function(){
var alertNew = {
sentBy: "system",
dateStamp: Date.now(),
message: `${oldUsername} has changed their name to ${newUsername}`
}

makeAndDisplayMessage("me", "now", document.querySelector("#newMsg").value);
displayNewMessage(alertNew);

document.querySelector("#newMsg").value = "";
document.querySelector("#newMsg").focus();

localStorage.setItem("userName", newUsername);
userName = localStorage.getItem("userName");
});

0 comments on commit 5275a9f

Please sign in to comment.