Answer to Question #328983 in HTML/JavaScript Web Application for Suresh

Question

Answer to Question #328983 in HTML/JavaScript Web Application for Suresh

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

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

No comments. Be the first!

Answer to Question #328983 in HTML/JavaScript Web Application for Suresh

Comments

Leave a comment

Related Questions