Event Handling and DOM Manipulation - Basic Tasks

Here are a couple of tasks related to event handling and DOM manipulation. These are very basic and micro level tasks. I suggest to complete these before moving to complex ones or JavaScript assignment. Most of these tasks are designed to practice common use cases of form handling, event handling and DOM manipulation. So do not worry, if you feel, a task do not represent genuine requirement.

Task 1

Get a number from user in a text field. Add a standard button below that field. When the button is 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 the button is clicked, perform the selected arithmatic operation and display the result in a div below the button.

Task 3

Make a hyperlink and set values for following attributes: href, title, target, rel. When the link is clicked, display these attributes' names and values in a table, that shall be embeded below that link.

Task 4

Create an option list using <select> and <option> tags. It shall contains 4-5 cities. After the option list, add a Remove button, when the button is clicked, remove the selected option from the list. If no option is selected, show error message on right side of the button "City must be selected to remove."

Task 5

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

Task 6

Make two radio buttons for gender with label Male and Female. Make a dropdown list with same  values as "options". When user select a list item and click the "Apply" button, corresponding radio button should be selected.

Task 7

Make an option list with 4-5 items in it e.g. country names. Add a text input field where user shall enter a another country name. Add an 'Add' button after the input field. When the button is clicked, add the country name given in text input field in the option list. If that country already exist in list, show error using "alert", "Country already exist in list."

Task 8

Use div element to display a counter value. Add two button with labels: Increment and Decrement. Define event handlers for both buttons to increment and decrement the value written in div element. 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.