Add preview button

static/script.js

@@ -1,3 +1,25 @@
+function createCloseButton() {
+  const container = document.createElement('div');
+  container.style.marginBottom = '1em';
+  container.style.display = 'flex';
+  container.style.justifyContent = 'flex-end';
+
+  const closeButton = document.createElement('a');
+  closeButton.classList.add('btn');
+  closeButton.classList.add('btn--close');
+  closeButton.href = '#';
+  closeButton.innerText = 'x close';
+  closeButton.style.marginLeft = 'auto';
+  closeButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    container.parentElement.remove();
+  });
+
+  container.append(closeButton);
+
+  return container;
+}
+
 document.querySelectorAll('[data-delete]').forEach((el) => {
   el.addEventListener('click', (e) => {
     if (confirm('Are you sure? This cannot be undone.')) {
@@ -14,3 +36,32 @@ document.querySelectorAll('[data-delete]').forEach((el) => {
     }
   });
 });
+
+const previewButton = document.querySelector('[data-preview]');
+if (previewButton) {
+  previewButton.addEventListener('click', (e) => {
+    e.preventDefault();
+
+    const currentPreview = document.querySelector('#preview');
+    if (currentPreview) {
+      currentPreview.remove();
+    }
+
+    const form = document.querySelector('#post-form');
+    const textarea = form.querySelector('[name=body]');
+    const preview = document.createElement('div');
+    const content = document.createElement('div');
+    preview.id = 'preview';
+
+    if (textarea.value.trim().length === 0) {
+      return;
+    }
+
+    const closeButton = createCloseButton();
+
+    content.innerHTML = textarea.value;
+    preview.append(closeButton);
+    preview.append(content);
+    form.append(preview);
+  });
+}

static/style.css

@@ -35,12 +35,24 @@ a:hover {
   border: 1px solid var(--dark-accent);
   border-radius: 0;
   padding: 0.15em 0.3em;
+  text-decoration: none;
 }
 
 .btn:hover {
   background-color: var(--off-white);
 }
 
+.btn--close {
+  background-color: var(--danger-red);
+  color: white;
+}
+
+.btn--close:hover {
+  background-color: var(--danger-red);
+  color: white;
+  filter: brightness(85%);
+}
+
 .danger {
   color: var(--danger-red);
 }

templates/components.html

@@ -18,7 +18,7 @@
   </div>
 </div>
 {% endmacro %} {% macro form(post=false, action) %}
-<form class="form" method="POST" action="{{ action }}">
+<form class="form" method="POST" action="{{ action }}" id="post-form">
   <input
     type="hidden"
     name="id"
@@ -46,6 +46,7 @@
     >
   </div>
   <div class="form__field">
+    <a class="btn" href="#" data-preview>Preview</a>
     <input class="btn" type="submit" value="Post" />
   </div>
 </form>