From c27416a0322a53a2073de46c4f018b39a20ae592 Mon Sep 17 00:00:00 2001 From: Tajanae Boone Date: Mon, 8 Feb 2021 20:30:54 -0500 Subject: [PATCH] clone of twitter --- data.js | 48 +++++++++++++++++++++++++++++-- index.html | 43 ++++++++++++++++++++++++++++ style.css | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 171 insertions(+), 3 deletions(-) create mode 100644 index.html create mode 100644 style.css diff --git a/data.js b/data.js index 458d53d..ecd3c89 100644 --- a/data.js +++ b/data.js @@ -1,14 +1,16 @@ let data = [ { + image: "https://images.unsplash.com/photo-1596550190729-1d9225e788dd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80", name: "Kaleb Burd", handle: "@kburd", - message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim mollis sem, vel dignissim sem tempor eleifend. Vivamus et elit dapibus, porttitor nulla sed, blandit ex. -Kaleb", + message: "Tweeting my life away -Kaleb", time: "1:40 PM", date: "16 Mar 20", retweets: 6054, - likes: 27700 + likes: 27.7 + 'K' }, { + image: "https://images.unsplash.com/photo-1596550190729-1d9225e788dd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80", name: "Vlad Putin", handle: "@noBotHere", message: "Howdy all.....", @@ -18,6 +20,7 @@ let data = [ likes: 27 }, { + image: "https://images.unsplash.com/photo-1596550190729-1d9225e788dd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80", name: "Jack Dorsey", handle: "@daBoss", message: "Twiter is the best social media on the internet, Zuckerberg is inferior", @@ -27,6 +30,7 @@ let data = [ likes: 27 }, { + image: "https://images.unsplash.com/photo-1596550190729-1d9225e788dd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80", name: "Leon Jenkins", handle: "@leyawn", message: "Cool place.... looks uninhaited....", @@ -36,6 +40,7 @@ let data = [ likes: 27334 }, { + image: "https://images.unsplash.com/photo-1596550190729-1d9225e788dd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80", name: "Mark Zuck", handle: "@zuckman", message: "This is hot garbage", @@ -44,4 +49,41 @@ let data = [ retweets: 0, likes: 0 } -] \ No newline at end of file +] + + + for (let i = 0; i < data.length; i++) { + let image = data[i].image; + let name = data[i].name; + let handle = data[i].handle; + let message = data[i].message; + let time = data[i].time; + let date = data[i].date; + let retweets = data[i].retweets; + let likes = data[i].likes; + let tweet = document.createElement('div'); + tweet.classList.add('tweet');name + tweet.innerHTML = +`
+
+
+

${name}

+

${handle}

+
+ +
+ ${message} +
+
+

${time} ●

+

${date} ●

+

Twitter for iPhone

+
+
+

${retweets}

Retweets

+

${likes}

Likes

+
` + + +document.getElementById('post').appendChild(tweet); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..1cbe4f2 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + Document + + + + + +
+ +

Twitter

+ +
+ +
+ + +
+ +
+ + +
+ + + + + + + + + + + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..e31f3a2 --- /dev/null +++ b/style.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; + margin:0; + padding:0; +} + + +h1 { + text-align: center; + color: blue; +} + +.tweet { + padding: 1rem; + width: 598px; + height: 262px; + display: flex; + flex-direction: column; + margin: auto; + border: 2px solid black; + margin-bottom: 1.25rem; +} + +.tweet__bio { + margin-bottom: 1rem; + display: flex; +} + +.tweet__bio__picture { + height: 75px; + width:75px; + border-radius: 50%; + background-color: grey; +} + +.tweet__content { + justify-content: center; + font-size: 1.25rem; + margin-top: 50px; +} + +.tweet__time-stamp { + display: flex; + + + align-items: flex-end; + border-bottom: 1px solid rgba(0,0,0,.3); + padding-bottom: .5rem; + margin-top:1rem; +} + +.tweet__time-stamp p { + margin-right: 1rem; +} + +.tweet__social { + display: flex; + + margin-top: 1rem; + align-items: center; + padding-bottom: 1rem; +} + +.tweet__social p { + margin-right: 1rem; +} + +.tweet__bio__name { + justify-content: center; + display: flex; + flex-direction: column; + margin-left:3rem; + margin-top: -70px; + margin-left: 90px; +} + +.blue-link{ + color: blue; +} + +.at-name{ + color: #8d8686c4; +} \ No newline at end of file