Below listed programming tasks are designed to practice different concepts of server side web programming using Express JS and related modules. These are to make the understanding of concepts along with their implementation clear, some of them may not represent practical requirements. Make a header in header.ejs and include this header in all EJS pages. Add /home link in header. In same way, make a footer in footer.ejs and include this footer in all EJS pages. Make a handler /queryhandler, it shall display all query string parameters sent to server at server console. Make another handler i.e. /queryhandler2, on GET reuquest, it shall display all submitted request parameters to user screen using show.ejs Create a form to Add New Book and serve at /add-book on GET request. Take Title, Author Name, Published Year, and Publisher Name as input fields from the user. Handle form submission using POST at same URL i.e. at /add-book, the handler shall display the submited data on user browser us

 Create an application using Express, the application shall have following features: Make a JSON file named users.json. It shall be an array of objects where each object shall represent a contact person detail. Only 2-3 records are sufficient. Use following fields for each object: name, gender, email, city, phone number. Below given description is about different operations that you shall implement in your app to perform CRUD operations on file. List all records:  At /home ... list only contact persons' names in tabular form. The table shall have columns: ID, Name, Operations. Display user ID in ID column, Operations column shall have two links or buttons i.e. Update, Delete. When these links or buttons are clicked, pass user id to /update and /delete handler. Update Record When user click Update link or button, GET request shall be sent to server to URL pattern /update. Pass user id as query-string e.g. /update?id=10. The /update handler shall open the Update Form where earlier co

Here are a couple of tasks related to DOM manipulation. If you have not completed other tasks of DOM manipulation yet, I suggest to start from from the below list, as these are very simple and easy ones. Task 1 Get a number from user using a text field. Add a standard button below the input field. When clicked, in alert box, show the square of number. e.g. if user entered 6, in alert, show 36. Task 2 Create two text input fields to get two numbers from user. Make a group of radio buttons with options: Add, Subtract, Multiply, and Divide. Then, add a standard button labled "Calculate", when clicked, perform the selected arithmatic operation and display the result in a div below the button. Task 3 Make a link and use attributes like: href, title, target, rel. Below that link is clicked, print the mentioed attributes values on console. Task 4 Create an option list using <select> and <option> tags. It shall contains 4-5 cities. After the list, add a remove button, whe

If you know JQuery JavaScript library, you can use it to make AJAX calls and to manipulate DOM to fullfil below requirements. On page load, fetch users from http://192.155.90.208/users.json using AJAX and show only names in Column 1 of your web page. Each user name shall be in a separate div (so all names would be vertically stacked). Add an HTML form in Column 2 of you web page that shall have input fields i.e. name, gender, interests, country and city of type text, radio, checkboxes, and dropdown lists, respectively and a standard button labeled as Show Data . When a user name in Column 1 is clicked, populate the form’s all input fields accordingly. See users.json, only given values shall be listed as valid values for gender and interests in the form. (You can expect no other value for interest would appear or is valid, so feel free to hard code list of checkboxes, but if you create them dynamically, that is better but not required). Althought there would be multiple checkboxes, but

Task 1 Create a layout that shall have 4 info widgets.  On extra small devices, all shall be stacked On small and medium screen, there shall be 2 widgets in one row (hence there would be total two rows) On large and above, all columns shall come in single row Task 2 Create a layout that shall have 3 cells: On extra small and small devices, all shall be vertically stacked On medium and above, first row should have 2 cells and 2nd row should have one cell. Cell in 2nd row should be of 50% width and it shall coe in center of row. Task 3 Create a layout that shall have 6 cells. on extra small devices, all shall be vertically stacked.  On small and mediun devices, 2 cell per row.  On large and above, 3 cell per row Task 4 There shall be one “row” with 3 cells, all shall be vertically stacked on all devices, except extra small devices (means on extra small devices, all cells shall be of equal width and come in single row). Task 5 There shall be one “row” with 2 cells, each cell shall take 75

Consider below HTML form. Its not mandatory to use same form, you can modify fields. What is important is, your form shall include all basic types of input fields e.g. text, password, radio, checkbox, option list, text area, etc. After this form, there are list of tasks that you should implement in same web app. <title>Form with all controls</title> <style> label { display: inline-block; width: 100px; }</style>  <h1>User Registration Form</h1> <form action="form-handler" method="POST">   <h2> Student Registration Form</h2>   <label>Name</label><input maxlength="8" name="name" size="20" type="text">   <label>Password</label> <input name="password" size="20" type="password">    <label>Subjects</label>   <input name="Algorithms" type="checkbox"> Algorithms   <input name=&

Prepare code samples to demonstrate usage of following concepts in JS: Fat Arrow functions Create modules, export it and use it by importing into another module Create classes that extends another class. create its object and use it. Spread operator with usage in arrays and objects Object Destructuring Please make use of validator packages and validate different types of data using:  https://www.npmjs.com/package/validator Makeuse of different methods in string module  https://www.npmjs.com/package/@stdlib/string you an use any module from npm. searcing "string utils" Create different http handlers to perform following tasks (you can do each task in different file too): extract data received in query string and write that data to http response. For example, if user send request to a url like below: http://localhost:8000/processdata?name=ali&age=20&city=Lahore  The handler should write these data attributes on response. Send custom headers to response e.g. Content-Le