Question

In: Computer Science

Exercise 1 (a) Create a HTML file that uses createElement and appendChild to dynamically insert three...

Exercise 1
(a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when
a button is clicked.
(b) Create a HTML file that includes JavaScript that is similar to:
let recs = [“my item …1”,”my item…2”, …]
i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be
rendered as a list element. Use a HTML list. Use createElement and appendChild.
(c) Redo your createTable code from last week’s lab so that it uses createElement and appendChild rather than
setting an innerHTML property.
Exercise 2
(a) Add an additional button to your 1(c) code. When the user clicks this additional button an additional table
column appears that contains a row number. Use createElement and appendChild to achieve this. Do not use
styles or other techniques to hide/show this additional column.
(b) Rework your 2(b) code so that the additional column contains a checkbox for each row. When the
additional column is created an additional filter button is also created. When the user clicks this additional
filter button the table is restricted to those rows the user has ticked. Another button may be used to reset this
filter.

Expert Solution

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "Exercise1B.html" is created, which contains following code.

Exercise1B.html :

<!DOCTYPE html>

<head>

<title>Exercise 1</title>

</head>

<body>

//function to generate paragraphs

function generatePara()

{

//using for loop

for(var i=0;i<3;i++){

//create paragraphs

var para1=document.createElement("p");

//set text

para1.innerHTML="This is para "+(i+1);

//append para to the body

document.body.appendChild(para1);

}

//function to generateList()

function generateList()

{

//array

let items = ["my item 1","my item 2","my item 3"];

//create unordered list

var ol=document.createElement("ol");

for(var i=0;i<items.length;i++){

//create listitems

var li=document.createElement("li");

li.innerHTML=items[i];

ol.appendChild(li);

}

//append ol to the body

document.body.appendChild(ol);

}

</script>

</body>

</html>

======================================================

Output : Open web page Exercise1B.html in the browser and will get the screen as shown below

Screen 1 :Exercise1B.html

Screen 2:When para button is clicked

Screen 3:When ol button is clicked

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

venereology answered 2 years ago

5. Create an HTML file that uses an array to store links for your three favorite...

5. Create an HTML file that uses an array to store links for your three favorite websites. Use a for loop to display each link URL within an alert dialog box. I would like to see the HTML page displaying the message.

use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...

use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked. (b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list....

Create 1 HTML page and 1 CSS file for all the styles. Your html page will...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...

How to do in C++ HTML Converter Create a program that reads an HTML file and...

How to do in C++ HTML Converter Create a program that reads an HTML file and converts it to plain text. Console HTML Converter Grocery List * Eggs * Milk * Butter Specifications Your instructor should provide an HTML file named groceries.html that contains these HTML tags: <h1>Grocery List</h1> <ul> <li>Eggs</li> <li>Milk</li> <li>Butter</li> </ul> When the program starts, it should read the contents of the file, remove the HTML tags, remove any spaces to the left of the tags, add...

Create a HTML file that prompts the user to enter the number of dice (1-5) to...

Create a HTML file that prompts the user to enter the number of dice (1-5) to play with and display exactly as shown below (example run on Chrome). If the user enters a number less than 1, then set the number to 1. If the user enters a number greater than 5, then set it to 5. Center align elements and use height:200px for dice images. rollDice.html: When user enters a number less than 1 When user enters a number...

1. Create a PHP page with standard HTML tags. Remember to save the file with the...

1. Create a PHP page with standard HTML tags. Remember to save the file with the .php extension. Inside the <body> tag, create a PHP section that will show the text "Hello World!" 2. For this exercise, echo the phrase "Twinkle, Twinkle little star." Create two variables, one for the word "Twinkle" and one for the word "star". Echo the statement tothe browser. 3. PHP includes all the standard arithmetic operators. For this PHP exercise, you will use them along...

This is C++ Create a program that reads an HTML file and converts it to plain...

This is C++ Create a program that reads an HTML file and converts it to plain text. Console: HTML Converter Grocery List * Eggs * Milk * Butter Specifications: The HTML file named groceries.html contains these HTML tags: <h1>Grocery List</h1> <ul> <li>Eggs</li> <li>Milk</li> <li>Butter</li> </ul> When the program starts, it should read the contents of the file, remove the HTML tags, remove any spaces to the left of the tags, add asterisks (*) before the list items, and display the...

/* 1. Fix the CREATE and INSERT statements below to create the SHIPMENT table and insert...

/* 1. Fix the CREATE and INSERT statements below to create the SHIPMENT table and insert its data in DB Fiddle*/ CREATE TABLE SHIPMENT ( ShipmentID Int NOT NULL, ShipperName Char(35) NOT NULL, ShipperInvoiceNumber Int NOT NULL DepartureDate Date NULL, ArrivalDate Date NULL, InsuredValue Numeric(12,2) NOT NULL, CONSTRAINT Shipment_PK PRIMARY KEY (ShipmentID)) ); INSERT INTO SHIPMENT VALUES (1,'ABC Trans-Oceanic', 2008651, '10-Dec-14', '15-Mar-18', 15000.00); INSERT INTO SHIPMENT VALUES (2,'ABC Trans-Oceanic', 2009012, '10-Jan-18', '20-Mar-18', 12000.00); INSERT INTO SHIPMENT VALUES (3,'Worldwide', 49100300, '05-May-18',...

Using node.js, create the following tasks. 1. Set up a server and HTML file server as...

Using node.js, create the following tasks. 1. Set up a server and HTML file server as shown in the videos. Once you have it successfully running, make the following adjustments A. When a 404 error (file not found) occurs, display a funny message about the file missing and/or did you forget how to type? B. If the user enters a request for the home page (index.html) then: Display an index.html page you have created which includes your name, course number,...

take the following html code and make it work for html validator. heres the ,html file...

take the following html code and make it work for html validator. heres the ,html file <!DOCTYPE html> <html lang="en"> <head> <title> GettingStarted</title> <meta charset="utf-8"> <link href="Style.css" rel="stylesheet"> </head> <body> <header><h1>GettingStarted</h1></header> <nav> <b> <a href="Home.html">Home</a>  <a href="GettingStarted.html">Getting Started</a>  <a href="MaterialsNeeded.html">Materials Needed</a>  <a href="TroubleShooting.html">TroubleShooting</a>  <a href="InfoMaterials.html">Infomation on materials</a>  ...