SECTION A: CYBERSECURITY THREAT OBSERVATION

Email Threat Audit

Example 1.

Key Indicators:

• The sender email looks like [email protected] – it is not the real

Naukri website.
• The subject is: “Registration details for upcoming naukri campus aptitude test
May’25”
• The email tells me to register quickly and gives a suspicious link.
• There is no clear company name or job role mentioned.

Risk Assessment:

• It looks like a phishing attempt to collect student data.

• The link can lead to a fake website to collect name, number, resume, and maybe ask
for payment later.
• It can also be used to send malware or spam in future.
• It is risky to trust such emails without proper check.

Example 2.
Key Indicators:

• The sender email looks like [email protected] – this is not Wipro’s

official domain.
• The subject says: “Final Call – DICE verified Wipro Summer Internship”
• The mail says that my ID is verified and I am selected directly.
• They ask to click a link and “confirm participation quickly.”

Risk Assessment:

• The email uses trusted names (Wipro, Skill India) to gain attention, but there is no
real verification.
• They are creating urgency by using words like “Final Call.”
• The link can steal information or ask for payment later.
• This kind of email can lead to data theft or fake job traps.

MOBILE APPLICATION PERMISSION AUDIT

Example 1.

App Name: Instagram

Permissions Requested:

• Access to contacts
• Access to camera and microphone
• Access to location

Potential Impact:
 • Instagram mainly needs camera and mic for stories or reels, but it also asks for
contacts.
• Contact access is not necessary for using the app.
• It can read my contact list and suggest friends or send invites without permission.
• This can create privacy risk and unwanted exposure of my phonebook.

Example 2.

App Name: Spotify

Permissions Requested:

• Access to contacts
• Access to location
• Access to storage and media files

Potential Impact:

• Spotify is only for listening to music, but it asks for contacts and location.
• Contacts permission is not needed to play songs.
• Location may be used for ads or local suggestions, but still not necessary.
• These permissions can lead to data collection, targeted ads, or privacy issues.

FAKE ADVERTISEMENT TRACKING

Platform Where the Ad Was Found:

YouTube Shorts

Screenshot: (RummyCircle ₹1 Crore Reward Ad)

Description of the Ad:

The ad is from RummyCircle, a gaming platform. It claims:

• You can win ₹1 crore by playing rummy

• "Play and win – be the champion"
• Shows a big cheque and fancy graphics to gain trust

Audience Targeted by the Ad:

• Teenagers
• Jobless or low-income users
• People looking for easy money or entertainment

Trick or Technique Used in the Ad:

• Uses huge prize money visuals (₹1 crore) to excite viewers

• Hides risk of money loss and addiction
• Creates a sense of urgency and fake success dreams

Potential Risk or Impact of the Ad:

• People may lose money by getting addicted

• Targets emotional and financially struggling users
• Encourages gambling habits without warning
• No clear terms & conditions mentioned

Conclusion:

This is a manipulative and risky advertisement. It can trap users in gambling behavior.
These ads should carry proper warnings and be regulated more strictly.

PUBLIC WI-FI TEST(STIMULATED)

Wi-Fi Network Name: FreeRailwayWiFi

Device Used: Android Phone

Observation:

• When I connected to this open Wi-Fi, there was no password required.

 • My phone gave a warning: “This network is not secure.”
• It also showed: “Your data might be visible to others on this network.”

Potential Vulnerabilities:

1. Data Theft – Hackers can steal login info, messages, or files.

2. Man-in-the-Middle Attack – Someone can sit between me and the website I visit,
and read everything.
3. Malware Injection – My device can get infected if I click any popup or fake update.
4. Session Hijacking – Hackers can take over my login session (like email or bank).

Browser Security Audit

Browser Used: Google Chrome

1. Ad Privacy Settings

• Path: Chrome → Settings → Privacy and Security → Ad Privacy

• Description:
This setting controls how websites show ads. I turned off personalized ad topics and
site-suggested ads.
• Impact:
Now websites cannot use my browsing history to show me targeted ads. This gives
me better privacy and reduces tracking.

2. Block Third-Party Cookies

• Path: Chrome → Settings → Privacy and Security → Cookies and Site Data
• Description:
I enabled the option to block third-party cookies.
• Impact:
This stops advertisers and other websites from following me across different sites. It
helps protect my online activity from being tracked.

3. Site Settings – Camera, Microphone & Location

• Path: Chrome → Settings → Privacy and Security → Site Settings

• Description:
I set Camera, Microphone, and Location to “Ask before access”.
• Impact:
This stops websites from using my camera, mic, or location without permission. It
protects my privacy and keeps me safe from unknown access.
LIVE DNS LEAK TEST

Tool Used: https://dnsleaktest.com

Test Type: Standard Test

Steps Taken:

1. I opened the website and ran a standard DNS test.

2. The tool checked where my DNS queries are going.
3. The result showed 5 DNS servers — all from Google and located in India.

Result:

• Country: India 🇮🇳
• ISP: Google
• No unknown or third-party DNS servers were found.

My Understanding:

• Since the servers are trusted (Google) and located in India, this means my DNS
traffic is not leaking.
• My browsing data is going safely through the expected servers.

HTTP SITE VS HTTPS SITE:

HTTP Site: http://neverssl.com

HTTPS Site: https://google.com

Observation Table

Feature HTTP Site (neverssl.com) HTTPS Site (google.com)

URL Format Starts with http:// Starts with https://

Padlock Icon ❌ Not shown ✅ Padlock visible

Browser ⚠️ Page didn’t open – shows

✅ “Secure Connection” shown
Warning error

✅ SSL Certificate details are

Certificate Info ❌ Not available
present

Data Encryption ❌ Not encrypted ✅ Data is encrypted and safe

My Understanding:

• HTTP websites are not secure and sometimes don’t even open properly.
• The browser may block them or show an error.
• HTTPS websites use encryption and show a padlock. They are safe to use.

PASSWORD STRENGTH SIMULATION

Weak Password Strong Password

Feature
(tanvi123) (Tanvi@#1245Secure)
Length Short (8 characters) Long (17 characters)
Contains capital
❌ No ✅ Yes
letters
Contains symbols ❌ No ✅ Yes
Guessable/Common ✅ Yes (name + numbers) ❌ No
 Weak Password Strong Password
Feature
(tanvi123) (Tanvi@#1245Secure)
Crack Time Instantly 200 trillion years
Security Level Very Weak Very Strong

Weak passwords are easy to crack and unsafe.

Strong passwords should be long, and contain symbols, numbers, and capital letters.
We should avoid using names, birthdays, or simple number patterns.
SECTION B: REAL-WORLD CASE-BASED CYBER ANALYSIS

1. Zero Trust Security Case Study

What is Zero Trust Security?

Zero Trust is a security model that means no user or device is trusted by default — even if
it is inside the organization.

It checks every login, every access request, and uses verification at every step.

Applying Zero Trust in a College

If we apply Zero Trust in a college:

• Every student and teacher will have to login with proper ID and password
• Access to different resources (like admin data, results, fees) will be role-based
• Even if someone is connected to the college Wi-Fi, they can't access everything freely
• Every system and database will be protected with multi-factor authentication
(MFA)

What changes are required to adopt Zero Trust?

Area Change Needed

Login System Add MFA for students and staff

Network Access Split network into parts (segmentation)

Device Checking Use software to verify if devices are secure

Data Access Give access based on user’s role only

Monitoring Continuous tracking of who is doing what

Conclusion:

Zero Trust helps stop internal and external attacks.

It makes sure only verified people can access important data.
In today’s time, every organization (college, company, or bank) should use Zero Trust to stay
safe.

2. DEEPFAKE INCIDENT ANALYSIS

Incident Summary
In 2022, a deepfake video of Elon Musk was used in a cryptocurrency scam.
In the video, Musk was shown promoting a fake investment scheme where people were told
that if they send money in crypto, they would receive double in return.

The video looked very real. It used his voice, face, and speaking style through AI
technology.

Many people believed it was real and lost money.

Impact on Public and Media Trust:

• People started doubting real videos too.

• Public trust on online content became weak.
• Media channels had to double-check every viral video before showing it.
• Social media platforms faced criticism for spreading fake content.

Suggested Countermeasure (Solution):

Type Solution
Use deepfake detection tools that analyze face movements, voice glitches, and
Technical
inconsistencies
Regulatory Make strict cyber laws for people who make and share deepfake scams
Awareness Run campaigns to educate people on how to spot fake videos

Conclusion:

Deepfake scams are very dangerous because they look real and easy to believe.
They affect public trust and can damage reputation or cause money loss.
We need strong technology and legal rules to stop this growing threat.

INSIDER THREAT SIMULATION

Case: Data Leak by a Sales Employee

A company named “InfoSecure Pvt. Ltd.” had a sales employee named Ravi.
Ravi got angry after being rejected for a promotion.
He copied client data and pricing info to a pen drive and shared it with a rival company for
money.

This led to a huge financial loss and loss of client trust for InfoSecure.

3 Security Protocols That Could Prevent This:

Protocol What it Does

Access Control Only allow data access to people who really need it
 Protocol What it Does
USB Blocking Policy Block use of pen drives on office systems
Activity Log Monitoring Keep record of what each employee does on the system

Technical Countermeasure:

• Data Loss Prevention (DLP) software – It can detect and block sensitive data from
leaving the company through USB, email, or cloud.

👨‍🏫 Behavioural Countermeasure:

• Employee Awareness Program – Teach staff about company rules, loyalty, and
legal consequences of data theft. Also include stress & grievance handling.
SECTION C: IMPLEMENTATION STRATEGY & CYBER HYGIENE
PLANNING

1. Design 5 Cyber Hygiene Policies for students or staff

Policy Title Description How to Implement

Change passwords every 60 Send email reminders + auto-
1. Password Change Policy
days expiry system
2. Multi-Factor Enable MFA on college
Add extra security to logins
Authentication (MFA) portals & emails
Ban USBs on lab systems to Block USB ports using admin
3. USB Use Restriction
avoid malware settings
Backup project and system Schedule auto-backups +
4. Weekly Data Backup
data every Friday Google Drive usage
5. Monthly Security Teach students about phishing, Arrange online sessions or
Training passwords, etc. quizzes

Conclusion:

Following small hygiene steps like password safety, data backup, and USB control can
prevent big cyber incidents. Regular training keeps everyone aware and alert.

2. Create a Campus-Wide Cyber Awareness Plan

Frequency:

• Every month: 1 short training session

• Quarterly: 1 campus-wide campaign

Mediums Used:

Medium Type Example Used

Awareness Sessions Live talks or guest lectures on cybersecurity
Posters Printed posters near labs and hostel notice boards
Digital Alerts WhatsApp groups, Email tips, College App notifications
Quizzes & Activities Kahoot or Google Forms based awareness games

📝 Feedback Mechanism:

• After every session → Small Google Form

• Monthly suggestion box in IT lab
• Cyber help desk for complaints or doubts
Conclusion:

Awareness is the first step to safety.

Regular sessions, reminders, and creative content keep students alert.
Feedback helps improve the plan and solve real problems.

3. Draft a Policy Poster or Infographic Message

1. Using the Same Password Everywhere

🧠 Hackers crack one site and access all your accounts!

❌ 2. Clicking Unknown Links in Emails

🐟 Phishing attacks steal your data through fake pages.

❌ 3. Downloading Apps from Untrusted Sources

💣 Hidden malware can steal passwords or control your device.

❌ 4. Ignoring Software Updates

🔓 Old apps and systems have bugs that hackers exploit.

❌ 5. Sharing Personal Info on Public Wi-Fi

📡 Open networks allow hackers to see what you're doing online.

Conclusion:

Insider threats are dangerous because they come from trusted people.
To stop them, companies need both technical tools and employee training.
Regular audits, access control, and awareness can help prevent such incidents.
SECTION D: PROFESSIONAL AWARENESS & CREATIVE CONTRIBUTION

Option 1 – Cybersecurity Slogan

“Click Smart. Think First. Stay Secure.”

Option 3 – Cybersecurity Pledge

Cyber Safety Pledge

I promise to protect my digital identity.
I will not share passwords or personal details online.
I will use strong, unique passwords for each account.
I will not click on unknown links or download unsafe files.
I will respect others' privacy and report cyber abuse.
I will update my devices regularly.
I am a responsible and alert digital citizen.
 GEETA UNIVERSITY, PANIPAT

GEETA UNIVERSITY
PANIPAT

B.Tech CSE 2nd Semester

School of Computer Science & Engineering
(2024-2025)

Front End Development-2

(CS3244)

Lab Practical file

Submitted To: - Submitted By:-

Mr.Shafiqul Islam Tanvi , 2401301030

 GEETA UNIVERSITY, PANIPAT

LAB PRACTICAL FILE

DEPARTMENT OF
LABORATORY: Front end Development – 2 Lab SEMESTER: 2nd
School CA

PAGE
S.No. LIST OF EXPERIMENT DATE SIGN.
NO.
Apply a multi-column layout to an e-commerce product
page, enhance it using Bootstrap components, and apply
1.
custom styles to improve its visual appeal and user
experience.
Create a dynamic chessboard where the user inputs the
board size, and the board displays # for black squares and
2.
* for white squares, utilizing advanced JavaScript features
and DOM.
Design an admission form using Bootstrap 5, fetch the
3. submitted data using DOM methods, and display the data
in a Bootstrap 5 table format below the form.
How can you set up a Git repository, make commits, work
with branches, merge changes, clone a repository, push
4.
updates, use a .gitignore file, view the history, and
collaborate on a project using Git?
Create a movie search application where users can search
5.
for movies by title and see details about them.
Create a basic calculator that can perform simple
6.
arithmetic operations.
Create a quiz app in React that allows users to answer
7.
questions, track scores, and display results dynamically.
How can I develop a blog platform with multiple pages
8. using React Router, complete with state management and
styled components?
Build a task management application with React, allowing
9.
users to add, edit, delete, and mark tasks as completed.
Build a weather application using React that fetches data
10. from an API and displays current weather information
dynamically.
 GEETA UNIVERSITY, PANIPAT
Experiment Tittle: Apply a multi-column layout to an e-commerce product EXPER. No.1
page, enhance it using Bootstrap components, and apply custom styles to
improve its visual appeal and user experience. PAGE No.
DEPARTMENT OF CSE LABORATORY: Front end Development – 2 Lab (Code) SEMESTER: 2nd

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>LAB QUIZ 1</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">

<style>

.img{

height:800px;

width:1400px;

.img-cl{

height: 300px;

width: 300px;

.div{

display: flex;

justify-content: center;

}
 .anchor{

border-radius: 50%;

.div22

background-color: black;

color: white;

.nav{

height: 50px;

width: 50px;

</style>

</head>

<body>

<div class="container">

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

<div class="container-fluid">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRb7gOBDP2ul4Vo1RVe23qG_Xic8Yg4Mzbokw&s" class="nav"
alt="">

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-

target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

 <ul class="navbar-nav me-auto mb-2 mb-lg-0">

<li class="nav-item">

<a class="nav-link active" aria-current="page" href="#">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-

toggle="dropdown" aria-expanded="false">

Dropdown

</a>

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><hr class="dropdown-divider"></li>

<li><a class="dropdown-item" href="#">Something else here</a></li>

</ul>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

</li>

</ul>

<form class="d-flex">

<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success" type="submit">Search</button>

 </form>

</div>

</div>

</nav>

<!-- CAROUSEL -->

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-indicators">

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"

class="active" aria-current="true" aria-label="Slide 1"></button>

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-

label="Slide 2"></button>

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-

label="Slide 3"></button>

</div>

<div class="carousel-inner">

<div class="carousel-item active">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTyHHBdMncv5dB2VHDfKvR4KwOJ4qXkhC68Bg&s" class="img"
alt="...">

</div>

<div class="carousel-item">

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTv-
FVJb3t7zVchJ5AGnO61RO53-Hv23wzTZA&s" class="img" alt="...">

</div>

<div class="carousel-item">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRRW2IXTGq8GvzRF2CL5ypy8YJgqkNfJjGZgg&s" class="img"
alt="...">
 </div>

</div>

<button class="carousel-control-prev" type="button" data-bs-

target="#carouselExampleIndicators" data-bs-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="visually-hidden">Previous</span>

</button>

<button class="carousel-control-next" type="button" data-bs-

target="#carouselExampleIndicators" data-bs-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="visually-hidden">Next</span>

</button>

</div>

<br>

<br>

<!-- nav bar -->

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container-fluid">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRb7gOBDP2ul4Vo1RVe23qG_Xic8Yg4Mzbokw&s" class="nav"
alt="">

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-

target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav me-auto mb-2 mb-lg-0">

 <li class="nav-item">

<a class="nav-link active" aria-current="page" href="#">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-

toggle="dropdown" aria-expanded="false">

Brand

</a>

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a class="dropdown-item" href="#">Gucci</a></li>

<li><a class="dropdown-item" href="#"> Red Tape</a></li>

<li><hr class="dropdown-divider"></li>

<li><a class="dropdown-item" href="#">Fendi</a></li>

</ul>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-

toggle="dropdown" aria-expanded="false">

Color

</a>

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a class="dropdown-item" href="#">Vibrant</a></li>

<li><a class="dropdown-item" href="#">Aesthetic</a></li>

 <li><hr class="dropdown-divider"></li>

<li><a class="dropdown-item" href="#">Cool</a></li>

</ul>

</li>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-

toggle="dropdown" aria-expanded="false">

Season

</a>

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">

<li><a class="dropdown-item" href="#">Summer</a></li>

<li><a class="dropdown-item" href="#">Wedding</a></li>

<li><hr class="dropdown-divider"></li>

<li><a class="dropdown-item" href="#">Winter</a></li>

</ul>

</li>

<li class="nav-item">

<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

</li>

</ul>

<form class="d-flex">

<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</div>
 </nav>

<br>

<br>

<br>

<div class="row">

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTYhwXjamoJxQyaPd_r69AfC5Oddnr5_3EYrw&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcT2giUrf6u56mbrs67DHJZynT6XKxoVEMb_FA&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>
 <div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRBIGF3VuqoNCjwvfM4KMZZac9WFrrMliR_Gg&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcT9Go_R5dpCZNLREsx4Sz9yPbg1fi84lLkCLw&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!
 </div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

</div>

<br>

<br>

<br>

<div class="row">

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsOftFtF8H1J-
6AhhzEIU5c7MrE60ryHWMYA&s" class="img-cl" alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">
<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQ8uJgvSyOsFooJJE4yHzGTcFFU7mqQvXGsOw&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTOfMXer8gOgpUXC7PujnVh2fH2GGUfen1tUw&s" class="img-
cl" alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>
 <div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcR9HyLR_corIOPkHZH78L_WjJzdD1pVb3OCPQ&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

</div>

<br>

<br>

<br>

<div class="row">

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ-
mk6GQsrs0tTnbnlCQN2vrYrnExBTcl6aw&s" class="img-cl" alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">
 <p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQtBP8vLfs2EZMOHSxnBCVZlzu5h6XqpwuZjQ&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRjGBzTHxbKqiYhN2xDq9njMicjFEOlfeMolw&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>
 <div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSoPF0wOLRaPdMXMxLvgcF5VUtycqRVYb_pPA&s" class="img-
cl" alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

</div>

<br>

<br>

<br>

<div class="row">

<div class="col-md-3">
 <div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTPtaXxTdGt1rGh8T6ZAmF9Q2jmr4ZXBfo6cQ&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSAB1cARAs_QsTZDUBZmg-
BvfDiig6wzzHDBA&s" class="img-cl" alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">
<div class="card">

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj4S-
yq8ibi365xmX5YR7NrX0vdtRqaKdo3Q&s" class="img-cl" alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

<div class="col-md-3">

<div class="card">

<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSI1qfr04ZEDDMfnSUSbzWp_5nLgJSPPBwZbA&s" class="img-cl"
alt="">

<div class="card-body">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, vel!

</div>

<div class="card-footer">

<p>1000$</p>

<a href="#" class="btn btn-primary">Buy now</a>

</div>

</div>

</div>

</div>
 <br>

<br>

<br>

<br>

<!-- pagination -->

<div class="div">

<ul class="pagination">

<li class="page-item"><a href="#" class="page-link" class="anchor">1</a></li>

<li class="page-item"><a href="#" class="page-link" class="anchor">2</a></li>

<li class="page-item"><a href="#" class="page-link" class="anchor">3</a></li>

<li class="page-item"><a href="#" class="page-link" class="anchor">4</a></li>

<li class="page-item"><a href="#" class="page-link" class="anchor">Next</a></li>

</ul>

</div>

<br>

<br>

</div>

<div class="div22">

<div class="row">

<div class="col-md-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea est harum
accusantium eum? Eligendi, pariatur ex dignissimos in itaque numquam voluptatum dolorum accusamus
fugiat nihil totam consequuntur ad unde ipsa at iure doloribus. Repellendus aspernatur porro, fugit
neque aperiam in molestiae magni placeat maxime! Laudantium tenetur alias velit expedita
praesentium.</div>

<div class="col-md-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea est harum
accusantium eum? Eligendi, pariatur ex dignissimos in itaque numquam voluptatum dolorum accusamus
fugiat nihil totam consequuntur ad unde ipsa at iure doloribus. Repellendus aspernatur porro, fugit
neque aperiam in molestiae magni placeat maxime! Laudantium tenetur alias velit expedita
praesentium.</div>
 <div class="col-md-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea est harum
accusantium eum? Eligendi, pariatur ex dignissimos in itaque numquam voluptatum dolorum accusamus
fugiat nihil totam consequuntur ad unde ipsa at iure doloribus. Repellendus aspernatur porro, fugit
neque aperiam in molestiae magni placeat maxime! Laudantium tenetur alias velit expedita
praesentium.</div>

<div class="col-md-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea est harum
accusantium eum? Eligendi, pariatur ex dignissimos in itaque numquam voluptatum dolorum accusamus
fugiat nihil totam consequuntur ad unde ipsa at iure doloribus. Repellendus aspernatur porro, fugit
neque aperiam in molestiae magni placeat maxime! Laudantium tenetur alias velit expedita
praesentium.</div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

</body>

</html>

Experiment No-1
Objective: Book Review Blog, you have to create a simple blog page to display the contents of blog with pictures,
you have to complete the required tasks.

HTML CODE:

GitHub Repository LINK: https://github.com/shafikcmt/Experiment-1.git

OUTPUT

GEETA UNIVERSITY, PANIPAT

Experiment Tittle: Create a dynamic chessboard where the user inputs the EXPER. No.2
board size, and the board displays # for black squares and * for white squares,
utilizing advanced JavaScript features and DOM. PAGE No.
DEPARTMENT OF CSE LABORATORY: Front end Development – 2 Lab (Code) SEMESTER: 2nd
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 20px;

input, button {

padding: 8px;

margin-right: 10px;

font-size: 16px;

#board {

display: grid;

margin-top: 20px;

gap: 0;

font-family: monospace;

.cell {

width: 30px;

height: 30px;

display: flex;

align-items: center;
 justify-content: center;

font-size: 20px;

border: 1px solid #ccc;

.black {

background-color: black;

color: white;

.white {

background-color: white;

color: black;

</style>

</head>

<body>

<input type="text" id="sizeInput" placeholder="Enter board size (e.g. 8)" min="1">

<button onclick="generateChessBoard()">Generate</button>

<div id="board"></div>

<script>

generateChessBoard=()=>{

const size = parseInt(document.querySelector("#sizeInput").value)

const board = document.getElementById('board')

if(isNaN(size) || size<1){

alert("enter a valid number");

return;
 }

board.innerHTML="";

board.style.gridTemplateColumns = `repeat(${size}, 30px)`;

for(let row =0; row<size; row++){

for(let column =0;column<size; column++){

const cell = document.createElement('div');

cell.classList.add('cell');

const isBlack = (row+column)%2===0;

cell.classList.add(isBlack ? "black":"white")

cell.textContent = isBlack? "#":"*";

board.appendChild(cell);

};

</script>

</body>

</html>
 GEETA UNIVERSITY, PANIPAT
Experiment Tittle: Design an admission form using Bootstrap 5, fetch the EXPER. No.3
submitted data using DOM methods, and display the data in a Bootstrap 5 table
format below the form. PAGE No.
DEPARTMENT OF CSE LABORATORY: Front end Development – 2 Lab (Code) SEMESTER: 2nd

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">

</head>

<body>

<div class="container">

<h2>Admission Here</h2>

<div class="row">

<div class="col-md-12">

<div class="card">

<div class="card-body">

<form id="admissionForm" action="#">

<div class="mb-3">

<label for="FName" class="form-label">First Name</label>

<input type="text" class="form-control" id="fname" placeholder="Enter First Name">

</div>

<div class="mb-3">

<label for="LName" class="form-label">Last Name</label>

 <input type="text" class="form-control" id="lname" placeholder="Enter Last Name">

</div>

<div class="mb-3">

<label for="email" class="form-label">Email Id</label>

<input type="text" class="form-control" id="email" placeholder="Enter email id">

</div>

<div class="mb-3">

<label for="age" class="form-label">Age</label>

<input type="text" class="form-control" id="age" placeholder="Enter age">

</div>

<div class="mb-3">

<label for="phone" class="form-label">Phone Number</label>

<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">

</div>

<div class="mb-3">

<label for="Date Of Birth" class="form-label">Date Of Birth</label>

<input type="text" class="form-control" id="dob" placeholder="Enter Date Of Birth">

</div>

<div class="mb-3">

<label for="Address" class="form-label">Address</label>

<input type="text" class="form-control" id="address" placeholder="Enter Address">

</div>

<div class="mb-3">

<label for="Course" class="form-label">Select Course</label>

<select name="" id="course" class="form-select">

<option value="CSE">CSE</option>

<option value="Management">Management</option>
 <option value="Pharmacy">Pharmacy</option>

<option value="BBA">BBA</option>

<option value="BCA">BCA</option>

</select>

</div>

<div class="mb-3">

<label for="City" class="form-label">City</label>

<input type="text" class="form-control" id="cityInput" list="city">

<datalist id="city">

<option value="Sonipat">

<option value="Panipat">

<option value="Gohana">

<option value="Murthal">

<option value="Narela">

<option value="Rohtak">

<option value="Ambala">

<option value="Chandigarh">

</datalist>

</div>

<div class="mb-3">

<label for="State" class="form-label">Select State</label>

<input type="text" class="form-control" id="state" list="state">

<datalist id="state">

<option value="Andhra Pradesh">Andhra Pradesh</option>

<option value="Arunachal Pradesh">Arunachal Pradesh</option>

<option value="Assam">Assam</option>

<option value="Bihar">Bihar</option>
 <option value="Chhattisgarh">Chhattisgarh</option>

<option value="Goa">Goa</option>

<option value="Gujarat">Gujarat</option>

<option value="Haryana">Haryana</option>

<option value="Himachal Pradesh">Himachal Pradesh</option>

<option value="Jharkhand">Jharkhand</option>

<option value="Karnataka">Karnataka</option>

<option value="Kerala">Kerala</option>

<option value="Madhya Pradesh">Madhya Pradesh</option>

<option value="Maharashtra">Maharashtra</option>

<option value="Manipur">Manipur</option>

<option value="Meghalaya">Meghalaya</option>

<option value="Mizoram">Mizoram</option>

</datalist>

</div>

<div class="mb-3">

<label for="gender" class="form-label">Select Gender</label>

<div class="form-check">

<label for="chk" class="form-check-label me-5">

<input type="radio" class="form-check-input"> Male

</label>

<label for="chk" class="form-check-label me-5">

<input type="radio" class="form-check-input"> Female

</label>

<label for="chk" class="form-check-label">

<input type="radio" class="form-check-input">Other

</label>
 </div>

</div>

<hr>

<button class="btn btn-primary">Submit</button>

<hr>

<hr>

<table class="table">

<thead>

<th>First Name</th>

<th>Last Name</th>

<th>Age</th>

<th>Email</th>

<th>City</th>

<th>State</th>

<th>Address</th>

<th>Phone No</th>

<th>DOB</th>

</thead>

<tbody id="display">

</tbody>

</table>

</form>

</div>

</div>

</div>

</div>
 </div>

<script>

document.getElementById("admissionForm").addEventListener("submit", function(event) {

event.preventDefault();

let Fname = document.getElementById('fname').value;

let Lname = document.getElementById('lname').value;

let email = document.getElementById('email').value;

let phone = document.getElementById('phone').value;

let age = document.getElementById('age').value;

let dob = document.getElementById('dob').value;

let address = document.getElementById('address').value;

let city = document.getElementById('cityInput').value;

let state = document.getElementById('state').value;

if (Fname === "" || Lname === "" || email === "" || phone === "" || age === "" || dob === "" || address ===
"" || city === "" || state === "") {

window.alert('Field Must Not Be Empty!');

return;

const display = document.getElementById('display');

display.innerHTML += `

<tr>

<td>${Fname}</td>

<td>${Lname}</td>

<td>${age}</td>
 <td>${email}</td>

<td>${city}</td>

<td>${state}</td>

<td>${address}</td>

<td>${phone}</td>

<td>${dob}</td>

</tr>

`;

document.getElementById("admissionForm").reset();

});

</script>

</body>

</html>
 GEETA UNIVERSITY, PANIPAT
Experiment Tittle: How can you set up a Git repository, make commits, work EXPER. No.4
with branches, merge changes, clone a repository, push updates, use a
.gitignore file, view the history, and collaborate on a project using Git? PAGE No.
DEPARTMENT OF --- Front end Development – 2 Lab (Code) SEMESTER: 2nd

1. Set Up a Git Repository

You can initialize a new repo or clone an existing one.

To create a new repository:

mkdir project-name

cd project-name

git init

To clone an existing repository:

git clone https://github.com/username/repository.git

cd repository

2. Make Commits

Track changes and save snapshots of your project.

Steps:

git add file-name # Stage a specific file

git add . # Stage all changes

git commit -m "Your descriptive commit message"

3. Work with Branches

Use branches to develop features independently.

Create a new branch:

git branch feature-branch

Switch to it:

git checkout feature-branch

Or combine both:
git checkout -b feature-branch

4. Merge Changes

Integrate one branch into another (usually feature → main).

First, switch to the branch you want to merge into:

git checkout main

git merge feature-branch

Resolve conflicts manually if Git highlights any.

5. Clone a Repository

This pulls down a copy of a remote repository.

git clone https://github.com/username/repository.git

6. Push Updates

Sends your commits to the remote server (like GitHub).

git push origin branch-name

If it’s the first push of a new branch

git push -u origin branch-name

7. Use a .gitignore File

Tell Git to ignore certain files/folders.

Create a file called .gitignore in the root folder:

# Example .gitignore

node_modules/

.env

*.log

Then commit it

git add .gitignore

git commit -m "Add .gitignore"

8. View History
See what’s been done so far in your project.

git log # Full log

git log --oneline # Shorter version

9. Collaborate on a Project

• Fork or clone the repo.

• Create a new branch for your work.

• Make changes and commit.

• Push to your fork/branch.

• Open a Pull Request (PR) for review.

• After approval, merge it into the main branch.

git pull origin main

GEETA UNIVERSITY, PANIPAT

Experiment Tittle: Create a movie search application where users can search EXPER. No.5
for movies by title and see details about them.
PAGE No.
DEPARTMENT OF --- Front end Development – 2 Lab (Code) SEMESTER: 2nd

GEETA UNIVERSITY, PANIPAT

Experiment Tittle: Create a basic calculator that can perform simple EXPER. No.6
arithmetic operations.
PAGE No.
DEPARTMENT OF CSE LABORATORY: Front end Development – 2 Lab (Code) SEMESTER: 2nd

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Basic Calculator</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: #f0f0f0;

font-family: Arial, sans-serif;

.calculator {

background: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

.calculator input {

width: 100%;

font-size: 24px;

margin-bottom: 10px;

padding: 10px;

text-align: right;

border: 1px solid #ccc;

border-radius: 5px;
}

.buttons {

display: grid;

grid-template-columns: repeat(4, 60px);

gap: 10px;

.buttons button {

padding: 15px;

font-size: 18px;

cursor: pointer;

border: none;

background: #eee;

border-radius: 5px;

transition: background 0.2s;

.buttons button:hover {

background: #ddd;

.buttons .equal {

background: #4caf50;

color: white;

}
 .buttons .equal:hover {

background: #45a049;

.buttons .clear {

background: #f44336;

color: white;

.buttons .clear:hover {

background: #e53935;

</style>

</head>

<body>

<div class="calculator">

<input type="text" id="display" disabled />

<div class="buttons">

<button onclick="appendValue('7')">7</button>

<button onclick="appendValue('8')">8</button>

<button onclick="appendValue('9')">9</button>

<button onclick="appendValue('/')">÷</button>

<button onclick="appendValue('4')">4</button>

<button onclick="appendValue('5')">5</button>

<button onclick="appendValue('6')">6</button>

<button onclick="appendValue('*')">×</button>
 <button onclick="appendValue('1')">1</button>

<button onclick="appendValue('2')">2</button>

<button onclick="appendValue('3')">3</button>

<button onclick="appendValue('-')">−</button>

<button onclick="appendValue('0')">0</button>

<button onclick="appendValue('.')">.</button>

<button onclick="calculate()">=</button>

<button onclick="appendValue('+')">+</button>

<button class="clear" onclick="clearDisplay()">C</button>

</div>

</div>

<script>

const display = document.getElementById('display');

function appendValue(value) {

display.value += value;

function clearDisplay() {

display.value = '';

function calculate() {
 try {

display.value = eval(display.value);

} catch {

display.value = 'Error';

</script>

</body>

</html>

GEETA UNIVERSITY, PANIPAT

Create a quiz app in React that allows users to answer questions, track scores, EXPER. No.7
and display results dynamically.
PAGE No.
DEPARTMENT OF --- LABORATORY: Front end Development – 2 Lab (Code) SEMESTER: 2nd

GEETA UNIVERSITY, PANIPAT

Experiment Tittle: How can I develop a blog platform with multiple pages EXPER. No.8
using React Router, complete with state management and styled components?
PAGE No.
DEPARTMENT OF --- LABORATORY: Front end Development – 2 Lab (Code) SEMESTER: 2nd
1. Set Up the Project

Start by creating a new React project if you haven't already:

npx create-react-app blog-platform

cd blog-platform

npm install react-router-dom styled-components

• react-router-dom will allow us to handle routing.

 • styled-components will help us with styling.

2. Project Structure

Here’s a basic structure for your project:

/src

/components

Header.js

BlogList.js

BlogPost.js

/pages

Home.js

Post.js

/context

BlogContext.js

App.js

3. Setting Up React Router

We’ll use React Router to set up routing in our app. You will need two pages: the Home page to list all blog posts
and a Post page to show a detailed view of a single blog post.

App.js

import React from 'react';

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import { BlogProvider } from './context/BlogContext';

import Header from './components/Header';

import Home from './pages/Home';

import Post from './pages/Post';

function App() {

return (
 <Router>

<BlogProvider>

<Header />

<Switch>

<Route exact path="/" component={Home} />

<Route path="/post/:id" component={Post} />

</Switch>

</BlogProvider>

</Router>

);

export default App;

4. Blog Context for State Management

Use Context API to store and manage the state for the blog posts.

context/BlogContext.js

import React, { createContext, useContext, useState } from 'react';

const BlogContext = createContext();

export const BlogProvider = ({ children }) => {

const [posts, setPosts] = useState([

id: 1,

title: 'First Post',

content: 'This is the first post content.',

},
 {

id: 2,

title: 'Second Post',

content: 'This is the second post content.',

},

// Add more posts here

]);

return (

<BlogContext.Provider value={{ posts, setPosts }}>

{children}

</BlogContext.Provider>

);

};

export const useBlog = () => useContext(BlogContext);

5. Create Blog List Page

pages/Home.js

This page will list all the blog posts.

import React from 'react';

import { Link } from 'react-router-dom';

import BlogList from '../components/BlogList';

function Home() {

return (

<div>

<h1>Welcome to the Blog Platform</h1>

 <BlogList />

</div>

);

export default Home;

components/BlogList.js

This component will display the list of all blog posts.

App.jsx

import React from 'react';

import { Link } from 'react-router-dom';

import { useBlog } from '../context/BlogContext';

import styled from 'styled-components';

const BlogListWrapper = styled.div`

padding: 20px;

`;

const BlogItem = styled.div`

margin: 10px 0;

padding: 10px;

border: 1px solid #ddd;

border-radius: 5px;

background-color: #f9f9f9;

`;

function BlogList() {
 const { posts } = useBlog();

return (

<BlogListWrapper>

{posts.map((post) => (

<BlogItem key={post.id}>

<Link to={`/post/${post.id}`}>

<h2>{post.title}</h2>

</Link>

</BlogItem>

))}

</BlogListWrapper>

);

export default BlogList;

6. Create Blog Post Page

pages/Post.js

This page will display the details of a single blog post.

import React from 'react';

import { useParams } from 'react-router-dom';

import { useBlog } from '../context/BlogContext';

import styled from 'styled-components';

const PostWrapper = styled.div`

padding: 20px;

`;
const PostContent = styled.div`

margin-top: 20px;

`;

function Post() {

const { id } = useParams();

const { posts } = useBlog();

const post = posts.find((post) => post.id === parseInt(id));

if (!post) {

return <h2>Post not found</h2>;

return (

<PostWrapper>

<h1>{post.title}</h1>

<PostContent>{post.content}</PostContent>

</PostWrapper>

);

export default Post;

7. Create Header Component

components/Header.js

This component will display a simple header with navigation.

import React from 'react';

import { Link } from 'react-router-dom';

import styled from 'styled-components';

const HeaderWrapper = styled.div`

padding: 10px;

background-color: #333;

color: white;

text-align: center;

`;

function Header() {

return (

<HeaderWrapper>

<h1>Blog Platform</h1>

<nav>

<Link to="/" style={{ color: 'white', margin: '0 10px' }}>

Home

</Link>

</nav>

</HeaderWrapper>

);

export default Header;

GEETA UNIVERSITY, PANIPAT

 Experiment Tittle: Build a task management application with React, allowing EXPER. No.9
users to add, edit, delete, and mark tasks as completed.

PAGE No.

DEPARTMENT OF --- LABORATORY: Front end Development – 2 Lab (Code) SEMESTER: 2nd

import React, { useState } from "react";

import TaskInput from "./TaskInput";

import TaskList from "./TaskList";

function App() {

const [tasks, setTasks] = useState([]);

const addTask = (taskText) => {

setTasks([...tasks, { text: taskText, completed: false, id: Date.now() }]);

};

const editTask = (id, newText) => {

const updatedTasks = tasks.map((task) =>

task.id === id ? { ...task, text: newText } : task

);

setTasks(updatedTasks);

};

const deleteTask = (id) => {

const updatedTasks = tasks.filter((task) => task.id !== id);

setTasks(updatedTasks);

};
 const toggleTaskCompletion = (id) => {

const updatedTasks = tasks.map((task) =>

task.id === id ? { ...task, completed: !task.completed } : task

);

setTasks(updatedTasks);

};

return (

<div className="App">

<h1>Task Manager</h1>

<TaskInput addTask={addTask} />

<TaskList

tasks={tasks}

editTask={editTask}

deleteTask={deleteTask}

toggleTaskCompletion={toggleTaskCompletion}

/>

</div>

);

export default App;

import React, { useState } from "react";

function TaskInput({ addTask }) {

const [taskText, setTaskText] = useState("");

 const handleChange = (e) => {

setTaskText(e.target.value);

};

const handleAddClick = () => {

if (taskText.trim()) {

addTask(taskText);

setTaskText("");

};

return (

<div>

<input

type="text"

value={taskText}

onChange={handleChange}

placeholder="Enter task"

/>

<button onClick={handleAddClick}>Add Task</button>

</div>

);

export default TaskInput;

import React from "react";

import Task from "./Task";

function TaskList({ tasks, editTask, deleteTask, toggleTaskCompletion }) {

return (

<div>

<ul>

{tasks.map((task) => (

<Task

key={task.id}

task={task}

editTask={editTask}

deleteTask={deleteTask}

toggleTaskCompletion={toggleTaskCompletion}

/>

))}

</ul>

</div>

);

export default TaskList;

import React, { useState } from "react";

function Task({ task, editTask, deleteTask, toggleTaskCompletion }) {

const [isEditing, setIsEditing] = useState(false);

const [newText, setNewText] = useState(task.text);

const handleEditClick = () => {

if (isEditing) {

editTask(task.id, newText);

setIsEditing(!isEditing);

};

const handleDeleteClick = () => {

deleteTask(task.id);

};

const handleToggleCompletion = () => {

toggleTaskCompletion(task.id);

};

return (

<li style={{ textDecoration: task.completed ? "line-through" : "none" }}>

{isEditing ? (

<input

type="text"

value={newText}

onChange={(e) => setNewText(e.target.value)}

/>

):(

<span>{task.text}</span>
 )}

<button onClick={handleToggleCompletion}>

{task.completed ? "Undo" : "Complete"}

</button>

<button onClick={handleEditClick}>

{isEditing ? "Save" : "Edit"}

</button>

<button onClick={handleDeleteClick}>Delete</button>

</li>

);

export default Task;

.App {

font-family: Arial, sans-serif;

text-align: center;

input {

margin: 5px;

padding: 8px;

button {

margin: 5px;

padding: 8px;
 cursor: pointer;

ul {

list-style-type: none;

padding: 0;

li {

margin: 10px 0;

GEETA UNIVERSITY, PANIPAT

Build a weather application using React that fetches data from an API and EXPER. No.10
displays current weather information dynamically.
PAGE No.
DEPARTMENT OF --- LABORATORY: Front end Development – 2 Lab (Code) SEMESTER: 2nd