时间戳

首页 > 解决方案 > javascript和html中的书签制作器

javascript - javascript和html中的书签制作器

问题描述

let bookmarks = [{
    bookmarkId: "bookmark1",
    name: "Learning Portal",
    url: "https://learning.ccbp.in/",
}, ];

var ul = document.getElementById("bookmarksList");




// validation and submit
let submitBtnEl = document.getElementById("submitBtn");
submitBtn.addEventListener("click", function(event) {
    var x = document.getElementById("siteNameInput");

    var y = document.getElementById("siteUrlInput");



    var siteNameError = document.getElementById("siteNameErrMsg");

    siteNameError.innerHTML = '';

    var siteUrlError = document.getElementById("siteUrlErrMsg");

    siteUrlError.innerHTML = '';



    // checking for site name

    if (x && x.value == "") {

        siteNameError.innerHTML = 'site name is mandatory';

    }





    //checking for site url

    if (y && y.value == "") {

        siteUrlError.innerHTML = 'Please provide valid URLs to the siteUrlInput';

    }





    //submitting if both present

    if (x && y && x.value != "" && y.value != "") {

        siteNameError.innerHTML = '';

        siteUrlError.innerHTML = '';

        var site = {
            siteName: x.value,
            siteUrl: y.value
        };

        console.log(site);

        makeList(site);

        x.value = "";

        y.value = "";

        return true;

    }

    event.preventDefault();

    return false;
});







// to show the updates list in HTML UI

function makeList(site) {



    li = document.createElement('li'); // create a new list item

    var x = document.createElement("p"); // create a new p item

    var btn = document.createElement("BUTTON"); // visit button for click to visit url

    var div = document.createElement('DIV'); // div to wrap site name and button



    x.innerHTML = site.siteName;

    x.style.margin = "0px";

    x.style.paddingRight = "20px";


    let anchorEl = document.createElement("a");
    anchorEl.classList.add("btn", "btn-primary");

    btn.innerHTML = "Visit";

    btn.addEventListener("click", function() {

        window.open(site.siteUrl);

    });



    div.style.display = "flex";

    div.appendChild(x);

    div.appendChild(btn);



    li.appendChild(div); // append the div to the li

    li.style.marginBottom = "8px";




    // append the list item to the ul

    ul.appendChild(li);





    return;

}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <h1>Hello</h1>
    <h1>Jane Doe</h1>
    <form id="bookmarkForm" onsubmit="return false">

        <label for="siteNameInput">site name</label><br>

        <input type="text" id="siteNameInput" name="siteNameInput" value="" /><br>

        <p class="error-message" style="color: red;" id="siteNameErrMsg"></p>

        <label for="siteUrlInput">site URL</label><br>

        <input type="text" id="siteUrlInput" name="siteUrlInput" value="" /> <br>

        <p class="error-message" style="color: red;" id="siteUrlErrMsg"></p>

        <br>

        <button id="submitBtn">submit</button>

    </form>



    <ul id="bookmarksList" class="bookmarks-container"></ul>

</body>

</html>

在这段代码中，我们可以实现这三个点

  1. 当一个新的书签被添加到带有 id 书签列表的 HTML 容器中时，书签项中的 HTML 锚元素应该具有 href 属性值作为书签站点
  2. JS 代码实现应该使用 addEventListener 为 HTML 表单元素附加提交事件
  3. JS 代码实现应使用 addEventListener 为 HTML 输入元素附加更改事件

请帮助我获取此代码。如何在代码中实现这些点

标签： javascripthtml

解决方案

推荐阅读