suhailroushan13 · January 23, 2025 08:31
diff --git a/ok.html b/ok.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Posts with Axios and Bootstrap</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Axios -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 </head>
 <body>
  <div class="container mt-5">
    <h1 class="text-center mb-4">Posts from JSONPlaceholder</h1>
    <button id="fetchPosts" class="btn btn-primary mb-4">Fetch Posts</button>
    <div id="postContainer" class="row g-3"></div>
  </div>

  <script>
    const fetchPostsButton = document.getElementById('fetchPosts');
    const postContainer = document.getElementById('postContainer');

    const fetchPosts = async () => {
      try {
        // Fetch data from the API
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        
        // Clear previous posts
        postContainer.innerHTML = '';

        // Loop through posts and create cards
        response.data.forEach(post => {
          const card = document.createElement('div');
          card.className = 'col-md-4';
          card.innerHTML = `
            <div class="card h-100">
              <div class="card-body">
                <h5 class="card-title">${post.title}</h5>
              </div>
            </div>
          `;
          postContainer.appendChild(card);
        });
      } catch (error) {
        console.error('Error fetching posts:', error);
      }
    };

    // Add event listener to the button
    fetchPostsButton.addEventListener('click', fetchPosts);
  </script>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Posts with Axios and Bootstrap</title>
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Axios -->
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>
	<body>
	<div class="container mt-5">
	<h1 class="text-center mb-4">Posts from JSONPlaceholder</h1>
	<button id="fetchPosts" class="btn btn-primary mb-4">Fetch Posts</button>
	<div id="postContainer" class="row g-3"></div>
	</div>

	<script>
	const fetchPostsButton = document.getElementById('fetchPosts');
	const postContainer = document.getElementById('postContainer');

	const fetchPosts = async () => {
	try {
	// Fetch data from the API
	const response = await axios.get('https://jsonplaceholder.typicode.com/posts');

	// Clear previous posts
	postContainer.innerHTML = '';

	// Loop through posts and create cards
	response.data.forEach(post => {
	const card = document.createElement('div');
	card.className = 'col-md-4';
	card.innerHTML = `
	<div class="card h-100">
	<div class="card-body">
	<h5 class="card-title">${post.title}</h5>
	</div>
	</div>
	`;
	postContainer.appendChild(card);
	});
	} catch (error) {
	console.error('Error fetching posts:', error);
	}
	};

	// Add event listener to the button
	fetchPostsButton.addEventListener('click', fetchPosts);
	</script>

	<!-- Bootstrap JS -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
	</body>
	</html>