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, when the button is clicked, remove the selected option from list. If no option is selected, show error message on right side of button "city must be selected."

Task 5

Write sample text using a paragraph tag. After that paragraph, add two text input fields to get CSS property name and value. and "Apply" button. When the button is clicked, apply that CSS property to paragraph.

Task 6

Make two radio buttons for gender with label Male and Female. Make a dropdown list with same options. When apply button is clicked, radio button should be selected based on selected option from list.

Task 7

Make an option list with 4-5 items in it e.g. country names. Add a text input field to get country name, then add an 'Add' button, when the button is clicked, add the country name written in text input field in option list. If that country already exist in list, show error, "Country already exist in list."

Task 8

Use div to show a counter value. Add two buttons below it labeled Increment and Decrement. Define event handlers for both buttons to increment and decrement the value written in div. Restrict the value shall not get -ve, show error message appropriately when Decrement button is clicked that intent to make the value negative.

Task 9

For a paragraph, change its background color when mouse enter and leave the paragraph.

Task 10

Add two text input fields, change the background color when user select that field and move out of that field e.g. blur and focus events.

Task 11

Make a to-do list management app. Show to-do items as order list items. Let user add to-do item in the list using a text field and Add button. Add end of each list item, add links or button to mark that item "done" and to delete that item from list. If an item is marked done, make its text color light and move it to the end of list. Think of more features and add them to make it more feature rich.