Chapter 20 - A public space on the web

schaable · schaable · commit 4eb3d68b71b9 · 2022-07-28T22:18:37.000-03:00
diff --git a/chapter-20/test-files/www/eloquentjs.html b/chapter-20/test-files/www/eloquentjs.html
diff --git a/chapter-20/test-files/www/index.css b/chapter-20/test-files/www/index.css
@@ -0,0 +1,41 @@
+input,
+textarea {
+  padding: 9px;
+  border: solid 1px #e5e5e5;
+  outline: 0;
+  font: normal 13px/100% Verdana, Tahoma, sans-serif;
+  width: 100%;
+  background: #ffffff;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+textarea {
+  width: 100%;
+  min-height: 500px;
+  line-height: 150%;
+}
+
+input:hover,
+textarea:hover,
+input:focus,
+textarea:focus {
+  border-color: #c9c9c9;
+}
+
+label {
+  margin-left: 0px;
+  color: #999999;
+}
+
+button,
+input[type='submit'] {
+  width: auto;
+  padding: 9px 15px;
+  background: lightseagreen;
+  border: 0;
+  font-size: 14px;
+  color: #ffffff;
+  cursor: pointer;
+}
diff --git a/chapter-20/test-files/www/index.html b/chapter-20/test-files/www/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>A public space on the web</title>
+    <link rel="stylesheet" href="./index.css" />
+    <script src="./index.js"></script>
+  </head>
+  <body>
+    <form id="web-editor">
+      <label for="files">File: </label>
+      <select name="files" id="files">
+        <option value="index.html">index.html</option>
+        <option value="eloquentjs.html">eloquentjs.html</option>
+        <option value="index.js">index.js</option>
+        <option value="index.css">index.css</option>
+      </select>
+      <textarea name="file-contents" id="file-contents"></textarea>
+      <button type="submit">Save</button>
+    </form>
+  </body>
+</html>
diff --git a/chapter-20/test-files/www/index.js b/chapter-20/test-files/www/index.js
@@ -0,0 +1,21 @@
+window.addEventListener('load', () => {
+  const select = document.querySelector('#files');
+  const textarea = document.querySelector('#file-contents');
+  select.addEventListener('change', async (event) => {
+    const response = await fetch(event.target.value);
+    const fileContents = await response.text();
+    textarea.value = fileContents;
+  });
+  select.dispatchEvent(new Event('change'));
+
+  const form = document.querySelector('#web-editor');
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    console.log(textarea.value);
+    await fetch(select.value, {
+      method: 'PUT',
+      body: textarea.value,
+    });
+    select.dispatchEvent(new Event('change'));
+  });
+});
