for this html page make the generate page button when clicked create a link on the page with the text "Bookmarklets" that has the html for a page that displays the bookmarklets the user inputted as links with the text of the name the user inputed and displays the users inputed description ("data:text/html," should be infront of the html): data:text/html, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bookmarklets</title> <style> .bookmarklet-section { margin-bottom: 1em; padding: 1em; border: 1px solid black; } .bookmarklet-section input[type="text"] { display: block; margin-bottom: 0.5em; } .bookmarklet-section button { margin-top: 0.5em; } </style> </head> <body> <h1>Bookmarklets</h1> <div id="bookmarklet-sections"> <div class="bookmarklet-section"> <input type="text" placeholder="Bookmarklet name"> <input type="text" placeholder="Bookmarklet code"> <input type="text" placeholder="Bookmarklet description"> <button onclick="removeBookmarkletSection(this)">Remove</button> </div> </div> <button onclick="addBookmarkletSection()">Add bookmarklet</button> <button onclick="generatePage()">Generate page</button> <script> function addBookmarkletSection() { const bookmarkletSections = document.getElementById("bookmarklet-sections"); const newBookmarkletSection = document.createElement("div"); newBookmarkletSection.classList.add("bookmarklet-section"); newBookmarkletSection.innerHTML = ` <input type="text" placeholder="Bookmarklet name"> <input type="text" placeholder="Bookmarklet code"> <input type="text" placeholder="Bookmarklet description"> <button onclick="removeBookmarkletSection(this)">Remove</button> `; bookmarkletSections.appendChild(newBookmarkletSection); } function removeBookmarkletSection(button) { const bookmarkletSection = button.parentNode; bookmarkletSection.parentNode.removeChild(bookmarkletSection); } function generatePage() { const bookmarkletSections = document.querySelectorAll(".bookmarklet-section"); let html = "<ul>"; for (let i = 0; i < bookmarkletSections.length; i++) { const name = bookmarkletSections[i].querySelectorAll("input").value; const code = bookmarkletSections[i].querySelectorAll("input")[1].value; const description = bookmarkletSections[i].querySelectorAll("input")[2].value; html += `<li><a href="javascript:${code}">${name}</a>: ${description}</li>`; } html += "</ul>"; const link = document.createElement("a"); link.href = "data:text/html," + encodeURIComponent(html); link.download = "bookmarklets.html"; link.click(); } </script> </body> </html>