script.js

(function() {
  const example = document.getElementById('example')
  const cw1 = document.getElementById('cw1')
  const cw2 = document.getElementById('cw2')
  const cw3 = document.getElementById('cw3')
  const answer = document.getElementById('answer')

  example.addEventListener("click", function() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(array => {
        console.log(array)
        answer.innerHTML = JSON.stringify(array);
      })
  })
  cw1.addEventListener("click", function () {
   
    answer.innerHTML = "<p><em>Loading...</em></p>";

   
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(posts => {
          console.log(posts);

        
          let html = "<ul>";
          posts.forEach(post => {
            html += `<li><strong>${post.title}</strong><br>${post.body}</li>`;
          });
          html += "</ul>";

         
          answer.innerHTML = html;
        })
        .catch(error => {
          console.error("Błąd pobierania danych:", error);
          answer.innerHTML = "<p style='color:red;'>Nie udało się pobrać danych.</p>";
        });
    }, 1000); 
  });

  cw2.addEventListener("click", function () {
    
    const selectedId = document.getElementById("postSelect").value;

    
    answer.innerHTML = "<p><em>Loading...</em></p>";

    
    fetch(`https://jsonplaceholder.typicode.com/posts/${selectedId}`)
      .then(response => response.json())
      .then(post => {
        console.log(post);

       
        const html = `
          <h3>${post.title}</h3>
          <p>${post.body}</p>
          <p><strong>ID:</strong> ${post.id}</p>
        `;

       
        answer.innerHTML = html;
      })
      .catch(error => {
        console.error("Błąd:", error);
        answer.innerHTML = "<p style='color:red;'>Nie udało się pobrać posta.</p>";
      });
  });
  
  cw3.addEventListener("click", function () {
    const title = prompt("Podaj tytuł nowego posta:");
    const body = prompt("Podaj treść nowego posta:");

    if (!title || !body) {
      answer.innerHTML = "<p style='color:red;'>Musisz wpisać tytuł i treść posta!</p>";
      return;
    }

   
    answer.innerHTML = "<p><em>Processing...</em></p>";

    
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json; charset=UTF-8'
        },
        body: JSON.stringify({
          title: title,
          body: body,
          userId: 1
        })
      })
        .then(response => response.json())
        .then(data => {
          console.log("Odpowiedź serwera:", data);
          answer.innerHTML = `<p style="color:green;">Dodano nowy post o ID = ${data.id}</p>`;
        })
        .catch(error => {
          console.error("Błąd wysyłania:", error);
          answer.innerHTML = "<p style='color:red;'>Nie udało się dodać posta.</p>";
        });
    }, 1000);
  });
})();