JavaScript Practice Exercises: Forms, Listboxes, Dates & Arrays

This page is a practice worksheet. The original four exercise groups are retained: forms, listboxes, date/time, and arrays. Build each solution yourself first, then use the linked tutorials when you need a reference.

Form Exercises Top ↑

1. Create a form with one text box and a Submit button. Allow submission only when the text box contains at least 2 characters.
2. Add one pair of radio buttons (Male and Female). Do not allow the form to submit until one radio button is selected.
3. Add one dropdown list for selecting a class. Require one class selection before submission.
4. Require one checkbox to be checked before submitting the form.
5. Require a textarea to contain at least 50 characters.
6. When a radio button is selected, display its value inside a text box.
7. When a checkbox is checked or unchecked, display its current value/state inside a text box.
8. When a text box receives focus, display a message beside it asking the user to enter a name.
9. Hide the above help message when focus moves out of the text box.
10. Write a paragraph. Add RED, YELLOW, and GREEN buttons that change the paragraph text color.
11. Write a paragraph. Add RED, YELLOW, and GREEN buttons that change the paragraph background color.

Listbox Exercises Top ↑

1. Enable or disable a listbox based on a radio-button selection.
2. When the selected option of a listbox changes, display the selected value.
3. Keep one text box and use its value to add a new option to a listbox.
4. Read the student table from a MySQL database and populate a listbox with student names using PHP or Python.
5. Read classes from the MySQL student table and display student names after the user selects a class.

Date and Time Exercises Top ↑

1. Display today's date and time inside a div.
2. Display today's date and time inside a div when a button is clicked.
3. Display the year in four-digit and two-digit forms.
4. Display the current month.
5. Create a dropdown with month names and keep the current month selected.
6. Add 5 days to today and display the resulting date.
7. Add 2 months to today and display the resulting date.
8. Add 2 years, 3 months, and 5 days to today.
9. Use a year-count dropdown to display today's date and the maturity date of a fixed deposit. Trigger the calculation when the selection changes.
10. Ask the user to enter a day, month, and year in a specified format; on submission, display the day of the week.
11. Display the current month calendar.

Array Exercises Top ↑

1. Create an array by splitting a string.
2. Check whether an input element is already present in an array.
3. Ask the user to enter numbers, create an array from them, and display the members in increasing order.
4. Remove the highest element from an array.
5. Create an array containing full month names and use it to build a dropdown list.
6. Create an array from text-box input and generate HTML code that the user can copy and use.
7. Create another array by breaking a string into elements and compare different delimiter choices.

These exercises intentionally describe the required behavior rather than providing finished answers. Use semantic form controls, addEventListener(), and native HTML validation where it solves the requirement cleanly.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: