Ex.No.

1:
Develop a portfolio website for yourself which gives details about yourself for a
potential recruiter.

Aim:
To develop a comprehensive and visually appealing portfolio website showcasing the skills, experience, and
achievements, in order to effectively giving introduction to potential recruiters and employers.
Algorithm:
Step 1: Set Up the Project Folder Create a new folder for your project. Inside this folder, create separate
subfolders for HTML, CSS, and JavaScript files.
Step 2: Create the HTML Structure Inside the HTML folder, create an index.html file and start building the
basic structure of the portfolio website.
Step 3: Add CSS Styling in the CSS folder, create a styles.css file and start adding styles to the website.
Customize the colors, fonts, layout, and other visual elements to match the design preferences.
Step 4: Build Sections Add different sections to the portfolio, such as "Home," "About," “Achievements”,
“Portfolio," and "Contact." Use HTML's <section> element to define these sections in the index.html file.
Step 5: Style Each Section Apply CSS styles to each section to make them visually appealing. CSS classes and
IDs can be used to target specific elements within each section and style them accordingly.
Step 6: Add Content Fill in the content for each section. Write a brief introduction about yourself in the
"About" section and showcase the projects or work in the "Portfolio" section.
Step 7: Implement Smooth Scrolling (Optional), To enhance the user experience, smooth scrolling
functionality can be added using JavaScript. This will make navigation between sections smoother and more
visually appealing.
Step 8: Create JavaScript Interactions (Optional), interactive elements can be added to your portfolio using
JavaScript.
Step 9: Test and Debug Preview the portfolio website in different web browsers to ensure that it looks and
functions as intended. Test it on various screen sizes to ensure responsiveness.
Result:
Thus, the portfolio website, a professional and engaging online platform that effectively communicates the
skills, experience, and potential to potential recruiters has created successfully.
Ex.No.2
Create a web application to manage the TO-DO list of users, where users can login
and manage their to-do items

Aim: To create a simple TO-DO list application that provide users with a basic tool to add tasks,
delete tasks, and display the list of tasks.

Algorithm:
1. Initialization:
o Initialize an empty list or array to store tasks.
2. Add Task:
o Prompt the user to input task details (e.g., task name).
o Create a new task object with the provided details.
o Append the task object to the list of tasks.
3. Delete Task:
o Display the list of tasks with a unique identifier (e.g., task number).
o Prompt the user to enter the identifier of the task they want to delete.
o Remove the task with the corresponding identifier from the list.
4. Display Tasks:
o Iterate through the list of tasks.
o Display each task’s details, such as task name and identifier.
5. User Interaction Loop:
o Implement a loop that continuously prompts the user for actions (add, delete,
display, exit).
o Based on the user’s choice, perform the corresponding action (add, delete,
display).
6. Exit:
o Provide an option for the user to exit the application.
Result:
Thus the simple TO-DO list application with a basic tool to add tasks, delete tasks, and
display the list of tasks has developed successfully.
Ex.No.3:
Create a simple micro blogging application (like twitter) that allows people to post their
content which can be viewed by people who follow them.

Aim:
To create a simple micro blogging application (like twitter) that allows people to post their content which can be
viewed by them.

Algorithm:

1.User Registration and Authentication

 Users register and log in using their credentials.
 Sessions or tokens are used to maintain user authentication.
2.Create a New Post (Tweet):
 Authenticated users can create new tweets.
 Tweets consist of content, user information, and a timestamp.
 Tweets are saved in a database with user references.
3.View the Post(Tweet):
 users can view the tweets with some details.

Source code:
Project Structure:
Result:
Thus, a simple micro blogging application (like twitter) that allows people to post their content which can be
viewed by them has created successfully.
Ex.No.4:
Create a food delivery website where users can order food from a particular restaurant listed in
the website.
Aim: To create a simple food delivery website that allows users to view food items, add them to the cart, and
calculate the total cost of selected items.
Algorithm:

1. Initialization:
 Set up the HTML structure with the header, menu, and cart sections.
 Link the necessary CSS stylesheet and JavaScript file.
Display Menu:
 Create a <div> element with a class of "menu" to hold food items.
 For each food item:
 Create a <div> element with a class of "item".
 Inside the item <div>:
 Add an <img> element for the food image.
 Add an <h2> element for the food name.
 Add a <p> element for the food description.
 Add a <span> element with a class of "price" for the food price.
 Add a <button> element with a class of "add-to-cart" for adding to the cart.
Add to Cart Interaction:
 Query all elements with the class "add-to-cart" using JavaScript.
 For each "add-to-cart" button:
 Attach a click event listener that executes the following steps:
 Get the parent element (item) of the clicked button.
 Extract the item name and price from the item's elements.
 If the item is already in the cart:
 Increment the item's count in the cart.
 If the item is not in the cart:
 Add the item to the cart with a count of 1.
 Update the total cost.
 Call the updateCart( ) function.
Update Cart Display:
 Create a <div> element with a class of "cart" to hold cart contents.
 Inside the cart <div>:
 Add an <ul> element with an id of "cart-items" to list cart items.
 Add an <h3> element to display the total cost.
 Add a <span> element with an id of "cart-total" to display the actual total.
Update Cart Function (updateCart()):
 Clear the contents of the cart items list.
 For each item in the cart:
 Create a <li> element to represent the item and its count.
 Append the <li> element to the "cart-items" list.
 Update the "cart-total" span with the total cost.
Styling:
 Add CSS styling to format the header, menu, items, cart, and buttons.
 Style the layout, fonts, colors, and alignment to create an appealing design.
Testing:
 Test the website's functionality by adding items to the cart and verifying the total.
Result:

Thus, a simple food delivery website to view food items, add them to the cart, and calculate the total cost of
selected items has developed successfully.
Ex. No:5:
Develop a classifieds web application to buy and sell used products.
Aim:
To create a simple classified web application in Node.js where users can post, view, and purchase
classified advertisements.
Algorithm:
1. Registration and Authentication:
 Allow users to register and log in securely to create and manage their classified listings.
2. Listing Creation:
 Enable users to create new classified listings.
 Each listing should include essential details like a title, description, category, price, and
contact information.
3. Listing Display:
 Display classified listings in a user-friendly format.
 Allow users to view and purchase details of individual listings.
4. Data Storage:
 Use a database (e.g., MongoDB, PostgreSQL) to store classified listings and user
information.
 Implement database CRUD (Create, Read, Update, Delete) operations to manage
listings.
5. Error Handling:
 Include error handling mechanisms to gracefully handle exceptions and errors that may
occur during the application's operation.

Project structure:
Result:
Thus, a simple classified web application in Node.js where users can post, view, and purchase
classified advertisements has created successfully.
Ex.No.6: Develop a leave management system for an organization where users can apply
different types of leaves such as casual leave and medical leave. They also can view the available
number of days.

Aim:

To develop a leave management system in Node.js to provide a convenient and efficient way for employees to
request and manage their leave and help administrators to process and track these requests.

Algorithm:

1. User Authentication and Authorization:

 Implement user authentication and authorization to ensure that only authorized users
(employees and administrators) can access the system.

2. Database Setup:
 Set up a MongoDB, MySQL, or another database of your choice to store employee
data, leave requests, and other relevant information.
 Create the necessary database schemas/models to represent users and leave
requests.
3. Leave Request Creation:
 Provide an interface for employees to submit leave requests, specifying the start
date, end date, and reason.

Project Structure:
Result:

Thus, a leave management system in Node.js to provide a convenient and efficient way for employees to request
and manage their leave has developed successfully.
7.Develop a simple dashboard for project management where the statuses of various tasks are
available. New tasks can be added and the status of existing tasks can be changed among
Pending, InProgress or Completed.

Aim

To design and implement a user-friendly project management dashboard that allows users to add
new tasks and update task statuses among Pending, InProgress, or Completed, thereby facilitating
efficient task tracking and management.

Steps to Implement:

Step 1: Setup Frontend and Backend Projects

• Create a new folder named "ProjectDashboard".
• Inside "ProjectDashboard", create folders named "frontend" and "backend".
Step 2: Setup Frontend Project
• Open a terminal and navigate to "ProjectDashboard/frontend".
• Create a new React.js application inside the "frontend" folder:
o npx create-react-app frontend
• Install required dependencies for React Router and CanvasJS:
o cd frontend
o npm i react-router-dom @canvasjs/react-charts
Step 3: Setup Backend Project
• Open a terminal and navigate to "ProjectDashboard/backend".
• Initialize a new Node.js application and install required dependencies:
o npm init -y
o npm install express mongoose body-parser cors dotenv
Step 4: Define Frontend Components
• Inside "frontend/src", create a folder named "components".
• Create the following components inside the "components" folder: Homepage.js,
Newproject.js, and Project.js.
• Implement the logic for each component based on the provided code.
Step 5: Define Backend Routes and Models
• Inside "backend", create folders named "models" and "routes".
• Define the MongoDB schema for the user in "models/user.js".
• Implement backend routes for handling homepage, new project creation, and project
update in "routes/homepage.js", "routes/newproject.js", and "routes/project.js"
respectively.
Step 6: Configure Express.js Server
• Create an index.js file inside the "backend" folder.
• Configure Express.js server, connect to MongoDB, and define routes in the index.js file.
• Start the Express server:
o node index.js
Step 7: Integrate Frontend and Backend
• Inside "frontend/src", configure API endpoints to make requests to the backend server (e.g.,
http://localhost:3001).
• Integrate frontend components with backend routes by making HTTP requests to the
corresponding endpoints.
Step 8: Run the Application
• Open two separate terminals: one for frontend and one for backend.
• Start the React development server for frontend:
o cd frontend
o npm start
• Start the Express.js server for backend (in the backend folder):
o cd backend
 o node index.j
Step 9: Access the Application
• Open a web browser and navigate to http://localhost:3000 to access the project management
dashboard.

Components Description:

FrontEnd

Homepage.js is a React functional component responsible for rendering the main page of the
project management dashboard. It includes features for searching existing projects and creating new
projects, allowing users to interact with the application through input fields, buttons, and dynamic
navigation.

Newproject.js is a React functional component representing the form for creating a new project
within the project management dashboard. It provides input fields for project details such as name,
aim, algorithm, program, and output. Users can input information, submit the form, and receive
feedback messages regarding the status of the project creation process.

Project.js is a React functional component responsible for displaying and managing project
details within the project management dashboard. It allows users to update project information,
visualize project data using a pie chart, and provides options to view or hide the chart report based
on user interaction. The component communicates with the backend to handle data updates and chart
rendering.

App.js is the main component of the project management dashboard frontend. It defines the
application routes using React Router, allowing navigation between the homepage, new project
creation, and project details display components. It serves as the entry point for rendering different
sections of the dashboard based on user interactions and URL paths.

index.js is the entry file of the React application. It initializes the ReactDOM rendering process,
wrapping the App component with BrowserRouter to enable routing functionality. The rendered
content is injected into the HTML element with the ID 'root', effectively displaying the entire project
management dashboard in the web browser.

Backend

user.js is a Mongoose schema file defining the structure of the 'User' model for the MongoDB
database. It specifies the properties of a project, including project name, aim, algorithm, program,
and output. The schema ensures data consistency and integrity when interacting with the MongoDB
database in the backend of the project management system.

homepage.js is an Express route file handling POST requests related to project details retrieval. It
queries the MongoDB database for a specific project name, validates the existence of the project, and
returns relevant project information, including ID, aim, algorithm, program, and output. If the project
doesn't exist, it responds with an error message or a success message with project details if found,
ensuring proper communication between the frontend and backend of the project management
system.

newproject.js is an Express route file handling POST requests for creating new projects. It
checks if the project with the given name already exists in the MongoDB database. If not, it creates a
new project entry with provided details including project name, aim, algorithm, program, and output.
It responds with a success message if the project is added successfully or an error message in case of
server issues, ensuring proper project creation functionality in the backend of the project
management system.
project.js is an Express route file handling POST requests for updating existing projects. It searches
for a project by its name in the MongoDB database. If found, it updates the project details including
aim, algorithm, program, and output. It responds with a success message upon successful update,
or an error message if the project is not found or if there are server issues, ensuring properproject
update functionality in the backend of the project management system.

index.js is the main entry point of the backend application for the PROJECTDASHBOARD. It
configures an Express server, establishes a connection to MongoDB, sets up middleware for
handling JSON data and enabling CORS, defines routes for homepage, new project creation, and
project updates, and starts the server on a specified port. This file orchestrates the backend
functionality, ensuring proper communication between the frontend and the database, allowing
seamless management of projects within the dashboard.
Result:

Thus the Project Management Dashboard has been developed for enabling users to seamlessly add
tasks and update statuses, enhancing task tracking and management efficiency. The system streamlines
project progress, fostering effective collaboration and organization.
This experiment is mapped with PO1, PO2, PO3, PO4, PO5, PO6, PO7, PO8, PO9, PO10, PO11, PO12
and PSO1, PSO2 & PSO3.
 8. Develop an online survey application where a collection of questions is available and usersare
asked to answer any random 5 questions.

Aim

To create an online survey application with a diverse collection of questions, allowing users to
answer random queries, enhancing their engagement and feedback participation.

Steps to Implement:

Step 1: Create a new folder named "SURVEY".

Step 2: Inside the "SURVEY" folder, create a frontend application:
 Open a new terminal.
 Navigate to the "SURVEY" folder (cd SURVEY).
 Run the following commands:
o mkdir frontend
o cd frontend
o npx create-react-app frontend
o npm i react-router-dom
o npm install --save recharts
Step 3: Create the frontend components and styles:
 Inside the "SURVEY/frontend/src" folder:
o Create a folder named "components".
o Inside the "components" folder, create three files: "Login.js", "Signup.js", and"Survey.js".
o Create a CSS file for styling named "Survey.css".
o Copy and paste the respective code for each file.Step
4: Set up the backend application:
 Inside the "SURVEY" folder, create a backend application:
o Open a new terminal.
o Run the following commands:
 mkdir backend
 cd backend
 npm init -y
 npm install express mongoose body-parser bcrypt cors dotenv
 mkdir models
 mkdir routes
Step 5: Create backend routes and models:
 Inside the "SURVEY/backend/models" folder, create a file named "survey.js". Copy and pastethe
code for the mongoose schema.
 Inside the "SURVEY/backend/routes" folder, create three files: "login.js", "signup.js", and
"survey.js". Copy and paste the respective code for each file.
Step 6: Set up the backend server:
 Inside the "SURVEY/backend" folder, create a file named "index.js". Copy and paste thecode
for setting up the Express server.
Step 7: Run the application:
 Open two separate terminals.
 In the first terminal, navigate to "SURVEY/frontend" and run npm start to start the frontend
application.
 In the second terminal, navigate to "SURVEY/backend" and run node index.js to start the
backend server.
Step 8: Access the application:
 Open a web browser and go to "http://localhost:3000" to access the frontend application.
Components Description:

FrontEnd

Login.js component handles user authentication by allowing users to enter their username and
password. It sends a request to the server for validation, and if successful, it redirects the user to the
survey page. Users can also navigate to the signup page by clicking the "Signup" link.

Signup.js component enables users to create new accounts by providing a username, password,
and registration number. Upon submission, it sends the user data to the server for registration. Users
can also navigate back to the login page by clicking the "Login" link.

Survey.js is a React component that displays a student survey form, allowing users to provide
feedback on instructors and class experiences. Users select staff members, answer survey questions,
and submit responses, which are then visualized using a bar chart. Additionally, users can review
previous survey responses.

Survey.css is a cascading style sheet (CSS) file defining the styles for the survey form interface.
It specifies the layout, colors, and animations, enhancing the visual presentation of the survey
components. The styles include responsive design, button formatting, and a fade-in animation for
smooth user experience.

App.js is the main entry point of the React application. It defines the routes for different
components (Login, Signup, and Survey) using the React Router library, allowing users to navigate
between login, signup, and survey interfaces within the application.

index.js serves as the entry point for the React application, rendering the main App component
within the BrowserRouter provided by React Router. It establishes the connection between the React
app and the HTML root element, allowing the application components to be displayed in the
specified DOM element.

Backend:

survey.js defines a Mongoose schema for user data in a MongoDB database. It specifies the
structure of user documents, including fields like username, password, regno, and ratings for
different staff members (Manivannan, Nelson, Kosalairaman, MaheshKumar, Gobinath,
Umamaheswari). The schema is used to create a Mongoose model called User, which can be
manipulated to interact with the MongoDB database.

login.js is an Express.js route module responsible for handling user authentication during login. It
receives a POST request with username and password parameters, queries the database for a
matching user, and validates the provided password. If authentication succeeds, it sends a JSON
response indicating a successful login along with the user's ID, name, and registration number. If
authentication fails, it returns an error message and a 401 status code.

signup.js is an Express.js route module responsible for handling user registration. It receives a
POST request with username, password, and regno parameters, checks if the user already exists in
the database, and creates a new user entry if not. The module hashes the password, stores user
information in the database, and returns a JSON response indicating a successful signup or an error
message with a 500 status code in case of server issues.
 survey.js is an Express.js route module responsible for handling survey-related requests. It includes
endpoints for updating survey responses based on staff members, calculating response sums, and
retrieving user survey data by ID. The module communicates with the MongoDB database using
Mongoose to perform these operations.

index.js in the SURVEY/backend/ directory sets up an Express.js server that listens for incoming
requests on a specified port. It establishes a connection to a MongoDB database, uses middleware for
handling JSON data and enabling CORS, and defines routes for login, signup, and survey-related
opations, ensuring the backend functionality for the survey application.
Result:

Thus the interactive online survey platform has been developed successfully, for enabling users to
answer diverse questions randomly, promoting active engagement and providing valuable feedback for
academic research purposes.
This experiment is mapped with PO1, PO2, PO3, PO4, PO5, PO6, PO7, PO8, PO9, PO10, PO11,
PO12 and PSO1, PSO2 & PSO3.