· 6 years ago · Oct 16, 2019, 08:08 PM
1<html>
2 <body>
3 <div class='outer'>
4 <div class='searchBar'>
5 </div>
6 <div class='posts'>
7 </div>
8 </div>
9 </body>
10</html>
11
12.outer {
13 width: 90%;
14 margin: auto;
15}
16
17.posts {
18 display: flex;
19 flex-direction: column;
20 text-align: center;
21}
22
23.post {
24 background: grey;
25 margin-bottom: 10px;
26}
27
28.post img {
29 width: 50%;
30}
31
32.post ul {
33 list-style: none;
34}
35
36@media (min-width: 600px) {
37 .posts {
38
39 }
40}
41
42/*****
43 * -------------------------------------------------------------------------------------
44 * Consume the tumblr posts api photos (1) and display it based on the given design (2).
45 * You can google for reference and Jquery/sass/scss is ok.
46 * -------------------------------------------------------------------------------------
47 * (1) the syntax for api endpoint is :
48 * https://api.tumblr.com/v2/blog/{TUMBLR_PAGE}.tumblr.com/posts/photo?&api_key={API_KEY}
49 *
50 * more info can be found here: https://www.tumblr.com/docs/en/api/v2#posts--retrieve-published-posts
51 *
52 * examples {TUMBLR_PAGE}.tumblr.com
53 *
54 * - tylerspangler
55 * - necessary-disorder
56 *
57 * (2) Design can be found here:
58 * https://www.figma.com/file/7mk3ABbZmWjOXpgNdCjyrr/Untitled?node-id=0%3A1
59 *
60 *****/
61
62// your given api key
63const API_KEY = 'YmtfCOr0je9zdw99y4swvgs293osiSxwgA1XaNb3xRfvBzUybf';
64let currentTumblrPage = 'tylerspangler';
65
66async function getTumbler() {
67 const response = await fetch(`https://api.tumblr.com/v2/blog/${currentTumblrPage}.tumblr.com/posts/photo?&api_key=${API_KEY}`);
68
69
70 const myJson = await response.json();
71
72 console.log(myJson.response.posts[0]);
73
74 let postsRoot = $('.posts').append(myJson.response.posts.map(post => {
75 return `<div class="post">
76 <img src="${post.photos[0].original_size.url}" >
77 <p>Posted ${moment.unix(post.timestamp).diff(moment(), 'days')} days ago</p>
78 <p>${post.summary}</p>
79 <ul>
80 ${post.tags.map(tag => {
81 return `<li>${tag}</li>`
82 }).join(' ')}
83 </ul>
84 </div>
85 `;
86 }));
87
88
89
90 console.log(moment.unix(myJson.response.posts[0].timestamp).format("MM/DD/YYYY"));
91 // response.posts[n].image_permalink
92 // response.posts[n].timestamp
93 // response.posts[n].summary
94 // response.posts[n].tags[]
95
96}
97
98getTumbler();