MurhafSousli/exercise.js

## exercise.js
/**
 *  - Add a button that fetches data from WordPress API when clicked, "Fetch posts"
 *  - Get WordPress posts using the fetch API
 *  - Display loading icon before calling fetch
 *  - Display the posts in a list (display title) once the response is loaded and remove the loading icon
 */

/**
 * Hints:
 *
 *  - Use http://codespell.io/wp-json/wp/v2/posts to get posts from a WordPress API
 *  - Hit the link above in chrome and copy the text then use http://jsonviewer.stack.hu/ to figure out response scheme
 *  - Use https://samherbert.net/svg-loaders/ to download the SVG file and include it in your project.
 *  - Create a function to generate list of items (ul and li) and display post title in each list item.
 *  - Create a function "showLoading()" that adds the svg loading icon
 *  - Create a function "hideLoading()" that removes the svg loading icon
 */

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Fetch & loading icon</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 5em;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="loading-container"></div>
  <ul id="posts-container"></ul>
  <button onclick="fetchPosts()">Fetch posts</button>

  <script src="main.js"></script>
</body>

</html>

## solution.js
const loadingContainer = document.querySelector('#loading-container');
const postsContainer = document.querySelector('#posts-container');

/**
 * Show loading icon
 */
function showLoading() {
  loadingContainer.innerHTML = `
  <svg width="105" height="105" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg" fill="#000">
    <circle cx="12.5" cy="12.5" r="12.5">
        <animate attributeName="fill-opacity"
         begin="0s" dur="1s"
         values="1;.2;1" calcMode="linear"
         repeatCount="indefinite" />
    </circle>
    <circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
        <animate attributeName="fill-opacity"
         begin="100ms" dur="1s"
         values="1;.2;1" calcMode="linear"
         repeatCount="indefinite" />
    </circle>
    <circle cx="52.5" cy="12.5" r="12.5">
        <animate attributeName="fill-opacity"
         begin="300ms" dur="1s"
         values="1;.2;1" calcMode="linear"
         repeatCount="indefinite" />
    </circle>
    <circle cx="52.5" cy="52.5" r="12.5">
        <animate attributeName="fill-opacity"
         begin="600ms" dur="1s"
         values="1;.2;1" calcMode="linear"
         repeatCount="indefinite" />
    </circle>
    <circle cx="92.5" cy="12.5" r="12.5">
        <animate attributeName="fill-opacity"
         begin="800ms" dur="1s"
         values="1;.2;1" calcMode="linear"
         repeatCount="indefinite" />
    </circle>
    <circle cx="92.5" cy="52.5" r="12.5">
        <animate attributeName="fill-opacity"
         begin="400ms" dur="1s"
         values="1;.2;1" calcMode="linear"
         repeatCount="indefinite" />
    </circle>
    <circle cx="12.5" cy="92.5" r="12.5">
        <animate attributeName="fill-opacity"
         begin="700ms" dur="1s"
         values="1;.2;1" calcMode="linear"
         repeatCount="indefinite" />
    </circle>
    <circle cx="52.5" cy="92.5" r="12.5">
        <animate attributeName="fill-opacity"
         begin="500ms" dur="1s"
         values="1;.2;1" calcMode="linear"
         repeatCount="indefinite" />
    </circle>
    <circle cx="92.5" cy="92.5" r="12.5">
        <animate attributeName="fill-opacity"
         begin="200ms" dur="1s"
         values="1;.2;1" calcMode="linear"
         repeatCount="indefinite" />
    </circle>
</svg>
  `;
}

/**
 * Hide loading icon
 */
function hideLoading() {
  loadingContainer.innerHTML = '';
}

/**
 * Add post item to the list
 */
function addPostToList(data) {
  const post = document.createElement('li');
  post.innerHTML = data.title.rendered;
  postsContainer.appendChild(post);
}

/**
 * Fetch posts from a WordPress site
 */
function fetchPosts() {
  postsContainer.innerHTML = '';
  // Show loading icon
  showLoading();
  // Fetch posts from the REST API
  fetch('http://codespell.io/wp-json/wp/v2/posts').then((response) => {
    // Convert response to an object
    response.json().then((posts) => {
      // Add each post item to the list
      posts.forEach((post) => addPostToList(post));
      // Hide loading icon
      hideLoading();
    })
  }).catch((err) => console.log(err));

}

async function fetchUsingAsyncAwait() {
  postsContainer.innerHTML = '';
  // Show loading icon
  showLoading();
  try {
    const response = await fetch('http://codespell.io/wp-json/wp/v2/posts');
    // Convert response to an object
    const posts = await response.json();
    // Add each post item to the list
    posts.forEach((post) => addPostToList(post));
    // Hide loading icon
    hideLoading();
  }
  catch (err) {
    console.log(err);
  }
}
	/**
	* - Add a button that fetches data from WordPress API when clicked, "Fetch posts"
	* - Get WordPress posts using the fetch API
	* - Display loading icon before calling fetch
	* - Display the posts in a list (display title) once the response is loaded and remove the loading icon
	*/

	/**
	* Hints:
	*
	* - Use http://codespell.io/wp-json/wp/v2/posts to get posts from a WordPress API
	* - Hit the link above in chrome and copy the text then use http://jsonviewer.stack.hu/ to figure out response scheme
	* - Use https://samherbert.net/svg-loaders/ to download the SVG file and include it in your project.
	* - Create a function to generate list of items (ul and li) and display post title in each list item.
	* - Create a function "showLoading()" that adds the svg loading icon
	* - Create a function "hideLoading()" that removes the svg loading icon
	*/
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Fetch & loading icon</title>
	<style>
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 5em;
	margin: 0;
	}
	</style>
	</head>

	<body>
	<div id="loading-container"></div>
	<ul id="posts-container"></ul>
	<button onclick="fetchPosts()">Fetch posts</button>

	<script src="main.js"></script>
	</body>

	</html>
	const loadingContainer = document.querySelector('#loading-container');
	const postsContainer = document.querySelector('#posts-container');

	/**
	* Show loading icon
	*/
	function showLoading() {
	loadingContainer.innerHTML = `
	<svg width="105" height="105" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg" fill="#000">
	<circle cx="12.5" cy="12.5" r="12.5">
	<animate attributeName="fill-opacity"
	begin="0s" dur="1s"
	values="1;.2;1" calcMode="linear"
	repeatCount="indefinite" />
	</circle>
	<circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
	<animate attributeName="fill-opacity"
	begin="100ms" dur="1s"
	values="1;.2;1" calcMode="linear"
	repeatCount="indefinite" />
	</circle>
	<circle cx="52.5" cy="12.5" r="12.5">
	<animate attributeName="fill-opacity"
	begin="300ms" dur="1s"
	values="1;.2;1" calcMode="linear"
	repeatCount="indefinite" />
	</circle>
	<circle cx="52.5" cy="52.5" r="12.5">
	<animate attributeName="fill-opacity"
	begin="600ms" dur="1s"
	values="1;.2;1" calcMode="linear"
	repeatCount="indefinite" />
	</circle>
	<circle cx="92.5" cy="12.5" r="12.5">
	<animate attributeName="fill-opacity"
	begin="800ms" dur="1s"
	values="1;.2;1" calcMode="linear"
	repeatCount="indefinite" />
	</circle>
	<circle cx="92.5" cy="52.5" r="12.5">
	<animate attributeName="fill-opacity"
	begin="400ms" dur="1s"
	values="1;.2;1" calcMode="linear"
	repeatCount="indefinite" />
	</circle>
	<circle cx="12.5" cy="92.5" r="12.5">
	<animate attributeName="fill-opacity"
	begin="700ms" dur="1s"
	values="1;.2;1" calcMode="linear"
	repeatCount="indefinite" />
	</circle>
	<circle cx="52.5" cy="92.5" r="12.5">
	<animate attributeName="fill-opacity"
	begin="500ms" dur="1s"
	values="1;.2;1" calcMode="linear"
	repeatCount="indefinite" />
	</circle>
	<circle cx="92.5" cy="92.5" r="12.5">
	<animate attributeName="fill-opacity"
	begin="200ms" dur="1s"
	values="1;.2;1" calcMode="linear"
	repeatCount="indefinite" />
	</circle>
	</svg>
	`;
	}

	/**
	* Hide loading icon
	*/
	function hideLoading() {
	loadingContainer.innerHTML = '';
	}

	/**
	* Add post item to the list
	*/
	function addPostToList(data) {
	const post = document.createElement('li');
	post.innerHTML = data.title.rendered;
	postsContainer.appendChild(post);
	}

	/**
	* Fetch posts from a WordPress site
	*/
	function fetchPosts() {
	postsContainer.innerHTML = '';
	// Show loading icon
	showLoading();
	// Fetch posts from the REST API
	fetch('http://codespell.io/wp-json/wp/v2/posts').then((response) => {
	// Convert response to an object
	response.json().then((posts) => {
	// Add each post item to the list
	posts.forEach((post) => addPostToList(post));
	// Hide loading icon
	hideLoading();
	})
	}).catch((err) => console.log(err));

	}

	async function fetchUsingAsyncAwait() {
	postsContainer.innerHTML = '';
	// Show loading icon
	showLoading();
	try {
	const response = await fetch('http://codespell.io/wp-json/wp/v2/posts');
	// Convert response to an object
	const posts = await response.json();
	// Add each post item to the list
	posts.forEach((post) => addPostToList(post));
	// Hide loading icon
	hideLoading();
	}
	catch (err) {
	console.log(err);
	}
	}