Make Single Page Web Application using JavaScript and AJAX - Practice Task

Above is User Interface of how your application shall look alike. Make a web page using HTML/CSS (you may use Bootstrap) and JavaScript. When user fill the form and press 'add' button, the record shall be added in the table given at left side. Action column contains Update and Remove links, "Update" shall load the record in form, shown at right. When user update the values and press 'update' button, it shall update the corresponding row in the left table. Initially, when the page is loaded, the table shall be empty and "Update" button shall be disabled. When user click the "Update" link in a row, "add" button shall be disabled. "Reset" button shall reinitialize the form at the same state when the page was loaded, to add new records. You are supposed to code above listed features using JavaScript (without refreshing the page).

At top of above created page, add a checkbox labeled "Sync with Database", when checkbox is selected, operations performed (i.e. add, edit and remove) should also be replicated in database using AJAX (make required table and database). You are supposed to make a very basic single page application. Keep your database and html table synchronized. When page is loaded initially, the table should contain alll records stored in database.

Bonus Marks
Add another attribute in table and form to add/update/remove the picture of the user (definitely using AJAX).

Feel free to use any Jquery methods to perform the task.


  1. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    Webdesining course in chennai


Post a Comment