Scribd
Upload
4 views

118 Rimsha Lab File

The document is a web development lab file for BCS-102 at Indira Gandhi Delhi Technical University for Women, submitted by Rimsha Chouhan. It includes various experiments related to HTML, CSS, JavaScript, and PHP, such as creating web pages, forms, and a database. Additionally, it contains code examples demonstrating HTML input types and attributes, along with styling for forms and web pages.

Uploaded by

Rimsha Chouhan Xii B
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

118 Rimsha Lab File

The document is a web development lab file for BCS-102 at Indira Gandhi Delhi Technical University for Women, submitted by Rimsha Chouhan. It includes various experiments related to HTML, CSS, JavaScript, and PHP, such as creating web pages, forms, and a database. Additionally, it contains code examples demonstrating HTML input types and attributes, along with styling for forms and web pages.

Uploaded by

Rimsha Chouhan Xii B
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 78

INDRA GANDHI DELHI TECHNICAL

UNIVERSITY FOR WOMAN

WEB DEVELOPMENT LAB FILE


BCS - 102

Submitted to: Agrima Suri


Submitted by: Rimsha Chouhan
Enrollment No: 11801032024
INDEX
S.NO EXPERIMENT

1 Creating an html web page.


2 Create a form using HTML.
3 Create a web page that embeds an external web page
using an iframe and apply CSS styling.
4 Create a program that demonstrates the following mouse
events:

1. Mouse button pressed(onmousedown)


2. Pointer entry (onmouseenter)
3. Pointer exit (onmouseleave)
4. Pointer movement (onmousemove)
5. Mouse pointer exit (onmouseout)
6. Mouse pointer hover (onmouseover)
7. Mouse button release (onmouseup)
5 Create a web page that demonstrates the use of
different types of loops and conditional statements
in JavaScript in the script tag.

Hint: Create a student object, display a list of


students with properties like name, grade, and
attendance, and use loops and conditions to
display their data and attendance status.
6 Create a webpage using different string methods
(as discussed in the class.)
Class comments

7 Create a webpage integrating all the concepts


studied till now.
8 Create a database named "ecommerce" and in this
database, create a table named "orders" using
PHPMyAdmin.
<html>
<head>
<style>
Body{
Background-color:aqua;
}
H1 {
Background-color: pink;
Font-weight: bold; /* or use a value like 400 or 700
*/
Font-family: cursive;
Text-align: center;
}
H2{
Font-family: “Lucida Console”, “Courier New”,
monospace;
Font-weight:1000;
Color:red;
Text-align: center;
}
H4 {
Color: #333;
Font-size: 20px;
Font-family: ‘Arial’, sans-serif;
Font-weight: bold;
Text-align: left;

Background-color: light blue;

}
Ol {
Font-family: Arial, sans-serif;
Font-size: 15px;
Margin: 20px;
Padding: 0 20px;
Color:magenta;
Text:bold;
}

Li {
Margin-bottom: 10px;
Line-height: 1.5;
}
Marquee{h2{
Color:purple;
Font-weight:1000px;
Font-family:cursive;
Border:solid red 5px;
Border-radius:5px;
Width:200px;}
}
h3{
Font-weight:35px;
Color:purple;
Text-align:center;
}
Li {
Font-style: italic;
Font-weight: 600; /* You can adjust the weight
between 100 and 900 */
Margin-bottom: 10px;
}
Li {
Font-style: italic;
Font-weight: 600; /* You can adjust the weight
between 100 and 900 */
Margin-bottom: 10px;
Color:red;
}
</style>
</head>
<body>
<marquee><h2><bold>Rejoicing
myself!!!</bold></h2></marquee>
<h1>MY DREAM DESTINATION</h1>
<h2>Let’s Dive into haul of heaven!!!</h2>
<h4>”The Earth has music for those who listen.” –
William Shakespeare</h4>
<ol>
<li><strong>Location:</strong> Luxembourg is a
small European country, surrounded by Belgium,
France and Germany. It’s mostly rural, with dense
Ardennes forest and nature parks in the north,
rocky gorges of the Mullerthal region in the east and
the Moselle river valley in the southeast. Its capital,
Luxembourg City, is famed for its fortified medieval
old town perched on sheer cliffs.</li>
<li><strong>Accommodation:</strong> Stay in an
overwater bungalow with direct access to the
turquoise waters.</li>
<li><strong>Activities:</strong> Snorkeling, scuba
diving, and exploring the vibrant marine life in the
clear waters.</li>
<li><strong>Scenery:</strong> Enjoy breathtaking
views of Mount Otemanu, lush green mountains,
and pristine beaches.</li>
<li><strong>Cultural Experiences:</strong> Learn
about Polynesian culture, participate in traditional
dance and music, and taste local cuisine.</li>
<li><strong>Relaxation:</strong> The Spa of
Strassen offers a completely different concept. In a
more family atmosphere, they invite you to
immerse yourself in its aquatic pleasures. Their
state of mind? Have fun and relax with friends or
family..</li>
</ol>
<iframe height=”300” width=”300”
Src=”
https://www.youtube.com/embed/BKLBU7AVPjY?si
=yPdqDFtFIa7uW4Fl”>
</iframe>
<h1>Top Places to Visit in Luxembourg</h1>

<ul>
<li><strong>Luxembourg City Old
Town</strong> – A UNESCO World Heritage Site
with ancient fortifications, scenic views, and
historic architecture.</li>

<li><strong>Vianden Castle</strong> – A
majestic medieval castle offering panoramic views
of the Our Valley.</li>

<li><strong>Mullerthal Region (Little


Switzerland)</strong> – Known for its rugged
landscapes, hiking trails, and beautiful rock
formations.</li>
<li><strong>Casemates du Bock</strong> –
Underground tunnels and fortifications offering a
glimpse into Luxembourg’s military history.</li>

<li><strong>Bourscheid Castle</strong> – A
well-preserved medieval fortress with stunning
views of the surrounding countryside.</li>

<li><strong>Grand Ducal Palace</strong> – The


official residence of the Grand Duke of
Luxembourg, open to the public for guided tours in
summer.</li>

<li><strong>MUDAM (Museum of Modern


Art)</strong> – A striking contemporary art museum
showcasing international modern art
exhibitions.</li>
<li><strong>Upper SureLake</strong> – A
popular spot for swimming, boating, and picnicking
in a tranquil natural setting.</li>

<li><strong>Moselle Valley</strong> – A
beautiful wine region, perfect for vineyard tours and
wine tasting along the Moselle River.</li>

<li><strong>Beaufort Castle</strong> – Explore


the ruins of this impressive medieval castle and its
Renaissance addition.</li>

<li><strong>Luxembourg American Cemetery


Memorial</strong> – A poignant World War II
cemetery where General George S. Patton is
buried.</li>
</ul>
</body>
</html>
ASSIGNMENT 2
Web Development

Q1) Explore and explain any seven HTML


input types( example : date, email ,
password).

CODE:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport”
content=”width=device-width, initial-
scale=1.0”>
<title>Styled Form with Sections and Drop-
Down</title>
<style>
/* General form styling */
Body {
Font-family: Arial, sans-serif;
Background-color: #f0f0f0;
Padding: 20px;
}

H2 {
Text-align: center;
Color:red;
Font-family:Times New Roman;
Font-size:25px;

}
Form {
Max-width: 700px;
Margin: auto;
Background-color: #fff;
Padding: 30px;
Border-radius: 10px;
Box-shadow: 0 6px 25px rgba(204, 153, 255,
0.8); /* Light purple shadow */
}
}

Label {
Display: block;
Margin-bottom: 8px;
Color: #555;
}

Input[type=”text”],
Input[type=”email”],
Input[type=”password”],
Input[type=”date”],
Input[type=”number”],
Select {
Width: 100%;
Padding: 8px;
Margin-bottom: 15px;
Border: 1px solid #ccc;
Border-radius: 4px;
}

Input[type=”checkbox”],
Input[type=”radio”] {
Margin-right: 10px;
}

.checkbox-group, .radio-group {
Display: flex;
Flex-wrap: wrap;
1
}

.checkbox-group label, .radio-group label {


Margin-right: 15px;
Margin-bottom: 10px;
}

Input[type=”submit”] {
Background-color: #4CAF50;
Color: white;
Padding: 10px 20px;
Border: none;
Border-radius: 4px;
Cursor: pointer;
}

Input[type=”submit”]:hover {
Background-color: #45a049;
}

Section {
Margin-bottom: 25px;
Padding: 20px;
Background-color: #fafafa;
Border-radius: 8px;
Box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
Border: 2px solid pink; /* Light purple border
*/
Position: relative; /* For positioning the
decorative line */
}

.form-section-title {
Font-size: 1.2em;
Margin-bottom: 10px;
Color: #333;
Border-bottom: 1px solid #ccc;
Padding-bottom: 5px;
}
Section::before {
Content: “”;
Position: absolute;
Top: 0;
Left: 0;
Width: 100%;
Height: 4px;
Background: linear-gradient(to right, #cc99ff,
#9966ff); /* Gradient line */
Border-top-left-radius: 8px;
Border-top-right-radius: 8px;
}
</style>
</head>
<body>

<h2>Tech Collab Registration Form</h2>


<form action=”/submit_form”
method=”POST”>
<!—Personal Information Section →
<section>
<div class=”form-section-
title”>PERSONAL INFORMATION</div>
<!—Text input →
<label for=”name”>Name:</label>
<input type=”text” id=”name”
name=”name” required>

<!—Email input →
<label for=”email”>Email:</label>
<input type=”email” id=”email”
name=”email” required>
</section>
<!—Account Details Section →
<section>
<div class=”form-section-title”>More
Details:</div>
<!—Password input →
<label
for=”password”>Password:</label>
<input type=”password” id=”password”
name=”password” required>

<!—Date input →
<label for=”dob”>Date of Birth:</label>
<input type=”date” id=”dob” name=”dob”
required>

<!—Number input →
<label for=”age”>Age:</label>
<input type=”number” id=”age”
name=”age” min=”18” max=”100” required>
</section>

<!—Academic Information Section →


<section>
<div class=”form-section-
title”>Academic Information</div>
<!—Drop-down menu for Year of Study →
<label for=”year”>Year of Study:</label>
<select id=”year” name=”year” required>
<option value=”” disabled
selected>Select your current year</option>
<option value=”freshman”> (1st
Year)</option>
<option value=”sophomore”> (2nd
Year)</option>
<option value=”junior”>(3rd
Year)</option>
<option value=”senior”> (4th
Year)</option>
<option value=”graduate”>Graduate
Student</option>
</select>
</section>

<!—Topics of Interest Section →


<section>
<div class=”form-section-title”>Topics of
Interest</div>
<!—Checkbox inputs for topics →
<div class=”checkbox-group”>
<label><input type=”checkbox”
name=”topics” value=”HTML”> HTML</label>
<label><input type=”checkbox”
name=”topics” value=”CSS”> CSS</label>
<label><input type=”checkbox”
name=”topics” value=”JavaScript”>
JavaScript</label>
<label><input type=”checkbox”
name=”topics” value=”ReactJS”>
ReactJS</label>
<label><input type=”checkbox”
name=”topics” value=”NodeJS”>
NodeJS</label>
<label><input type=”checkbox”
name=”topics” value=”Django”>
Django</label>
<label><input type=”checkbox”
name=”topics” value=”Ruby on Rails”> Ruby
on Rails</label>
<!—Add more topics as needed →
</div>
</section>

<!—Preferences Section →
<section>
<div class=”form-section-
title”>APPLYING FOR:</div>
<!—Checkbox input →
<label for=”subscribe”>
<input type=”checkbox” id=”subscribe”
name=”subscribe”>
SOCIAL COORDINATOR
</label><br><br>
<label for=”subscribe”>
<input type=”checkbox” id=”subscribe”
name=”subscribe”>
EVENT MANAGEMENT
</label><br><br>
<label for=”subscribe”>
<input type=”checkbox” id=”subscribe”
name=”subscribe”>
RESEARCH COORDINATOR
</label><br><br>
<label for=”subscribe”>
<input type=”checkbox” id=”subscribe”
name=”subscribe”>
TECH COORDINATOR
</label><br><br>

<!—Radio button input →


<label>GENDER:</label>
<div class=”radio-group”>
<label><input type=”radio” id=”male”
name=”gender” value=”male” required>
Male</label>
<label><input type=”radio” id=”female”
name=”gender” value=”female” required>
Female</label>
<label><input type=”radio” id=”other”
name=”gender” value=”other” required>
Other</label>
</div>
<label
for=”textarea1”>Comments:</label>
</br>
<textarea name=”textarea1”
id=”textarea1”
Cols=”20” rows=”10">
</textarea>
</section>
<!-- Submit button -->
<input type="submit" value="Submit">
</form>

</body>
</html>

OUTPUT:
Q2)Explore and explain any seven HTML input
attributes( example : min and max, disabled ,
autocomplete)

CODE:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport”
content=”width=device-width, initial-
scale=1.0”>
<title>HTML Input Attributes Example</title>
<style>
/* Global font styling */
Body {
Font-family: Arial, sans-serif;
Background-color: #f4f4f4;
Color: #333;
Padding: 20px;
}

/* Form container styling */


.form-container {
Background-color: #fff;
Padding: 20px;
Border-radius: 10px;
Box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
Border: 2px solid #007BFF; /* Adding
border around the form */
Max-width: 400px; /* Limit the width of
the form */
Margin: auto; /* Center the form on the
page */
}

/* Form input styling */


Input[type=”text”],
Input[type=”number”],
Input[type=”email”],
Input[type=”tel”],
Input[type=”password”] {
Border: 2px solid #ccc;
Border-radius: 5px;
Padding: 10px;
Width: 100%; /* Make input fields full-
width */
Box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
Margin-bottom: 15px;
Transition: border-color 0.3s; /* Smooth
border color transition */
}

/* Focus effect on input fields */


Input[type=”text”]:focus,
Input[type=”number”]:focus,
Input[type=”email”]:focus,
Input[type=”tel”]:focus,
Input[type=”password”]:focus {
Border-color: #007BFF; /* Change border
color on focus */
Outline: none; /* Remove outline */
}

/* Placeholder text color */


::placeholder {
Color: #aaa;
}
/* Label styling */
Label {
Font-weight: bold;
Display: block;
Margin-bottom: 5px;
}

/* Disabled input styling */


Input[disabled] {
Background-color: #e9ecef;
Cursor: not-allowed;
}

/* Heading styling */
H2 {
Text-align: center;
Margin-bottom: 20px;
}
</style>
</head>
<body>
<div class=”form-container”>
<h2>EMPLOYEE DETAILS</h2>

<!—1. Min and Max attributes for number


input →
<label for=”age”>Age (between 18 and
60):</label>
<input type=”number” id=”age”
name=”age” min=”18” max=”60”><br>

<!—2. Disabled attribute for input field →


<label for=”username”>Username
:</label>
<input type=”text” id=”username”
name=”username” ><br>

<!—3. Autocomplete attribute for text input


→
<label for=”email”>Email
(autocomplete):</label>
<input type=”email” id=”email”
name=”email” autocomplete=”on”><br>

<!—4. Placeholder attribute →


<label for=”phone”>Phone
Number:</label>
<input type=”tel” id=”phone”
name=”phone” placeholder=”Enter your
phone number”><br>
<!—5. Required attribute →
<label for=”password”>Password
(required):</label>
<input type=”password” id=”password”
name=”password” required><br>

<!—6. Pattern attribute for specific input


format →
<label for=”zipcode”>Zip Code (5
digits):</label>
<input type=”text” id=”zipcode”
name=”zipcode” pattern=”[0-9]{5}”
placeholder=”12345”><br>

<!—7. Step attribute for increment control


→
<label for=”rating”>Rating (step
0.5):</label>
<input type=”number” id=”rating”
name=”rating” min=”0” max=”5”
step=”0.5”><br>
</div>
</body>
</html>

OUTPUT:
LAB ASSIGNMENT : 3
WEB APP DEVELOPMENT

1. Create a web page that embeds an external


web page using an iframe and apply CSS
styling.

CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Pizza Project</title>
<style>
/* General Styles */
body {
font-family: 'Roboto', Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to bottom right, #6a11cb, #2575fc);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
flex-direction: column;
}

/* Header */
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Button */
.refresh-btn {
display: inline-block;
margin-bottom: 20px;
padding: 10px 20px;
font-size: 1rem;
color: #fff;
background: #ff6a00;
border: none;
border-radius: 30px;
cursor: pointer;
transition: background 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.refresh-btn:hover {
background: #ff4500;
}

/* Project Link Section */


.project-link {
margin-top: 20px;
text-align: center;
font-size: 1.2rem;
}

.project-link a {
color: #ffcc00;
text-decoration: none;
font-weight: bold;
background: rgba(255, 255, 255, 0.1);
padding: 10px 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: background 0.3s ease, color 0.3s ease;
}

.project-link a:hover {
background: rgba(255, 255, 255, 0.3);
color: #fff;
}

/* Footer */
footer {
margin-top: 10px;
font-size: 0.9rem;
text-align: center;
width: 100%;
color: rgba(255, 255, 255, 0.7);
}
footer a {
color: #ffcc00;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1>PROJECT PIZZERIA....</h1>
<button class="refresh-btn" onclick="reloadIframe()">Refresh Page</button>

<!-- Project Link Section -->


<div class="project-link">
<p>Explore My Pizza Project:</p>
<a href="file:///C:/Users/HITEN%20CHOUHAN/Desktop/PROJECT/INDEX.HTML"
target="_blank" rel="noopener noreferrer">Go to My Project</a>
</div>
</div>
<footer>
Built by <a
href="file:///C:/Users/HITEN%20CHOUHAN/Desktop/PROJECT/INDEX.HTML"
target="_blank" rel="noopener noreferrer">My Awesome Project</a>
</footer>

<script>
function reloadIframe() {
alert("No iframe content to reload.");
}
</script>
</body>
</html>
OUTPUT:-
LINK TO EXTERNAL WEB PAGE:
Assignment-4
Objective:
Create a program that demonstrates the following mouse events:

1. Mouse button pressed(onmousedown)


2. Pointer entry (onmouseenter)
3. Pointer exit (onmouseleave)
4. Pointer movement (onmousemove)
5. Mouse pointer exit (onmouseout)
6. Mouse pointer hover (onmouseover)
7. Mouse button release (onmouseup)

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mouse Events Demo</title>
<style>
body {
text-align: center;
margin-top: 50px;
}
.event-box {
width: 300px;
height: 200px;
border: 2px solid #333;
margin: 20px auto;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
</style>
</head>
<body>

<h1>Mouse Events Demonstration</h1>


<div id="eventBox" class="event-box">Hover and click me!</div>
<p id="eventInfo">Event details will appear here...</p>

<script>
const eventBox = document.getElementById('eventBox');
const eventInfo = document.getElementById('eventInfo');

eventBox.onmousedown = () => {
eventInfo.textContent = "Event: Mouse button pressed (onmousedown)";
};

eventBox.onmouseenter = () => {
eventInfo.textContent = "Event: Pointer entered (onmouseenter)";
};

eventBox.onmouseleave = () => {
eventInfo.textContent = "Event: Pointer exited (onmouseleave)";
};

eventBox.onmousemove = () => {
eventInfo.textContent = "Event: Pointer moved (onmousemove)";
};

eventBox.onmouseout = () => {
eventInfo.textContent = "Event: Mouse pointer exited (onmouseout)";
};

eventBox.onmouseover = () => {
eventInfo.textContent = "Event: Mouse pointer hover (onmouseover)";
};

eventBox.onmouseup = () => {
eventInfo.textContent = "Event: Mouse button released (onmouseup)";
};
</script>

</body>
</html>
```
```
OUTPUT:
LAB EXPERIMENT 5

Q: Create a web page that demonstrates the use of different types of loops and conditional
statements in JavaScript in the script tag.

Hint: Create a student object, display a list of students with properties like name, grade, and
attendance, and use loops and conditions to display their data and attendance status.

PROGRAM CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Loops and Conditional Statements</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
}

h1 {
color: #333;
font-size: 2.5em;
margin-bottom: 20px;
}

table {
margin: 0 auto;
border-collapse: collapse;
width: 80%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

th, td {
border: 1px solid #ddd;
padding: 12px;
font-size: 1.2em;
}OUT
th {
background-color: #4CAF50;
color: white;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

tr:hover {
background-color: #ddd;
}

p {
margin-top: 20px;
font-size: 1.5em;
color: #555;
}
</style>
</head>
<body>
<h1>Student Attendance Report</h1>
<div id="student-list"></div>

<script>
// Sample data: array of student objects
const students = [
{ name: "Alice", grade: 90, attendance: 95 },
{ name: "Bob", grade: 75, attendance: 80 },
{ name: "Charlie", grade: 60, attendance: 70 },
{ name: "Diana", grade: 85, attendance: 90 },
{ name: "Ethan", grade: 50, attendance: 65 }
];

// Function to determine attendance status


function getAttendanceStatus(attendance) {
if (attendance >= 90) {
return "Excellent";
} else if (attendance >= 75) {
return "Good";
} else {
return "Needs Improvement";
}
}

// Generate HTML content using loops and conditions


const studentListDiv = document.getElementById("student-list");
let content =
"<table><tr><th>Name</th><th>Grade</th><th>Attendance</th><th>Status</th></tr>
";

for (let i = 0; i < students.length; i++) {


const student = students[i];
const status = getAttendanceStatus(student.attendance);

content += `<tr>
<td>${student.name}</td>
<td>${student.grade}</td>
<td>${student.attendance}%</td>
<td>${status}</td>
</tr>`;
}

content += "</table>";

studentListDiv.innerHTML = content;

// Example of while loop to count students needing improvement


let count = 0;
let index = 0;
while (index < students.length) {
if (students[index].attendance < 75) {
count++;
}
index++;
}

// Display additional information using a do-while loop


let message = "";
do {
message = `Number of students needing improvement: ${count}`;
} while (false);

const additionalInfo = document.createElement("p");


additionalInfo.textContent = message;
document.body.appendChild(additionalInfo);
</script>
</body>
</html>
OUTPUT:
LAB EXPERIMENT 6

Q: Create a webpage using different string methods (as discussed in the class.)

PROGRAM CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript String Methods Demonstration</title>
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: #333;
text-align: center;
padding: 20px;
margin: 0;
}

h1 {
font-size: 3em;
color: #fff;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

p {
font-size: 1.5em;
color: #fff;
margin: 10px 0;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.result {
background: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: inline-block;
margin-top: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
font-size: 1.2em;
margin: 5px 0;
}
</style>
</head>
<body>
<h1>JavaScript String Methods</h1>
<div class="result" id="string-methods-demo"></div>

<script>
// String example
const exampleString = "JavaScript is amazing! Let's explore its string
methods.";

// Demonstrating different string methods


const results = [
`Original String: "${exampleString}"`,
`Length: ${exampleString.length}`,
`Uppercase: ${exampleString.toUpperCase()}`,
`Lowercase: ${exampleString.toLowerCase()}`,
`Substring (0, 10): ${exampleString.substring(0, 10)}`,
`Replaced 'amazing' with 'awesome':
${exampleString.replace('amazing', 'awesome')}`,
`Index of 'explore': ${exampleString.indexOf('explore')}`,
`Last Index of 's': ${exampleString.lastIndexOf('s')}`,
`Split by space: ${exampleString.split(' ')}`,
`Starts with 'JavaScript':
${exampleString.startsWith('JavaScript')}`,
`Ends with 'methods.': ${exampleString.endsWith('methods.')}`
];

// Generate HTML content for results


const demoDiv = document.getElementById("string-methods-demo");
let content = "<ul>";

results.forEach(result => {
content += `<li>${result}</li>`;
});

content += "</ul>";
demoDiv.innerHTML = content;
</script>
</body>
</html>

OUTPUT:
LAB EXPERIMENT 7

Q:
PROGRAM CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comprehensive JavaScript Demo</title>
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to bottom right, #6a11cb, #2575fc);
color: #fff;
text-align: center;
padding: 20px;
margin: 0;
overflow-x: hidden;
}

h1 {
font-size: 3.5em;
margin-bottom: 20px;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}

p {
font-size: 1.5em;
margin: 15px 0;
}

.section {
background: rgba(255, 255, 255, 0.1);
margin: 20px auto;
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
max-width: 90%;
}

.result {
background: rgba(255, 255, 255, 0.2);
padding: 15px;
border-radius: 10px;
margin: 10px auto;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

table {
margin: 0 auto;
width: 80%;
border-collapse: collapse;
border: 1px solid #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

th, td {
border: 1px solid #fff;
padding: 12px;
text-align: center;
font-size: 1.2em;
}

th {
background: #ff7e5f;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.1);
}

ul {
list-style: none;
padding: 0;
}

li {
margin: 8px 0;
font-size: 1.2em;
}

.button {
display: inline-block;
padding: 10px 20px;
font-size: 1.2em;
color: #fff;
background: #ff7e5f;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}

.button:hover {
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>Comprehensive JavaScript Demonstration</h1>

<div class="section">
<h2>Student Attendance Report</h2>
<div id="student-list"></div>
</div>

<div class="section">
<h2>String Methods Demonstration</h2>
<div class="result" id="string-methods-demo"></div>
</div>

<script>
// String example
const exampleString = "JavaScript is amazing! Let's explore its string
methods.";

// Demonstrating different string methods


const stringResults = [
`Original String: "${exampleString}"`,
`Length: ${exampleString.length}`,
`Uppercase: ${exampleString.toUpperCase()}`,
`Lowercase: ${exampleString.toLowerCase()}`,
`Substring (0, 10): ${exampleString.substring(0, 10)}`,
`Replaced 'amazing' with 'awesome':
${exampleString.replace('amazing', 'awesome')}`,
`Index of 'explore': ${exampleString.indexOf('explore')}`,
`Last Index of 's': ${exampleString.lastIndexOf('s')}`,
`Split by space: ${exampleString.split(' ')}`,
`Starts with 'JavaScript':
${exampleString.startsWith('JavaScript')}`,
`Ends with 'methods.': ${exampleString.endsWith('methods.')}`
];

// Generate HTML content for string results


const stringDemoDiv = document.getElementById("string-methods-demo");
let stringContent = "<ul>";

stringResults.forEach(result => {
stringContent += `<li>${result}</li>`;
});

stringContent += "</ul>";
stringDemoDiv.innerHTML = stringContent;

// Student data example


const students = [
{ name: "Alice", grade: 90, attendance: 95 },
{ name: "Bob", grade: 75, attendance: 80 },
{ name: "Charlie", grade: 60, attendance: 70 },
{ name: "Diana", grade: 85, attendance: 90 },
{ name: "Ethan", grade: 50, attendance: 65 }
];

// Function to determine attendance status


function getAttendanceStatus(attendance) {
if (attendance >= 90) {
return "Excellent";
} else if (attendance >= 75) {
return "Good";
} else {
return "Needs Improvement";
}
}

// Generate HTML content for student list


const studentListDiv = document.getElementById("student-list");
let studentContent =
"<table><tr><th>Name</th><th>Grade</th><th>Attendance</th><th>Status</th></tr>
";

for (let i = 0; i < students.length; i++) {


const student = students[i];
const status = getAttendanceStatus(student.attendance);

studentContent += `<tr>
<td>${student.name}</td>
<td>${student.grade}</td>
<td>${student.attendance}%</td>
<td>${status}</td>
</tr>`;
}
studentContent += "</table>";
studentListDiv.innerHTML = studentContent;
</script>
</body>
</html>

OUTPUT:
LAB EXPERIMENT : 8

Q. Create a database named "ecommerce" and in this database, create a table named
"orders" using PHPMyAdmin.

Pogram code:

-- Create database

CREATE DATABASE IF NOT EXISTS ecommerce;

-- Use the created database


USE ecommerce;

-- Create the "orders" table


CREATE TABLE orders (

id INT AUTO_INCREMENT PRIMARY KEY,


customer_name VARCHAR(255) NOT NULL,
product_name VARCHAR(255) NOT NULL,
quantity INT NOT NULL,
order_date DATETIME DEFAULT CURRENT_TIMESTAMP

);

OUTPUT:

You might also like