fullstack-lab-manual

FULLSTACK WEB DEVELOPMENT LAP MANUAL
1 . Develop a portfolio website For Your Self
Aim :
Develop a portfolio Website for yourself which gives details about your self for a potential recruiter.
Procedure:
Step 1 : Open notepad or vs code Software.
Step 2 : Creating following File html.css and js.
Step 3 : Write your script on the files.
Step 4 : Run your code using Browser.
Source code :
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="css/style.css">


<link rel="shortcut icon" href="img/profile.jpg" type="image/x-icon">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/
css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN
26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Portfolio</title>
</head>
<body>

<ul class="website_container">

<div class="sidebar_container">

<div class="image">
<img src="img/profile.jpg" alt="John Roe">
<div class="right_image_box"></div>
<div class="left_image_box"></div>
</div>


<div class="sidebar_content">

<h1>John Roe</h1>
<p>Website Designer</p>

<div class="social_media">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>

<div class="content_container">

<div class="about_page">
<h2 class="title">About <span>Me</span></h2>
<hr class="line">
<div class="about_content">
<p class="about_text">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Eligendi numquam,
porro dolore aut, explicabo eius voluptates vitae fuga, minus quaerat dolor. Autem id
iure at
illum in cumque, quasi esse. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
In
quaerat error tempora incidunt rem voluptas accusamus perspiciatis itaque
exercitationem
voluptatem?</p>
</div>
<div class="about_profile">
<ul class="left_profile">
<li><span class="profile_title">Date of Birth</span><span>July 3,
2000</span></li>
<li><span class="profile_title">Gender</span><span>Male</span></li>
<li><span class="profile_title">Age</span><span>20 Years Old</span></li>
<li><span class="profile_title">Maritial
Status</span><span>Unmarried</span></li>
<li><span class="profile_title">Nationality</span><span>Nepali</span></li>
<li><span class="profile_title">Religion</span><span>Hindu</span></li>
</ul>
<ul class="right_profile">
<li><span class="profile_title">Profession</span><span>Web
Designer</span></li>
<li><span class="profile_title">Address</span><span>Jhapa, Nepal</span></li>
<li><span class="profile_title">Contact</span><span>+977
9800000000</span></li>
<li><span class="profile_title">Email</span><span>[email protected]</span></li>
<li><span class="profile_title">Website</span><span>mywebsite.com</span></li>
<li><span class="profile_title">Freelance</span><span>Available</span></li>
</ul>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
CSS :
/* Google Font */
@import url("https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,
300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* CSS Reset */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: "Poppins", sans-serif;
}
/* CSS Variables */
:root {
--brand-color: #00bfa6;
--linear-back: Linear-gradient(180deg,
rgba(34, 193, 195, 1) 0%,
rgba(0, 191, 92, 1) 100%);
}
a{
text-decoration: none;
color: black;
}
li {
list-style: none;
}
/* CSS in Body */
body {
height: 100vh;
width: 100vw;
background: var(--linear-back);
display: flex;
align-items: center;
justify-content: center;
}
.website_container {
width: 80%;
height: 80%;
display: flex;
padding: 1rem;
position: relative;
}
/* Sidebar */
.website_container .sidebar_container {
width: 35%;
height: 100%;
background-color: white;
margin-right: 1rem;
border-radius: 0.5rem;
overflow: hidden;
position: relative;
}
.sidebar_container .image {
height: 50%;
width: 100%;
position: relative;
}
.sidebar_container .image img {

width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.sidebar_container .image .right_image_box {

width: 70%;
height: 100px;
position: absolute;
bottom: -3.5rem;
left: -3rem;
transform: rotate(16deg);
}
.sidebar_container .image .left_image_box {

width: 70%;
height: 100px;
position: absolute;
bottom: -3.5rem;
right: -3rem;
transform: rotate(-16deg);
}
.sidebar_container .sidebar_content {
position: absolute;
width: 100%;
margin-top: 2rem;
text-align: center;
padding: 0.4rem;
}
.sidebar_container .sidebar_content h1 {
color: black;
font-size: 2rem;
font-weight: 600;
}
.sidebar_container .sidebar_content p {
color: var(--brand-color);
font-size: 1rem;
text-transform: uppercase;
font-weight: 700;
}
.sidebar_container .sidebar_content .social_media {

margin-top: 1rem;
}
.sidebar_container .sidebar_content .social_media a {

font-size: 1.8rem;
margin: 0.4rem;
color: black;
}
.sidebar_container .sidebar_content .social_media a:hover {

transition: 0.3s;
}
.sidebar_container .sidebar_buttom_menu {
position: absolute;
border-top: 0.2rem solid var(--brand-color);
width: 100%;
font-size: 1.6rem;
left: 0;
bottom: 0;
text-align: center;
cursor: pointer;
z-index: 3;
}
.sidebar_container .sidebar_buttom_menu:hover {
transition: 0.3s;
}
/* Sidebar Navigation */
.sidebar_container .sidebar_navigation {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
font-size: 2rem;
z-index: 2;
transition: left 0.3s;
}
.sidebar_container .sidebar_navigation li {
margin: 0.3rem 0;
}
.sidebar_container .sidebar_navigation li a:hover,

.sidebar_container .sidebar_navigation .active {
transition: 0.3s;
font-weight: bold;
}
/* Content */
.website_container .content_container {
width: 100%;
height: 100%;
padding: 1rem;
overflow-y: scroll;
}
.content_container::-webkit-scrollbar {
width: 0.2rem;
}
.content_container::-webkit-scrollbar-thumb {
width: 0.2rem;
background-color: gray;
}
/* About Page */
.title {
font-size: 1.6rem;
}
.title span {
}
.line {
width: 4rem;
border-top: 0.35rem solid black;
}
.about_page .about_content {
margin-top: 1.2rem;
padding: 0.4rem;
margin-bottom: 0.5rem;
}
.about_page .about_content p {
font-size: 1rem;
text-align: justify;
}
.about_profile {
display: flex;
justify-content: space-between;
padding: 0.4rem;
}
.about_profile .left_profile {
width: 46%;
}
.about_profile .left_profile li {
display: flex;
margin: 0.3rem 0;
font-size: 1rem;
}
.about_profile .right_profile {
width: 46%;
}
.about_profile .right_profile li {
display: flex;
margin: 0.3rem 0;
font-size: 1rem;
}
li .profile_title {
padding: 0.4rem;
background-color: var(--brand-color);
color: white;
}
/* Resume Page */
.resume_page .resume_container {
margin: 1.2rem 0;
display: flex;
}
.left_resume {
width: 100%;
padding: 0.6rem;
border-right: 0.2rem solid var(--brand-color);
}
.right_resume {
width: 100%;
padding: 0.6rem;
}
.resume_title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 1rem;
}
.resume_title i {
}
.resume_box {
margin: 1.5rem 0;
}
.resume_box .resume_date {
font-size: 1rem;
border: 0.1rem solid var(--brand-color);
padding: 0.1rem 0.2rem;
}
.resume_box .resume_box_title {
margin-top: 0.5rem;
font-size: 1.2rem;
font-weight: 500;
}
.resume_box .resume_company {
font-size: 1rem;
}
.resume_box .resume_text {
font-size: 1rem;
font-weight: 300;
}
/* Skills Container */
.skill_box .skill_title {
font-size: 1.2rem;
font-weight: 500;
}
.skill_box {
margin: 1rem 0;
}
.skill_box .skill_line_container {
height: 0.8rem;
width: 100%;
background-color: lightgray;
overflow: hidden;
}
.skill_box .skill_line {
height: 0.8rem;
}
/* Blogs Page */
.blogs_page .blogs_container {
margin: 0.4rem;
}
.blog_box {
margin-top: 1.2rem;
padding: 0.5rem;
}
.blog_box .blog_title {
font-size: 1.6rem;
font-weight: 600;
}
.blog_box .blog_text {
margin: 0.4rem 0;
font-size: 1rem;
font-weight: 400;
text-align: justify;
}
.blog_box .blog_image {
width: 100%;
height: auto;
}
/* Services Page */
.services_page .services_container {
margin: 1.2rem 0.4rem 0.4rem 0.4rem;
display: flex;
}
.services_page .services_container .services_box {

width: 50%;
margin: 0.6rem;
padding: 0.6rem;
text-align: center;
cursor: pointer;
}
.services_page .services_container .services_box:hover {

transition: 0.3s;
}
.services_page .services_container .services_box:hover i,

.services_page .services_container .services_box:hover .services_title {
color: white;
transition: 0.3s;
}
.services_box i {
font-size: 1.5rem;
margin: 0.3rem 0;
}
.services_box .services_title {
font-size: 1.2rem;
margin: 0.4rem 0;
}
.services_box .services_text {
font-size: 1rem;
font-weight: 400;
}
/* Contact Page */
.contact_page .contact_container {
margin: 1.2rem 0.4rem;
}
.contact_container form .form_name_row {

display: flex;
}
.contact_container form .form_name_row .left_form_row {

width: 47%;
}
.contact_container form .form_name_row .right_form_row {

width: 47%;
}
.contact_container form label {

display: block;
font-size: 1rem;
margin-top: 0.8rem;
margin-left: 0.2rem;
}
.contact_container form input {

width: 100%;
font-size: 1rem;
padding: 0.3rem;
border: none;
outline: none;
}
.contact_container form input:focus {

transition: 0.3s;
}
.contact_container form textarea {

width: 100%;
font-size: 1rem;
padding: 0.3rem;
border: none;
outline: none;
height: 6rem;
resize: none;
}
.contact_container form #send_button {

margin-top: 0.6rem;
color: white;
font-weight: bold;
cursor: pointer;
}
.contact_container form #send_button:hover {

opacity: 0.8;
transition: 0.3s;
}
/* Global Menu CSS */

#global_menu_button_container {
position: absolute;
left: -3rem;
display: none;
margin-top: 0.1rem;
}
#global_menu_button_container #global_menu_button {
font-size: 2rem;
padding: 0.8rem;
cursor: pointer;
}
#global_menu_button_container #global_menu_button:hover {
transition: 0.3s;
}
#global_menu_button_container p {
font-size: 1.4rem;
font-weight: bold;
display: none;
}
#global_menu_items {
position: fixed;
left: -120%;
/* left: 0; */
top: 0;
width: 40%;
height: 100vh;
z-index: 10;
display: flex;
transition: left 0.3s;
}
#global_menu_items div {
width: 80%;
margin-top: 4rem;
}
#global_menu_items li {
margin: 1rem 0;
}
#global_menu_items a {
display: block;
width: 100%;
border-bottom: 0.1rem solid var(--brand-color);
font-size: 1.4rem;
}
#global_menu_items a:hover {
transition: 0.3s;
}
#global_menu_items #global_menu_close_button {
position: absolute;
right: -3.3rem;
top: 0;
font-size: 2.6rem;
cursor: pointer;
}
#global_menu_items #global_menu_close_button:hover {
transition: 0.3s;
}
/* Making Responsive */
@media screen and (max-width: 1200px) {

width: 92%;
height: 92%;
}
}

body {
height: auto;
}
width: 70%;
}
.website_container .sidebar_container {
width: 100%;
height: 80vh;
margin-bottom: 1rem;
}
.about_profile {
}
.about_profile .left_profile {
width: 100%;
}
.about_profile .right_profile {
width: 100%;
}
display: block;
}
}

margin-top: 10vh;
}
.resume_page .resume_container {
}
.left_resume {
border-right: none;
border-bottom: 0.2rem solid var(--brand-color);
}
.services_page .services_container {
margin: 0;
}
.services_page .services_container .services_box {

width: 100%;
margin: 0.6rem 0;
}
.contact_container form .form_name_row {

}
.contact_container form .form_name_row .left_form_row {

width: 100%;
}
.contact_container form .form_name_row .right_form_row {

width: 100%;
}
position: fixed;
top: -0.1rem;
left: 0;
z-index: 5;
width: 100%;
height: 10vh;
display: flex;
padding: 0 1rem;
}
#global_menu_button_container #global_menu_button {
color: black;
background-color: transparent;
padding: 0.2rem;
font-size: 1.6rem;
}
#global_menu_button_container p {
display: block;
}
#global_menu_items {
width: 100%;
}
#global_menu_items #global_menu_close_button {
left: 0;
text-align: center;
}
}

height: 100%;
width: 100%;
}
}
JAVA SCRIPT:
let sidebar_navigation = document.getElementById('sidebar_navigation');
let sidebar_navigation_bottom = document.getElementById('sidebar_buttom_menu');
sidebar_navigation_bottom.addEventListener('click', function () {
if (sidebar_navigation.style.left == "" || sidebar_navigation.style.left == "-100%") {
sidebar_navigation.style.left = "0"
document.getElementById('sidebar_menu_icon').classList.add('fa-close');
}
else {
sidebar_navigation.style.left = "-100%"
document.getElementById('sidebar_menu_icon').classList.remove('fa-close');
}
})
let global_menu_buttom = document.getElementById('global_menu_button')

let global_navigation = document.getElementById('global_menu_items')
let global_close_buttom = document.getElementById('global_menu_close_button')
global_menu_buttom.addEventListener('click', function () {
global_navigation.style.left = "0";
})
global_close_buttom.addEventListener('click', function () {
global_navigation.style.left = "-120%";
})
Output:
2. Create a Web Application to manage the TO-DO list of users
AIM :
Create a web application to manage the TO-DO list of user, where users can login and manage
their to-do items.
Procedure:
Step 1 : Open notepad or vs code Software.

Step 2 : Creating following File html.css and js.
Step 3 : Write your script on the files.
Step 4 : Run your code using Browser.
Source Code :
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="script.js" defer></script>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/
all.min.css">
<title>TO-DO</title>
</head>
<body>
<div class="container-title">
<h1>To Do List</h1>
</div>
<div class="container">
<div class="inputcol">
<textarea name="text" class="textarea"></textarea>
<button type="button" class="buttoninput"><i class="fa-solid fa-check"></i></button>
</div>
</div>
<div class="todolist">
</div>
</body>
</html>
CSS :
*{
margin: 0;
padding: 0;
font-family: 'Times New Roman', Times, serif;
}
body {
background-image: linear-gradient(to right, #605e7e, #6b73c1, #37b3cc);
margin: 50px 2%;
}
/* container title */
.container-title {
font-size: 25px;
text-align: center;
margin: 0 0 30px 0;
color: white;
text-shadow: 3px 1px black;
}
/* container */
.inputcol {
display: grid;
column-gap: 5px;
grid-template-columns: 60% 10%;
margin-top: 10px;
}
.textarea {
min-height: 50px;
height: 50px;
max-width: 100%;
min-width: 100%;
border-radius: 10px;
border-color: #333;
font-size: 20px;
padding: 10px 10px;
overflow: auto;
overflow-x: hidden;
}
.textarea::-webkit-scrollbar-track {
background-color: #333;
}
.textarea::-webkit-scrollbar {
width: 10px;
cursor: pointer;
}
.textarea::-webkit-scrollbar-thumb {
background-color: #8f8acc;
cursor: pointer;
}
.textarea:focus {
outline: none;
}
.buttoninput {
border-color: #333;
font-size: 20px;
}
.buttoninput:hover {
background-color: #8f8acc;
color: white;
}
/* js */
.todolist {
margin-top: 20px;
}
.itemall {
display: grid;
grid-template-columns: 60% 5% 5%;
margin-bottom: 2px;
}
.item, .check-button, .trash-button {

border: none;
min-height: 50px;
padding: 10px 10px;
}
.item {
word-wrap: break-word;
word-break: break-all;
border-radius: 10px 0 0 10px;
display: grid;
align-content: center;
font-size: 20px;
}
.check-button, .trash-button {
font-size: 15px;
}
.trash-button {
border-radius: 0 10px 10px 0;
}
.check-button:hover {
background-color: #37b3cc;
color: white;
}
.trash-button:hover {
background-color: #6b73c1;
color: white;
}
.checklist {
text-decoration: line-through;
}
.fa-check, .fa-trash {
pointer-events: none;
}
button, .check-button, .trash-button {

cursor: pointer;
}
JAVA SCRIPT :
const inputtdl = document.querySelector('.textarea')

const buttontdl = document.querySelector('.buttoninput')
const listtdl = document.querySelector('.todolist')
function clickButton(e) {
e.preventDefault()
addTodo()
}
// adding todoList
function addTodo() {a
const itemall = document.createElement('div')
itemall.classList.add('itemall')
const item = document.createElement('p')

item.classList.add('item')
item.innerText = inputtdl.value
itemall.appendChild(item)
if (inputtdl.value === '') return
const checkbutton = document.createElement("button")

checkbutton.innerHTML = '<i class="fa-solid fa-check"></i>'
checkbutton.classList.add("check-button")
itemall.appendChild(checkbutton)
const trashbutton = document.createElement("button")

trashbutton.innerHTML = '<i class="fa-solid fa-trash"></i>'
trashbutton.classList.add("trash-button")
itemall.appendChild(trashbutton)
listtdl.appendChild(itemall)
inputtdl.value = ''
}
// checking and delete todoList

function okdel(e) {
const item = e.target
// check
if (item.classList[0] === 'check-button') {
const todolist = item.parentElement
todolist.classList.toggle('checklist')
}
// delete
if (item.classList[0] === 'trash-button') {
const todolist = item.parentElement
todolist.remove()
}
}
buttontdl.addEventListener('click', clickButton)
listtdl.addEventListener('click', okdel)
OUTPUT :
3. Create a simple micro blogging appplication(like twitter) that allows people to
post their content which can be viewed by people who follow them.
Aim:
To write a program for develop a simple micro blogging application that allows people to post their
content which can be viewed by people who follow them.
Procedure:
Step 1: Initially Install Node.js and npm from the official website “Node.js”.
Step 2: Create a new React app “npx create-react-app <Project Name>” by using this command in
Terminal.
Step 3: Install the Dependencies for Routing “npm install react-router-dom”.
RUN COMMAND:
Go to the React app directory and run the app
cd <Project Name>
npm start
File and Folder Structure:
node_modules (Folder):
The node_modules folder is not typically found in a React project's source code, as it's more
commonly associated with Node.js and server-side JavaScript projects. In React projects, especially
those created using tools like Create React App, dependencies are managed through the
package.json file, and the actual packages (node modules) are stored in the node_modules directory
at the root of your project.
Public (Folder):
The contents of the public folder are typically served as-is to the client side without going through
the bundling process.
Src (Folder):
In a React application, the src folder is a common convention used to organize your source code.
Components (folder):
In a React application, organizing your components in separate folders or directories is a common
practice to keep your codebase clean, maintainable, and easy to navigate. index.js (file):
In a React application, the index.js file is a crucial entry point for rendering your React components
and initializing the application.
App.js (file):
In a React application, the App.js file is typically used as the main or root component of your
application.
Program:
src Dir:
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
App.js:
import { Redirect, Route, Switch } from 'react-router-dom';
import './App.css';
import Blog from './pages/Blog';
import Home from './pages/Home';
const App = () => {
return (
<div className='container'>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/blog/:id' component={Blog} />
<Redirect to='/' />
</Switch>
</div>
)};
export default App;
App.css
@import url('https://fonts.googleapis.com/css2?
family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;
1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding:0;
font-family: 'Montserrat', sans-serif;
}
.container {
max-width: 1140px;
width: 100%;
margin: 0 auto;
padding: 1rem 0;
}
src->dummy data
data.js
export const blogList = [
{ id: 1,
title: '7 CSS tools you should be using ',
category: 'development',
subCategory: ['frontend', 'ui/ux', 'design'],
description:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book.”
authorName: 'John Doe',
authorAvatar: '/assets/images/author.jpg',
createdAt: 'June 03, 2021',
cover: '/assets/images/designer-1.jpg',
},
{
id: 2,
title: 'Milan Places That Highlight The City',
category: 'travel',
subCategory: ['vacation', 'holidays', 'sight seeing'],
description:
galley of type and scrambled it to make a type specimen book.”
cover: '/assets/images/f67396fc3cfce63a28e07ebb35d974ac.jpg',
},
{
id: 3,
title: 'Online Shopping – An Alternative to Shopping in the Mall',
category: 'shopping',
subCategory: ['e-commerce store', 'clothing', 'shopping store'],
description:
galley of type and scrambled it to make a type specimen book,”
cover: '/assets/images/fQwuyKJ9qxjSbr6REcgtmW-1200-80.jpg',
}
];
Src-> pages Blog.jsx
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { blogList } from '../../config/data';
import Chip from '../../components/common/Chip';
import EmptyList from '../../components/common/EmptyList';
import './styles.css';
import { Link } from 'react-router-dom';
const Blog = () => {
const { id } = useParams();
const [blog, setBlog] = useState(null);
useEffect(() => {
let blog = blogList.find((blog) => blog.id === parseInt(id));
if (blog) {
setBlog(blog); } } []);
return (
<>
<Link className='blog-goBack' to='/'>
<span> ←</span> <span>Go Back</span>
</Link>
{blog ? (
<div className='blog-wrap'>
<header>
<p className='blog-date'>Published {blog.createdAt}</p>
<h1>{blog.title}</h1>
<div className='blog-subCategory'>
{blog.subCategory.map((category, i) => (
<div key={i}>
<Chip label={category} />
</div>
))}
</div>
</header>
<img src={blog.cover} alt='cover' />
<p className='blog-desc'>{blog.description}</p>
</div>
):(
<EmptyList />
)} </>);};
export default Blog;
Blog.css
.blog-wrap {
max-width: 700px;
margin: 0 auto;
}
.blog-wrap header {
text-align: center;
}
.blog-date {
font-size: 0.8rem;
color: #a9a9a9;
font-weight: 500;
}
.blog-wrap img {
width: 100%;}
.blog-subCategory {
display: flex;
}
.blog-subCategory > div {
margin: 1rem;
}
.blog-desc {
padding: 1rem;
margin-top: 1.5rem;
}
Home.jsx
import React, { useState } from 'react';
import EmptyList from '../../components/common/EmptyList';
import BlogList from '../../components/Home/BlogList';
import Header from '../../components/Home/Header';
import SearchBar from '../../components/Home/SearchBar';
import { blogList } from '../../config/data';
const Home = () => {
const [blogs, setBlogs] = useState(blogList);
const [searchKey, setSearchKey] = useState('');
// Search submit
const handleSearchBar = (e) => {
e.preventDefault();
handleSearchResults();
};
// Search for blog by category
const handleSearchResults = () => {
const allBlogs = blogList;
const filteredBlogs = allBlogs.filter((blog) =>
blog.category.toLowerCase().includes(searchKey.toLowerCase().trim())
);
setBlogs(filteredBlogs);
};
// Clear search and show all blogs
const handleClearSearch = () => {
setBlogs(blogList);
setSearchKey('');
};
return (
<div>
{/* Page Header */}
<Header />
<SearchBar
value={searchKey}
clearSearch={handleClearSearch}
formSubmit={handleSearchBar}
handleSearchKey={(e) => setSearchKey(e.target.value)}
/>
{/* Blog List & Empty View */}
{!blogs.length ? <EmptyList /> : <BlogList blogs={blogs} />}
</div>
);
};
export default Home;
src -> components -> Home
Header.jsx
const Header = () => (
<header className='home-header'>
<h2>Inc. This Morning</h2>
<h1>
<span>“</span> Blog <span>”</span>
</h1>
<p>
awesome place to make oneself <br /> productive and entertained through
daily updates.
</p>
</header>
);
export default Header;
BlogItem.jsx
import { Link } from 'react-router-dom';
import Chip from '../../../common/Chip';
const BlogItem = ({
blog: {
description,
title,
createdAt,
authorName,
authorAvatar,
cover,
category,
id,
},
}) => {
return (
<div className='blogItem-wrap'>
<img className='blogItem-cover' src={cover} alt='cover' />
<Chip label={category} />
<h3>{title}</h3>
<p className='blogItem-desc'>{description}</p>
<footer>
<div className='blogItem-author'>
<img src={authorAvatar} alt='avatar' />
<div>
<h6>{authorName}</h6>
<p>{createdAt}</p>
</div>
</div>
<Link className='blogItem-link' to={`/blog/${id}`}>
➝
</Link>
</footer>
</div>
);
};
SearchBar.jsx
import './styles.css’
const SearchBar = ({ formSubmit, value, handleSearchKey, clearSearch }) => (
<div className='searchBar-wrap'>
<form onSubmit={formSubmit}>
<input
type='text'
placeholder='Search By Category'
value={value}
onChange={handleSearchKey}
/>
{value && <span onClick={clearSearch}>X</span>}
<button>Go</button>
</form>
</div>
);
export default SearchBar;
export default BlogItem;
Style.css
.searchBar-wrap {
background-color: #f0f0f0;
width: fit-content;
margin: 2.5rem auto 4rem auto;
padding: 0.5rem;
border-radius: 5px;
}
.searchBar-wrap form {
display: flex;
}
.searchBar-wrap input {
}
.searchBar-wrap span {
padding-right: 0.5rem;
cursor: pointer;
}
.searchBar-wrap button {
padding: 0.3rem 1rem;
background-color: #0f52ba;
color: #fff;
}
Output:
Home Page
Blog Page
Result:
Thus the above program simple micro blogging application was executed
successfully .
4. Create a food delivery website where users can order food from a particular
restaurent listed in the website .
AIM:
The aim of this project is to create a simple web-based food delivery application that allows
users to browse a menu, add items to their cart, and calculate the total cost of their order.
Tools Required:
1.XAMPP (or any other local web server stack)

2.Text Editor or Integrated Development Environment (IDE)
3.Web browser (e.g., Chrome, Firefox)
4.Basic understanding of HTML, CSS, JavaScript, and PHP
Procedure :
Step 1 : Install and Set Up XAMPP
Download XAMPP from the official website (https://www.apachefriends.org/index.html).

Follow the installation instructions for your specific operating system.
Start the Apache and MySQL services in XAMPP Control Panel.
Step 2: Project Setup

Create a new directory for your project within the htdocs directory of XAMPP (e.g., C:\xampp\
htdocs\food_delivery for Windows or /opt/lampp/htdocs/food_delivery for Linux).
Step 3: File Structure

Set up the following file structure in your project directory:
index.php: PHP file for the user interface.

styles.css: CSS file for styling.
script.js: JavaScript file for functionality.
Food item images (e.g., burger.jpg, pizza.jpg) if you want to include them.
Step 4: HTML and PHP Structure

In your index.php file, set up the HTML structure with embedded PHP code where needed. You can
use PHP to generate dynamic content or handle server-side processing. Make sure to use the .php
extension for your file.
Step 5: CSS Styling

In your styles.css file, apply the styles to make your application visually appealing. Customize the
CSS as per your design preferences.
Step 6: JavaScript Functionality

In your script.js file, add JavaScript code to make the application interactive. You can use the
JavaScript code provided earlier for adding items to the cart and calculating the total cost. Ensure
that the JavaScript code is included just before the closing </body> tag in your HTML/PHP file.
Source code :
index.php
<?php
if(isset($_POST['order_btn'])){
echo "<div id='order_confirmed'>
<h3>Order Confrimed!</h3>
<br>
<br>
<div id='ok'>
<a id='checkout-btn' href='index.php'>X</a>
</div>
</div>";
};
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Food Delivery App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Food Delivery App</h1>
</header>
<main>
<section class="menu">
<h2>Menu</h2>
<ul>
<li>
<div class="item">
<img src="images/burger.png" alt="Burger">
<h3>Burger</h3>
<p>$7.99</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</li>
<li>
<div class="item">
<img src="images/pizza.png" alt="Pizza">
<h3>Pizza</h3>
<p>$8.99</p>
</div>
</li>
<li>
<div class="item">
<img src="images/noodles.png" alt="Pizza">
<h3>Noodles</h3>
<p>$12.99</p>
</div>
</li>
<li>
<div class="item">
<img src="images/nuggets.png" alt="Pizza">
<h3>Nuggets</h3>
<p>$15.99</p>
</div>
</li>

</ul>
</section>
<section class="cart">
<h2>Cart</h2>
<ul id="cart-items">

</ul>
<p>Total: <span id="cart-total">$0.00</span></p>
<form action="" method="post">

<input type="submit" id="checkout-btn" style="padding-right: 10px;" value="Order now "
name="order_btn" class="btn">
</form>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
color: #fff;
text-align: center;
padding: 10px;
}
main {
display: flex;
padding: 20px;
}
.menu {
flex: 1;
margin-right: 20px;
}
.menu h2 {
padding-left:50% ;
font-size: 35px;
font-weight: 900;
}
.menu ul {
list-style: none;
padding: 0;
display: flex; /* Use flexbox to display items in a row */
flex-wrap: wrap; /* Allow items to wrap to the next line if necessary */
gap: 10px;
}
.menu li {
margin-bottom: 20px;
/* display: inline-block; */
flex-basis: calc(33.33% - 10px); /* Each item takes up 50% of the container width with some gap
*/
text-align: center;
border: 1px solid #ccc;
padding: 10px;
}
.item {
border: 1px solid #ddd;
/* padding: 10px; */
border-radius: 1rem;
width: 100%;
box-shadow: 1px 1px 5px 5px;
}
.item img {
padding-left: 50px;
width: 250px;
height: 250px ;
}
.add-to-cart {
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
margin-left: 65%;
.cart {
flex: 0.2;
border: 1px solid #ddd;
padding: 20px;
box-shadow: 1px 1px 5px 5px;
.cart h2 {
padding-left:50% ;
font-size: 35px;
font-weight: 900;
}
#cart-items {
list-style: none;
padding: 0;
}
.cart-item {
display: flex;
}
.cart-item img {
max-width: 50px;
height: auto;
margin-right: 10px;
}
#checkout-btn {
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 18px;
}
#cart-total {
font-weight: bold;
}
#order_confirmed{
position: fixed;
top:45%; left:35%;
height: 15vh;
overflow-y: hidden;
overflow-x: hidden;
/* padding:1rem; */
/* padding-bottom: 50px; */
display: flex;
z-index: 1100;
background-color: whitesmoke;
width: 25%;
border: 2px solid red;
#ok{
position: fixed;
top: 350px; right: 39.9%;
}
script.js
const menuItems = [
{ name: "Burger", price: 5.99 },
{ name: "Pizza", price: 8.99 },
{ name: "Noodles", price: 12.99 },
{ name: "Nuggets", price: 15.99 },
// Add more menu items here
];
const cart = [];

const cartList = document.getElementById("cart-items");
const cartTotal = document.getElementById("cart-total");
function updateCart() {
cartList.innerHTML = "";
let total = 0;
cart.forEach(item => {
const li = document.createElement("li");
li.classList.add("cart-item");
const itemName = document.createElement("span");
itemName.textContent = item.name;
const itemPrice = document.createElement("span");
itemPrice.textContent = `$${item.price.toFixed(2)}`;
total += item.price;
li.appendChild(itemName);
li.appendChild(itemPrice);
cartList.appendChild(li);
});
cartTotal.textContent = `$${total.toFixed(2)}`;
}
// Event delegation to handle "Add to Cart" button clicks

document.addEventListener("click", function (event) {
if (event.target.classList.contains("add-to-cart")) {
const itemName = event.target.parentElement.querySelector("h3").textContent;
const selectedItem = menuItems.find(item => item.name === itemName);
if (selectedItem) {
cart.push({ name: selectedItem.name, price: selectedItem.price });
updateCart();
}
}
});
Output:
Result:
The above program have been implemented and executed successfully.
5. Develop a classified web application to buy and sell used
products.
AIM:
To develop a web application for buying and selling used products using
the MERN Stack.
Procedure:
Step 1: Initially Install Node.js and npm from the official website “Node.js”.
Step 2: Create a new React app “npx create-react-app <Folder Name>” by using this command in
Terminal.
Step 3: Install the Dependencies for Routing “npm install react-router-dom”.
Run command:
Go to the React app directory and run the app
cd <folder Name>
npm start
Program:
Src dir >>

App.js:
import { Shop } from "./pages/shop/shop"; import { Cart } from "./pages/cart/cart";

import {Navbar} from "./components/navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import
{ ShopContextProvider } from "./context/shop-context";
const App = () => { return (

<div className="App">
<ShopContextProvider>
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Shop />} />
<Route path="/cart" element={<Cart />} />
</Routes>
</Router>
</ShopContextProvider>
</div>
);
};
export default App;
index.js:

import ReactDOM from 'react-dom/client'; import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root')); root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Products.js:
export const PRODUCTS=[

{
id: 1,
name: "Nike Shoe", price: 19.99,
image: require("./Assets/p1-1.webp"),
},
{
id: 2,
name: "Infinx HOT 20", price: 29.99,
},
{
id: 3,
name: "Airpods", price: 29.99,
},
{
id: 4,
name: "Acer NITRO", price: 29.99,
}
]
src -> components Dir:
navbar.jsx:
import React from "react";

import Logo from "../Assets/unnamed1.png";
import { FaCartShopping } from "react-icons/fa6"; import { Link } from "react-router-dom";
import "./navbar.css";
export const Navbar = () => { return (

<header className="navbar">
<div className="logo">
<img src={Logo} alt="Logo" />
</div>
<div className="links">
<Link to="/">Shop</Link>
<Link to="/cart">
<FaCartShopping className="cart" />
</Link>
</div>
</header>
);
};
navbar.css:
/* Header Container */
.navbar {
width: 100%; height: 80px;
background-color: rgb(19, 19, 19); display: flex;
justify-content: flex-end; align-items: center;
}
.links {
margin:0 40px; display: flex;
}
.links a {
text-decoration: none; color: white;
margin-left: 20px; font-size: 25px;
}
/* Logo */
.logo img {
width: 100px;
}
/* Navigation */
.cart{ height:25px; width: auto;
}
src -> context Dir:

shop-context.jsx:
import React, { createContext,useState } from "react"; import { PRODUCTS } from "../products";
export const ShopContext = createContext(null);
const getDefaultCart = () => { let cart = {};

for (let i = 1; i < PRODUCTS.length + 1; i++) { cart[i] = 0;
}
return cart;
};
export const ShopContextProvider = (props) => {

const [cartItems, setCartItems] = useState(getDefaultCart()); const getTotalCartAmount = () => {
let totalAmount = 0;
for (const item in cartItems) { if (cartItems[item] > 0) {
let itemInfo = PRODUCTS.find((product) => product.id === Number(item)); totalAmount +=
cartItems[item] * itemInfo.price;
}
}
return totalAmount;
};
const addToCart = (itemId) => {
setCartItems((prev) => ({ ...prev, [itemId]: prev[itemId] + 1 }));
};
const removeFromCart = (itemId) => {
setCartItems((prev) => ({ ...prev, [itemId]: prev[itemId] - 1 }));
};
const updateCartItemCount = (newAmount, itemId) => { setCartItems((prev) => ({ ...prev,
[itemId]: newAmount }));
};
const checkout = () => {
setCartItems(getDefaultCart());
};
const contextValue = { cartItems, addToCart,

updateCartItemCount, removeFromCart,
getTotalCartAmount, checkout,
};
return (
<ShopContext.Provider value={contextValue}>
{props.children}
</ShopContext.Provider>
);
};
src -> pages -> cart Dir:
cart.jsx:
import React, {useContext} from 'react';

import { PRODUCTS } from '../../products';
import {ShopContext} from '../../context/shop-context'; import {CartItem} from "../cart/cartItem";
import { useNavigate } from "react-router-dom"; import "./cart.css";
export const Cart = () => {

const { cartItems, getTotalCartAmount, checkout } = useContext(ShopContext); const totalAmount
= getTotalCartAmount();
const navigate = useNavigate(); return (
<div className='cart'>
<div>
<h1>Your Cart Items</h1>
</div>
<div className='cartItems'>
{PRODUCTS.map((product)=>{
if (cartItems[product.id] !==0){ return <CartItem data={product} />
}
})}
</div>
{totalAmount > 0 ? (
<div className="checkout">
<p> Subtotal: ${totalAmount} </p>
<button onClick={() => navigate("/")}> Continue Shopping </button>
<button
onClick={() => { checkout();
navigate("/checkout");
}}>
{" "}
Checkout{" "}
</button>
</div>
):(
<h1> Your Shopping Cart is Empty</h1>
)}
</div>
)
}
cart.css:
.cart {
display: flex;
flex-direction: column; align-items: center;
}
.cartItem {
width: 700px; height: 250px; display: flex;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); border-radius: 25px;
margin: 30px;
}
.cartItem img { width: 150px; margin:0 50px;
}
.cartItem .description { width: 100%;
font-size: 30px;
}
.countHandler input { width: 40px;
text-align: center; font-weight: bolder;
}
.checkout button { width: 150px;
height: 50px;
background-color: rgb(19, 19, 19); color: white;
border: none; border-radius: 8px; margin: 10px; cursor: pointer;}
cartItem.jsx:
import React, { useContext } from "react";
import { ShopContext } from "../../context/shop-context";
export const CartItem = (props) => {

const {id,name,price,image}=props.data;
const { cartItems, addToCart, removeFromCart, updateCartItemCount } =
useContext(ShopContext);
return (
<div className='cartItem'>
<img src={image} />
<div className='description'>
<p><strong>{name}</strong></p>
<p>${price}</p>
<div className="countHandler">
<button onClick={() => removeFromCart(id)}> - </button>
<input
value={cartItems[id]}
onChange={(e) => updateCartItemCount(Number(e.target.value), id)}
/>
<button onClick={() => addToCart(id)}> + </button>
</div>
</div>
</div>
)
}
src -> shop -> shop Dir:
product.jsx:
import React, { useContext } from 'react'

import {ShopContext} from '../../context/shop-context' export const Product=(props) =>{
const {id,name,price,image}=props.data;
const {addToCart,cartItems} =useContext(ShopContext) const cartItemAmount=cartItems[id]
return (
<div className='product'>
<img src={image} alt={name} />
<div className='description'>
<p>
<strong>{name}</strong>
</p>
<p>
${price}
</p>
</div>
<button className='cartBtn' onClick={()=>addToCart(id)}>
Add to Cart {cartItemAmount>0 && <>({cartItemAmount})</>}
</button>
</div>
)
}
shop.jsx:
import React from 'react'

import {PRODUCTS} from "../../products"; import {Product} from './product';
import "./shop.css"; export const Shop = () => { return (
<div className="shop">
<div calssName="shopTitle">
<h1>E-Mart</h1>
</div>
<div className='products'>
{PRODUCTS.map((product)=>(
<Product data={product}/>
))}
</div>
</div>
)
}
shop.css:
.shop{
margin: 20px;
}
.shopTitle {
margin-top: 100px; text-align: center; font-size: 40px;
}
.products { display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;
}
.product {
border: 0.5px solid #dddddd; padding: 10px;
text-align: center;
}
.product img {
max-width: 100%; max-height:100px; height: auto;
}
.product .description { text-align: center; font-weight: bold; color: #0c7dfe;
}
.product:hover {
transition: 0.3s ease-in; cursor: pointer;
}
.cartBtn {
background-color: #ff6607df; color: #fff;
border: none; border-radius: 3px; padding: 5px 10px; cursor: pointer;
}
.cartBtn:hover {
background-color: rgb(19, 19, 19); color: white;
cursor: pointer;
}
Output:
Shop page :
Cart page:
Result:
The above code successfully Executed the buying and selling used products Web application.
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 build a basic Leave Management System using PHP and MySQL for tracking employee leave
requests.
Tools Required:
A web server (e.g., XAMPP) installed and running.

knowledge of HTML,CSS,PHP and MySQL.
ALGORITHMS:
Step1: Start
Step 2: Database Setup
Create a MySQL database 'ex'.
Within 'ex', create 'kali' table with fields for leave requests.
Step 3: PHP Code Setup
Download the PHP code.
Configure database connection parameters in the code.
Step 4: Deploy to Web Server
Place 'filename.php' in the web server's document root.
Step 5: Accessing the Application
Open a browser, access 'http://localhost/your-folder/leavehome.php'.
Step 6: Using the Application
Fill out the leave request form and click "SUBMIT."
View stored requests in the Leave History section.
Step7: stop.
PROCEDURE:
Step 1: Database Setup:

1.1. Launch your preferred MySQL client (e.g., phpMyAdmin).
1.2. Create a new database named ' eg name'
1.3. Create a table named 'eg name' within the ' ex name' database with the following structure:
Example:
Step 2: PHP Code Setup:
2.1. Download the provided PHP code for the Leave Management System.
2.2. Open the PHP file (e.g., leavehome.php) in a text editor.
2.3. Locate the database connection parameters in the code (hostname, username, password,
database name) and update them to match your database setup.
Step 3: Deploy to Web Server:
3.1. Place the leavehome.php file in the document root directory of your web server.
Step 4: Accessing the Application:
4.1. Open a web browser.
4.2. Enter the URL to access your Leave Management System, for example:
Step 5: Using the Application:

5.1. On the Leave Request page, you will find a form with fields for Employee Name, Leave Type,
Start Date, and End Date.
5.2. Fill out the form with sample data.
5.3. Click the "SUBMIT" button to submit a leave request.
5.4. The leave request will be stored in the database, and you will see it in the Leave History section
on the same page.
Code:
Leaverequest.php:
<?php
$conn =mysqli_connect('localhost','root','','leave_management');
if(isset($_POST['submit'])){
$employee_name = $_POST['Employeename'];
$leave_type = $_POST['Leavetype'];
$start_date=$_POST['Startdate'];
$end_date= $_POST['Enddate'];
$start_timestamp = strtotime($start_date);
$end_timestamp = strtotime($end_date);
$leaveDuration = (($end_timestamp - $start_timestamp) / (60 * 60 * 24))+1;
$currentDateTimestamp = strtotime(date("Y-m-d"));
$select = " SELECT * FROM employee WHERE employee_name = '$employee_name'";
$result = mysqli_query($conn, $select);
if(mysqli_num_rows($result) > 0){
$row = mysqli_fetch_array($result);
if (($leaveDuration>0) && ($start_date > $currentDateTimestamp)){
$query1 = "UPDATE employee SET available_leave = available_leave - $leaveDuration
WHERE employee_name = '$employee_name' ";
mysqli_query($conn, $query1);
if($row['available_leave'] >= 0 ){
$query="INSERT INTO
leave_db(employee_name,leave_type,start_date,end_date,approved)
VALUES('$employee_name','$leave_type','$start_date','$end_date','yes')";
mysqli_query($conn,$query);}}
else{
$query="INSERT INTO leave_db(employee_name,leave_type,start_date,end_date,approved)
VALUES('$employee_name','$leave_type','$start_date','$end_date','error')";
mysqli_query($conn,$query);
}
}
else{
$query="INSERT INTO leave_db(employee_name,leave_type,start_date,end_date,approved)
VALUES('$employee_name','$leave_type','$start_date','$end_date','no')";
mysqli_query($conn,$query);
}
header('location:leavehome.php');
};
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Leave Management System-organisation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1><i class="fas fa-cube"></i> Employee Leave Management System</h1>
</header>
<main>
<section class="leave-form" action="store-data.php" >
<h2><i class="fas fa-square"></i> Leave Request</h2>
<form id="leaveForm" action="" method="post">
<div class="form-group">
<label for="employeeName"><i class="fas fa-user"></i> Employee Name:</label>

<select id="employeeName" name="Employeename" required>
<option value="NONE">Select</option>
<option value="Bala">Bala</option>
<option value="Dhinesh">Dhinesh</option>
<option value="Abi">Abi</option>
<option value="Kali">Kali</option>
</select>
</div>
<label for="leaveType"><i class="fas fa-file"></i> Leave Type:</label>
<select id="leaveType" name="Leavetype" required>
<option value="Select Leave">Select Leave</option>
<option value="Sick Leave">Sick Leave</option>
<option value="Vecation Leave">Vacation Leave</option>
<option value="Personal Leave">Personal Leave</option>
<option value="Medical Leave">medical Leave</option>
<option value="Casual Leave">casual Leave</option>
</select>
</div>
<label for="startDate"><i class="fas fa-calendar-day"></i> Start Date:</label>
<input type="date" id="startDate" name="Startdate"required>
</div>
<label for="endDate"><i class="fas fa-calendar-day"></i> End Date:</label>
<input type="date" id="endDate" name="Enddate"required>
</div>
<button >
<input type="submit" id='btn' name="submit" value="SUBMIT" class="form-btn">
</button>
</form>
</section>
<?php
if(isset($_POST['clear'])){
$query3="TRUNCATE TABLE leave_db";
mysqli_query($conn,$query3);
};
?>
<section class="leave-history">
<h2><i class="fas fa-history"></i> Leave History</h2>
<form action="" method="post">
<input type="submit" id="clear" name="clear" value="clear all">
</form>
<div id="leaveHistory">
<?php
$leaveHistoryQuery = "SELECT * FROM leave_db";
$leaveHistoryResult = mysqli_query($conn, $leaveHistoryQuery);
if (mysqli_num_rows($leaveHistoryResult) > 0) {
echo '<h3>Leave History:</h3>';
while ($row = mysqli_fetch_assoc($leaveHistoryResult)) {

$emp_name = $row['employee_name'];
$select = " SELECT * FROM employee WHERE employee_name = '$emp_name'";
$result = mysqli_query($conn, $select);
$row1 = mysqli_fetch_array($result);
$startDate = strtotime($row['start_date']);
$endDate = strtotime($row['end_date']);
$leaveDuration = ($endDate - $startDate) / (60 * 60 * 24);
if ($row['approved'] == 'yes' ) {
$status = '"Your leave request for a short break has been approved. Enjoy your
time off!"';
$statusColor = 'green'; // Green color for accepted
}
elseif($row['approved'] == 'error'){
$status = '"Please select valid Date"';
$statusColor = 'red'; // Green color for accepted
}
else {
$status = '"we are unable to approve your extended leave request due to
operational constraints. Thank you for your understanding."';
$statusColor = 'red'; // Red color for rejected
}
echo '<div class="leave-record">';
echo '<p><strong>Employee Name:</strong> ' .
htmlspecialchars($row['employee_name']) . '</p>';
echo '<p><strong>Leave Type:</strong> ' . htmlspecialchars($row['leave_type']) .
'</p>';
echo '<p><strong>Start Date:</strong> ' . htmlspecialchars($row['start_date']) .
'</p>';
echo '<p><strong>End Date:</strong> ' . htmlspecialchars($row['end_date']) . '</p>';
echo '<strong>Status:</strong> <span style="color: ' . $statusColor . ';">' .
$status .'</span><br>';
echo '<p><strong>Available Leave:</strong> ' .
htmlspecialchars($row1['available_leave']) . '</p>';
echo '<p><em>Thank you for your request!</em></p>';
echo '</div>';
echo '<br> <br>';
}
} else {
echo '<p>No leave history available.</p>';
}
?>
</div>
</section>
</main>
</body>
</html>
#styles.css:
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #007BFF;
color: #fff;
text-align: center;
padding: 20px 0;
}
main {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
padding: 20px;
}
.leave-form {
background-color: #fff;
max-width: 400px;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
.leave-form h2 {
color: #333;
}
.form-group {
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input[type="text"],
.form-group select,
.form-group input[type="date"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
}
.leave-form button{
border-radius: 2px;
.leave-form button input {

color: #fff;
border: none;
padding: 12px 20px;
border-radius: 3px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.leave-form button:hover {
background-color: #0056b3;
}
.leave-history {
background-color: #fff;
flex-grow: 1;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.leave-history h2 {
color: #333;
}
#clear{
position:fixed;
top: 6.5rem;
right:2rem;
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
}
Output:
RESULT:
The above program has been implemented and executed 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 In Progress or
Completed
Aim:
To write a program for Develop a simple dashboard for project management where the statuses
of various tasks areavailable New tasks can be added and the status of existing tasks can be
changed among Pending In Progress or Completed
Algorithm:
Step 1: Create an HTML file (index.html) with the dashboard structure and layout linking to CSS
and JavaScript file.
Step2: Create a CSS file (styles.css) to define the dashboard's styling.
Step 3: Create a JavaScript file (script.js) to handle interactivity.
Step4: In index.html, define the task list container.
Step5: In script.js, implement a function to change the status of tasks.
Step 6: In script.js, implement a function to add new tasks.
Step7: Add task elements to the task list in index.html.
Step 8: Style task elements using classes defined in styles.css.
Step9: Test the dashboard by opening index.html in a web browser
PROGRAM:
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project Management Dashboard</title>
</head>
<body>
<div class="dashboard">
<h1>Project Management Dashboard</h1>
<div class="task-form">
<input type="text" id="task-input" placeholder="Add a new task...">
<button onclick="addTask()">Add Task</button>
</div>
<div class="task-list">
<div class="task">
<span>Task 1: Create Mockup</span>
<select onchange="updateStatus(this)">
<option value="Pending">Pending</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
</select>
</div>
<div class="task">
<span>Task 2: Code Dashboard</span>
</select>
</div>

</div>
</div>
</body></html>
STYLE.CSS
body {
font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0;
padding: 0;
.dashboard {
max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
h1 {
text-align: center; color: #333;
.task-form {
display: flex; margin-top: 20px;
#task-input { flex: 1; padding: 10px;
border: 1px solid #ccc; border-radius: 5px;
button {
padding: 10px 20px; background-color: #007BFF; color: #fff;
border: none; border-radius: 5px; cursor: pointer;
.task-list {
margin-top: 20px;
}
.task {
display: flex;
justify-content: space-between; align-items: center;
padding: 10px 0;
border-bottom: 1px solid #ccc;
select {
padding: 5px; border-radius: 5px;
SCRIPT.JS
function addTask() {
const taskInput = document.getElementById("task-input"); const taskText = taskInput.value.trim();
if (taskText !== "") {
const taskList = document.querySelector(".task-list"); const taskElement =

document.createElement("div"); taskElement.className = "task"; taskElement.innerHTML = `
<span>${taskText}</span>
</select>
`; taskList.appendChild(taskElement); taskInput.value = "";
}
function updateStatus(selectElement) {
const taskText = selectElement.parentElement.querySelector("span");
const status = selectElement.value;
// You can add code here to update the status of the task in your backend.
OUTPUT:
8)Develop an online survey application where a collection of questions
is available and users are asked to answer any random question.
Aim:
To write a program for develop an online survey application where
a collection of questions is available and users are asked to answer any random question.
Algorithm:
Step 1: Start
Step 2: Question Storage
Step 3: User interface
Step 4: Random question selection
Step 5: User interaction
Step 6: Recording Responses
Step 7: Repeat and Completion
How to Install Node.js and NPM on Windows?
Since we have decided to create an application using Node.Js, first of all, you have
to install Node.Js on your Windows system.
Here, we are going to explain the installation process step-by-step. So, let’s start
with the first step now.
Step 1: Download the Installer

Download the Windows Installer from NodeJs official website. Make sure
you have downloaded the latest version of NodeJs. It includes the NPM package
manager. Here, we are choosing the 64-bit version of the Node.js installer.
The LTS (Long-term Support) version is highly recommended for you. After the download
of the installer package, install it with a double-click on it.
Now .
msi file will be downloaded to your browser. Choose the desired location for that.
Step 2: Install Node.js and NPM
After choosing the path, double-click to install .msi binary files to initiate the installation
process. Then give access to run the application. You will get a welcome message on your
screen and click the “Next” button. The installation process will start.
Choose the desired path where you want to install Node.js.
By clicking on the Next button, you will get a custom page setup on the screen. Make sure you choose
npm package manager , not the default of Node.js runtime . This way, we can install Node and
NPM simultaneously.
You should have 143MB of space to install Node.js and npm features. The
following features will be installed by default:
Node.js runtime
Npm package manager
Bang! The setup is ready to install Node and NPM. Let’s click on the
Install button so hard!
Step 3: Check Node.js and NPM Version

If you have a doubt whether you have installed everything correctly or not, let’s
verify it with “Command Prompt”.
Command Prompt window will appear on the screen.
To confirm Node installation, type node -v command.
To confirm NPM installation, type npm -v command.
And you don’t need to worry if you see different numbers than mine as Node and NPM
are updated frequently.
In my case, the version of node.js is v14.15.3 and npm is 6.14.9. Now, The
Node JS programs are ready to execute....
Create an empty folder called "hello", navigate into and open VS Code:
mkdir hello
cd hello
code .
Tip: You can open files or folders directly from the command line. The period '.' refers to the current
folder, therefore VS Code will start and open the Hello folder.
From the File Explorer toolbar, press the New File button:
and name the file app.js:
By using the .js file extension, VS Code interprets this file as JavaScript and will evaluate the
contents with the JavaScript language service. Refer to the VS Code JavaScript language topic to
learn more about JavaScript support.
Create a simple string variable in app.js and send the contents of the string to the console:
App.js
Index.html
Style.css
Script.js
Running the Node JS program
It's simple to run app.js with Node.js. From a terminal, just type:
node app.js
Program:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random Question Survey</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="content">
<h1>Random Question Survey</h1>
<div id="question-container">
<p id="question"></p>

<input type="text" id="answer" placeholder="Your Answer">
<button id="submit-button">Submit Answer</button>
<button id="next-button">Next Question</button>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>© 2023 D² Company. All rights reserved.</p>
</footer>
</body>
</html>
Styles.css
*{
margin: 0; padding: 0;
body{
font-family: cursive;
.main{
display: flex;
background-color: #d7d7d7;
width: 100vw;
height: 100vh;
.container{ display:
flex;
justify-content: center; align-
items: center; background-
color: white; width: 750px;
height: 300px;
box-shadow: rgba
(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26,
0.1) 0px 24px 80px; border-radius: 10px;
.content{
text-align: center;
height: 250px;
}
.footer{
display: block; text-

align: center;
}
#question-container {
margin-top: 40px;
font-size: 20px;
}
button {
margin-top: 30px; background-

color: #007bff; color: #fff;
border: none; padding:
10px 20px; border-
radius: 5px; cursor:
pointer;
}
#answer{
margin-top: 40px;
width: 100%;
height: 30px;
}
#submit-button{ margin-
right: 30px;
}
#next-button{ margin-
left: 30px;
}
Script.js
const questionContainer = document.getElementById('question-container'); const

questionElement = document.getElementById('question');
const answerInput = document.getElementById('answer');
const submitButton = document.getElementById('submit-button'); const

nextButton = document.getElementById('next-button');
submitButton.addEventListener('click', submitAnswer); nextButton.addEventListener('click',

getNextQuestion);
async function getNextQuestion() {
const response = await fetch('/api/question'); const data =

await response.json(); questionElement.textContent =
data.question; answerInput.value = ''; // Clear previous
answer
}
async function submitAnswer() {
const answer = answerInput.value; if (answer.trim() === '') {

alert('Please enter your answer.'); return;
}
// Here you can send the answer to the server if needed

console.log('Submitted answer:', answer);
// Get the next question after submitting
getNextQuestion();
// Initial load getNextQuestion();
App.js
const express = require('express'); const app = express(); const port =
3000;
// Sample questions
const questions = [
"What's your favorite color?", "How

often do you exercise?",
"What's your preferred programming language?", "what do
you prefer tea or coffee",
"what is your name and what is your hobby "
];
// Serve static files from the 'public' directory app.use(express.static('public'));
// API endpoint to get a random question
app.get('/api/question', (req, res) => {
const randomIndex = Math.floor(Math.random() * questions.length);
const randomQuestion = questions[randomIndex]; \
res.json({question: randomQuestion });
});
app.listen(port, () => { console.log(`Server is running on port ${port}`);
});
Output:
Result:
Thus the Online Survey Application was executed successfully by using html ,css, js, Node JS.

fullstack-lab-manual

Uploaded by

Copyright:

Available Formats

fullstack-lab-manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

fullstack-lab-manual

Uploaded by

Copyright:

Available Formats

FULLSTACK WEB DEVELOPMENT LAP MANUAL

1 . Develop a portfolio website For Your Self

.sidebar_container .image img {

.sidebar_container .image .right_image_box {

.sidebar_container .image .left_image_box {

.sidebar_container .sidebar_content .social_media {

.sidebar_container .sidebar_content .social_media a {

.sidebar_container .sidebar_content .social_media a:hover {

.sidebar_container .sidebar_navigation li a:hover,

.services_page .services_container .services_box {

.services_page .services_container .services_box:hover {

.services_page .services_container .services_box:hover i,

.contact_container form .form_name_row {

.contact_container form .form_name_row .left_form_row {

.contact_container form .form_name_row .right_form_row {

.contact_container form label {

.contact_container form input {

.contact_container form input:focus {

.contact_container form textarea {

.contact_container form #send_button {

.contact_container form #send_button:hover {

/* Global Menu CSS */

@media screen and (max-width: 1200px) {

@media screen and (max-width: 1000px) {

@media screen and (max-width: 800px) {

.services_page .services_container .services_box {

.contact_container form .form_name_row {

.contact_container form .form_name_row .left_form_row {

.contact_container form .form_name_row .right_form_row {

@media screen and (max-width: 680px) {

let sidebar_navigation = document.getElementById('sidebar_navigation');

let sidebar_navigation_bottom = document.getElementById('sidebar_buttom_menu');

let global_menu_buttom = document.getElementById('global_menu_button')

Step 1 : Open notepad or vs code Software.

<script src="script.js" defer></script>

.item, .check-button, .trash-button {

button, .check-button, .trash-button {

const inputtdl = document.querySelector('.textarea')

const item = document.createElement('p')

if (inputtdl.value === '') return

const checkbutton = document.createElement("button")

const trashbutton = document.createElement("button")

// checking and delete todoList

File and Folder Structure:

1.XAMPP (or any other local web server stack)

Step 1 : Install and Set Up XAMPP

Download XAMPP from the official website (https://www.apachefriends.org/index.html).

Step 2: Project Setup

Step 3: File Structure

index.php: PHP file for the user interface.

Step 4: HTML and PHP Structure

Step 5: CSS Styling

Step 6: JavaScript Functionality

const cart = [];

// Event delegation to handle "Add to Cart" button clicks

Src dir >>