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.

Solutions

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>

<html lang="en">

<head>

<!-- title for web page -->

<title>Exercise 1</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<!-- button to generate para -->

<input type="button" value="click me to create para" onclick="generatePara()">

<!-- button to generate list -->

<input type="button" value="click me to create list" onclick="generateList()">

<!-- <script> is used for javascript -->

<script>

//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 1 year ago
Next > < Previous

Related Solutions

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...
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...
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>&nbsp;        <a href="GettingStarted.html">Getting Started</a>&nbsp;        <a href="MaterialsNeeded.html">Materials Needed</a>&nbsp;                      <a href="TroubleShooting.html">TroubleShooting</a>&nbsp;        <a href="InfoMaterials.html">Infomation on materials</a>&nbsp;   ...
Exercise 1 Create a data file in SPSS using the following memory scores for this sample...
Exercise 1 Create a data file in SPSS using the following memory scores for this sample of 15 fictional patients with dementia: 8 3 11 7 6 5 4 8 9 8 7 9 5 4 10 Higher memory number indicates better memory performance. Use this information to complete the following in SPSS. 17) Run descriptive statistics on the dementia patients’ memory scores (make sure to include the mean and confidence interval by using the “Explore” option as shown in...
PHP Question - Subject: PHP File Handling and Uploads INSTRUCTIONS: Objective: • Create a sticky HTML...
PHP Question - Subject: PHP File Handling and Uploads INSTRUCTIONS: Objective: • Create a sticky HTML form. • Submit form for processing. • Sanitize and validate form data. • Upload a profile image. • Add a record to a text file. • Display form results with content from another text file and the uploaded image. Description: This assignment deals with file management. It requires the use of 3 new files and 1 new directory. You will create the new file-uploads.php...
PHP Question - Subject: PHP File Handling and Uploads INSTRUCTIONS: Objective: • Create a sticky HTML...
PHP Question - Subject: PHP File Handling and Uploads INSTRUCTIONS: Objective: • Create a sticky HTML form. • Submit form for processing. • Sanitize and validate form data. • Upload a profile image. • Add a record to a text file. • Display form results with content from another text file and the uploaded image. Description: This assignment deals with file management. It requires the use of 3 new files and 1 new directory. You will create the new file-uploads.php...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT