In: Computer Science
Write, test, and debug (if necessary) JavaScript scripts for the following problem. You must write the HTML file that references the JavaScript file.
Use prompt to collect names of persons from the user. When the user enters ‘DONE’, your script should stop collecting more names. Then, it should ask the user to specify the following style properties:
Border size? 2px, 5px, or 8px.
Border Color? blue, red, green, and black.
Border style? solid, dotted, dashed, and double.
The HTML document should display the person names in a table using
the style properties specified by the user.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<!-- <link rel="stylesheet" href="index.css"> -->
</head>
<body>
<div>
<ul id="list"></ul>
</div>
<script src="index.js"></script>
</body>
</html>
window.addEventListener("load",myFun);
let i
let count=0
function myFun(){
count+=1
if(count==1){ //to take inputs only one time
do{
i=prompt("enter name")
if(i!=='DONE'){
listItem = document.createElement('li')
listItem.innerHTML = i
document.getElementById("list").append(listItem)
}
}while(i!=="DONE")
}
}
let borderSize=prompt("enter border in px")
let borderColor=prompt("enter border color")
let borderStyle=prompt("enter border style")
document.getElementById('list').style.borderWidth=borderSize
document.getElementById('list').style.borderStyle=borderStyle
document.getElementById('list').style.borderColor=borderColor