Answer to Question #330143 in HTML/JavaScript Web Application for Bylapati suresh kumar

Question #330143

this image below link as i want same to same code please provided





https://assets.ccbp.in/frontend/content/dynamic-webapps/bookmark-maker-output-v1.gif



1.The page should have HTML form element with id bookmarkForm


2.The HTML form element with id bookmarkForm should have HTML input elements with ids siteNameInput and siteUrlInput


3.The HTML form element with id bookmarkForm should have HTML button element with id submitBtn


4.Add HTML label elements for HTML input elements with ids siteNameInput and siteUrlInput


5.The HTML form element with id bookmarkForm should have HTML p elements with ids siteNameErrMsg and siteUrlErrMsg


6.The page should have HTML unordered list element with id bookmarksList


Each bookmark item should contain an HTML anchor element to navigate to the bookmarked site



this all test cases are executed please

1
Expert's answer
2022-04-18T17:33:21-0400
<html>
<head></head>
<body>
    <div class="wrapper">
        <div class="begin">
            Hello <br> <span>Name Last</span>
        </div>
        <form id="bookmarkForm" onsubmit="return false">
            <div class="title">Bookmark Your Favorite Sites</div>
            <div class="form-group">
                <label for="siteNameInput">site name</label>
                <input type="text" id="siteNameInput" name="siteNameInput" placeholder="Enter site name" value="" /><br>
                <p class="error-message" style="color: red;" id="siteNameErrMsg"></p>
                <label for="siteUrlInput">site URL</label>
                <input type="text" id="siteUrlInput" name="siteUrlInput" placeholder="Enter site URL" value="" /> <br>
                <p class="error-message" style="color: red;" id="siteUrlErrMsg"></p>
                <br>
                <button id="submitBtn" onclick="return validateForm()">Submit</button>
            </div>
        </form>
    
        <ul id="bookmarksList" class="bookmarks-container"></ul>
    </div>


    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrapper {
            background-color:blueviolet;
            width: 350px;
            margin: 0 auto;
            height: calc(100vh - 60px);
            padding: 30px;
        }
        .begin {
            color: #fff;
        }
        .begin span {
            font-size: 22px;
        }
        #bookmarkForm {
            background-color: #fff;
            border-radius: 15px;
            padding: 30px;
            margin-top: 20px;
        }
        .title {
            margin-bottom: 20px;
        }
        .form-group {
            background-color: #ccc;
            padding: 30px;
            border-radius: 15px;
        }
        label {
            display: block;
            margin: 15px 0 5px;
        } 
        button {
            color: #fff;
            padding: 10px 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:indigo;
            outline: none;
            border: none;
            border-radius: 4px;
        }
        input {
            height: 30px;
            border-radius: 4px;
            border: none;
            outline: none;
            padding: 0 8px;
        }
    </style>


    <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 = 'Required*';
            }


            if (y && y.value == "") {
                siteUrlError.innerHTML = 'Required*';
            }


            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>

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS