Currently, I am grappling with a coding challenge that requires me to extract data from https://jsonplaceholder.typicode.com/users using the fetch API function along with bootstrap and jquery. To display the data in a div element, I utilized the array.map(). Here is the vanilla JS version of the code executed within the HTML script tags.
However, I encountered an obstacle while attempting to hide the element upon clicking the Delete button. Despite trying callback functions and 'onclick' events for buttons, I have not been able to solve this issue. Can anyone provide guidance on the right approach to tackle this?
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Demo</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabfa4baa4b8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c49524c524d">[email protected]</a>/dist/js/bootstrap.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<span class="navbar-brand" href="#">Test App</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown bg-light" >
<a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Menu
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Menu 1</a></li>
<li><a class="dropdown-item" href="#">Menu 2</a></li>
<li><a class="dropdown-item" href="#">Menu 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container" id="box">
<h3>Showing </h3>
<div class="row">
<!-- Fetched data gets inserted here -->
</div>
</div>
</main>
<script>
fetch('https://jsonplaceholder.typicode.com/users').then((data) => {
// console.log(data);
return data.json();
}).then((jsondata) => {
const names = jsondata.map((values)=> {
return `<div class="col col-lg-4 col-md-4 gx-4 gy-4">
<div id="card" class="card p-2">
<h2 id="user">${values.name}</h2>
<div class="card-body">
<p><strong>Street:</strong> ${values.address.street}</p>
<p><strong>Suite:</strong> ${values.address.suite}</p>
<p><strong>City:</strong> ${values.address.city}</p>
<p><strong>Zip Code:</strong> ${values.address.zipcode}
</p>
<button "class="btn btn-primary float-end"><span><i class="fa-solid fa-trash-can"></i> </span>Delete</button>
</div>
</div>
</div>`
})
// document.getElementById('user').innerHTML = names;
document.querySelector('.row').innerHTML = names;
</script>