33. Places

Explore cool, quirky places in your own backyard.

Loading...

HTML

1
2
<p>Explore cool, quirky places in your own backyard.</p>
<div id="app">Loading...</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* In today’s project, we’re going to build an app that
lets you find interesting things to do near where you live.
I have a simple API setup with some data from the quirkiest state
in the United States: Rhode Island. */

var app = new Reef('#app', {
  data: {},
  template: function (props) {
    if (props.posts && props.posts.length) {
      let html = '<div class="container">' + props.posts.map(function (post) {
        return `<div class="post-container"><div class="miniature-container"><img class="minature" src="${post.img}" /></div><div class="info-container"><h2 class="title">${post.place}</h2><p>${post.description}</p><p><em>${post.location}</em></p><a href=${post.url} target="_blank">Read more</a></div></div>`;
      }).join('') + '</div>';
      return html;
    }
    let html = '<p>Unable to find any places right now.</p>'
    return html;
  }
});
const getPosts = function () {
  fetch('https://vanillajsacademy.com/api/places.json').then(function (response) {
    if (response.ok) {
      return response.json();
    }
    return Promise.reject(response);
  }).then(function (data) {
    app.data.posts = data;
  }).catch(function (error) {
    console.warn(error);
    app.data.posts = null;
  })
}
getPosts();