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.
*web development course
Hi,
please find the below 2 files
1. HTML
2. Javascript
To tun this, you need to
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="DynamicStylingToTableView.js"></script>
</head>
<body>
<div style="width:500px;">
<table class="tblBorderDynamic" style="width:100%" id="tbPersonDetails">
<tr style="width:100%">
<td> Person Names</td>
</tr>
</table>
</div>
</body>
</html>
add the JS code in your referenced JS
//Declare the global variables to set the entered person names
personNames = [];
$(document).ready(function () {
//Here we can say Documen is loaded in browser and all HTML controls are ready for use
//call the functin to start the process
myFunction();
//function to process logic
function myFunction() {
var person = prompt("Please enter your name");
//check end user entered the done or not and then procss the request
if (person.toLowerCase() != "done") {
//set the ID of the Person to the new td which we have crated so we can apply filter on it
//ID should not have space so removed space between names
personID = person.replace(/ +/g, "");
//Creat the <tr> tag dynamically
var divPerson = $('<tr style="width:100%"><td id="' + personID + ' "> ' + person + ' </td></tr>');
//append the <tr> tag to the table
divPerson.appendTo('#tbPersonDetails');
//Create the Persn Object and push this to Person Array
var objPersnName = {};
objPersnName.Name = personID;
personNames.push(objPersnName);
//Call recursive function
myFunction();
}
else {
//Fetch the value from user
var Bordersize = prompt("Border size? 2px, 5px, or 8px");
var BorderColor = prompt("Border Color? blue, red, green, and black.");
var BorderStyle = prompt("Border style? solid, dotted, dashed, and double.");
//Apply border stle to all the table tr and td
//Changes
$(".tblBorderDynamic tr td").css("border", Bordersize + " " + BorderColor + " " + BorderStyle +"")
}
}
});
Output:
Thanks.