Answer to Question #166650 in HTML/JavaScript Web Application for Chandra sena reddy

Question

Answer to Question #166650 in HTML/JavaScript Web Application for Chandra sena reddy

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #166650

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 p elements with class name error-message should have ids siteNameErrMsg and siteUrlErrMsg respectively
The HTML unordered list element with the class name bookmarks-container should have the 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 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
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 container.
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.

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 #166650 in HTML/JavaScript Web Application for Chandra sena reddy

Comments

Leave a comment

Related Questions