-
JS Setting Up Environment
-
JS Syntax
-
JS Comments
-
JS Generating OutPut
-
JS Variables
-
JS Data Types
-
JS String
-
JS String Methods & Properties
-
JS Template Literals
-
JS Operators
-
JS Conditional Statements
-
JS Break and Continue
-
JS Functions
-
JS DOM
-
JS DOM Methods and Elements
-
JS DOM HTML/CSS Manipulation
-
JS DOM Navigation & Nodes
-
JS Events
-
JS Array
-
JS Loops
-
JS Object
-
JS Accessors
-
JS Object Constructors
-
JS Prototype & Iterables
-
JS Date & Time Function
-
JS Math Function
-
JS Storage
-
JS Classes
-
JS Map & Set
-
JS Global Scope
-
JS Rest and Spread
-
JS Error Handling
-
JS Asynchronous
-
JS Promise
-
JS Async/Await
-
JS Node.js
-
JS Regular Expression
-
JS Fetch API
-
JS BOM
-
JS Form Validation
-
JS Practiced Example
-
JS Projects
JavaScript Projects
1. Create a web page for OTP (One-Time Password) generation and verification with a countdown timer.
i- HTML Structure: Create an input field for OTP, buttons for generating and verifying OTP, and a countdown timer.
ii- CSS Styling: Style the elements using CSS to make the page visually appealing.
iii- JavaScript Functionality:
– Generate a random OTP and display it in an alert when the “Generate OTP” button is clicked.
– Start a countdown timer for 2 minutes when the OTP is generated.
– Allow the user to input the OTP and verify it within the time limit.
– Display success or error messages based on the verification result.
– Ensure the uniqueness of generated OTPs to prevent duplication.
– When OTP is verified countdown has stopped.
Example: You have to create a web page with an input field for OTP, “Generate OTP” and “Verify OTP” buttons, and a countdown timer. When the user clicks on the “Generate OTP” button, a random OTP is generated and displayed in an alert. The countdown timer starts, and the user needs to input the OTP and click on the “Verify OTP” button within 2 minutes.
Output Video
2. Create a customer capture webpage with dynamic sections and conditional display based on customer type.
1. HTML Form: Create form fields to collect customer names and emails, and select customer type (existing or new). Also, include an “Amount” field that is displayed only for existing customers.
2. Dynamic Sections: Segregate customers into “Existing Customers” and “New Customers” sections.
3. Conditional Display: Show/hide the “Amount” field based on the selected customer type.
4. Form Submission: Dynamically add customers to the relevant section upon form submission.
5. Section Actions:
– For the “New Customer” section, provide an option to move customers to the “Existing Customer” section upon approval.
– For the “Existing Customer” section, provide a button to remove customers from the list.
Example: You have to Create a webpage with a form to capture customer details. When a user selects “Existing” as the customer type, the “Amount” field is displayed. After submitting the form, the customer is added to the appropriate section. In the “New Customer” section, clicking on a customer’s name displays an approval option to move them to the “Existing Customer” section. In the “Existing Customer” section, there’s a button to remove customers from the list.
Output Video
3. Develop a budget management system with a form for inputting budget details and a dynamic table for displaying and managing budgets.
1. HTML Form: Create form fields to collect subject, budget selection, budget amount, amount spent, and remaining balance.
2. User Input and Dynamic Table:
– Allow users to pick predefined budgets.
– Automatically update remaining budget based on budget selection and amount spent.
– Upon form submission, add data dynamically to a table.
3. Table Display: Display subject, budget, amount spent, and remaining balance in the table.
4. Validation:
– Ensure that the remaining balance is non-negative.
– Display subtraction in the balance field.
5. Table Row Handling: Update the existing row if the user and subject exist; otherwise, add a new row.
6. Editing Restriction: Disable editing if the remaining balance is zero.
Example: You have to create a budget management system where users can input their budget details and track their spending. Users select a budget category, enter the amount spent, and the system automatically updates the remaining balance. Upon submission, the data is added dynamically to a table. Users can edit existing rows or add new rows if necessary.
Output Video
4. Create a Task Scheduler using HTML, CSS, and JavaScript. This tool will allow users to input tasks, set their due dates, and manage their schedules effectively.
1. HTML Structure:
– Create input fields for task name, due date, and priority level
– Display buttons for adding tasks, editing tasks, and deleting tasks.
– Show a list of tasks with their due dates.
2. CSS Styling: Style the elements to make the user interface visually appealing.
3. JavaScript Functionality:
– Implement functions to add, edit, and delete tasks.
– When a task is added, it should appear in a list format, displaying its name, due date, and priority level.
– Users should be able to edit task details by clicking an “Edit” button next to each task.
– Users should be able to delete tasks by clicking a “Delete” button next to each task.
Example: You have to create a Task Scheduler web application using HTML, CSS, and JavaScript. The application should allow users to input tasks along with their due dates and priority levels. Additionally, users should be able to add, edit, and delete tasks as needed.
Output Video
5. Create a web page with a table containing data that users can sort and filter based on different criteria.
1. HTML Structure:
– You’ll need to create an HTML table with headers and rows to display your data.
– Each column header should have an interactive element (like a button) that users can click to sort the table based on that column.
2. JavaScript Functionality:
– Write JavaScript functions to handle sorting and filtering of the table data.
– Implement sorting functionality so that when a user clicks on a column header, the table rows are sorted based on the values in that column.
– Add filtering functionality so that users can enter search queries or select options to filter the table rows based on specific criteria.
3. Sorting:
– When a column header is clicked, sort the table rows based on the values in that column.
– Implement ascending and descending sorting based on the current sort order.
4. Filtering:
– Allow users to input search queries or select options to filter the table rows.
– Filter the table rows dynamically based on the user’s input.
Example:You have to create a table displaying a list of products with columns like “Product Name”, “Price”, and “Category”. Users should be able to click on the column headers to sort the table rows based on the values in that column. Additionally, users should be able to enter search queries to filter the table rows based on product names or select options to filter by category.
Output Video
6. Create a web application that allows users to manage employee records, including adding, editing, deleting, and searching for employees.
1. HTML Structure:
– You’ll need to design an HTML form to input employee details such as name, age, email, and department.
– Display the list of employees in a table format so users can easily view and manage them.
– Include buttons for adding new employees, editing existing ones, and deleting employees.
2. CSS Styling:
– Style the HTML elements to create an attractive and user-friendly interface.
– Use CSS to layout the form inputs, table, buttons, and other elements neatly.
3. JavaScript Functionality:
– Write JavaScript functions to handle adding, editing, and deleting employee records.
– Implement search functionality so users can search for employees by name, age, email, or department.
– Use JavaScript to dynamically update the table when records are added, edited, or deleted.
4. Database Management: Since this is a front-end project, you won’t be interacting with a real database. Instead, you’ll simulate the database using JavaScript arrays or objects to store employee records.
Example: You have to create a simple Employee Database Management System where users can add, edit, and delete employee records. They should also be able to search for employees by name or department.
Note: This project will focus on the front-end aspect of managing employee records. In a real-world scenario, you would integrate this front-end system with a backend server and database to store and retrieve employee data securely. However, for this exercise, we’ll only be working with client-side code.
Output Video
7. Create a web page that displays a list of items, with pagination controls at the bottom to navigate between pages.
1. HTML Structure:
– Design an HTML structure to display the list of items and pagination controls.
– Include a container to hold the list of items and another container for the pagination controls.
2. CSS Styling:
– Style the HTML elements to create a visually appealing interface.
– Use CSS to format the list of items and pagination controls, including styles for buttons, page numbers, and active page indicators.
3. JavaScript Functionality:
– Write JavaScript functions to handle pagination functionality.
– Implement logic to determine the current page and display the corresponding set of items.
– Add event listeners to pagination controls to allow users to navigate between pages.
4. Pagination Logic:
– Determine the total number of items and the number of items to display per page.
– Calculate the total number of pages based on the number of items and items per page.
– Update the displayed items based on the current page number.
Example: You have to create a list of 100 items to display, with 10 items per page. You want to create a pagination system to allow users to navigate through the list, with buttons to move to the previous and next pages and page numbers to jump directly to a specific page.
Output Video
8. Create a web page where users can input their expenses, categorize them, and view a summary of their spending.
1. HTML Structure:
– Design an HTML form to input expense details such as amount, category, and description.
– Display a list of expenses along with their details.
– Include a section to show a summary of total expenses.
2. CSS Styling:
– Style the HTML elements to create an attractive and user-friendly interface.
– Use CSS to format the form inputs, expense list, summary section, and other elements neatly.
3. JavaScript Functionality:
– Write JavaScript functions to handle adding, editing, and deleting expense records.
– Implement logic to calculate the total expenses and display them in the summary section.
– Add event listeners to form inputs and buttons to allow users to interact with the expense tracker.
4. Expense Logic:
– Create an array or object to store expense records.
– Implement functions to add, edit, and delete expenses from the array or object.
– Update the expense list and summary section dynamically based on user input.
Example: You have to create a simple Expense Tracker where users can input their expenses, categorize them, and view a summary of their spending.
Output Video
9. Implement client-side form validation for a registration form using JavaScript. The form includes fields for full name, password, phone number, email address, and a select field for country.
Here are the validation rules:
1. Full Name: Cannot be empty.
2. Password: Must be at least 6 characters long and include at least one number, one letter, and one special character.
3. Phone Number: Must contain only numerical digits.
4. Email Address: Must be a valid email address format.
5. Country Selection: When a country is selected from the dropdown menu, its corresponding currency should automatically display in another input field.
Explanation:
1. HTML Structure:
– Create input fields for full name, password, phone number, email address, and select field for country.
– Add an input field to display the corresponding currency based on the selected country.
2. JavaScript Functionality:
– Write JavaScript functions to validate each form field based on the specified rules.
– Use regular expressions to validate the password, phone number, and email address formats.
– Implement event listeners to trigger validation functions when the form is submitted or when input fields lose focus.
3. Country-Currency Mapping:
– Create a mapping of countries to their corresponding currencies.
– Use JavaScript to update the currency input field dynamically based on the selected country.
Example: You have to create a registration form where users enter their details. When the user submits the form, JavaScript validates each field according to the specified rules. If any field is invalid, an error message is displayed. Additionally, when the user selects a country, the currency associated with that country is automatically displayed in another input field.
