
HTML/CSS/JQuery page to do table data maintenance
- or -
Post a project like this1918
€90(approx. $102)
- Posted:
- Proposals: 13
- Remote
- #2664512
- Completed
Web (Logo & Graphics, E-Commerce, WordPress, Drupal, Laravel, CakePHP, Codeigniter) + Mobile App Developer


Python | React| WordPress | Shopify | Laravel | Mongo Atlas | MySQL | Angular | AWS (Lambda, S3 Bucket, EC2, SES, DynamoDB) | React | Node JS | Banner Design | SEO | Digital Marketing

256927425510971139352354187328451827753712475543293717161243124190435112803542149




Description
Experience Level: Entry
I need an HTML/CSS/JQuery page to do table data maintenance through a REST api.
At first, gets the data from server and shows the data in a table. For every record, add two icons for update and for delete.
Pressing delete must ask confirmation and then remove the record in the table and in the backend by calling the api. For update, must show a form (in overlapped layer over a darkened background) with all the fields, and two options: save and cancel. Cancel just closes the form. Save calls the api with new data and updates record in the page.
Finally, another icon for insert new record, than also opens the form and can cancel and save.
Data is JSON. Fields are unknown at design time, name of the fields must be taken from the JSON (the name of the field in JSON = the name of the field in the table header) and when sending the data, JSON name fields must be taken from table headers or from whatever way you decided to store that information.
Budget is aproximate.
JSON samples:
Record list, API will return array: [{"ID":1, "Customer":"Customer1", "CustomerFullName":"John Smith", "CustomerOrder": 1, "MinimumNumber": 100, "CreateDate":"2019-06-01", "isVIP": 0}, {...}, {...}]
One record, API will return array: [{"ID":1, "Customer":"Customer1", "CustomerFullName":"John Smith", "CustomerOrder": 1, "MinimumNumber": 100, "CreateDate":"2019-06-01", "isVIP": 0}]
Create, you must send: {"Customer":"Customer1", "CustomerFullName":"John Smith", "CustomerOrder": 1, "MinimumNumber": 100, "CreateDate":"2019-06-01", "isVIP": 0}
Update, you must send: {"ID":1, "Customer":"Customer1", "CustomerFullName":"John Smith", "CustomerOrder": 1, "MinimumNumber": 100, "CreateDate":"2019-06-01", "isVIP": 0}
Delete, you must send: {"ID":1}
If an error occurs, the API will return a 202, 404 or 500. If a 202, it will return a JSON like:
{"Error":"Error description"}
At any case, show the error in red in the top right corner.
At first, gets the data from server and shows the data in a table. For every record, add two icons for update and for delete.
Pressing delete must ask confirmation and then remove the record in the table and in the backend by calling the api. For update, must show a form (in overlapped layer over a darkened background) with all the fields, and two options: save and cancel. Cancel just closes the form. Save calls the api with new data and updates record in the page.
Finally, another icon for insert new record, than also opens the form and can cancel and save.
Data is JSON. Fields are unknown at design time, name of the fields must be taken from the JSON (the name of the field in JSON = the name of the field in the table header) and when sending the data, JSON name fields must be taken from table headers or from whatever way you decided to store that information.
Budget is aproximate.
JSON samples:
Record list, API will return array: [{"ID":1, "Customer":"Customer1", "CustomerFullName":"John Smith", "CustomerOrder": 1, "MinimumNumber": 100, "CreateDate":"2019-06-01", "isVIP": 0}, {...}, {...}]
One record, API will return array: [{"ID":1, "Customer":"Customer1", "CustomerFullName":"John Smith", "CustomerOrder": 1, "MinimumNumber": 100, "CreateDate":"2019-06-01", "isVIP": 0}]
Create, you must send: {"Customer":"Customer1", "CustomerFullName":"John Smith", "CustomerOrder": 1, "MinimumNumber": 100, "CreateDate":"2019-06-01", "isVIP": 0}
Update, you must send: {"ID":1, "Customer":"Customer1", "CustomerFullName":"John Smith", "CustomerOrder": 1, "MinimumNumber": 100, "CreateDate":"2019-06-01", "isVIP": 0}
Delete, you must send: {"ID":1}
If an error occurs, the API will return a 202, 404 or 500. If a 202, it will return a JSON like:
{"Error":"Error description"}
At any case, show the error in red in the top right corner.

Esther M.
100% (19)Projects Completed
18
Freelancers worked with
11
Projects awarded
76%
Last project
10 Nov 2020
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies