homework


<!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>Shopping List Exercise</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/main.css">
</head>
<body>

    <div id="app">
        <div class="shopping-list">
            <header>
                <h1>My Shopping List</h1>
                <a href="#" class="loadingButton">
                    Load List <i class="fas fa-angle-down"></i>
                </a>
            </header>
            <ul>
                <template id="shopping-list-item-template">
                <li>
                    <i class="far fa-check-circle"></i>
                </li>
                </template>
            </ul>
        </div>
    </div>

    <script src="assets/js/index.js"></script>
</body>
</html>


let groceries = [];

function loadGroceries() {
  console.log("Load Groceries...");

  fetch('assets/data/shopping-list.json')
    .then((response) => {
      return response.json();
    })
    .then((data) => {
        groceries = data;
      displayGroceries();
    })
    .catch((err) => console.error(err));
}

function displayGroceries() {
    console.log("Display Groceries...");

    if('content' in document.createElement('template')) {
      const container = document.querySelector(".shopping-list");
      groceries.forEach((item) => {
        const tmpl = document.getElementById('shopping-list-item-template').content.cloneNode(true);
        tmpl.querySelector('li').innerText = item.name;
        if(item.completed){
            tmpl.querySelector('li').classList.add('completed');
        }
        container.appendChild(tmpl);
      });
    } else {
      console.error('Your browser does not support templates');
    }
  }

  loadGroceries();