Answer in Web Application for p #168474
October 24th, 2022
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
<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> 
