constructorlabs · joelamb · Sep 13, 2018 · Sep 13, 2018 · Sep 13, 2018 · Sep 13, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Mini Twitter</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+        crossorigin="anonymous">
+
+</head>
+
+<body>
+    <div class="app">
+        <form>
+            <label for="tweet">Start typing your tweet</label>
+            <textarea name="tweet" id="tweet"></textarea>
+            <div class="counter">
+                <p>Character count:</p>
+                <p id="count">0</p>
+            </div>
+            <button id="submit" type="submit">Post it!</button>
+        </form>
+        <div class="timeline"></div>
+    </div>
+    <script src="src/index.js"></script>
+</body>
+
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,34 @@
+document.querySelector('form').addEventListener('submit', e => {
+  e.preventDefault();
+  let newTweet = document.querySelector('#tweet').value;
+  let tweetArr = newTweet.split(' ');
+  newTweet = tweetArr
+    .map(word => (word.startsWith('@') ? `<a href="#">${word}</a>` : word))
+    .join(' ');
+  newTweet = `<p> ${newTweet} </p>
+              <button class="delete"><i class="fas fa-trash-alt"></i></button>`;
+  const newTweetNode = document.createElement('div');
+
+  newTweetNode.innerHTML = newTweet;
+  const timelineNode = document.querySelector('.timeline');
+  const refTweetNode = document.querySelector('.timeline div:first-child');
+  if (document.querySelector('#tweet').value.length <= 280) {
+    timelineNode.insertBefore(newTweetNode, refTweetNode);
+    const deleteButton = document.querySelector('.delete');
+    deleteButton.addEventListener('click', e => {
+      timelineNode.removeChild(e.target.parentElement);
+    });
+    document.querySelector('#tweet').value = '';
+    document.querySelector('#count').textContent = 0;
+  }
+});
+
+document.querySelector('#tweet').addEventListener('input', e => {
+  document.querySelector('#count').textContent = e.target.value.length;
+  if (e.target.value.length > 280) {
+    let count = document.querySelector('#count');
+    count.style.color = 'red';
+  } else {
+    count.style.color = 'black';
+  }
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,79 @@
+html {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+*,
+*:before,
+*:after {
+  /* display: none; */
+  box-sizing: inherit;
+}
+
+form {
+  /*   background: lemonchiffon; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+label {
+  text-align: center;
+  font-weight: bold;
+  font-family: sans-serif;
+  margin: 1em 0;
+}
+
+textarea {
+  align-self: stretch;
+  height: 4rem;
+  padding: 0.25em;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.counter {
+  align-self: stretch;
+  display: flex;
+  justify-content: flex-end;
+  align-content: stretch;
+}
+
+.counter p {
+  /* flex: 1; */
+}
+.counter p {
+  text-transform: uppercase;
+  font-size: 0.8em;
+}
+.counter p:first-child {
+  /* flex: 2; */
+  margin-right: 4px;
+}
+
+button#submit {
+  background: orange;
+  border: none;
+  border-radius: 1em;
+  width: 60%;
+  padding: 0.5em;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.timeline div {
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  margin: 1em 0;
+  padding: 0.5em;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.delete {
+  align-self: flex-end;
+  padding: 0.25em 0.5em;
+  background: rgb(34, 34, 34);
+  border: none;
+  border-radius: 2em;
+  color: rgb(231, 171, 7);
+}