Postcards <Title> <html lang="en"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> # <body> <nav id="navbar-example" class="navbar navbar-light bg-light px-3 sticky-top" data-bs-offset="0"> <h1><a class="navbar-brand" href="#"> Postcards</a></h1> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="https://nohamen.github.io">My Website!</a> </li>  <li class="nav-item"> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search my website..." aria-label="Search" name="search_query"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </li> </ul> </nav> <h1>The EternalShop</h1> <p class="lead"><b>New Deals!</b> Get Twice the items and other stuff!</p> <p><b>Caution:</b> Deleting the item the free item came with may result in termination of your order without refund.</p> <p class="lead"><b>HTML 3 Testing!</b> We are testing out HTML 3 on our website!</p> <div id="bookcontainer"><noscript>Oh no! Your browser does not support JavaScript! Panic! </noscript></div> <div class="card"> <div class="card-body">  <p><a href="https://infinitexlks.github.io/EternalShop/">The Shop!</a></p> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> <script> // Generate book list (async function() { const itemsFetch = await fetch("items.json"); let items = await itemsFetch.text(); items = JSON.parse(items); let html = ""; for (const [key, value] of Object.entries(items)) { html += `<div> <h1>${key}</h1> <p>Cost: $${value[1]}</p> <p>${value[0]}</p> <p><a class="btn btn-success" href="${value[3]}">Shop now!</a></p> </div>`; } document.getElementById("bookcontainer").innerHTML = html; })(); </script> </body> </html>