From 8689479e29a0c5610254a787fa9e367481869ae5 Mon Sep 17 00:00:00 2001 From: YelChristensen Date: Thu, 13 Sep 2018 10:16:52 +0100 Subject: [PATCH 01/13] Create form and timeline in HTML --- index.html | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/index.html b/index.html index e69de29..4629dd1 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + Mini Twitter + + +
+
+ + + +
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias voluptates necessitatibus eaque commodi illum at dolores nostrum dolore, praesentium dicta nulla fugiat natus fuga similique corrupti alias ipsa asperiores dignissimos. +

+
+
+
+ + + \ No newline at end of file From 33c51502dcbafc008bfe51a52ef80b4ae51df650 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Thu, 13 Sep 2018 10:32:31 +0100 Subject: [PATCH 02/13] Prevent default on submit --- index.html | 16 ++++++++++++---- src/index.js | 3 +++ 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 4629dd1..0c07053 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,35 @@ + Mini Twitter +
- - +

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias voluptates necessitatibus eaque commodi illum at dolores nostrum dolore, praesentium dicta nulla fugiat natus fuga similique corrupti alias ipsa asperiores dignissimos. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias voluptates necessitatibus eaque + commodi illum at dolores nostrum dolore, praesentium dicta nulla fugiat natus fuga similique + corrupti alias ipsa asperiores dignissimos.

- + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29..75d6b4e 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,3 @@ +document.querySelector('form').addEventListener('submit', e => { + e.preventDefault(); +}); From 1603109c68fa698bad71401658568e147d603922 Mon Sep 17 00:00:00 2001 From: YelChristensen Date: Thu, 13 Sep 2018 10:50:58 +0100 Subject: [PATCH 03/13] Wrap tweet in div and p tags --- src/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 75d6b4e..9a98101 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,10 @@ + document.querySelector('form').addEventListener('submit', e => { - e.preventDefault(); + e.preventDefault(); + let newTweet= document.querySelector("#tweet").value; + newTweet = `

${newTweet}

`; + console.log(newTweet); + }); + + From 9494254762da0811c38248faed16f268ad96b06b Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Thu, 13 Sep 2018 11:13:39 +0100 Subject: [PATCH 04/13] add new tweet to top of timeline --- src/index.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index 9a98101..295e189 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,13 @@ - document.querySelector('form').addEventListener('submit', e => { - e.preventDefault(); - let newTweet= document.querySelector("#tweet").value; - newTweet = `

${newTweet}

`; - console.log(newTweet); - -}); + e.preventDefault(); + let newTweet = document.querySelector('#tweet').value; + newTweet = `

${newTweet}

`; + const newTweetNode = document.createElement('div'); + newTweetNode.innerHTML = newTweet; + const timelineNode = document.querySelector('.timeline'); + const refTweetNode = document.querySelector('.timeline div:first-child'); + console.log(refTweetNode.textContent); + timelineNode.insertBefore(newTweetNode, refTweetNode); +}); From b66ec9863a5a9a32b66638fde0d0522f44abb71a Mon Sep 17 00:00:00 2001 From: YelChristensen Date: Thu, 13 Sep 2018 11:23:01 +0100 Subject: [PATCH 05/13] Clear text area on submit --- index.html | 8 +------- src/index.js | 4 +--- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 0c07053..a9303c3 100644 --- a/index.html +++ b/index.html @@ -20,13 +20,7 @@
-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias voluptates necessitatibus eaque - commodi illum at dolores nostrum dolore, praesentium dicta nulla fugiat natus fuga similique - corrupti alias ipsa asperiores dignissimos. -

-
+
diff --git a/src/index.js b/src/index.js index 295e189..1614f5a 100644 --- a/src/index.js +++ b/src/index.js @@ -3,11 +3,9 @@ document.querySelector('form').addEventListener('submit', e => { let newTweet = document.querySelector('#tweet').value; newTweet = `

${newTweet}

`; const newTweetNode = document.createElement('div'); - newTweetNode.innerHTML = newTweet; const timelineNode = document.querySelector('.timeline'); const refTweetNode = document.querySelector('.timeline div:first-child'); - console.log(refTweetNode.textContent); - timelineNode.insertBefore(newTweetNode, refTweetNode); + document.querySelector('#tweet').value = ""; }); From c858fde796ebeb10a9b91f2db2537655491ed339 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Thu, 13 Sep 2018 11:54:11 +0100 Subject: [PATCH 06/13] count characters in new tweet --- index.html | 14 ++++++-------- src/index.js | 7 ++++++- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index a9303c3..bce2d9e 100644 --- a/index.html +++ b/index.html @@ -12,16 +12,14 @@
- + +
+

Character count:

+

0

+
-
- -
+
diff --git a/src/index.js b/src/index.js index 1614f5a..b24e8dd 100644 --- a/src/index.js +++ b/src/index.js @@ -7,5 +7,10 @@ document.querySelector('form').addEventListener('submit', e => { const timelineNode = document.querySelector('.timeline'); const refTweetNode = document.querySelector('.timeline div:first-child'); timelineNode.insertBefore(newTweetNode, refTweetNode); - document.querySelector('#tweet').value = ""; + document.querySelector('#tweet').value = ''; + document.querySelector('#count').textContent = 0; +}); + +document.querySelector('#tweet').addEventListener('input', e => { + document.querySelector('#count').textContent = e.target.value.length; }); From e670392c24155afc0feea0fa7c2817d4f7db1f3b Mon Sep 17 00:00:00 2001 From: YelChristensen Date: Thu, 13 Sep 2018 12:24:15 +0100 Subject: [PATCH 07/13] Disable tweet submit when it's too long --- src/index.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index b24e8dd..6a27c15 100644 --- a/src/index.js +++ b/src/index.js @@ -3,14 +3,26 @@ document.querySelector('form').addEventListener('submit', e => { let newTweet = document.querySelector('#tweet').value; newTweet = `

${newTweet}

`; const newTweetNode = document.createElement('div'); + newTweetNode.innerHTML = newTweet; const timelineNode = document.querySelector('.timeline'); const refTweetNode = document.querySelector('.timeline div:first-child'); - timelineNode.insertBefore(newTweetNode, refTweetNode); - document.querySelector('#tweet').value = ''; - document.querySelector('#count').textContent = 0; + if (document.querySelector('#tweet').value.length <= 280) { + timelineNode.insertBefore(newTweetNode, refTweetNode); + 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"; + } }); From 209cee789654455998ae746dcbc02ba84caf61be Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Thu, 13 Sep 2018 13:06:27 +0100 Subject: [PATCH 08/13] delete button for each tweet --- index.html | 2 ++ src/index.js | 22 +++++++++++++--------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index bce2d9e..c723958 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ Mini Twitter + diff --git a/src/index.js b/src/index.js index 6a27c15..bd4ba69 100644 --- a/src/index.js +++ b/src/index.js @@ -1,28 +1,32 @@ document.querySelector('form').addEventListener('submit', e => { e.preventDefault(); let newTweet = document.querySelector('#tweet').value; - newTweet = `

${newTweet}

`; + newTweet = `

${newTweet}

+

`; 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) { + if (document.querySelector('#tweet').value.length <= 280) { timelineNode.insertBefore(newTweetNode, refTweetNode); document.querySelector('#tweet').value = ''; document.querySelector('#count').textContent = 0; - } + } + const deleteButtons = document.querySelectorAll('.delete'); + deleteButtons.forEach(deleteButton => { + deleteButton.addEventListener('click', e => { + timelineNode.removeChild(e.target.parentNode.parentNode); + }); + }); }); - - 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"; - + let count = document.querySelector('#count'); + count.style.color = 'red'; } else { - count.style.color = "black"; + count.style.color = 'black'; } }); From 352072771c7faa5a4665bc1c1ca03c3e4c907736 Mon Sep 17 00:00:00 2001 From: YelChristensen Date: Thu, 13 Sep 2018 15:03:24 +0100 Subject: [PATCH 09/13] Twitter handle links --- src/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index bd4ba69..c233111 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,10 @@ document.querySelector('form').addEventListener('submit', e => { e.preventDefault(); let newTweet = document.querySelector('#tweet').value; + let tweetArr = newTweet.split(" "); + newTweet = tweetArr.map(word => word.startsWith("@") ? `${word}` : word).join(" "); newTweet = `

${newTweet}

-

`; + `; const newTweetNode = document.createElement('div'); newTweetNode.innerHTML = newTweet; @@ -16,7 +18,7 @@ document.querySelector('form').addEventListener('submit', e => { const deleteButtons = document.querySelectorAll('.delete'); deleteButtons.forEach(deleteButton => { deleteButton.addEventListener('click', e => { - timelineNode.removeChild(e.target.parentNode.parentNode); + timelineNode.removeChild(e.target.parentElement.parentElement); }); }); }); From 4fe6a237db0dee4909b9417a668ad0c184f86892 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Thu, 13 Sep 2018 15:12:59 +0100 Subject: [PATCH 10/13] remove duplicate event handlers on delete buttons --- src/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/index.js b/src/index.js index c233111..f682d79 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,10 @@ document.querySelector('form').addEventListener('submit', e => { e.preventDefault(); let newTweet = document.querySelector('#tweet').value; - let tweetArr = newTweet.split(" "); - newTweet = tweetArr.map(word => word.startsWith("@") ? `${word}` : word).join(" "); + let tweetArr = newTweet.split(' '); + newTweet = tweetArr + .map(word => (word.startsWith('@') ? `${word}` : word)) + .join(' '); newTweet = `

${newTweet}

`; const newTweetNode = document.createElement('div'); @@ -12,15 +14,13 @@ document.querySelector('form').addEventListener('submit', e => { 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; } - const deleteButtons = document.querySelectorAll('.delete'); - deleteButtons.forEach(deleteButton => { - deleteButton.addEventListener('click', e => { - timelineNode.removeChild(e.target.parentElement.parentElement); - }); - }); }); document.querySelector('#tweet').addEventListener('input', e => { From 61a1b3642872d4839a3ca27bf3660e2b24d8edd2 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Thu, 13 Sep 2018 20:28:48 +0100 Subject: [PATCH 11/13] add stylesheet --- index.html | 1 + style.css | 0 2 files changed, 1 insertion(+) create mode 100644 style.css diff --git a/index.html b/index.html index c723958..3b02509 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ Mini Twitter + diff --git a/style.css b/style.css new file mode 100644 index 0000000..e69de29 From 42874dafdbe2f47dbbc06d84c8e27246fcd1fce4 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Thu, 13 Sep 2018 21:32:52 +0100 Subject: [PATCH 12/13] basic mobile styling --- index.html | 11 ++++---- style.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 3b02509..ad6e706 100644 --- a/index.html +++ b/index.html @@ -6,21 +6,22 @@ Mini Twitter + - +
-
- - + + +

Character count:

0

- +
diff --git a/style.css b/style.css index e69de29..5b6674b 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,78 @@ +html { + box-sizing: border-box; + font-family: Helvetica, Arial, sans-serif; +} + +*, +*:before, +*:after { + 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); +} From ec649ac0fe05a7be5350316de3fe7bf7b8c4ce71 Mon Sep 17 00:00:00 2001 From: Joe Lamb Date: Fri, 14 Sep 2018 09:51:58 +0100 Subject: [PATCH 13/13] mobile styling --- style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style.css b/style.css index 5b6674b..1f7afb9 100644 --- a/style.css +++ b/style.css @@ -6,6 +6,7 @@ html { *, *:before, *:after { + /* display: none; */ box-sizing: inherit; }