diff --git a/for-sure.mp3 b/for-sure.mp3
new file mode 100644
index 0000000..f6c3faf
Binary files /dev/null and b/for-sure.mp3 differ
diff --git a/index.html b/index.html
index cdca2f4..7fdbe38 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
- Welcome to Room of Chat for DMD 3440
+ Sending messages as {UserName}
diff --git a/main.css b/main.css
index 8fa49b4..0086299 100644
--- a/main.css
+++ b/main.css
@@ -4,7 +4,7 @@
body {
background-color: rgb(32, 49, 88);
- color:black;
+ color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
@@ -17,6 +17,8 @@ body {
left:0px;
background:#eee;
border:1px solid #333;
+ color:#000;
+ padding:15px;
}
#chatInput {
@@ -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;
}
\ No newline at end of file
diff --git a/main.js b/main.js
index 059c038..a6410f8 100644
--- a/main.js
+++ b/main.js
@@ -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 = "" + msg.sentBy + ": " + 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 = "" + sender + ": " + 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");
});
\ No newline at end of file