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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

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

Expert's answer

<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>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

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

Comments

Leave a comment

Related Questions