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 1 year 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...
Write, test, and debug (if necessary) HTML file with the Javascript codes in an external file...
Write, test, and debug (if necessary) HTML file with the Javascript codes in an external file for the following problem: Input: a number, n, using prompt, which is the number of the factorial numbers to be displayed. Output: a bordered table of numbers with proper caption and headings in which the first column displays the numbers from 1 to n and the second column displays the first n factorial numbers. For example, if a user enters 10 to be the...
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...
Objectives: • Learn to write test cases with Junit • Learn to debug code Problem: Sorting...
Objectives: • Learn to write test cases with Junit • Learn to debug code Problem: Sorting Book Objects Download the provided zipped folder from Canvas. The source java files and test cases are in the provided folder. The Book class models a book. A Book has a unique id, title, and author. The BookStore class stores book objects in a List, internally stored as an ArrayList. Also, the following methods are implemented for the BookStore class. • addBook(Book b): sto...
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...
For this problem you must write the functions in a recursive manner (i.e. the function must...
For this problem you must write the functions in a recursive manner (i.e. the function must call itself) – it is not acceptable to submit an iterative solution to these problems. A. Complete the recursive function gcd(m, n) that calculate the greatest common denominator of two numbers with the following rules: # If m = n, it returns n # If m < n, it returns gcd(m, n-m) # If m > n, it returns gcd(m-n, n) # def gcd(m,n):...
Please write JavaScript and HTML code for the following problems Problem 1 - Array Usage Ask...
Please write JavaScript and HTML code for the following problems Problem 1 - Array Usage Ask the user to enter positive numeric values. Store each value in an array. Stop reading values when the user enters -1. After all values have been entered, calculate the sum and the average of the values in the array (if you do not know what a sum or average is, or how to calculate them, it is your responsibility to look up this information)....
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT