Html checkbox input element assignment expert

DOM Manipulations.

//assets.ccbp.in/frontend/content/dynamic-webapps/ce-3-1-2-dom-manipulations-op.png

Dynamically add the

input elements in HTML container element with id interestsContainer to achieve the design.

Note

• For one input use the htmlFor property to add HTML for attribute.
• For other input use the setAttribute method to set the HTML attribute for.

It should pass:

The HTML container element with the id interestsContainer should consist of only two HTML checkbox input elements with the HTML attribute id having a non-empty value.

The HTML container element with the id interestsContainer should consist of only two HTML label elements with the HTML attribute for having a non-empty value.

The value of the HTML id attribute of two HTML checkbox input elements and the value of the HTML for attribute of the two HTML label elements should be the same.

JS code implementation should use the property htmlFor to set the HTML for attribute.

Answer to Question #196494 in HTML/JavaScript Web Application for sai

Bookmark Maker

let's build a Bookmark Maker

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

 







  

   

  

    site name


    


    


    site URL


     


    


    


    submit   

  

  

  




  

  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 ;

  }