Problem in JavascritRe-create the course schedule table with JavaScript. You may use the following shell for your html file.<!DOCTYPE html><html><head><style>/* Defines a cleaner look for tables */table { border-collapse: collapse; }td, th { border: 1px solid black; padding: 3px 8px; }th { text-align: left; }</style></head><body><script>function buildTable(data) {// Your code here.}document.body.appendChild(buildTable(CLASS_SCHEDULE));</script></body></html>Requirement(s):The table cannot only be built with HTML, you must use JavaScript as well.You must use the following DOM methods:document.createElement()document.appendChild()Recommendations:Get the structure of the table down, then worry about styling.Use CSS in the <style> shell provided or the style property for DOM objects.Build a data set of an array of objects to help organize the content that make up your table and use a loop to In the following table the properties represent contents of the table heading cells <th> {property} </th> and values represent the contents of table standard cells <td> {value} </td>, however, you can format your data in any way you wish. var CLASS_SCHEDULE = [{week: 1,begins: "03/04",topics: ["Introduction", "Chapter 1: Values Types Operators", "Assignment 1 due 11:59pm 03/10"]},{week: 2,begins: "03/11",topics: ["Chapter 2: Programming Structure", "Assignment 2 due 11:59pm 03/17"]},...];In case you need a reminder of what a table structure looks like (for clarity, you cannot use the below to create your table for this assignment):<table> //-> table DOM object<tr> //-> table row<th>name</th> //-> table header cell<th>height</th><th>country</th></tr><tr><td>Kilimanjaro</td> //-> table standard cell<td>5895</td><td>Tanzania</td></tr></table>This would look end up looking something like:nameheightcountryKilimanjaro5895Tanzania

Actually. JavaScript is a scripting and programming language for the web. JavaScript can change and update both HTML and CSS. JavaScript can calculate, manipulate and validate data.Here a new web page with name "courseSchedule.html" is created, which contains following code. courseSchedule.html : <!DOCTYPE html> <html> <head> <style> /* Defines a cleaner look for tables */ table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 3px 8px; } th { text-align: left; } </style> </head> <body> <script> var CLASS_SCHEDULE = [ { week: 1, begins: "03/04", topics: ["Introduction", "Chapter 1: Values Types Operators", "Assignment 1 due 11:59pm 03/10"] }, { week: 2, begins: "03/11", topics: ["Chapter 2: Programming Structure", "Assignment 2 due 11:59pm 03/17"] }, { week: 3, begins: "03/18", topics: ["Chapter 3: Functions", "Assignment 3 due 11:59pm 03/24"] }, { week: 4, begins: "03/25", topics: ["Chapter 4: Data Structures//Objects and Arrays", "Assignment 4 due 11:59pm 03/31"] }, { week: 5, begins: "04/01", topics: ["Chapter 5: Higher-Order Functions", "Assignment 5 due 11:59pm 04/07","Test 1:Wednesday 12am(04/03)-Friday 11:59pm(04/05)"] }, { week: 6, begins: "04/08", topics: ["Spring Break!", "No Reading & No Assignment"] }, { week:"" , begins: "04/22", topics: ["Chapter 6:The Secret Life of Objects", "Chapter 8:Bugs and Error Handling","Chapter 10:Modules","Assignment6 due 11:59pm 04/14"] }, { week: 7, begins: "04/22", topics: ["Chapter 12:JavaScript and the Browser", "Chapter 13:The Document Object Model","Assigment 7 due 11:59pm 04/28"] }, { week: 8, begins: "04/29", topics: ["Chapter 14:Handling Events", "Assignment 8 due 11:59pm 05/05"] }, { week: 9, begins: "05/06", topics: ["Test 2:Monday 12am(05/06)-Tuesday 11:59pm(05/07)", "Chapter 17: HTTP","Chapter 18:Forms and Form Fields","Assignment 9 due 11:59pm 05/12"] }, { week: 10, begins: "05/13", topics: ["Chapter 20:Node.js//Express.js","Assigment 10 due 11:59pm 05/19"] }, { week: 11, begins: "05/20", topics: ["jQuery//AJAX","Bonus Assignment due 11:59pm 05/26"] }, { week: 12, begins: "05/27", topics: ["Memorial Day Holiday (05/28)","Test 3:Tuesday 12am (05/28)-Wednesday 11:59pm (05/29)","Friday (05/31):Final Project due in Canvas by 11:59OM","No Assignment"] }, { week:"", begins:"06/02", topics:["Course ends"] } ]; function buildTable(data) { var table=document.createElement("table"); var row=document.createElement("tr"); var td1=document.createElement("td"); var text1=document.createTextNode("Week"); var td2=document.createElement("td"); var text2=document.createTextNode("Begins"); var td3=document.createElement("td"); var text3=document.createTextNode("Chapters/Topic[Eloquent Javascript 2nd Edition]"); td1.appendChild(text1); td2.appendChild(text2); td3.appendChild(text3); row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); table.appendChild(row); console.log(data); for(var i=0;i<data.length;i++) { var row=document.createElement("tr"); var td1=document.createElement("td"); var text1=document.createTextNode(data[i].week); var td2=document.createElement("td"); var text2=document.createTextNode(data[i].begins); var td3=document.createElement("td"); for(var j=0;j<data[i].topics.length;j++){ var br=document.createElement("br"); var text3=document.createTextNode(data[i].topics[j]); td3.appendChild(br); td3.appendChild(text3); td3.appendChild(br); } td1.appendChild(text1); td2.appendChild(text2); row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); table.appendChild(row); } return table; } document.body.appendChild(buildTable(CLASS_SCHEDULE)); </script> </body> </html>Output : Open web page courseSchedule.html in the browser and will get the screen as shown below Screen 1 :courseSchedule.html

Answered: Problem in Javascrit Re-create the…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Concept explainers

Question

Problem in Javascrit

Re-create the course schedule table with JavaScript. You may use the following shell for your html file.

<!DOCTYPE html>
<html>
<head>
<style>
/* Defines a cleaner look for tables */
table { border-collapse: collapse; }
td, th { border: 1px solid black; padding: 3px 8px; }
th { text-align: left; }
</style>
</head>
<body>
<script>
function buildTable(data) {
// Your code here.
}

document.body.appendChild(buildTable(CLASS_SCHEDULE));
</script>
</body>
</html>

Requirement(s):

The table cannot only be built with HTML, you must use JavaScript as well.
You must use the following DOM methods:
- document.createElement()
- document.appendChild()

Recommendations:

Get the structure of the table down, then worry about styling.
- Use CSS in the <style> shell provided or the style property for DOM objects.
Build a data set of an array of objects to help organize the content that make up your table and use a loop to In the following table the properties represent contents of the table heading cells <th> {property} </th> and values represent the contents of table standard cells <td> {value} </td>, however, you can format your data in any way you wish.
var CLASS_SCHEDULE = [
{
week: 1,
begins: "03/04",
topics: ["Introduction", "Chapter 1: Values Types Operators", "Assignment 1 due 11:59pm 03/10"]
},
{
week: 2,
begins: "03/11",
topics: ["Chapter 2: Programming Structure", "Assignment 2 due 11:59pm 03/17"]
},
...
];
In case you need a reminder of what a table structure looks like (for clarity, you cannot use the below to create your table for this assignment):<table> //-> table DOM object
<tr> //-> table row
<th>name</th> //-> table header cell
<th>height</th>
<th>country</th>
</tr>
<tr>
<td>Kilimanjaro</td> //-> table standard cell
<td>5895</td>
<td>Tanzania</td>
</tr>
</table>
This would look end up looking something like:

name height country

Kilimanjaro 5895 Tanzania

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 3 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

name	height	country
Kilimanjaro	5895	Tanzania