kyleholliday
diff --git a/‎exercises/81 - Security/index.html‎
Lines changed: 82 additions & 0 deletions b/‎exercises/81 - Security/index.html‎
Lines changed: 82 additions & 0 deletions
diff --git a/‎exercises/81 - Security/nasty.js‎
Lines changed: 9 additions & 0 deletions b/‎exercises/81 - Security/nasty.js‎
Lines changed: 9 additions & 0 deletions
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Nasty!</title>
+  <link rel="stylesheet" href="../../base.css">
+
+  <style>
+    body {
+      display: grid;
+      grid-template-rows: auto 1fr;
+      min-height: 100vh;
+    }
+
+    .app {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+    }
+
+    nav {
+      display: flex;
+    }
+
+    nav>* {
+      flex: 1;
+      border: 5px solid black;
+      margin: 5px;
+    }
+
+    nav a {
+      color: white;
+      font-size: 4rem;
+      flex: 2;
+      border: 0;
+    }
+
+    textarea {
+      font-family: 'Courier New', Courier, monospace;
+    }
+
+    .output {
+      background: #e8f1f7;
+      padding: 2rem;
+      font-size: 3rem;
+    }
+  </style>
+</head>
+
+<body>
+
+  <nav>
+    <a href="/">FarceBook</a>
+    <button>Send $1,000,000</button>
+    <button>Send a DM</button>
+    <button>Unfriend Someone</button>
+    <button>Post Nasty Message</button>
+  </nav>
+
+  <div class="app">
+    <textarea name="input">
+Hi I am <mark>Wes Bos</mark> and I <em>love</em> to ride bikes.
+
+This is my Bio 👋🏻
+
+Here is a photo I took last week:
+
+<img src="https://source.unsplash.com/200x200" alt="Nice">
+
+<strong>Do you like it?</strong>
+
+</textarea>
+    <div class="output">
+
+    </div>
+  </div>
+
+  <script src="./nasty.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,9 @@
+const input = document.querySelector('[name="input"]');
+const output = document.querySelector('.output');
+
+input.addEventListener('input', () => {
+  output.innerHTML = input.value.replace(/\n/g, '<br>');
+});
+
+// trigger an input even on page load
+input.dispatchEvent(new Event('input'));