New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN: 9781305503922
Author: Patrick M. Carey
Publisher: Cengage Learning
expand_more
expand_more
format_list_bulleted
Concept explainers
Question
Chapter 12, Problem 12CP4
a.
Program Plan Intro
To create the columnSort() function and declare a variable named columnText equal to the text content of the event object target.
b.
Program Plan Intro
To retrieve the index number of the column by applying the indexOf() method to the dataCategories array and store the index number in the columnIndex variable.
c.
Program Plan Intro
To test whether columnIndex is equal to sortIndex. If it is equal then multiply the sortDirection variable by -1 otherwise set sortIndex equal to columnIndex.
d.
Program Plan Intro
To declare the columnNumber variable equal to columnIndex + 1.
e.
Program Plan Intro
To declare the columnStyles variable and then delete the third rule from the last style sheet.
f.
Program Plan Intro
To add the given style rule to display the icon on the basis of ascending and descending order.
g.
Program Plan Intro
To sort the values in the tableData array using the dataSort2D() function.
h.
Program Plan Intro
To create and append the newly sorted table body to the web table by calling the writeTableData() function.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Q1. Fill in the Missing Code. This web page configures a survey form to collect information on the favorite search engine used by web page visitors. The form action should submit the form to the server-side script, called survey.php. Some HTML tags and their attributes, indicated by <_>, are missing. Some HTML attribute values, indicated by "_", are missing.
<! DOCTYPE html><html lang="en"><head><title>Fill in the Missing Code</title><meta charset="utf-8"></head><body><h1>Vote for your favorite Search Engine</h1><form method="_" action="_"><input type="radio" name="_" id="Ysurvey" value="Yahoo">Yahoo!<br><input type="radio" name="survey" id="Gsurvey" value="Google">Google<br><input type="radio" name="_" id="Bsurvey" value="Bing"> Bing<br><_></form></body></html>
I am trying to add Create button(which will allow users to add a new student in the table) and Edit buttons (Which will allow users to edit the information such as name and id and a score of students) to this HTML code and I am not sure how to do it. I am thinking that I might need to add some sort of an DATABASE so Can someone please help me with that?HERE IS MY HTML CODE:
<!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; border-collapse: collapse; } </style> <body> <h2>Student List</h2> <table style="width:100%"> <tr> <th>Student</th> <th>ID</th> <th>Score</th> <th>Edit Link</th> </tr> <tr> <td>Ranchoddas Chanchad</td> <td>1892</td> <td>99</td> <td> Edit button which let user edit the score of students. </td> </tr> </table> </body> </html>
Please use Flask to build a simple HTML website. This website can have 5 pages, e.g., index, contact, about, etc. This website needs to include the following topics.
1. Flask routings.
2. Flask render templates.
3. Flask WTF. (forms)
4. Flask base HTML. You can add a nav bar in this base.html.
5. Flask static files, e.g., CSS file.
You are free to choose any topic.
Chapter 12 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 12.2 - Prob. 1QCCh. 12.2 - Prob. 2QCCh. 12.2 - Prob. 3QCCh. 12.2 - Prob. 4QCCh. 12.2 - Prob. 5QCCh. 12.2 - Prob. 6QCCh. 12.3 - Prob. 1QCCh. 12.3 - Prob. 2QCCh. 12 - Prob. 1RACh. 12 - Prob. 2RA
Ch. 12 - Prob. 3RACh. 12 - Prob. 4RACh. 12 - Prob. 5RACh. 12 - Prob. 6RACh. 12 - Prob. 7RACh. 12 - Prob. 8RACh. 12 - Prob. 9RACh. 12 - Prob. 10RACh. 12 - Prob. 11RACh. 12 - Prob. 12RACh. 12 - Prob. 13RACh. 12 - Prob. 1CP1Ch. 12 - Prob. 2CP2Ch. 12 - Prob. 3CP2Ch. 12 - Prob. 4CP2Ch. 12 - Prob. 5CP2Ch. 12 - Prob. 4CP3Ch. 12 - Prob. 20CP3Ch. 12 - Prob. 3CP4Ch. 12 - Prob. 4CP4Ch. 12 - Prob. 5CP4Ch. 12 - Prob. 6CP4Ch. 12 - Prob. 7CP4Ch. 12 - Prob. 8CP4Ch. 12 - Prob. 9CP4Ch. 12 - Prob. 10CP4Ch. 12 - Prob. 11CP4Ch. 12 - Prob. 12CP4Ch. 12 - Prob. 13CP4Ch. 12 - Prob. 14CP4
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.Similar questions
- Please create HTML website using Flask. This website can have 5 pages, e.g., index, contact, about, etc. This website needs to include the following topics. 1. Flask routings. 2. Flask render templates. 3. Flask WTF. (forms) 4. Flask base HTML. You can add a nav bar in this base.html. 5. Flask static files, e.g., CSS file. You are free to choose any topic.arrow_forwardPlease create a simple HTML website using Flask. This website can have 5 pages, e.g., index, contact, about, etc. This website needs to include the following topics. 1. Flask routings. 2. Flask render templates. 3. Flask WTF. (forms) 4. Flask base HTML. You can add a nav bar in this base.html. 5. Flask static files, e.g., CSS file. You are free to choose any topic.arrow_forwardNEED HELP WITH THE JAVASCRIPT PORTION Here is my html code: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <!-- Popper JS --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Donta's Food Fusion</title> <script…arrow_forward
- Create an HTML document called assignment1.html that implements a webpage that dynamically creates (using JavaScript code) a 10X10 HTML table and displays in each cell the value of row times the column to create a multiplication table. Allow the user to select the number of rows and columns to redraw a new table. Use material you studied in class, powerpoint, book, etc... Follow these guidelines to implement your assignment: 1. Create assignment1.html file 2. Create a JavaScript file called assignment1.js and write the code for a function that draws the table. 3. Load the assignment1.js file at the end of the body in assignment1.html. 4. Invoke the function when the visitor opens the assignment1.html page in browser. Use window onload event. 5. (10% of the grade) Accept user input for the number of rows and columns in the table. 6. (10% of the grade) Use good web design practices to enhance your html pagearrow_forwardPlease help. My JQuery dropdown code is not working (Note: Utilize the usage of Jquery). Thanks... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> </title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <script> $("#item").click(function() { $("#submenu").slideToggle(500); }); </script> <div class="menu"> <div id="item">DROPDOWN</div> <div id="submenu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </body> </html>arrow_forwardProblem 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…arrow_forward
- hi i need help in html css. i need to copy the one picture on the left with black background as well as the justified center postition of the picture. my work is the one with wednesday. as you can see it has white background and the picture position is wrong. i have 1 index.html file and 2 css: style.css and utilities.css here is the source code // this is index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- import css --> <link rel="stylesheet" href="css/style.css"> <!-- import favicon --> <link rel="shortcut icon" href="images/image1.jpg" /> <!-- import icons --> <script src="https://kit.fontawesome.com/bd6a72777e.js" crossorigin="anonymous"></script> <!-- import google fonts --> <link…arrow_forwardhelp im so confused and stuck please help <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>homework 14</title></head><body> <div> <h2>Sticky Note Board</h2> <div class="sticky-board"> <div style="display: relative;"> <div class="sticky-note" id="first"> <div class="sticky-note-title"> Transforms </div> <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div> </div> </div> <div class="sticky-note" id="second"> <div class="sticky-note-title"> Translate </div>…arrow_forwardPlease help.The html and css code + instructions are in the image. The server code is below Thank you var express = require('express'); //we must have express installed! var app = express(); var idCounter = 0; // we will assign every round of game play a unique ID var gameInfo = {}; // an empty JS object, later it's going to store the code for each end-user var port = 3000; app.post('/post', (req, res) => { //print info to console console.log("New express client"); console.log("Query received: "); console.log(JSON.parse(req.query['data'])); //populate a header response res.header("Access-Control-Allow-Origin", "*"); var queryInfo = JSON.parse(req.query['data']); if (queryInfo['action'] == 'generateWord') { //are we asked to generate a word? idCounter++; var nameID = queryInfo['name'] + idCounter; generateWord(nameID); var jsontext = JSON.stringify({ 'action': 'generateWord', 'nameID':…arrow_forward
- Can you help me I need to show the data on the table and search at the same time but the data must be showed and does not hide. here is my code <?phpsession_start();if (!isset($_SESSION['username'])) header("location: login.php"); { }?><!DOCTYPE html><html><head> <link rel="shortcut icon" href="file/images/favicon.ico" /> <title>View All Records</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> <link rel="stylesheet" href="file/css/records_style.css"></head> <a href="home1.php"><img class="backarrow"src="file/images/backarrow.png" width="30" height="30"></a></br> <style> </style> <body> <?php include 'search.php'; ?><a href= "add_record.php"><button class="btn"><br>Add New Record</button></a><br> <div> <table class="table_style" > <?php…arrow_forwardPlease create HTML website using Flask. This website can have 5 pages, e.g., index, contact, about, etc. This website needs to include the following: Flask routings, Flask render templates, Flask WTF. (forms), Flask base HTML. You can add a nav bar in this base.html, Flask static files, e.g., CSS file. You are free to choose any topic for the website include the code.arrow_forwardHere error i can not detect. here i am retrieving xml data in html page in table form by Ajax <!doctype html> <html> <head> <title>Perfume Data</title> <script src="https://code.jquery.com/jquery-3.5.1.js"> </script> <style> table { margin: 0 auto; font-size: large; border: 1px solid black; } th { font-weight: bold; border: 1px solid black; padding: 10px; text-align: center; } td { padding: 10px; text-align: center; font-weight: lighter; background-color: #E4F5D4; border: 1px solid black; } </style> </head> <body> <table id="myTableData"> <tr> <th>id</th> <th>Product name</th> <th>Brand</th> <th>Ingredients</th> <th>Item weight</th> </tr>…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning