Traversy/Fetch API Crash/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Fetch API</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="fetchSandox.js"></script>
</head>
<body>
  <button id="getText">Get Text</button>
  <button id="getUsers">Get JSON</button>
  <button id="getPosts">Get API Data</button>
  <hr>
  <div id="output"></div>
  <hr>
  <form id="addPost">
    <div>
      <input type='text' id='title' placeholder="title" />
    </div>
    <div>
      <textarea placeholder="Body" id="body">

      </textarea>
    </div>
    <input type="submit" />
  </form>

  <script>
    document.getElementById('getText').addEventListener('click',getText);
    document.getElementById('getUsers').addEventListener('click',getUsers);
    document.getElementById('getPosts').addEventListener('click',getPosts);
    document.getElementById('addPost').addEventListener('submit',addPost);

    function getText() {
      fetch('sample.txt')
      .then((res) => res.text())
      .then((data) => {
        document.getElementById('output').innerHTML = data;
      });
    }

    function getUsers() {
      fetch("users.json")
      .then((res) => res.json())
      .then((data) => {
        let output = '<h2>Users</h2>';
        data.forEach(function(user){
          output +=`
          <ul>
            <li>ID: ${user.id}</li>
            <li>Name: ${user.name}</li>
            <li>Email: ${user.email}</li>
          </ul>
          `;
        });
        document.getElementById('output').innerHTML = output;
      });
    }

    function getPosts() {
      fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => {
        let output = '<h2>Posts</h2>';
        data.forEach(function(post){
          output +=`
            <section>
              <h2> ${post.title} </h2>
              <p> ${post.body} </p>
          `;
        });
        document.getElementById('output').innerHTML = output;
      });
    }

    function addPost(event) {
      event.preventDefault();

      let title = document.getElementById('title').value;
      let body = document.getElementById('body').body;

      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: {
          'Accept': 'application/json, text/plain, */*',
          'Content-type': 'application/json'
        },
        body: JSON.stringify({title:title, body:body})
      })
      .then((res) => res.json())
      .then((data) => console.log(data))
      .catch((error) => console.log(error))
    }
  </script>
</body>
</html>