Nhà sản xuất đánh dấu Trong nhiệm vụ này, chúng ta hãy xây dựng một nhà sản xuất dấu trang bằng cách áp dụng các khái niệm chúng ta đã học cho đến bây giờ. Tham khảo hình ảnh dưới đây. Instructions: - Trang nên có html & nbsp; form & nbsp; phần tử với id & nbsp; bookmarkform
- HTML & nbsp; form & nbsp; yếu tố với id & nbsp; bookmarkform & nbsp; nên có html & nbsp; input & nbsp; các yếu tố với ids & nbsp; sitenameinput & nbsp; và
- HTML & nbsp; form & nbsp; phần tử với id & nbsp; bookmarkform & nbsp; nên có html & nbsp; nút & nbsp; phần tử với id & nbsp;
- Thêm HTML & NBSP; Nhãn & NBSP; các phần tử cho các phần tử nhập HTML với IDS & NBSP;
- HTML & nbsp; form & nbsp; phần tử với id & nbsp; bookmarkform & nbsp; nên có html & nbsp; p & nbsp;
- Trang nên có phần tử danh sách không theo thứ tự HTML với ID & NBSP; Danh sách BookmarkL
- Mỗi mục đánh dấu phải chứa một yếu tố HTML & NBSP; neo & nbsp; để điều hướng đến trang web được đánh dấu
Cảnh báo - Vui lòng cung cấp URL hợp lệ cho phần tử SiteUrlinput
Bằng cách làm theo các hướng dẫn trên, đạt được chức năng đã cho. - Khi html & nbsp; nút & nbsp; phần tử với id & nbsp;
- Nếu các giá trị được nhập vào các phần tử đầu vào HTML với IDS & NBSP; SitenameInput & nbs
- Một dấu trang mới nên được thêm vào & nbsp; bookmarkList & nbsp; như mục danh sách.
- Nếu & nbsp; sitenameinput & nbsp; giá trị trống,
- HTML & NBSP; P & NBSP; Phần tử với ID & NBSP; SitenameRrmsg & NBSP; nên có thông báo lỗi
- Nếu & nbsp; siteurlinput & nbsp; giá trị trống,
- HTML & NBSP; P & NBSP; Phần tử với ID & NBSP; SiteUrLerrmsg & NBSP; nên có thông báo lỗi
- Khi nút truy cập của dấu trang được nhấp, URL trang web sẽ mở trong A & NBSP; Tab mới.
- Khi html & nbsp; input & nbsp; phần tử với id & nbsp; sitenameinput & nbsp; trống sau khi thay đổi giá trị bên trong đầu vào
- HTML & NBSP; P & NBSP; Phần tử với ID & NBSP; SitenameRrmsg & NBSP; nên có thông báo lỗi
- Nếu & nbsp; siteurlinput & nbsp; giá trị trống,
- HTML & NBSP; P & NBSP; Phần tử với ID & NBSP; SiteUrLerrmsg & NBSP; nên có thông báo lỗi
Khi nút truy cập của dấu trang được nhấp, URL trang web sẽ mở trong A & NBSP; Tab mới. Khi html & nbsp; input & nbsp; phần tử với id & nbsp; sitenameinput & nbsp; trống sau khi thay đổi giá trị bên trong đầu vào #2d3a8c #ffffff #f5f7fa #21396c Khi html & nbsp; input & nbsp; phần tử với id & nbsp; siteurlinput & nbsp; trống sau khi thay đổi giá trị bên trong đầu vào #323f4b #ffffff #7b8794 #dc3545 Màu sắc CSS được sử dụng: #cbd2d9 #e4e7eb Màu nền giá trị mã hex được sử dụng: - Màu sắc văn bản Giá trị mã Hex được sử dụng:
Trả lời cho câu hỏi #200158 trong ứng dụng web HTML/JavaScript cho TEJANhà sản xuất đánh dấu Trong nhiệm vụ này, chúng ta hãy xây dựng một nhà sản xuất dấu trang bằng cách áp dụng các khái niệm chúng ta đã học cho đến bây giờ. Tham khảo hình ảnh dưới đây. Instructions: - Trang nên có html & nbsp; form & nbsp; phần tử với id & nbsp; bookmarkform
- HTML & nbsp; form & nbsp; yếu tố với id & nbsp; bookmarkform & nbsp; nên có html & nbsp; input & nbsp; các yếu tố với ids & nbsp; sitenameinput & nbsp; và
- HTML & nbsp; form & nbsp; phần tử với id & nbsp; bookmarkform & nbsp; nên có html & nbsp; nút & nbsp; phần tử với id & nbsp;
- Thêm HTML & NBSP; Nhãn & NBSP; các phần tử cho các phần tử nhập HTML với IDS & NBSP;
- HTML & nbsp; form & nbsp; phần tử với id & nbsp; bookmarkform & nbsp; nên có html & nbsp; p & nbsp;
- Trang nên có phần tử danh sách không theo thứ tự HTML với ID & NBSP; Danh sách BookmarkL
- Mỗi mục đánh dấu phải chứa một yếu tố HTML & NBSP; neo & nbsp; để điều hướng đến trang web được đánh dấu
<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>
| 
