Showing posts from 2024

DOM Manipulation - Basics

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

AJAX and DOM Manipulation - Practice Task 2

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 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

Bootstrap Practice Tasks

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