kk is great

async function fetchWebPosts() {
    const url = 'https://6321f07afd698dfa29032037.mockapi.io/test/all/webposts';
  
    try {
      const response = await fetch(url); // Fetch data from the API
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json(); // Parse JSON data
      displayPosts(data); // Process and display the data
    } catch (error) {
      console.error('Error fetching the data:', error); // Handle errors
    }
  }
  
  function displayPosts(posts) {
    // Iterate over the posts and display details
    let parent = document.querySelector(".contributions") ;
    let res = "" ;
    posts.forEach(post => {
      let element = `
            <h3 class="h5 text-uppercase mt-4 text-info"><i class="fa-solid fa-image"></i>${post.post_title}</h3>
            <p>Author: ${post.name}</p>
            <p>Roll no:${post.rollno}</p>
                <div class="mb-4 id:${post.id}">
                    <iframe src="${post.url}" title="External Site Preview" style="width:95%; height: 400px; border: 2px solid #444;" loading="lazy"></iframe>
                    
                    <p class="mt-3">Description :
                    ${post.description}
                    </p>
                    
                </div>

      `
      console.log(`Post Title:${post.post_title} `);
      console.log(`Name: ${post.name}`);
      console.log(`URL: ${post.url}`);
      console.log(`Description: ${post.description}`);
      console.log(`Roll Number: ${post.rollno}`);
      console.log(`ID: ${post.id}`);
      console.log('-----------------------------'); // Separator for readability
      res += element ;
    });
    parent.innerHTML = res ;
  }
  
  // Call the function
  fetchWebPosts();