T.E.
AIML
Web Development
Practical Programs
1. Write a [Link] program using the fs module to perform the
following operations:
2. Create a new file named [Link] and write the text "Welcome
to [Link] File System Module" into it.
3. Read the contents of the file and display them on the console.
4. Delete the file and display a confirmation message after deletion.
2. Create one module file named [Link] that exports:
A class Student with the following:
o Properties: name, rollNo, marks (array of numbers).
o Methods:
getAverage() → returns the average marks.
displayInfo() → logs student name, roll number, and
average marks.
Create another file [Link] that imports the Student class, creates
at least two student objects, and displays their details.
3. Write a [Link] program to create an HTTP web server that listens
on port 3000 and displays the message
"Welcome to My First [Link] Web Server!"
4. Create a module file named [Link] that exports the
following functions:
add
subtract
multiply
divide
Create another file named [Link] that imports these functions
from the module and performs the following:
Accept two numbers (you can hardcode them).
Display results for all four operations on the console.
5. Create a new Angular project named component-demo using
Angular CLI.
Generate two components using Angular CLI:
Parent component: [Link] (created by default)
Child component: student
In the child component ([Link]), define a property
studentName and display it in the template.
In the parent component ([Link]), send data (like a
message or title) to the child component using property binding.
Display both the parent message and the child component data in
the browser.
6. Create an Angular application which will do following actions:
Register User, Login User, Show User Data on Profile Component.
7. Create a new Angular project named pipes-demo.
In the [Link] file:
Create variables:
o studentName → string
o course → string
o todayDate → Date
o fees → number
In the [Link] file, use the following Angular built-
in pipes:
uppercase → to display the student name in uppercase
lowercase → to display the course name in lowercase
date → to display the current date in full format
currency → to display the fees in Indian currency format (₹)
8. Create a new Angular project named form-demo.
Enable FormsModule in your project by importing it in the
[Link] file.
Create a student registration form in the [Link]
that includes the following fields:
Name (text input)
Email (email input)
Course (select dropdown)
Gender (radio buttons)
Submit button
When the form is submitted, display the entered details below the
form.
9. Create a file named [Link] containing some text (for example,
student details).
Create an HTML file ([Link]) with a button.
When the user clicks the button, use AJAX to read the content of
the file and display it inside a <div> on the same page.
Use XMLHttpRequest for making the AJAX request.
10. Create a [Link] application that connects to a MongoDB
database and performs basic database operations.
Requirements:
1. Database Connection:
o Connect your [Link] application to a MongoDB database
named studentDB.
o Use the official MongoDB [Link] Driver or Mongoose for
database communication.
2. Collection:
o Create a collection named students with the following fields:
o Name, Age, Course, Marks
3. Operations:
Implement the following CRUD operations using [Link]:
Insert a new student record into the database.
Retrieve and display all student records.
Update a student’s marks using their name.
Delete a student record based on their name.
11. Create a MEAN Stack application to perform basic CRUD
(Create, Read, Update, Delete) operations on a Student
collection stored in MongoDB.
12. Create a simple, responsive mobile webpage for a fictional
Coffee Shop using HTML5 and CSS3.
The page should look good on both desktop and mobile screens.
Requirements:
1. The webpage should display:
o A header with the shop name
o A navigation bar with links (Home, Menu, Contact)
o A section showing shop information and an image
o A “Contact Us” form with Name, Email, and Message fields
o A responsive layout that adapts to small (mobile) screens
2. Use media queries to make the page mobile-friendly.
3. Use semantic HTML5 elements (<header>, <nav>, <section>,
<footer>, etc.).
13. Create a simple Mobile Website using jQuery Mobile.
14. Create a React JS application that demonstrates the use of
React Hooks (useState, useEffect, and useRef) to build a small
interactive app.
Program Requirements
1. Component Name: UserTimerApp
2. Functionality:
o Display a text input to enter a user's name.
o Display a timer that counts how many seconds the user has
been on the page.
o Use a button to start and stop the timer.
o Display a greeting message like "Hello, [UserName]! You
have been here for [x] seconds."
Hooks to Use:
useState → to manage user name, timer count, and start/stop state.
useEffect → to start/stop the timer automatically when the user
clicks the button.
useRef → to store the timer ID returned by setInterval().
15. Create a responsive personal portfolio webpage using
Bootstrap 5 components and utilities.
Program Requirements :
1. Page Structure:
o Use Bootstrap’s container, row, and col classes to design a
responsive layout.
o Include the following sections:
Header/Navbar
About Me
Projects
Contact Form
Footer
2. Detailed Specifications:
🟦 Header / Navbar
o Use the Bootstrap navbar component.
o Include links: Home, About, Projects, Contact.
o Make it sticky at the top and collapse into a hamburger menu
on smaller screens.
🟦 About Section
o Use a Bootstrap card or Jumbotron (container-fluid) to
display your photo, name, and a short bio.
o Use grid system (2 columns) — one for the image, one for
the text.
🟦 Projects Section
o Display at least three project cards using Bootstrap Cards
inside a responsive grid.
o Each card should have:
A project image
Project title
Short description
A “View More” or “Visit” button
🟦 Contact Section
o Create a Bootstrap form with fields:
Name
Email
Message
Submit Button
o Use Bootstrap form controls and button classes.
🟦 Footer
o Add a simple footer with social media icons (use Bootstrap
Icons or Font Awesome).
o Center-align the text and icons.
3. Styling & Responsiveness:
o Use Bootstrap’s text utilities, spacing classes (mt, mb, p,
etc.), and colors.
o Ensure the layout adapts perfectly on mobile, tablet, and
desktop screens.