· 6 years ago · Jan 14, 2020, 10:10 PM
1<div class="container">
2 <!-- design link (DELETE LATER AFTER DONE) -->
3 <div class="link-to-design">
4 <p class="link-to-design__disclaimer"><i><b> Info: </b>Tumblr is a blog platform for sharing photos and posts. See example: <b><a href="http://tylerspangler.tumblr.com" target="_blank">tylerspangler.tumblr.com</a></b></i></p>
5 <p>
6 <b>Task:</b> Create a responsive tumblr viewer given <b><a href="https://www.figma.com/file/7mk3ABbZmWjOXpgNdCjyrr/Untitled?node-id=0%3A1" target="_blank">THIS DESIGN MOCKUP</a></b>. See JS block in this codepen for more information on the prompt and API. Delete this message after finishing.
7 </p>
8 </div>
9 <!-- search bar -->
10 <form class="search-bar row" id="searchBar">
11 <input
12 class="search-bar__input col-6 col-md-7"
13 type="text"
14 placeholder="Username"
15 ><!--
16 --><span class="search-bar__suffix col-4 col-md-3">
17 .TUMBLR.COM
18 </span><!--
19 --><input
20 class="search-bar__submit btn btn-primary col-2 col-md-2"
21 type="button"
22 value="SEARCH"
23 onclick="searchBtn"
24 >
25 </form>
26 <!-- prompt -->
27 <!-- posts section -->
28 <div class="posts" id="postDiv">
29 </div>
30</div>
31
32/* container */
33.container {
34 max-width: 60rem;
35 margin: 0 auto;
36 padding: 1.5rem;
37}
38
39.row {
40 margin: 0;
41}
42
43.link-to-design {
44 padding: 2rem;
45 margin: 1rem 0;
46 background-color: rgb(226, 239, 255);
47 border: 1px solid rgb(114, 146, 194);
48}
49
50.link-to-design__disclaimer {
51 opacity: 0.5;
52}
53/* search-bar */
54.search-bar {
55 margin-top: 2rem;
56 text-align: left;
57 vertical-align: middle;
58}
59
60.search-bar__suffix {
61 font-weight: 800;
62 font-size: .6rem;
63 padding-left: .5rem;
64 line-height: 2rem;
65}
66
67.btn.btn-primary.search-bar__submit {
68 font-size: 0.6rem;
69 padding: 0;
70 margin: 0;
71 line-height: .5rem;
72}
73
74/* posts */
75.posts {
76 margin: 0;
77 padding: 0;
78 display: flex;
79 flex-wrap: wrap;
80}
81
82.postWrap {
83 padding: 1rem;
84 width: 33%;
85}
86
87.post {
88 background: #eee;
89/* margin: 1rem 0; */
90 padding: 3rem;
91}
92
93.image img {
94 background: #fff;
95 margin: 0;
96 width: 100%;
97}
98
99.date {
100 font-size: .7rem;
101 width: 100%;
102}
103
104.summary {
105 padding-top: 1rem;
106 padding-bottom: 1rem;
107 width: 100%;
108}
109
110.tags {
111 width: 100%;
112}
113/* desktop */
114@media only screen and (min-width : 550px) {
115 .btn.btn-primary.search-bar__submit {
116 font-size: 1rem;
117 }
118 .search-bar__suffix {
119 font-size: 1rem;
120 }
121}
122
123/*****
124 *
125 * Tumblr is a blog platform. We want to use their api to display a series of photos
126 * given the design and this boiler plate setup.
127 *
128 * -------------------------------------------------------------------------------------
129 * Consume the tumblr posts api photos (1) and display it based on the given design (2).
130 * You can google for reference and Jquery/bootstrap/sass/scss is ok. Refrain from frameworks usage
131 * -------------------------------------------------------------------------------------
132 *
133 * (1) the syntax for api endpoint is :
134 * https://api.tumblr.com/v2/blog/{TUMBLR_PAGE}.tumblr.com/posts/photo?&api_key={API_KEY}
135 *
136 * (2) Design can be found here:
137 * https://www.figma.com/file/7mk3ABbZmWjOXpgNdCjyrr/Untitled?node-id=0%3A1
138 *
139 * We want the following attributes of each post displayed:
140 * ------------------------------------------------------
141 *
142 * - photos[0] : {object} the first image
143 * - timestamp : {int} date added, preferably human readable
144 * - summary : {String} description
145 * - tags : {[String} array of tags for the post
146
147 * more info can be found here if desired: https://www.tumblr.com/docs/en/api/v2#posts--retrieve-published-posts
148 *
149 * examples {TUMBLR_PAGE}.tumblr.com below are some examples that you can display
150 * -----------------------------------------------------
151 * - tylerspangler
152 * - necessary-disorder
153 *
154 *****/
155
156// your given api key
157const API_KEY = 'YmtfCOr0je9zdw99y4swvgs293osiSxwgA1XaNb3xRfvBzUybf';
158let currentTumblrPage = 'necessary-disorder';
159// let axios = require('axios');
160
161function pageAction(){
162 axios.get(`https://api.tumblr.com/v2/blog/${currentTumblrPage}.tumblr.com/posts/photo?&api_key=${API_KEY}`).then(response =>{
163 // console.log(response.data.response);
164 let posts = response.data.response.posts;
165 for(post of posts){
166 // console.log(post);
167 let image = post.photos[0].alt_sizes[0].url;
168 console.log(image);
169 let timestamp = post.date;
170 let summary = post.summary;
171 let tags = post.tags;
172 let tagsString = "";
173 for(tag of tags){
174 tagsString += tag + ", ";
175 }
176
177 let formattedTags = tagsString.substring(0,(tagsString.length - 2));
178
179 let postDiv = document.getElementById("postDiv");
180 let innerHtml = `<div class="postWrap"><div class="post">
181 <div class="image"><img src=${image}></div>
182 <div class ="date">${timestamp}</div>
183 <div class="summary">${summary}</div>
184 <div class="tags">${formattedTags}</div>
185 </div></div>`;
186 postDiv.innerHTML += innerHtml;
187 }
188}).catch(err =>{
189 console.log(err);
190});
191};
192
193
194let searchBtn = function(e) {
195 e.preventDefault();
196 let searchBar = document.getElementById("searchBar");
197 let searchTerm = searchBar.value;
198 console.log(searchTerm);
199 currentTumblrPage = searchTerm;
200 console.log(currentTumblrPage);
201 pageAction();
202}