diff --git a/data.js b/data.js index 458d53d..11e66f2 100644 --- a/data.js +++ b/data.js @@ -6,7 +6,8 @@ let data = [ time: "1:40 PM", date: "16 Mar 20", retweets: 6054, - likes: 27700 + likes: 27700, + pic: "images/kaleb_burd.png" }, { name: "Vlad Putin", @@ -15,7 +16,8 @@ let data = [ time: "4:51 PM", date: "22 Jun 20", retweets: 4, - likes: 27 + likes: 27, + pic: "images/vlad_putin.jpg" }, { name: "Jack Dorsey", @@ -24,7 +26,8 @@ let data = [ time: "4:51 PM", date: "22 Jun 20", retweets: 4, - likes: 27 + likes: 27, + pic: "images/jack_dorsey.jpg" }, { name: "Leon Jenkins", @@ -33,7 +36,8 @@ let data = [ time: "1:00 AM", date: "1 May 89", retweets: 123, - likes: 27334 + likes: 27334, + pic: "images/leon_jenkins.jpg" }, { name: "Mark Zuck", @@ -42,6 +46,141 @@ let data = [ time: "3:59 PM", date: "24 Dec 19", retweets: 0, - likes: 0 + likes: 0, + pic: "images/mark_zuck.jpeg" } -] \ No newline at end of file +] + +class Tweet { + constructor(){ + this.name = null; + this.handle = null; + this.message = null; + this.time = null; + this.date = null; + this.retweets = null; + this.likes = null; + this.pic = null; + }; + + getName(){ + return this.name; + } + + getHandle(){ + return this.handle; + } + + getMessage(){ + return this.message; + } + + getTime(){ + return this.time; + } + + getDate(){ + return this.date; + } + + getRetweets(){ + return this.retweets; + } + + getLikes(){ + return this.likes; + } + + getPic(){ + return this.pic; + } + + setName(name){ + this.name = name; + } + + setHandle(handle){ + this.handle = handle; + } + + setMessage(message){ + this.message = message; + } + + setTime(time){ + this.time = time; + } + + setDate(date){ + this.date = date; + } + + setRetweets(retweets){ + this.retweets = retweets; + } + + setLikes(likes){ + this.likes = likes; + } + + setPic(pic){ + this.pic = pic; + } +} + +// Found this function online while searching for ways to round the likes count to the thousands. +// So, this is the only part I didn't write myself, or base on something from bootstrap or w3schools. +function kFormatter(num) { + return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'K' : Math.sign(num)*Math.abs(num) +} + +let html = ""; + +for(let i = 0; i < data.length; i++){ + tweet = new Tweet(); + tweet.setName(data[i].name); + tweet.setHandle(data[i].handle); + tweet.setMessage(data[i].message); + tweet.setTime(data[i].time); + tweet.setDate(data[i].date); + tweet.setRetweets(data[i].retweets.toLocaleString()); + tweet.setLikes(kFormatter(data[i].likes)); + tweet.setPic(data[i].pic); + + html += `
+
+
+
+ +
+
+
+
+ ${tweet.name} +
+
+ +
+
+
${tweet.handle}
+
+
+

${tweet.message}

+ ${tweet.time} · ${tweet.date} · + Twitter for iPhone +
+
+
+ ${tweet.retweets} + Retweets +
+
+ ${tweet.likes} + Likes +
+
+
+
`; +} + +document.getElementById("twitter").innerHTML += html; \ No newline at end of file diff --git a/images/jack_dorsey.jpg b/images/jack_dorsey.jpg new file mode 100644 index 0000000..467a453 Binary files /dev/null and b/images/jack_dorsey.jpg differ diff --git a/images/kaleb_burd.png b/images/kaleb_burd.png new file mode 100644 index 0000000..66175bd Binary files /dev/null and b/images/kaleb_burd.png differ diff --git a/images/leon_jenkins.jpg b/images/leon_jenkins.jpg new file mode 100644 index 0000000..57d27d6 Binary files /dev/null and b/images/leon_jenkins.jpg differ diff --git a/images/mark_zuck.jpeg b/images/mark_zuck.jpeg new file mode 100644 index 0000000..861a910 Binary files /dev/null and b/images/mark_zuck.jpeg differ diff --git a/images/verified.png b/images/verified.png new file mode 100644 index 0000000..3787c2a Binary files /dev/null and b/images/verified.png differ diff --git a/images/vlad_putin.jpg b/images/vlad_putin.jpg new file mode 100644 index 0000000..43d46a6 Binary files /dev/null and b/images/vlad_putin.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6c71b6e --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + +
+

Twitter

+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..adcd931 --- /dev/null +++ b/style.css @@ -0,0 +1,33 @@ +h1 { + text-align: center; +} + +.card { + justify-content: center; +} + +img { + width: 60px; + height: 60px; + border-radius: 50%; +} + +.card-title { + font-size: large; +} + +.verified { + height: 15px; + width: 15px; + justify-content: left; +} + +.card-text { + font-family: Helvetica, sans-serif; + font-size: large; + font-weight: 500; +} + +.card-link { + text-decoration: none; +} \ No newline at end of file