Set1

1. Dynamic To-Do List with jQuery

Problem:
Create a To-Do List where users can:
 Add new tasks using an input field.
 Delete tasks by clicking a "Remove" button.
 Toggle task completion (strike-through) when clicked.
Requirements:
 Use jQuery event delegation for dynamically added tasks.
 Apply fadeIn() when adding and fadeOut() when removing tasks.

2. Interactive Image Slider with Auto-Play

Problem:
Build an image slider that:
 Displays 3-5 images sequentially.
 Auto-plays every 3 seconds using fadeIn() and fadeOut().
 Has "Next" and "Previous" buttons for manual navigation.
Requirements:
 Use jQuery animations for smooth transitions.
 Stop auto-play when the user hovers over the slider.

3. Real-Time Username Availability Checker

Problem:
Develop a signup form where:
 When a user types a username, an AJAX request checks if it's available.
 Display "Available" (green) or "Taken" (red) without page reload.
Requirements:
 Use jQuery Post() to simulate a backend check.
 Apply slideDown() to show the status message.

4. Dynamic FAQ Accordion

Problem:
Create an FAQ section where:
 Clicking a question slides down its answer.
 Clicking again slides up the answer (accordion effect).
Requirements:
 Use slideToggle() for smooth animations.
 Highlight the active question with a different background.

5. AJAX-Based Live Search Filter

Problem:
Implement a search bar that:
 Filters a list of products (e.g., "Mobiles", "Laptops") as the user types.
 Uses jQuery Get() to fetch matching results dynamically.
Requirements:
 Show "No results found" if no matches exist.
 Use fadeIn() to display filtered results smoothly.
6. Drag-and-Drop Shopping Cart
Problem:
Build a product listing page where users can:
 Drag items into a shopping cart.
 See the cart update dynamically.
Requirements:
 Use jQuery UI draggable/droppable.
 Animate cart updates with slideDown().

7. Dynamic Progress Bar for File Upload

Problem:
Simulate a file upload system where:
 A progress bar fills up over 5 seconds when "Upload" is clicked.
 Shows "Upload Complete!" at the end.
Requirements:
 Use jQuery animate() for the progress bar.
 Display a success message with fadeIn().

8. Interactive Quiz with Timer

Problem:
Create a quiz app where:
 Each question appears one by one.
 A 10-second timer counts down per question.
 Shows the final score at the end.
Requirements:
 Use jQuery delay() and fadeOut() for transitions.
 Update the score dynamically using text() or html().

9. Animated Login/Signup Form Toggle

Problem:
Design a login page where:
 Clicking "Sign Up" slides in the registration form.
 Clicking "Login" slides back to the login form.
Requirements:
 Use slideToggle() for smooth transitions.
 Validate inputs before submission.

10. User Registration System

Problem Statement:
You are building a website that requires user registration. Create a PHP system where:
 Users can sign up by entering name, email, password, and phone number.
 All fields must be validated (no empty inputs, valid email format, 10-digit phone number).
 Passwords must be hashed before storing in the MySQL database.
 Display appropriate error messages if validation fails.
 Upon successful registration, redirect the user to a welcome page.
11. Student Record Management System
Problem Statement:
Develop a system to manage student records with the following features:
 An admin can add, view, edit, and delete student details (Roll No, Name, Class, Marks).
 All fields must be validated (Roll No must be unique, marks must be numeric).
 Display all student records in an HTML table sorted by Roll No.
 Provide an option to search for a student by name or Roll No.

12. Product Inventory Management

Problem Statement:
Create an inventory system for a small shop where:
 The shop owner can add new products (Product ID, Name, Price, Quantity).
 Validate inputs (Price and Quantity must be positive numbers).
 Display all products in a table with options to update stock or delete entries.
 Ensure Product ID is unique and auto-generated.

13. Task Manager Application

Problem Statement:
Build a task manager where users can:
 Add tasks (Task Name, Description, Due Date).
 Validate inputs (Due Date must be in the future).
 Mark tasks as complete (update status in the database).
 Delete tasks permanently.
 Display pending and completed tasks in separate lists.

14. Library Book Tracking System

Problem Statement:
Design a system for a library to manage books with the following features:
 Librarian can add books (Book ID, Title, Author, Category).
 Validate inputs (Book ID must be unique, no empty fields).
 Users can search books by title or author.
 Provide options to update book details or remove books from the database.

15. Employee Attendance System

Problem Statement:
Create a system where:
 Employees can mark attendance (Present/Absent) for the current date.
 Validate that an employee cannot mark attendance twice for the same day.
 Admin can view attendance reports (filter by date or employee).
 Store attendance records in MySQL with employee_id, date, and status.
16. Online Feedback Form
Problem Statement:
Develop a feedback form for a college website where:
 Students can submit feedback (Name, Email, Feedback Message).
 Validate inputs (Email must be valid, feedback must be at least 20 characters).
 Store feedback in a MySQL database.
 Display all feedback entries in a paginated table (5 entries per page).

17. Movie Database Manager

Problem Statement:
Build a system to manage a movie database where:
 Admin can add movies (Title, Director, Release Year, Genre).
 Validate inputs (Release Year must be between 1900 and 2025).
 Users can filter movies by genre using a dropdown.
 Allow admin to edit or delete movie entries.

18. Hospital Patient Registration

Problem Statement:
Design a patient registration system for a clinic where:
 Staff can register patients (Patient ID, Name, Age, Gender, Address).
 Validate inputs (Age must be numeric, Gender must be Male/Female/Other).
 Prevent duplicate Patient IDs.
 Display all registered patients in a searchable table.

19. Online Quiz Application

Problem Statement:
Create a quiz system where:
 Admin can add multiple-choice questions (Question, Option 1, Option 2, Option 3, Correct
Answer).
 Validate that all options and the correct answer are provided.
 Users can take the quiz, and their responses are stored in MySQL.
 Display the user's score at the end.
 Set 2
20: Weather App with AJAX (Vanilla JS)
Description:
Create a weather application that fetches real-time weather data from an API (e.g., OpenWeatherMap)
and displays it dynamically.
Requirements:
1. Use XMLHttpRequest to fetch weather data based on user input (city name).
2. Display temperature, humidity, weather condition (sunny/rainy), and wind speed on the
webpage.
3. Implement error handling (e.g., invalid city name, API failure) with user-friendly messages.
4. Prevent page reload during data fetch.
21: Live User Search (Vanilla JS + AJAX)
Description:
Build a search system that dynamically fetches and displays user data as the user types.
Requirements:
1. Use the oninput event to trigger AJAX requests to a mock API (e.g., JSONPlaceholder).
2. Display search results in a dropdown list without refreshing the page.
3. Show a loading indicator while fetching data.
4. Handle API errors gracefully.
22: Dynamic To-Do List (AJAX + DOM Manipulation)
Description:
Develop a to-do list that fetches tasks from an API and allows users to add/delete tasks without page
reload.
Requirements:
1. Fetch and display a list of tasks from a mock API.
2. Allow users to:
o Add new tasks (send POST request via AJAX).
o Delete tasks (send DELETE request via AJAX).
3. Show a spinner animation during API calls.
4. Update the UI dynamically after each operation.

23: Country-State-City Dropdown (Event-Driven AJAX)

Description:
Implement a cascading dropdown where selecting a country fetches states, and selecting a state fetches
cities.
Requirements:
1. Use onchange event to trigger AJAX calls.
2. Fetch data from a mock API (or predefined JSON).
3. Dynamically populate dropdowns without page refresh.
4. Handle API errors (e.g., no states found).
24: Login Form with AJAX (Form Handling + Validation)
Description:
Create a login form that validates inputs and submits data asynchronously.
Requirements:
1. Validate email and password (non-empty, correct format).
2. Submit data to a mock API using AJAX (simulate login).
3. Display success/error messages without page reload.
Show a loading animation during submission.
25: Comment System (AJAX + DOM Updates)
Description:
Build a comment section where users can post and view comments in real-time.
Requirements:
1. Fetch existing comments from an API.
2. Allow users to submit new comments via AJAX.
3. Validate comment input (non-empty).
4. Display new comments with a fade-in animation.

26: Animated News Feed (jQuery + AJAX)

Description:
Fetch news headlines and display them with smooth animations.
Requirements:
1. Use jQuery AJAX to fetch news data (e.g., NewsAPI).
2. Display news items one by one using slideDown().
3. Show a loading spinner while fetching data.
4. Allow users to refresh news with an animation.

27: Shopping Cart (AJAX + jQuery Animations)

Description:
Create an interactive shopping cart where users can add/remove items dynamically.
Requirements:
1. Fetch product data from a mock API.
2. Allow users to add items to cart (AJAX POST).
3. Remove items with a fadeOut() animation.
4. Update cart total without page reload.

28: Infinite Scroll (jQuery + AJAX)

Description:
Implement an infinite scroll feature that loads more content as the user scrolls down.
Requirements:
1. Fetch initial posts from JSONPlaceholder.
2. Load more posts when the user reaches the bottom.
3. Use fadeIn() for smooth content loading.
4. Show a "Loading..." indicator during fetch.

29: Interactive Poll System (AJAX + Real-Time Updates)

Description:
Build a poll system where users can vote and see real-time results.
Requirements:
1. Fetch poll questions and options from an API.
2. Allow users to submit votes via AJAX.
3. Update vote counts dynamically with slideUp()/slideDown().
4. Prevent multiple votes from the same user.