// find elements
var banner = $("#banner-message")
var button = $("button")
const fetchPostsURL = 'https://jsonplaceholder.typicode.com/posts';
const fetchPostURLWithFail = 'https://httpbin.org/get';

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")

  // Promises
	fetch(fetchPostURLWithFail, {
	  method: "POST",
  })
  	.then((response) => {

      if(response.status >= 400) {
      	throw response.statusText;
      }

    	response.json()
      	.then((posts) => {
        	const totalPosts = posts.length;
          document.querySelector('#display').innerText = `${totalPosts} posts`;
        })
        .catch((e) => {
        	const error = e.toString();
        	document.querySelector('#display').innerText = `error: ${error}`;
        });
    })
    .catch((e) => {
	    const error = e.toString();
    	document.querySelector('#display').innerText = `error: ${error}`;
    });
})