Level 1 - question 2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Question 2</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<style>

.container {
  display: flex;
  flex-direction: column;

}



.card {
  width: 300px;
  height: 250px;
  background-color: #ecf0f1;
  float: right;
  margin: 10px;
  
    
}

</style>


</head>

<body onload="cards()">
  
  <div class="container">
     <div id="display"></div>
  </div>


  <script>


 
    function cards(){
    
      fetch('https://jsonplaceholder.typicode.com/todos')
      .then((res) => res.json())
      .then((data) => {
        let display = '<br>';
        data.forEach(function(post){
          display += `
            
                 <div class="card card-body mb-3">
                
                  <h2>${post.title}</h2>
                </div>
              
            
          `;
        });
        document.getElementById('display').innerHTML = display;
      })
    }

    
 

  </script>
</body>
</html>