KEMBAR78
Full Stack Record | PDF | Html | Html Element
Scribd
Upload
9 views46 pages

Full Stack Record

The document outlines the development of a portfolio website and a web application for managing a TO-DO list. It includes detailed algorithms and code snippets for creating HTML pages, styling with CSS, and implementing JavaScript functionality for user interaction. Additionally, it describes a microblogging application using Node.js, focusing on user registration, following functionality, and content posting.

Uploaded by

shanoje.112250
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views46 pages

Full Stack Record

The document outlines the development of a portfolio website and a web application for managing a TO-DO list. It includes detailed algorithms and code snippets for creating HTML pages, styling with CSS, and implementing JavaScript functionality for user interaction. Additionally, it describes a microblogging application using Node.js, focusing on user registration, following functionality, and content posting.

Uploaded by

shanoje.112250
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

Exp No.

1 Date:

Develop a portfolio website for yourself which gives details about


yourself for a potential recruiter

Aim:
To Develop a portfolio website for yourself which gives details about yourself for a
potential recruiter using HTML and CSS.

Algorithm:
1. Initialize HTML Structure: Create a basic HTML structure with <!DOCTYPE html>
and <html lang="en">.
2. Setup Head Section: Include meta tags for character set and viewport, and link the
CSS file.
3. Create Header: Add a header section with the title "My Portfolio" and a navigation
bar with links to different pages.
4. Design Main Section: Set up a main section to contain content relevant to each
page (e.g., personal details, academic details, projects, contact).
5. Insert Image: Include a relevant image for each page, centered within the section.
6. Add Content: Add headings and paragraphs with personal information, academic
qualifications, project details, or contact information.
7. Ensure Consistency: Maintain a consistent layout and style across all pages using
the same header, footer, and CSS.
8. End: Finalize each HTML file and ensure all links navigate correctly to their
respective pages.

Program:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="index.html">Personal Details</a></li>
<li><a href="academic.html">Academic Details</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<center><img src="images1.jpg" alt="A descriptive text for the image"></center>
<h2>Personal Details</h2>
<p>Welcome to my portfolio. Here are some personal details about me.</p>
<p>Name: Josevan Roy K</p>
<p>Age: 20</p>
<p>Bio: I am a student.</p>
</section>
</main>
</body>
</html>

Academic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Academic Details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="index.html">Personal Details</a></li>
<li><a href="academic.html">Academic Details</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<center><img src="images2.jpeg" alt="A descriptive text for the image"></center>
<h2>Academic Details</h2>
<p>Here are my academic qualifications.</p>
<p>Degree: Bachelor of Engineering in Computer Science</p>
<p>Institution: St.Xavier's Catholic College of Engineering(Autonomous)</p>
<p>Year of Graduation: 2026</p>
</section>
</main>
</body>
</html>
Projects.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="index.html">Personal Details</a></li>
<li><a href="academic.html">Academic Details</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<center><img src="images3.jpeg" alt="A descriptive text for the image"></center>
<h2>Projects</h2>
<p>Here are some of the projects I've worked on.</p>
<ul>
<li>Project 1: Website design</li>
<li>Project 2: School Management System</li>
</ul>
</section>
</main>
</body>
</html>

Contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="index.html">Personal Details</a></li>
<li><a href="academic.html">Academic Details</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<center><img src="images4.png" alt="A descriptive text for the image"></center>
<h2>Contact</h2>
<p>Feel free to get in touch with me!</p>
<p>Email: josevan.112208@sxcce.edu.in</p>
<p>Phone no: +91 8838542341</p>
</section>
</main>
</body>
</html>

Style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #0077cc;
color: white;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
h2 {
color: #0077cc;
}
Output:
Conclusion:
Thus, the program to Develop a portfolio website for yourself which gives details about
yourself for a potential recruiter has been executed successfully.
Exp No.: 2 Date:

Create a web application to manage the TO–DO list of users,


where users can login and manage their to–do items.

Aim:
To develop a web application to manage the TO–DO list of users, where users can
login and manage their to–do items.

Algorithm:
1. Create HTML Structure: Set up loginpage.html and todopage.html with
appropriate HTML tags.
2. Design Login Form: Include input fields for username and password in
loginpage.html.
3. Implement JavaScript Validation: Write a validate() function to check the
username and password against a predefined list.
4. Handle Form Submission: Use the onsubmit event to trigger the validation
function and redirect to the To-Do page if successful.
5. Setup To-Do App Interface: In todopage.html, display the app title and an "Add
Task" button.
6. Implement Task Management: Write functions to add tasks, save them in local
storage, and load existing tasks on page load.
7. Display Tasks: Create a dynamic list to show added tasks using an unordered list
(<ul>) element.
8. Style the Application: Apply CSS for consistent layout and aesthetics across both
pages.

Program:
loginpage.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo App</title>
<link rel="stylesheet" href="styles/login_style.css">
<script>
var userlist = ["112210", "112206", "112236"];
var login_password = "cse"
function validate() {
var password = document.getElementById("password").value;
var username = document.getElementById("username").value;
for (var i = 0; i < userlist.length; i++) {
if ((userlist[i] == username) && (password == login_password)) {
return true;
}
else {
alert("You are not an user");
return false;
}
}
}
</script>
</head>
<body>
<div class="login">
<h1 id="login-form">Login</h1>
<form action="todoAppPage.html" id="loginvalidation" onsubmit="return validate()">
<label for="username">Username:</label> <input type="text" name="username"
id="username">
<br>
<br>
<label for="password">Password: </label><input type="password"
name="password" id="password">
<br>
<br>
<button type="submit" style="display:block;auto">Login</button>
</div>
</form>
</body>
</html>

todopage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO App</title>
</head>
<body>
<h1 id="App-Bar">TODO APP</h1>
<br>
<br>
<button onclick="addTask()">Add a task</button>
<ul id="dynamic-list"></ul>
<script>
window.onload = function () {
loadTasks();
};
function addTask() {
var taskname = prompt("Enter the task:");
if (!taskname) return;
var time = prompt("Enter the time and date:");
var task = {
taskname: taskname,
time: time
};
saveTask(task);
addTaskToList(task);
}

function saveTask(task) {
var tasks = JSON.parse(localStorage.getItem("tasks")) || [];
tasks.push(task);
localStorage.setItem("tasks", JSON.stringify(tasks));
}

function loadTasks() {
var tasks = JSON.parse(localStorage.getItem("tasks")) || [];
tasks.forEach(function (task) {
addTaskToList(task);
});
}

function addTaskToList(task) {
var taskList = document.getElementById("dynamic-list");
var newTask = document.createElement("li");
newTask.classList.add("taskItem");
newTask.innerHTML = `<strong>Task:</strong> ${task.taskname} <br>
<strong>Time:</strong> ${task.time}`;
taskList.appendChild(newTask);
}
</script>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 0;
}

.login {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: solid 2px #333;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

#login-form {
color: rgb(43, 43, 229);
text-align: center;
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
}
input{
width: 100%;
padding: 10px;
margin: 5px 0 15px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
background-color: #0077cc;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #005fa3;
}

#App-Bar {
background-color: aqua;
text-align: center;
padding: 10px 0;
border: solid black 1px;
}
ul {
list-style-type: none;
padding: 0;
}

li {
background-color: #e0f7fa;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
}
Output:
Conclusion:
Thus, the program to Create a web application to manage the TO–DO list of users,
where users can login and manage their to–do items has been executed success fully.
Exp No.: 3 Date:

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 people who follow them.

Algorithm:
1. Create the folder micro-blogging-app
2. Create the sub folder models, routes, public
3. Initialize a Node.js project ( open terminal run the following command : npm init -y)
4. Install necessary dependencies:
(open terminal run the following command : npm install express mongoose)
5. Create the following files.

Program:
1. User Model (models/User.js):
const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema({
username: { type: String, required: true, unique: true },
email: { type: String, required: true, unique: true },
followers: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],
following: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }]
});
module.exports = mongoose.model('User', UserSchema);

2. Post Model (models/Post.js):


const mongoose = require('mongoose');
const PostSchema = new mongoose.Schema({
content: { type: String, required: true },
author: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
createdAt: { type: Date, default: Date.now }
});
module.exports = mongoose.model('Post', PostSchema);

3. User Routes (routes/user.js):


const express = require('express');
const User = require('../models/User');
const router = express.Router();
router.post('/register', async (req, res) => {
try {
const { username, email } = req.body;
const user = new User({ username, email });
await user.save();
res.status(201).json(user);
} catch (err) {
res.status(500).json({ error: err.message });
}
});

router.post('/follow/:id', async (req, res) => {


try {
const currentUser = await User.findById(req.body.userId);
const userToFollow = await User.findById(req.params.id);
currentUser.following.push(userToFollow._id);
userToFollow.followers.push(currentUser._id);
await currentUser.save();
await userToFollow.save();
res.json({ message: `Now following ${userToFollow.username}` });
} catch (err) {
res.status(500).json({ error: err.message });
}
});

router.get('/find/:username', async (req, res) => {


try {
const user = await User.findOne({ username: req.params.username });
if (!user) return res.status(404).json({ error: 'User not found' });
res.json(user);
} catch (err) {
res.status(500).json({ error: err.message });
}
});

module.exports = router;

4. Post Routes (routes/post.js:


const express = require('express');
const Post = require('../models/Post');
const User = require('../models/User');
const router = express.Router();

router.post('/create', async (req, res) => {


try {
const { content, userId } = req.body;
const post = new Post({ content, author: userId });
await post.save();
res.status(201).json(post);
} catch (err) {
res.status(500).json({ error: err.message });
}
});

router.get('/feed/:userId', async (req, res) => {


try {
const user = await User.findById(req.params.userId).populate('following');
const posts = await Post.find({ author: { $in: user.following }
}).populate('author');
res.json(posts);
} catch (err) {
res.status(500).json({ error: err.message });
}
});

module.exports = router;

5. Main Application File (app.js):


const express = require('express');
const mongoose = require('mongoose');
const path = require('path');
const userRoutes = require('./routes/user');
const postRoutes = require('./routes/post');
const app = express();

app.use(express.json());
app.use(express.static(path.join(__dirname, 'public')));

mongoose.connect('mongodb://localhost:27017/micro-blogging-app', {
useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('MongoDB connected'))
.catch(err => console.log(err));

app.use('/api/users', userRoutes);
app.use('/api/posts', postRoutes);

const PORT = 3000;


app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
6. public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Micro-Blogging App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Welcome to Micro-Blogging</h1>
<div id="userForm">
<h2>Register User</h2>
<input type="text" id="username" placeholder="Username">
<input type="email" id="email" placeholder="Email">
<button onclick="registerUser()">Register</button>
</div>
<div id="postForm">
<h2>Create Post</h2>
<textarea id="content" placeholder="Write your post..."></textarea>
<input type="hidden" id="userId">
<button onclick="createPost()">Post</button>
</div>
<div id="followForm">
<h2>Follow User</h2>
<input type="text" id="followUsername" placeholder="Username of user to
follow">
<button onclick="followUser()">Follow</button>
</div>
<h1>Your Feed</h1>
<input type="hidden" id="userId" value="userId1">
<div id="posts"></div>
<button onclick="loadFeed()">Load Feed</button>
</div>
<script src="app.js"></script>
</body>
</html>

7. public/style.css:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
width: 600px;
margin: 20px auto;
padding: 20px;
background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
}
textarea, input {
width: 100%;
padding: 10px;
margin: 5px 0;
}
button {
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
#posts {
margin-top: 20px;
}

8. public/app.js
function registerUser() {
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
fetch('/api/users/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, email })
})
.then(response => response.json())
.then(data => {
alert('User registered successfully!');
document.getElementById('userId').value = data._id;
})
.catch(err => console.error(err));
}

function createPost() {
const content = document.getElementById('content').value;
const userId = document.getElementById('userId').value;
fetch('/api/posts/create', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content, userId })
})
.then(response => response.json())
.then(data => {
alert('Post created successfully!');
loadFeed();
})
.catch(err => console.error(err));
}

function followUser() {
const followUsername = document.getElementById('followUsername').value;
const currentUserId = document.getElementById('userId').value;
fetch(`/api/users/find/${followUsername}`)
.then(response => response.json())
.then(userToFollow => {
if (!userToFollow) {
alert('User not found');
return;
}
fetch(`/api/users/follow/${userToFollow._id}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ userId: currentUserId })
})
.then(response => response.json())
.then(data => {
alert(`You are now following ${userToFollow.username}`);
})
.catch(err => console.error(err));
})
.catch(err => console.error(err));
}

function loadFeed() {
const userId = document.getElementById('userId').value;
fetch(`/api/posts/feed/${userId}`)
.then(response => response.json())
.then(posts => {
const postsDiv = document.getElementById('posts');
postsDiv.innerHTML = '';
posts.forEach(post => {
const postElement = document.createElement('div');
postElement.innerHTML = `<p><strong>${post.author.username}</strong>:
${post.content}</p>`;
postsDiv.appendChild(postElement);
});
})
.catch(err => console.error(err));
}

Output:
Conclusion:
Thus, the program to create a simple micro blogging application (like twitter)
that allows people to post their content which can be viewed by people who follow
them has been executed successfully.
Exp No.: 4 Date:

Create a grocery delivery website where users can order


from a particular shop listed in the website.

Aim:
To Create a grocery delivery website where users can order from a particular
shop listed in the website.

Algorithm:
1. Install Angular CLI using: npm install -g @angular/cli
2. Create a New Angular Project using: i) ng new grocery-delivery
ii)cd grocery-delivery.
3. Generate Components and Service:
• ng generate component shop-list
• ng generate component shop-details
• ng generate component cart
• ng generate service shop
4. Configure Routing and Components
5. Create Models for Shop and Products
6. Implement the Shop Service
7. Add Environment Files
8. Add Environment Files
9. Configure Index File

Program:
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grocery Delivery App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<app-root></app-root>
</body>
</html>
src/main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
src/app/app.routes.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ShopListComponent } from './shop-list/shop-list.component';
import { ShopDetailsComponent } from './shop-details/shop-details.component';
import { CartComponent } from './cart/cart.component';

const routes: Routes = [


{ path: '', component: ShopListComponent },
{ path: 'shop/:id', component: ShopDetailsComponent },
{ path: 'cart', component: CartComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
src/app/app.component.ts:
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Grocery Delivery App';
}
src/app/shop.model.ts
export interface Product {
id: number;
name: string;
price: number;
}

export interface Shop {


id: number;
name: string;
products: Product[];
}
src/app/shop.service.ts
import { Injectable } from '@angular/core';
import { Shop, Product } from './shop.model';
@Injectable({
providedIn: 'root',
})
export class ShopService {
private shops: Shop[] = [
{
id: 1,
name: 'Green Grocer',
products: [
{ id: 1, name: 'Apple', price: 1.5 },
{ id: 2, name: 'Banana', price: 1.0 },
{ id: 3, name: 'Bread', price: 2.0 },
{ id: 4, name: 'Milk', price: 1.2 },
{ id: 5, name: 'Orange', price: 2.0 },
{ id: 6, name: 'Egg', price: 1.2 },
{ id: 7, name: 'Butter', price: 2.0 },
{ id: 8, name: 'Cake', price: 1.2 },
{ id: 9, name: 'Ghee', price: 2.0 },
{ id: 10, name: 'Almond', price: 1.2 },
],
},
{
id: 2,
name: 'Daily Mart',
products: [
{ id: 1, name: 'Apple', price: 1.5 },
{ id: 2, name: 'Banana', price: 1.0 },
{ id: 3, name: 'Bread', price: 2.0 },
{ id: 4, name: 'Milk', price: 1.2 },
{ id: 5, name: 'Orange', price: 2.0 },
{ id: 6, name: 'Egg', price: 1.2 },
{ id: 7, name: 'Butter', price: 2.0 },
{ id: 8, name: 'Cake', price: 1.2 },
{ id: 9, name: 'Ghee', price: 2.0 },
{ id: 10, name: 'Almond', price: 1.2 },
],
},
];
getShop(id: number): Shop | undefined {
return this.shops.find(shop => shop.id === id);
}

addToCart(product: Product): void {


this.cart.push(product);
}

getCart(): Product[] {
return this.cart;
}

clearCart(): void {
this.cart = [];
}
}
src/app/shop-list/shop-list.component.ts:
import { Component, OnInit } from '@angular/core';
import { ShopService } from '../shop.service';
import { Shop } from '../shop.model';

@Component({
selector: 'app-shop-list',
templateUrl: './shop-list.component.html',
styleUrls: ['./shop-list.component.css']
})
export class ShopListComponent implements OnInit {
shops: Shop[] = [];

constructor(private shopService: ShopService) {}

ngOnInit() {
this.shops = this.shopService.getShops();
}
}
src/app/shop-list/shop-list.component.html:
<div *ngFor="let shop of shops">
<h3>{{ shop.name }}</h3>
<a [routerLink]="['/shop', shop.id]">View Products</a>
</div>

src/app/shop-details/shop-details.component.ts

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { ShopService } from '../shop.service';

import { Shop, Product } from '../shop.model';


@Component({

selector: 'app-shop-details',

templateUrl: './shop-details.component.html',

styleUrls: ['./shop-details.component.css']

})

export class ShopDetailsComponent implements OnInit {

shop: Shop | undefined;

constructor(

private route: ActivatedRoute,

private shopService: ShopService

) {}

ngOnInit() {

const id = Number(this.route.snapshot.paramMap.get('id'));

this.shop = this.shopService.getShop(id);

addToCart(product: Product) {

this.shopService.addToCart(product);

alert(`${product.name} has been added to the cart!`);

}
src/app/shop-details/shop-details.component.html:

<h2>{{ shop?.name }}</h2>

<ul>

<li *ngFor="let product of shop?.products">

{{ product.name }} - ${{ product.price }}

<button (click)="addToCart(product)">Add to Cart</button>

</li>

</ul>

<a routerLink="/">Back to Shops</a>

src/app/cart/cart.component.ts:

import { Component, OnInit } from '@angular/core';

import { ShopService } from '../shop.service';

import { Product } from '../shop.model';

@Component({

selector: 'app-cart',

templateUrl: './cart.component.html',

styleUrls: ['./cart.component.css']

})

export class CartComponent implements OnInit {

cart: Product[] = [];

constructor(private shopService: ShopService) {}


ngOnInit() {

this.cart = this.shopService.getCart();

clearCart() {

this.shopService.clearCart();

this.cart = [];

src/app/cart/cart.component.html:
<h2>Your Cart</h2>
<ul *ngIf="cart.length > 0; else emptyCart">
<li *ngFor="let product of cart">
{{ product.name }} - ${{ product.price }}
</li>
</ul>
<ng-template #emptyCart>
<p>Your cart is empty.</p>
</ng-template>
<button (click)="clearCart()" *ngIf="cart.length > 0">Clear Cart</button>
<a routerLink="/">Back to Shops</a>

src/app/app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app.routes';
import { AppComponent } from './app.component';
import { ShopListComponent } from './shop-list/shop-list.component';
import { ShopDetailsComponent } from './shop-details/shop-details.component';
import { CartComponent } from './cart/cart.component';
import { ShopService } from './shop.service';

@NgModule({
declarations: [
AppComponent,
ShopListComponent,
ShopDetailsComponent,
CartComponent
],
imports: [BrowserModule, AppRoutingModule],
providers: [ShopService],
bootstrap: [AppComponent]
})
export class AppModule {}

src/environments/environment.ts:
export const environment = {
production: false
};

src/environments/environment.prod.ts:
export const environment = {
production: true
};

Output:
Conclusion:
Thus, the program to create a grocery delivery website where users can order
from a particular shop listed in the website has been executed successfully.
Exp No.:5 Date:

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 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.

Algorithm:
1. Set Up Your React Application
• npx create-react-app project-management-dashboard
• cd project-management-dashboard
2. Create the Task Management Components
3. Create the Task Component
4. Create the Dashboard Component
5. Update the App Component
6. Add Basic Styles

Program:
Task Component(src/Task.js):
import React from 'react';
const Task = ({ task, updateTaskStatus }) => {
return (
<div className= "task" >
<h3>{ task.name } </h3>
< p > Status: { task.status } </p>
< button onClick = {() => updateTaskStatus(task.id,
'Pending')}> Pending </button>
< button onClick = {() => updateTaskStatus(task.id, 'InProgress')}> In
Progress </button>
< button onClick = {() => updateTaskStatus(task.id,
'Completed')}> Completed </button>
</div>
);
};
export default Task;
Dashboard Component(src/Dashboard.js)
import React, { useState } from 'react';
import Task from './Task';
const Dashboard = () => {
const [tasks, setTasks] = useState([]);
const [taskName, setTaskName] = useState('');
const addTask = () => {
if (!taskName) return;
const newTask = {
id: tasks.length + 1,
name: taskName,
status: 'Pending',
};
setTasks([...tasks, newTask]);
setTaskName('');
};
const updateTaskStatus = (id, status) => {
setTasks(tasks.map(task => (task.id === id ? { ...task, status } : task)));
};
return (
<div className= "dashboard" >
<h1>Project Management Dashboard </h1>
< div >
<input
type="text"
value = { taskName }
onChange = {(e) => setTaskName(e.target.value)}
placeholder = "Add new task"
/>
<button onClick={ addTask }> Add Task </button>
</div>
< div className = "task-list" >
{
tasks.map((task) => (
<Task key= { task.id } task = { task } updateTaskStatus = {
updateTaskStatus } />
))
}
</div>
</div>
);
};
export default Dashboard;.

Update Component(src/App.js):
import React from 'react';
import Dashboard from './Dashboard';
import './App.css';
const App = () => {
return (
<div className= "App" >
<Dashboard />
</div>
);
};
export default App;
Add Styles (src/App.css):
.App {
font-family: Arial, sans-serif;
margin: 20px;
}
.dashboard {
max-width: 600px;
margin: 0 auto;
}
.task {
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.task-list {
margin-top: 20px;
}
input {
margin-right: 10px;
padding: 5px;
}
Output:
Conclusion:
Thus, the program to 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 has been
executed successfully

You might also like