title: Bookmark maker in javascript and html
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &amp;&amp; x.value == "") {
  
          siteNameError.innerHTML = 'site name is mandatory';
  
      }
  
  
  
  
  
      //checking for site url
  
      if (y &amp;&amp; y.value == "") {
  
          siteUrlError.innerHTML = 'Please provide valid URLs to the siteUrlInput';
  
      }
  
  
  
  
  
      //submitting if both present
  
      if (x &amp;&amp; y &amp;&amp; x.value != "" &amp;&amp; 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;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /&gt;
      &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;h1&gt;Jane Doe&lt;/h1&gt;
      &lt;form id="bookmarkForm" onsubmit="return false"&gt;
  
          &lt;label for="siteNameInput"&gt;site name&lt;/label&gt;&lt;br&gt;
  
          &lt;input type="text" id="siteNameInput" name="siteNameInput" value="" /&gt;&lt;br&gt;
  
          &lt;p class="error-message" style="color: red;" id="siteNameErrMsg"&gt;&lt;/p&gt;
  
          &lt;label for="siteUrlInput"&gt;site URL&lt;/label&gt;&lt;br&gt;
  
          &lt;input type="text" id="siteUrlInput" name="siteUrlInput" value="" /&gt; &lt;br&gt;
  
          &lt;p class="error-message" style="color: red;" id="siteUrlErrMsg"&gt;&lt;/p&gt;
  
          &lt;br&gt;
  
          &lt;button id="submitBtn"&gt;submit&lt;/button&gt;
  
      &lt;/form&gt;
  
  
  
      &lt;ul id="bookmarksList" class="bookmarks-container"&gt;&lt;/ul&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In this code we can implement these three points that are</p>
  <ol>
  <li>When a new bookmark is added to the HTML container with id bookmarksList, the HTML anchor element in the bookmark item should have href attribute value as the bookmarked site</li>
  <li>JS code implementation should use addEventListener to attach submit event for the HTML form element</li>
  <li>JS code implementation should use addEventListener to attach change event for the HTML input elements</li>
  </ol>
  <p>Please help me for this code. How to implement these points in code</p>