Question

In: Computer Science

Write, test, and debug (if necessary) JavaScript scripts for the following problem. You must write the...

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

Solutions

Expert Solution

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.

venereology answered 3 months ago
Next > < Previous

Related Solutions

Write, test, and debug (if necessary) JavaScript scripts for the following problem. You must write the...
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...
For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that...
For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that follow, debug (if necessary).  When required to write a function, you must include a script to test the function with at least two different data sets.  In all cases, for testing, you must write an HTML file that references the JavaScript file. Output an HTML table of the numbers from 2 to 8 along with their squares and cubes. Create a function titled counter that takes...
In this exercise, you will test and debug a Future Value Program. The pseudocode of the...
In this exercise, you will test and debug a Future Value Program. The pseudocode of the program is as follows: Display user message WHILE user wants to continue           get monthly investment, yearly interest rate, and years           convert yearly interest rate to monthly interest rate           convert years to months           set the future value to zero           FOR each month                     add monthly investment amount to future value                     calculate interest for month                     add interest to future value          ...
In this exercise, you will test and debug a Future Value Program. The pseudocode of the...
In this exercise, you will test and debug a Future Value Program. The pseudocode of the program is as follows: Display user message WHILE user wants to continue           get monthly investment, yearly interest rate, and years           convert yearly interest rate to monthly interest rate           convert years to months           set the future value to zero           FOR each month                     add monthly investment amount to future value                     calculate interest for month                     add interest to future value          ...
Write two scripts(must be titled “primeSumLoopS” and “primeSumCallS”) in MATLAB that prompts the user to enter...
Write two scripts(must be titled “primeSumLoopS” and “primeSumCallS”) in MATLAB that prompts the user to enter an integer x that 2< x <10000, then the program calculates and displays the sum of the all the prime numbers that are smaller than or equal to x. For example, if x is 11, then the output is 28, which is 2+3+5+7+11. Use two methods: the 1st script uses nested loop and the 2nd script calls another function, primeF.
For this problem, you must use Excel to perform the necessary calculations. Below are the formulas...
For this problem, you must use Excel to perform the necessary calculations. Below are the formulas and equations you will need to use. Click on the image below to download a power point version if the text is blurry or too small. If it is appropirate to use the binomial distribution, use the formula=binom.dist(number_s,trails,probability,cumulative) to calculate the probability. In this formula, number_s is the number of successful trails, trails is the total number of trails, probability is the probability for...
Javascript problem: Given an argument of a list of book objects: Example test case input: {...
Javascript problem: Given an argument of a list of book objects: Example test case input: { "title" : "Book A", "pages": "50", "next": { "title": "Book B", "pages": 20, "next": null } } create a recursive function to return the total number total # of pages read in the list. If there are no books in the list, return 0.
Write MATLAB scripts to solve problem 5.21 from the textbook (bisection, specific heat) four times: a)...
Write MATLAB scripts to solve problem 5.21 from the textbook (bisection, specific heat) four times: a) with the bisection method (starting interval [0, 1200]) b) with the false-position method (starting interval [0, 1200]) c) with the Newton-Raphson method (x0 = 0) d) with the secant method ((x0, x1) = (0, 1)) use percent relative error = 10^-6 as stopping criterion. 5.21-Mechanical engineers, as well as most other engineers, use thermodynamics extensively in their work. The following polynomial can be used...
Using JavaScript You must submit a file, called indentation.js indentation.js: program to indent The following program...
Using JavaScript You must submit a file, called indentation.js indentation.js: program to indent The following program is difficult to follow because of its indentation: print ( "binary"); var n = Math.pow (2, 31) - 1; var bits = 0; while (n> 0) { bits + = n & 1; n >> = 1; } print ("Number of bits at 1:" + bits); for (var i = 1; i <= bits; i ++) { var str = ""; if (i% 3...
You should use Visual Studio to write and test the program from this problem.   Write a...
You should use Visual Studio to write and test the program from this problem.   Write a complete program with a for loop that (5 pts) uses proper variable types. (10 pts) uses a for loop to read in a real numbers exactly 8 times (10 pts) adds the number read in the loop to a running sum. (10 pts) Computes the average of the 8 numbers as a real number. (5 pts) Prints the correct result with 2 decimal places,...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT