proof-of-concept commit

markconroy · markconroy · commit 9e48c297a9be · 2022-05-14T12:03:59.000+02:00
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!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">
+  <link rel="stylesheet" href="style.css">
+  <title>Today I Learned</title>
+</head>
+<body>
+  <div class="container">
+    <div class="inputs">
+      <textarea name="text-for-thing" class="text-for-thing" id="text-for-thing" cols="30" rows="10"></textarea>
+      <input type="button" class="add-item" value="Add Item">
+      <input type="button" class="remove-all" value="Remove All">
+    </div>
+    <div class="til"></div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,36 @@
+let itemKey = localStorage.length;
+const til = document.querySelector('.til');
+const list = document.createElement('ul');
+const textarea = document.querySelector('.text-for-thing');
+const submit = document.querySelector('.add-item');
+const removeAll = document.querySelector('.remove-all');
+const listItems = list.querySelectorAll('li');
+list.classList.add('things-i-learned');
+til.appendChild(list);
+
+for (let i = 0; i < localStorage.length; i++) {
+  const element = document.createElement('li');
+  element.classList.add('thing-i-learned');
+  list.appendChild(element);
+  element.innerHTML = localStorage[i];
+  itemKey = localStorage.length + 1;
+}
+
+submit.addEventListener('click', function() {
+  const text = textarea.value;
+  const element = document.createElement('li');
+  element.classList.add('thing-i-learned'); 
+  element.innerHTML = text;
+  list.appendChild(element);
+  localStorage.setItem(itemKey, text);
+  itemKey = localStorage.length + 1;
+});
+
+removeAll.addEventListener('click', function() {
+  localStorage.clear();
+  list.querySelectorAll('li').forEach(item => {
+    item.remove();
+  })
+})
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,51 @@
+*, *::after, *::before {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.container {
+  display: flex;
+  min-height: 100vh;
+}
+
+.container > * {
+  width: 50%;
+  padding: 1rem;
+}
+
+.inputs {
+  background-color: beige;
+}
+
+.til {
+  background-color: azure;
+}
+
+.text-for-thing {
+  width: 100%;
+  padding: 1rem;
+}
+
+[type="button"] {
+  width: 100%;
+  padding: 1rem;
+  margin-top: 1rem;
+  cursor: pointer;
+}
+
+.things-i-learned {
+  padding-left: 0;
+}
+
+.thing-i-learned {
+  list-style: none;
+  border: 1px solid darkkhaki;
+  padding: 1rem;
+}
+
+.thing-i-learned + .thing-i-learned {
+  margin-top: 1rem;
+}
