diff --git a/.gitignore b/.gitignore index e74dfca..b291d08 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,3 @@ streamchat.code-workspace -index.html -stream.css assets/ -todo.txt -logout.js \ No newline at end of file +todo.txt \ No newline at end of file diff --git a/chat.css b/chat.css index 5ed8007..161dbd5 100644 --- a/chat.css +++ b/chat.css @@ -5,39 +5,53 @@ html { } form { - width: 100% + width: 100%; + overflow:hidden; } input { - padding: 3%; + padding: 2%; + width: 100%; + background-color: #55CDFC; + border-style: none; + border-bottom-style: solid; + border-bottom-color: black; + border-bottom-width: 1px; + font-family: "Lucida Console", "Courier New", monospace; } label { - visibility: hidden; + display: block; + +} + +#loggeduser { + font-size: 30px; } #chatbox { background-color: white; padding: 1rem; box-shadow: 10px 10px 10px black; - width: 40rem; + width: 30rem; height: 40rem; display: inline-flex; flex-direction: column; } #innerchatbox { - background-color: rgba(60, 60, 60, .75); + background-color: rgba(60, 60, 60, .85); width: 100%; height: 90%; overflow-y: scroll; text-align: left; + color: white; } #loggeduser { - padding-top: 1% + padding-top: 1.5% } -#error { +#errormessage { padding-top: 2.5%; } \ No newline at end of file diff --git a/chat.html b/chat.html index 62d56fc..9bc89c5 100644 --- a/chat.html +++ b/chat.html @@ -22,15 +22,30 @@
- +
+ + + (logout) + +
+ + diff --git a/chat.js b/chat.js index f216c0c..42050a6 100644 --- a/chat.js +++ b/chat.js @@ -11,7 +11,7 @@ form.addEventListener("submit", async function (event) { event.preventDefault(); const formData = new FormData(form); - formMessage = formData.get('message'); + formMessage = formData.get('message').toString(); sendMessage() @@ -42,7 +42,7 @@ async function fetchMessages() { document.getElementById("innerchatbox").innerHTML = "" for (const message of recievedMessages) { - printText(message.user.bold() + ": " + message.body); + printText(message.user.bold().toString() + ": " + message.body.toString()); } diff --git a/index.css b/index.css new file mode 100644 index 0000000..ad764ae --- /dev/null +++ b/index.css @@ -0,0 +1,66 @@ +html { + background: #F7A8B8; + text-align: center; + font-family: "Lucida Console", "Courier New", monospace; +} + +a { + color: black; + font-weight: bold; + text-decoration: none; +} + +#streamchat { + display: flex; + height: 100%; + max-width: 960px; + margin: 0 auto; + +} + +#stream { + background-color: white; + padding: 5%; + box-shadow: 10px 10px 10px black; + border-radius: 5px; + width: 854px; + height: 480px; + margin-right: 0.3em; + margin-left: -40%; + margin-top: auto; + margin-bottom: auto; +} + +#chatbox { + flex: 1; + height: 50rem; + margin-left: 0.3em; + margin-right: -50%; + border: none; +} + +.navigation-list { + display: flex; + list-style-type: none; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + padding: 0; +} + +.buttons { + width: 150px; + background-color: #55CDFC; + margin: auto; + margin-bottom: 2%; + display: inline-flex; + justify-content: center; + opacity: 0.8; + font-size: larger; + color: black; + padding: 15px; + border-bottom: solid; + border-left: solid; + border-color: white; + border-width: 1px; +}