Instead of a feed, show just one post at a time (like Tinder)

[mgatland]

We're going to make a new page on our site that shows one post at a time, instead of the whole feed.

• [ ] Make a new file named feed2.html inside the public folder
• [ ] copy all the text from feed.html and paste it into feed2.html. This will be your starting point.

(We'll keep original feed as well, because seeing all the posts at once is useful for testing. We might remove it from the final site.)

• [ ] In feed2.html, replace $.get("/posts", createFeed); with ` $.get("/random", createFeed);'

Feed2 now asks the server for a random post.

Our server doesn't know how to answer that request yet but we are going to show it how. That means moving to index.js

In index.js, add this code, borrowed from our TV Show Idea generator back in week 1.

You can add this anywhere, as long as it's not inside another function:

//pick and return a random element from the given list
function pickRandomFrom(list) {
  return list[Math.floor(Math.random()*list.length)];
};

And then this code sets up the response to the request for "/random":

//give the client a random post
function getRandomPost(request, response) {
  let randomPost = pickRandomFrom(posts);
  let list = [randomPost]; //we put it inside a list, just because it makes our existing feed code work
  response.send(list);
}

app.get('/random', getRandomPost);

• [ ] add both sections of code

• [ ] Restart your server, then test the new feed2.html page

You should get a randomly selected post each time you refresh the page.

'Next' button

Can you add a link on the page that makes a new post appear?

• [ ] You'll need to add a link in the HTML (you've done this before!)
• [ ] Give it a unique class i.e. `class="showNextPost"
• [ ] You'll need to make a new function that contains this command: $.get("/random", createFeed); - that command is already in your code, but it's not wrapped up in a function yet. You have to put it inside a function so you can refer to it in the next step.
• [ ] Use JavaScript to tell your browser to run a function when the link is clicked - you've done this before too!

Does it work? Is there a weird side effect? Can you figure out why it's happening and how you might fix it?

[mgatland]

$(".message-list").empty();

nextpost();

[natalievillard]

we did it!