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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

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

Expert's answer

<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>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

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

Resources

Comments

Leave a comment

Related Questions