Question #328983
Bookmark Maker
In this assignment, let's build a Bookmark Maker by applying the concepts we learned till now.
Expert's answer
<html>
<head></head>
<body>
<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");
function validateForm(event) {
var x = document.getElementById("siteNameInput");
var y = document.getElementById("siteUrlInput");
var siteNameError = document.getElementById("siteNameErrMsg");
var siteUrlError = document.getElementById("siteUrlErrMsg");
siteNameError.innerHTML = '';
siteUrlError.innerHTML = '';
if (x && x.value == "") {
siteNameError.innerHTML = 'site name is mandatory';
}
if (y && y.value == "") {
siteUrlError.innerHTML = 'Please provide valid URLs to the siteUrlInput';
}
if (x && y && x.value != "" && y.value != "") {
siteNameError.innerHTML = '';
siteUrlError.innerHTML = '';
var site = {
siteName: x.value,
siteUrl: y.value
}
makeList(site);
x.value = "";
y.value = "";
return true;
}
event.preventDefault();
return false;
}
function makeList(site) {
li = document.createElement('li');
var x = document.createElement("p");
var btn = document.createElement("BUTTON");
var div = document.createElement('DIV');
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);
li.style.marginBottom = "8px";
ul.appendChild(li);
return;
}
</script>
</body>
</html>
Learn more about our help with Assignments: Programming & Computer Science
Comments