From d7d0147468617044504953f9d1ca4eb5d4614f1a Mon Sep 17 00:00:00 2001 From: Kalyn Smith Date: Mon, 8 Feb 2021 20:30:44 -0500 Subject: [PATCH] twitter clone --- data.js | 53 ++++++++++++++++++++++++++++++++----- index.html | 18 +++++++++++++ styles.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 142 insertions(+), 7 deletions(-) create mode 100644 index.html create mode 100644 styles.css diff --git a/data.js b/data.js index 458d53d..44f8d37 100644 --- a/data.js +++ b/data.js @@ -2,11 +2,12 @@ let data = [ { 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: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. -Kaleb", time: "1:40 PM", date: "16 Mar 20", retweets: 6054, - likes: 27700 + likes: 27700, + 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", @@ -15,7 +16,8 @@ let data = [ time: "4:51 PM", date: "22 Jun 20", retweets: 4, - likes: 27 + likes: 27, + image: "https://images.unsplash.com/photo-1611934786226-7caa0c3654a9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=582&q=80 " }, { name: "Jack Dorsey", @@ -24,7 +26,8 @@ let data = [ time: "4:51 PM", date: "22 Jun 20", retweets: 4, - likes: 27 + likes: 27, + image: "https://images.unsplash.com/photo-1611162618479-ee3d24aaef0b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2167&q=80 " }, { name: "Leon Jenkins", @@ -33,7 +36,8 @@ let data = [ time: "1:00 AM", date: "1 May 89", retweets: 123, - likes: 27334 + 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", @@ -42,6 +46,41 @@ let data = [ time: "3:59 PM", date: "24 Dec 19", retweets: 0, - likes: 0 + likes: 0, + image: "https://images.unsplash.com/photo-1595287137144-cf60a87f39d9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80 " } -] \ No newline at end of file +] + +for (let i = 0; i < data.length; i++) { + let name = data[i].name; + let image = data[i].image; + 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..b5db310 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + + +

Twitter

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..f6ccf4c --- /dev/null +++ b/styles.css @@ -0,0 +1,78 @@ +* { + 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; +} + + + + + + + + + + +