stage 7

portsoc · Mar 8, 2024 · 424c780 · 424c780
1 parent 2fda7c0
commit 424c780
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 5 deletions.
diff --git a/stages/client/index.html b/stages/client/index.html
@@ -1,12 +1,15 @@
 <!doctype html>
 <meta charset=utf-8>
+<link rel="stylesheet" href="style.css">
 <script defer src="index.js"></script>
 <title>Message Board</title>
 
 <h1>Message Board</h1>
 
-<input id=message type=text placeholder='Add a message here…'>
-<input id=send type=submit value=Send>
+<header>
+  <input id=message type=text autofocus autocomplete=off placeholder='Add a message here…'>
+  <input id=send type=submit value=Send>
+</header>
 
 <ul id=messagelist>
   <li>One day this will be a message board.</li>

diff --git a/stages/client/message.html b/stages/client/message.html
@@ -1,11 +1,14 @@
 <!doctype html>
 <meta charset=utf-8>
+<link rel="stylesheet" href="style.css">
 <script defer src="message.js"></script>
 <title>Message Board: Edit Message</title>
 
 <h1>Edit Message</h1>
 
-<input id=message type=text placeholder='Loading…'>
-<input id=send type=submit value=Update>
+<header>
+  <input id=message type=text placeholder='Loading…'>
+  <input id=send type=submit value=Update>
+</header>
 
 <p><a href="/">Back to list of messages</a>
diff --git a/stages/client/message.js b/stages/client/message.js
@@ -1,7 +1,10 @@
 const el = {};
 
 function showMessage(message) {
+  el.message.focus();
   el.message.value = message.msg;
+  el.message.selectionEnd = el.message.value.length;
+  el.message.selectionStart = el.message.value.length;
 }
 
 function getMessageId() {
@@ -44,6 +47,7 @@ async function sendMessage() {
     el.message.value = '';
     const updatedMessages = await response.json();
     showMessage(updatedMessages, el.messagelist);
+    history.go(-1);
   } else {
     console.log('failed to send message', response);
   }

diff --git a/stages/client/style.css b/stages/client/style.css
@@ -0,0 +1,136 @@
+:root {
+  font-family: sans-serif;
+  box-sizing: border-box;
+
+  --pad: 1rem;
+  --rad: calc(var(--pad) / 2);
+  --halfrad: calc(var(--rad) / 2);
+  --slow: 0.2s;
+  --fast: 0.05s;
+
+  --bg: #FFF;
+  --bginput: #FEFEFE;
+  --bghi: rgba(0,100,200,0.1);
+  --fg: rgba(0,0,0,1);
+  --col1: rgba(0,100,200,1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #000;
+    --bginput: #363;
+    --bghi: rgb(0,102,0,1);
+    --fg: rgba(204,204,204,1);
+    --col1: rgba(100,255,100,1);
+  }
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  transition: background var(--slow) linear;
+}
+
+body {
+  background: var(--bg);
+  color: var(--fg);
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto 1fr auto;
+  grid-template-areas: "title" "input" "messages" "aside"; 
+  width: 100vw;
+  height: 100vh;
+}
+
+body>* {
+  padding: var(--pad);
+}
+
+h1 {
+  grid-area: title;
+}
+
+header {
+  grid-area: input;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "msg btn";
+  width: 100vw;
+}
+
+a,
+a:visited {
+  color: var(--col1);
+}
+
+header * {
+  font-size: 100%;
+  outline-color: var(--col1);
+  border: none;
+  border-radius: var(--rad);
+  padding: var(--pad);
+}
+
+#send {
+  grid-area: btn;
+  background: var(--col1);
+  color: var(--bg);
+  cursor: pointer;
+}
+
+#message {
+  grid-area: msg;
+  background: var(--bginput);
+  color: var(--fg);
+  caret-color: var(--col1);
+  margin-right: var(--pad);
+}
+
+#message::placeholder {
+  color: var(--col1);
+}
+
+#messagelist {
+  grid-area: messages;
+  display: flex;
+  flex-direction: column;
+}
+
+#messagelist > li {
+  padding: var(--pad);
+  list-style: none;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+#messagelist > li:hover {
+  background: var(--bghi);
+  transition: background var(--fast) linear;
+}
+
+#messagelist li a {
+  margin-left: 1em;
+  background: var(--col1);
+  color: var(--bg);
+  padding: var(--halfrad);
+  border-radius: var(--halfrad);
+  text-decoration: none;
+}
+
+
+#messagelist li a:hover {
+  background: var(--bg);
+  color: var(--col1);
+}
+
+
+
+#messagelist > li.update {
+  animation-duration: var(--speedOfFade);
+  animation-name: slidein;
+}
+
+aside {
+  grid-area: aside;
+}
diff --git a/stages/messageboard.js b/stages/messageboard.js
@@ -20,6 +20,7 @@ export function findMessage(id) {
 }
 
 export function addMessage(msg) {
+  if (msg.trim() === '') return messages;
   const newMessage = {
     id: uuid(),
     time: Date(),

diff --git a/stages/svr.js b/stages/svr.js
@@ -1,7 +1,7 @@
 import * as mb from './messageboard.js';
 
 // message board app
-// stage 6: add an API route and client page for update messages
+// stage 7: add css
 import express from 'express';
 
 const app = express();