Answer to Question #257953 in HTML/JavaScript Web Application for prime

Question

Answer to Question #257953 in HTML/JavaScript Web Application for prime

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #257953

Bookmaker Form

Refer to this Image: https://assets.ccbp.in/frontend/content/dynamic-webapps/bookmark-maker-output.gif

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

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 #257953 in HTML/JavaScript Web Application for prime

Comments

Leave a comment

Related Questions