Answer to Question #168474 in HTML/JavaScript Web Application for p

Question #168474

Bookmark Maker

In this assignment, let's build a Bookmark Maker by applying the concepts we learned till now.

Refer to the below image.



Instructions:

  • The page should have HTML form element with id bookmarkForm
  • The HTML form element with id bookmarkForm should have HTML input elements with ids siteNameInput and siteUrlInput
  • The HTML form element with id bookmarkForm should have HTML button element with id submitBtn
  • Add HTML label elements for HTML input elements with ids siteNameInput and siteUrlInput
  • The HTML form element with id bookmarkForm should have HTML p elements with ids siteNameErrMsg and siteUrlErrMsg
  • The page should have HTML unordered list element with id bookmarksList
  • Each bookmark item should contain a HTML anchor element to navigate to the bookmarked site

Warning

  • Please provide valid URL's to the siteUrlInput element

By following the above instructions, achieve the given functionality.

  • When the HTML button element with the id submitBtn is clicked,
  • If the values are entered in the HTML input elements with ids siteNameInput and siteUrlInput
  • A new bookmark should be added to the bookmarksList as list item.
  • If the siteNameInput value is empty,
  • The HTML p element with id siteNameErrMsg should have error message
  • If the siteUrlInput value is empty,
  • The HTML p element with id siteUrlErrMsg should have error message
  • When the visit button of a bookmark is clicked the site URL should open in a new tab.
  • When the HTML input element with id siteNameInput is empty after changing the value inside the input
  • The HTML p element with id siteNameErrMsg should have error message
  • When the HTML input element with id siteUrlInput is empty after changing the value inside the input
  • The HTML p element with id siteUrlErrMsg should have error message

Resources

CSS Colors used:

Background colors Hex code values used:

#2d3a8c

#ffffff

#f5f7fa

#21396c


Text colors Hex code values used:

#323f4b

#ffffff

#7b8794

#dc3545


Border Colors Hex code values used:

#cbd2d9

#e4e7eb


CSS Font families used:

  • Roboto
1
Expert's answer
2021-03-03T02:07:13-0500
<html>

<head>

</head>

<body>

  

  <!--onsubmit made false to remove unnceccesary reloads --> 

  <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" onclick="return validateForm()" >submit</button>   

  </form>

  

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



  <script type="text/javascript">

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



  // validation and submit

  function validateForm(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"



    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 ;

  }

  

  </script>

</body>

</html> 

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS