Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Please help to prove a whole typed Code including HTML , CSS , and Javascript following the Introduction blow, thank you very much. Introduction :

Please help to prove a whole typed Code including HTML, CSS, and Javascript following the Introduction blow, thank you very much.

Introduction:

"1. Requirements

All HTML tags and page structure should be HTML5 compliant

CSS and JavaScript need to be embedded in the HTML page. I only want one HTML file turned in, it can be zipped.

You may use a CSS framework like Bootstrap if you like. Just link to CDN version instead of a local file. Again, only want the one html file turned in.

Do not put any spaces in your file name

Do not use jQuery for this lab. Pure JavaScript for DOM manipulation and AJAX. You may use DOM element functions or innerHTML but no jQuery.

make sure you do a new AJAX request each time you run the lab.

The html page should never refresh. Do not trigger a refresh of the browser with javascirpt to reset the page.

JSON data URL: http://libertyville.rice.iit.edu/scripts/4565_lab3.php

2.Steps:

1. Make a single HTML 5 compliant web page and save it as described in the submission format specification section. It must have an .html extension, be plain text, and follow the HTML5 skeleton as discussed in class.

2. Embed any CSS in the HEAD section on that same page.

3. Place all JavaScript in an embedded script tag at the bottom of the body section.

4. The JSON data consists of an array of objects. Each object has the following keys: active, email, first_name, gender, id, last_name, title

5. Your html page should generally look like the mockup provided. Use whatever CSS you like. You may use a CSS framework like bootstrap. Do not need to match the table exactly like the mockup, but please use some CSS so it doesnt look like plain HTML and you can tell the cells and rows in the table.

6. When the Load Data button is pushed the page should do an AJAX request to get the JSON data from the provided server URL. You then need to build the table completely with JavaScript using the JSON data provided. I want the header row to always be there but before data loads just dont have any rows below that. Once the data loads disable the load button and enable the reset button. You can completely build the table and header row each time if you like and clear out the old results. Just make sure when the page first loads we have the empty table with header row.

7. When the reset button is pushed the rows from the table should be removed. Keep the table headers on the page but just no data rows. HINT. It might be easier to delete everything then add just the headers back in vs trying to delete just the data rows. Once you hit the reset button enable the load button and disable the reset button. The reset button should also start disabled."

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Principles Of Database Systems With Internet And Java Applications

Authors: Greg Riccardi

1st Edition

020161247X, 978-0201612479

Students also viewed these Databases questions