IT3511 - FULL STACK WEB DEVELOPMENT LABORATORY
LIST OF EXPERIMENTS: TOTAL: 60 PERIODS
1. Develop a portfolio website for yourself which gives details about yourself for a potential recruiter.
2. Create a web application to manage the TO-DO list of users, where users can login and
manage their to-do items.
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.
4. Create a food delivery website where users can order food from a particular restaurant listed in the
website.
5. Develop a classifieds web application to buy and sell used products.
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.
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, In Progress or
Completed.
8. Develop an online survey application where a collection of questions is available and users are asked to
answer any random 5 questions.
1
EXP No : 1 Develop a portfolio website for yourself which gives details about yourself for a
potential recruiter.
DATE :
AIM:
To develop a portfolio website using ReactJS.
PROGRAM:
App.js
import React from 'react';
import Header from './components/Header';
import Home from './components/Home';
import About from './components/About';
import Projects from './components/Projects';
import Contact from './components/Contact';
import './App.css';
function App() {
return (
<div className="App">
<Header />
<Home />
<About />
<Projects />
<Contact />
</div>
);
}
export default App;
About.js
import React from 'react';
function About() {
return (
<section id="about">
<h2>About Me</h2>
<p>I have several years of experience in front-end development and love working with React.js.</p>
</section>
);
}
export default About;
Contact.js
import React from 'react';
function Contact() {
return (
2
<section id="contact">
<h2>Contact Me</h2>
<p>Email: priya@example.com</p>
<p>Phone: 98342 78656</p>
</section>
);
}
export default Contact;
Header.js
import React from 'react';
function Header() {
return (
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
);
}
export default Header;
Home.js
import React from 'react';
import backgroundImage from '../images/images.png';
function Home() {
const backgroundStyle = {
backgroundImage: `url(${backgroundImage})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
minHeight: '100vh',
};
return (
<section id="home" style={backgroundStyle}>
<div className="content">
<h1>Welcome to My Portfolio</h1>
<p>Hi, I'm John Doe, a web developer passionate about creating amazing websites.</p>
</div>
</section>
3
);
}
export default Home;
Projects.js
import React from 'react';
import './Projects.css'; // Import the CSS file for styling
function Projects() {
return (
<div className="projects-container">
<h2>My Projects</h2>
<ul className="centered-list">
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
<li>Project 4</li>
<li>Project 5</li>
</ul>
</div>
);
}
export default Projects;
Projects.css
.projects-container {
text-align: center;
margin-top: 40px;
}
.centered-list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.centered-list li {
margin: 10px;
display: flex;
align-items: center;
}
.centered-list li::before {
content: '\2022'; /* Unicode bullet character (•) */
color: #333; /* Bullet color */
font-size: 16px;
4
margin-right: 10px;
}
App.css
.App {
text-align: center;
}
header {
background-color: #646ce0;
color: #fff;
padding: 20px;
}
nav ul li{
list-style: none;
padding: 0;
nav ul li {
display: inline;
margin-left: 20px;
}
h1,
h2 {
font-size: 24px;
margin: 20px 0;
}
section {
padding: 40px 0;
background-color: #f3f3f3;
#home {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
}
#home .content {
background-color: rgba(0, 0, 0, 0.7); /* You can adjust the background color and opacity */
padding: 20px;
}
}
5
EXP No : 2 Create a web application to manage the TO-DO list of users, where users can
login and manage their to-do items
DATE :
AIM:
To Create a web application to manage the TO-DO list of users, where users can login and manage their to-do items
using JavaScript.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD +dH /1fQ784/j6cY/
iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="app.js"></script>
<title>To Do List</title>
</head>
<body>
<header class="bg-success text-white p-5">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<font face="Comic sans MS" size="11" color="black">
<strong>ToDo List</strong>
</font>
</div>
</div>
</div>
</header>
<div class="container mt-3">
<h2>Add Items</h2>
<label id="lblsuccess" class="text-success" style="display: none;">
</label>
<form id="addForm">
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-7">
<input type="text" onkeyup="toggleButton(this, 'submit')" class="form-control" id="item">
</div>
<div class="col-lg-5 col-md-5 col-sm-5">
<input type="submit" class="btn btn-dark" id="submit" value="Submit" disabled>
</div>
</div>
6
</form>
<h3 class="mt-4">Tasks</h3>
<form id="addForm">
<ul class="list-group" id="items"></ul>
</form>
</div>
</body>
</html>
<script>
window.onload = () => {
const form1 = document.querySelector("#addForm");
let items = document.getElementById("items");
let submit = document.getElementById("submit");
let editItem = null;
form1.addEventListener("submit", addItem);
items.addEventListener("click", removeItem);
};
function addItem(e)
{
e.preventDefault();
if (submit.value != "Submit")
{
console.log("Hello");
editItem.target.parentNode.childNodes[0].data = document.getElementById("item").value;
submit.value = "Submit";
document.getElementById("item").value = "";
document.getElementById("lblsuccess").innerHTML= "Text edited successfully";
document.getElementById("lblsuccess")
.style.display = "block";
setTimeout(function() { document.getElementById("lblsuccess").style.display = "none"; }, 3000);
return false;
}
let newItem = document.getElementById("item").value;
if (newItem.trim() == "" || newItem.trim() == null)
return false;
else
document.getElementById("item").value = "";
let li = document.createElement("li");
li.className = "list-group-item";
let deleteButton = document.createElement("button");
deleteButton.className = "btn-danger btn btn-sm float-right delete";
deleteButton.appendChild(document.createTextNode("Delete"));
let editButton = document.createElement("button");
editButton.className = "btn-success btn btn-sm float-right edit";
editButton.appendChild(document.createTextNode("Edit"));
li.appendChild(document.createTextNode(newItem));
li.appendChild(deleteButton);
7
li.appendChild(editButton);
items.appendChild(li);
}
function removeItem(e) {
e.preventDefault();
if (e.target.classList.contains("delete")) {
if (confirm("Are you Sure?")) {
let li = e.target.parentNode;
items.removeChild(li);
document.getElementById("lblsuccess").innerHTML= "Text deleted successfully";
document.getElementById("lblsuccess").style.display = "block";
setTimeout(function(){document.getElementById("lblsuccess"). style.display = "none";
}, 3000);
}
}
if (e.target.classList.contains("edit")) {
document.getElementById("item").value = e.target.parentNode.childNodes[0].data;
submit.value = "EDIT";
editItem = e;
}
}
function toggleButton(ref, btnID) {
document.getElementById(btnID).disabled = false;
}
</script>
8
EXP 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.
DATE :
PROGRAM:
Header.js
import React from 'react';
const Header = () => {
return (
<header>
<h1>Microblogging App</h1>
</header>
);
};
export default Header;
UserCard.js
import React, { useState } from 'react';
const UserCard = ({ user, onFollowToggle }) => {
const [isFollowing, setIsFollowing] = useState(false);
const handleFollowToggle = () => {
setIsFollowing(!isFollowing);
onFollowToggle(user.id, !isFollowing);
};
return (
<div className="user-card">
<h3>{user.name}</h3>
<p>{user.bio}</p>
<button onClick={handleFollowToggle}>
{isFollowing ? 'Unfollow' : 'Follow'}
</button>
</div>
);
};
9
export default UserCard;
PostCard.js
import React from 'react';
const PostCard = ({ post }) => {
return (
<div className="post-card">
<h3>{post.title}</h3>
<p>{post.content}</p>
<p>By {post.author}</p>
</div>
);
};
export default PostCard;
Dashboard.js
import React, { useState } from 'react';
import UserCard from './UserCard';
import PostCard from './PostCard';
const Dashboard = () => {
// Static data for users and posts
const [users] = useState([
{ id: 1, name: 'John Doe', bio: 'Frontend Developer' },
{ id: 2, name: 'Jane Smith', bio: 'Backend Developer' },
]);
const [posts] = useState([
{ id: 1, title: 'My First Post', content: 'Hello, world!', author: 'John Doe' },
{ id: 2, title: 'Exciting News', content: 'Just launched my new website!', author: 'Jane Smith' },
]);
const [following, setFollowing] = useState([]);
const handleFollowToggle = (userId, isFollowing) => {
if (isFollowing) {
setFollowing([...following, userId]);
10
} else {
setFollowing(following.filter((id) => id !== userId));
}
};
return (
<div className="dashboard">
<h2>Dashboard</h2>
<div className="user-list">
{users.map((user) => (
<UserCard
key={user.id}
user={user}
onFollowToggle={handleFollowToggle}
/>
))}
</div>
<h3>Posts</h3>
<div className="post-list">
{posts
.filter((post) => following.includes(users.find((user) => user.name === post.author).id))
.map((post) => (
<PostCard key={post.id} post={post} />
))}
</div>
</div>
);
};
export default Dashboard;
App.js
import React from 'react';
import './App.css';
import Header from './components/Header';
import Dashboard from './components/Dashboard';
const App = () => {
return (
<div className="app">
<Header />
11
<Dashboard />
</div>
);
};
export default App;
App.css
.app {
text-align: center;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
.user-card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
.post-card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
}
12
EXP No : 4 Create a food delivery website where users can order food from a particular
restaurant listed in the website.
DATE :
AIM:
To Create a food delivery website where users can order food from a particular restaurant listed in the website using
ReactJS.
PROGRAM:
Header.js
import React from 'react';
const Header = () => {
return (
<header>
<h1>Food Delivery App</h1>
</header>
);
};
export default Header;
RestaurantList.js
import React, { useState } from 'react';
import Menu from './Menu';
const RestaurantList = () => {
const [selectedRestaurant, setSelectedRestaurant] = useState(null);
const restaurants = [
{ id: 1, name: 'Restaurant A' },
{ id: 2, name: 'Restaurant B' },
// Add more restaurants here...
];
13
const handleRestaurantSelect = (restaurant) => {
setSelectedRestaurant(restaurant);
};
return (
<div className="restaurant-list">
<h2>Restaurants</h2>
<ul>
{restaurants.map((restaurant) => (
<li key={restaurant.id} onClick={() => handleRestaurantSelect(restaurant)}>
{restaurant.name}
</li>
))}
</ul>
{selectedRestaurant && <Menu restaurant={selectedRestaurant} />}
</div>
);
};
export default RestaurantList;
Menu.js
import React, { useState } from 'react';
import CartItem from './CartItem';
const Menu = ({ restaurant }) => {
const [cart, setCart] = useState([]);
const menuItems = [
{ id: 1, name: 'Item 1', price: 10 },
{ id: 2, name: 'Item 2', price: 15 },
14
// Add more menu items here...
];
const addToCart = (item) => {
setCart((prevCart) => [...prevCart, item]);
};
return (
<div className="menu">
<h3>{restaurant.name} Menu</h3>
<ul>
{menuItems.map((item) => (
<li key={item.id}>
{item.name} - ${item.price}{' '}
<button onClick={() => addToCart(item)}>Add to Cart</button>
</li>
))}
</ul>
<div className="cart">
<h4>Cart</h4>
<ul>
{cart.map((item) => (
<CartItem key={item.id} item={item} />
))}
</ul>
</div>
</div>
);
};
export default Menu;
CartItem.js
15
import React from 'react';
const CartItem = ({ item }) => {
return (
<li>
{item.name} - ${item.price}
</li>
);
};
export default CartItem;
App.js
import React from 'react';
import './App.css';
import Header from './components/Header';
import RestaurantList from './components/RestaurantList';
const App = () => {
return (
<div className="app">
<Header />
<RestaurantList />
</div>
);
};
export default App;
16
EXP No : 5
DATE : Develop a classifieds web application to buy and sell used products.
AIM:
To develop a classifieds web application to buy and sell used products using ReactJS.
PROGRAM:
Header.js
import React from 'react';
const Header = () => {
return (
<header>
<h1>Classifieds - Buy & Sell Used Products</h1>
</header>
);
};
export default Header;
ProductList.js
import React, { useState } from 'react';
const ProductList = () => {
const [products, setProducts] = useState([
{ id: 1, title: 'Used Laptop', description: 'Good condition, 1-year-old laptop for sale.', price: 300 },
{ id: 2, title: 'Old Smartphone', description: 'Selling a used smartphone in working condition.', price: 100 },
// Add more products here...
]);
return (
<div className="product-list">
<h2>Used Products Listing</h2>
<ul>
17
{products.map((product) => (
<li key={product.id}>
<h3>{product.title}</h3>
<p>{product.description}</p>
<p>Price: ${product.price}</p>
</li>
))}
</ul>
</div>
);
};
export default ProductList;
App.js
import React from 'react';
import './App.css';
import Header from './components/Header';
import ProductList from './components/ProductList';
const App = () => {
return (
<div className="app">
<Header />
<ProductList />
</div>
);
};
export default App;
18
EXP 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
DATE : view the available number of days
AIM:
To 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 using Javascript.
PROGRAM:
filename.html
<!DOCTYPE html>
<html>
<head>
<title>Leave Management System</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Leave Management System</h1>
<div id="leaveForm">
<h2>Apply for Leave</h2>
<label for="leaveType">Leave Type:</label>
<select id="leaveType">
<option value="casual">Casual Leave</option>
<option value="medical">Medical Leave</option>
</select>
<label for="leaveDays">Number of Days:</label>
<input type="number" id="leaveDays" min="1">
<button onclick="applyLeave()">Apply Leave</button>
</div>
<div id="leaveBalance">
<h2>Available Leave Days</h2>
<p id="casualLeaveBalance">Casual Leave: <span id="casualLeaveDays">-</span></p>
<p id="medicalLeaveBalance">Medical Leave: <span id="medicalLeaveDays">-</span></p>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
h1 {
19
color: #007bff;
}
#leaveForm {
margin-bottom: 20px;
}
#leaveForm label {
margin-right: 10px;
}
#leaveBalance {
border: 1px solid #ccc;
padding: 10px;
display: inline-block;
}
button {
margin-top: 10px;
}
script.js
// Function to apply for leave
function applyLeave() {
const leaveType = document.getElementById("leaveType").value;
const leaveDays = parseInt(document.getElementById("leaveDays").value);
if (!leaveDays || leaveDays <= 0) {
alert("Please enter a valid number of leave days.");
return;
}
let leaveBalance = getLeaveBalance();
if (!leaveBalance[leaveType]) {
leaveBalance[leaveType] = 0;
}
if (leaveBalance[leaveType] + leaveDays > 30) {
alert("Insufficient leave balance. You cannot apply for more than 30 days in total.");
return;
}
leaveBalance[leaveType] += leaveDays;
setLeaveBalance(leaveBalance);
updateLeaveDisplay();
}
// Function to get leave balance from local storage
function getLeaveBalance() {
const leaveBalanceStr = localStorage.getItem("leaveBalance");
if (leaveBalanceStr) {
return JSON.parse(leaveBalanceStr);
}
20
return {};
}
// Function to set leave balance in local storage
function setLeaveBalance(leaveBalance) {
localStorage.setItem("leaveBalance", JSON.stringify(leaveBalance));
}
// Function to update the leave display on the UI
function updateLeaveDisplay() {
const leaveBalance = getLeaveBalance();
const casualLeaveTaken = leaveBalance.casual ? leaveBalance.casual : 0;
const medicalLeaveTaken = leaveBalance.medical ? leaveBalance.medical : 0;
const casualLeaveRemaining = 10 - casualLeaveTaken; // Assuming 10 casual leave days allowed
const medicalLeaveRemaining = 20 - medicalLeaveTaken; // Assuming 20 medical leave days allowed
document.getElementById("casualLeaveDays").textContent = casualLeaveRemaining;
document.getElementById("medicalLeaveDays").textContent = medicalLeaveRemaining;
}
// Load leave balance on page load
window.onload = function() {
updateLeaveDisplay();
}
21
EXP No : 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
DATE : tasks can be changed among Pending, InProgress or Completed.
AIM:
To develop a simple dashboard for project management where the statuses of various tasks are available and
new tasks can be added and the status of existing tasks can be changed among Pending, InProgress or
completed status will be displayed using ReactJS.
PROGRAM:
TaskForm.js
import React, { useState } from 'react';
const TaskForm = ({ onAddTask }) => {
const [task, setTask] = useState('');
const [project, setProject] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (task.trim() !== '' && project.trim() !== '') {
onAddTask(task, project);
setTask('');
setProject('');
}
};
return (
<div>
<h2>Add New Task</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Enter new task..."
22
/>
<input
type="text"
value={project}
onChange={(e) => setProject(e.target.value)}
placeholder="Enter project name..."
/>
<button type="submit">Add Task</button>
</form>
</div>
);
};
export default TaskForm;
TaskList.js
import React from 'react';
const TaskList = ({ tasks, onStatusChange }) => {
return (
<div>
<h2>Task List</h2>
<ul>
{tasks.map((task, index) => (
<li key={index} className={task.status.toLowerCase()} onClick={() => onStatusChange(index)}>
{task.description} - {task.project} ({task.status})
</li>
))}
</ul>
</div>
);
};
export default TaskList;
23
App.js
import React, { useState } from 'react';
import './App.css';
import TaskForm from './TaskForm';
import TaskList from './TaskList';
const App = () => {
const [tasks, setTasks] = useState([]);
const addTask = (description, project) => {
setTasks([...tasks, { description, project, status: 'Pending' }]);
};
const changeStatus = (index) => {
const newTasks = [...tasks];
const task = newTasks[index];
switch (task.status) {
case 'Pending':
task.status = 'InProgress';
break;
case 'InProgress':
task.status = 'Completed';
break;
case 'Completed':
task.status = 'Pending';
break;
default:
break;
}
setTasks(newTasks);
24
};
return (
<div className="App">
<h1>Task Management System</h1>
<TaskForm onAddTask={addTask} />
<TaskList tasks={tasks} onStatusChange={changeStatus} />
</div>
);
};
export default App;
App.css
.App {
text-align: center;
margin: 20px;
}
h1 {
color: #007bff;
}
form {
margin-bottom: 20px;
}
button {
margin-top: 10px;
}
ul {
list-style-type: none;
25
padding: 0;
}
li {
margin: 5px;
display: flex;
justify-content: space-between;
background-color: #f0f0f0;
padding: 5px;
cursor: pointer;
}
.completed {
background-color: #b3ffb3;
}
.in-progress {
background-color: #ffffb3;
}
26
EXP No : 8 Develop an online survey application where a collection of questions is available
and users are asked to answer any random 5 questions.
DATE :
AIM:
To develop an online survey application where a collection of questions is available and users are asked to answer
any random 5 questions using ReactJS.
PROGRAM:
Question.js
import React from 'react';
const Question = ({ question, onAnswer }) => {
return (
<div>
<h3>{question.text}</h3>
<div>
{question.options.map((option, index) => (
<div key={index}>
<input
type="radio"
id={option}
name={question.id}
value={option}
onChange={() => onAnswer(question.id, option)}
/>
<label htmlFor={option}>{option}</label>
</div>
))}
</div>
</div>
);
27
};
export default Question;
App.js
import React, { useState } from 'react';
import './App.css';
import Question from './Question';
const App = () => {
const [answers, setAnswers] = useState([]);
const [questions] = useState([
id: 1,
text: 'What is your favorite color?',
options: ['Red', 'Green', 'Blue', 'Yellow', 'Other'],
},
id: 2,
text: 'Which programming language do you prefer?',
options: ['JavaScript', 'Python', 'Java', 'C++', 'Other'],
},
id: 3,
text: 'What is your favorite animal?',
options: ['Dog', 'Cat', 'Elephant', 'Dolphin', 'Other'],
},
id: 4,
text: 'How do you like to spend your weekends?',
options: ['Reading', 'Watching Movies', 'Outdoor Activities', 'Gaming', 'Other'],
28
},
id: 5,
text: 'What type of music do you enjoy?',
options: ['Pop', 'Rock', 'Classical', 'Hip Hop', 'Other'],
},
]);
const handleAnswer = (questionId, option) => {
const updatedAnswers = answers.filter((answer) => answer.questionId !== questionId);
setAnswers([...updatedAnswers, { questionId, option }]);
};
return (
<div className="App">
<h1>Online Survey Application</h1>
<div>
{questions.map((question) => (
<Question key={question.id} question={question} onAnswer={handleAnswer} />
))}
</div>
<h2>Your answers:</h2>
<ul>
{answers.map((answer, index) => (
<li key={index}>
Question {answer.questionId}: {answer.option}
</li>
))}
</ul>
</div>
29
);
};
export default App;
App.css
.App {
text-align: center;
margin: 20px;
h1 {
color: #007bff;
ul {
list-style-type: none;
padding: 0;
li {
margin: 5px;
label {
margin-right: 5px;
30
