Exercise-Basic JavaScript
1. Do example on [Link]
2. Display Current Day and Time
Write a JavaScript program to display the current day and time in the following
format.
Sample Output : Today is : Tuesday.
Current time is : 10 PM : 30 : 38
3. Calculate Area of Triangle (Sides: 5, 6, 7)
Write a JavaScript program to find the area of a triangle where three sides
are 5, 6, 7.
4. Multiplication and Division (User Input)
Write a JavaScript program to calculate multiplication and division of two
numbers (input from the user).
5. Create a Temperature Converter: Create an input element that can convert a
value from one temperature measurement to another.
FORMS – EXERCISE
Exercise 1. Design a simple login form using HTML, CSS, and JavaScript. The form
must validate the input before submission.
Requirements:
1. Form Fields:
o Student ID (text field)
Format: XX211YYZZZZ
▪ XX: Two digits
▪ 211: Fixed value
▪ YY: Two uppercase letters
▪ ZZZZ: Four digits
▪ Example: 23211AB1234
o Password (password field)
▪ Must contain at least 6 characters
▪ Allowed characters: a–z, A–Z, 0–9, and underscore _
2. Validation using JavaScript:
o Show an alert message if the student ID format is incorrect.
o Show an alert if the password does not meet the criteria.
o Show a success message (Login successful!) if both fields are valid.
3. Styling Requirements:
o Use CSS to center the form and style the inputs and buttons.
o Set a custom background color for the page.
o Style the button with hover effects.
o The heading should be aligned to the left.
Exercise 2. Design a stylish and user-friendly registration form using HTML, CSS,
and JavaScript. The form should validate all inputs before submission and provide
user-friendly error messages.
Form Fields Required:
1. Full Name
o Must contain at least 3 characters.
o Cannot begin with a space.
o Must not have multiple consecutive spaces.
o Example of valid input: John Doe
2. Email
o Must be a valid email format (e.g. example@[Link]).
3. Phone Number
o Must contain only digits.
o Length must be 10 or 11 digits.
4. Password
o Must be at least 10 characters long.
5. Retype Password
o Must match the Password exactly.
6. Description
o A short description about the user (optional).
o Must not exceed 200 characters.
Functionality Requirements:
• Validate all input fields using JavaScript when the user submits the form.
• Display custom error messages below each invalid field.
• If all fields are valid, display an alert: "Registration successful".
• Prevent the form from reloading the page after submission (return false).
Styling Requirements:
• Use CSS to:
o Center the form on the page with padding and shadow.
o Style inputs, labels, and buttons.
o Use hover effect for the button.
o Highlight input fields on focus.
o Display error messages in red below each field.
Exercise 3. Design a visually appealing member registration form using HTML,
CSS, and JavaScript. The form should validate user inputs and display custom
error messages if any field is invalid.
Form Content:
1. Full Name
o Must begin with a letter.
o Minimum 3 characters required.
o Can contain spaces and Vietnamese characters.
o Example: Sơn Đặng
2. Email
o Must follow standard email format.
o Example: example@[Link]
3. Password
o Minimum 8 characters.
o Must contain at least one uppercase letter.
4. Retype Password
o Must match the previously entered password.
Validation Requirements (JavaScript):
• Validate all fields on form submission.
• Show red error messages below each field when validation fails.
• If all fields are valid, show a success alert: "Registration successful".
• Prevent page reload after form submission.
Styling Requirements (CSS):
• Use a centered layout with a modern card-like design.
• Style form elements (input, button, labels) with padding, border-radius,
hover/focus effects.
• Use pleasant colors for headings and form box.
• Error messages should appear in red, slightly smaller font.
Exercise 4. Design a professional and accessible application form for people who
want to apply to become a zoo keeper. The form must validate user input using
JavaScript and follow modern UI design principles.
Form Requirements:
1. Form Title and Introduction
• Main title: Zoo Keeper Application Form
• Subtitle: "Please complete the form. Mandatory fields are marked with a *"
2. Section 1: Contact Details
Use a <fieldset> with the legend "Contact details", containing:
• Name (Required):
o Must be at least 2 characters.
o Display a red error message if invalid.
• Telephone (Optional):
o No validation required.
• Email (Required):
o Must follow standard email format.
o Display a red error message if invalid.
3. Section 2: Personal Information
Use a <fieldset> with the legend "Personal information", including:
• Age (Required):
o Must be a number between 1 and 120.
o Display a red error message if invalid.
• Gender (Optional):
o Radio buttons: Male or Female.
• Question:
o "When did you first know you wanted to be a zoo-keeper?"
o Use a <textarea> for answers (no validation required).
4. Section 3: Pick Your Favorite Animals
Use a <fieldset> with the legend "Pick your favorite animals", listing:
• Multiple checkbox options (e.g., Zebra, Elephant, Cat, Anaconda, etc.)
Validation Requirements (JavaScript):
• Validate required fields only: Name, Email, and Age.
• Show custom error messages below each field if invalid.
• If all fields are valid, show success alert: "Đăng ký thành công" (You may
translate this to "Application submitted successfully").
Styling Requirements (CSS):
• Use a modern form layout with center alignment.
• Apply shadow, rounded corners, and gradient borders to the form.
• Customize colors for headings, fieldsets, and buttons.
• Style all inputs, textareas, and buttons uniformly.
• Error messages should appear in red, small font below each field.