Scribd
Upload
10 views

WEB WORKSHOP FILE

The document contains multiple HTML files for an online book store, including pages for the homepage, login, registration, catalogue, and shopping cart. Each page is styled with CSS and includes functionality such as adding items to a cart and managing user registration. The overall structure is designed to provide a user-friendly experience for browsing and purchasing books.

Uploaded by

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

WEB WORKSHOP FILE

The document contains multiple HTML files for an online book store, including pages for the homepage, login, registration, catalogue, and shopping cart. Each page is styled with CSS and includes functionality such as adding items to a cart and managing user registration. The overall structure is designed to provide a user-friendly experience for browsing and purchasing books.

Uploaded by

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

EXPERIMENT-01

HTML FILE
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Book Store</title>

<style>
body, html {
margin: 0;
padding: 0;
height: 100%;

font-family: Arial, sans-serif;


display: flex;
flex-direction: column;
}
#header {

background-color: peachpuff;
border-bottom: 1px solid black;
padding: 10px 0;
text-align: center;
display: flex;

justify-content: space-between;
align-items: center;
}
#header h1 {
margin: 0;
flex-grow: 1;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
}

#nav-links a {
margin: 0 15px;
text-decoration: none;
color: #333;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
#content {
display: flex;
flex-grow: 1;
}

#sidebar {
width: 20%;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: peachpuff;
border-right: 1px solid black;

padding: 10px;
}
#main-content {
width: 80%;
padding: 10px;

overflow: auto;
}
#logo {
width: 100px;
height: auto;
}
#sidebar a {
color: blue;
text-decoration: none;

display: block;
margin-bottom: 10px;
}
#iframe-content {
width: 100%;

height: 100%;
border: none;
}
</style>
</head>

<body>
<div id="header">
<img src="psit-logo-2.jpeg" alt="Logo" id="logo">
<h1>PSIT</h1>
<div id="nav-links">

<a href="welcome.html" target="iframe-content">Home</a>


<a href="login.html" target="iframe-content">Login</a>
<a href="registration.html" target="iframe-content">Registration</a>
<a href="catalogue.html" target="iframe-content">Catalogue</a>
<a href="cart.html" target="iframe-content">Cart</a>

</div>
</div>
<div id="content">
<div id="sidebar">
<h2>Categories</h2>
<a href="cse.html" target="iframe-content">CSE</a>
<a href="ece.html" target="iframe-content">ECE</a>
<a href="eee.html" target="iframe-content">EEE</a>
<a href="civil.html" target="iframe-content">CIVIL</a>

</div>
<div id="main-content">
<iframe id="iframe-content" name="iframe-content" src="welcome.html"></iframe>
</div>
</div>

</body>
</html>
EXPERIMENT-2
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

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


<title>Login - Online Book Store</title>
<style>
body, html {
margin: 0;

padding: 0;
height: 100%;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;

align-items: center;
background-color: #f2f2f2;
}
.login-container {
width: 300px;

padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.login-container h2 {
margin: 0 0 20px;

text-align: center;
color: #333;
}
.login-container input {
width: 100%;

padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
}

.login-container button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;

border: none;
border-radius: 4px;
cursor: pointer;
}
.login-container button:hover {

background-color: #45a049;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form action="process_login.html" method="post">
<input type="text" name="username" placeholder="Username" required>

<input type="password" name="password" placeholder="Password" required>


<button type="submit">Login</button>
</form>
</div>
</body>

</html>
EXPERIMENT-3

HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

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


<title>Catalogue - Online Book Store</title>
<style>
body {
font-family: Arial, sans-serif;

margin: 20px;
}
h2 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;

}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 15px;
text-align: left;
}
th {

background-color: #f2f2f2;
}
.add-to-cart-btn {
background-color: #4CAF50;
color: white;

padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}

.add-to-cart-btn:hover {
background-color: #45a049;
}
</style>
<script>

function addToCart(bookName, price) {


let cart = JSON.parse(localStorage.getItem('cart')) || [];
const existingBook = cart.find(book => book.name === bookName);

if (existingBook) {

existingBook.quantity += 1;
existingBook.amount = existingBook.quantity * existingBook.price;
} else {
cart.push({ name: bookName, price: price, quantity: 1, amount: price });
}
localStorage.setItem('cart', JSON.stringify(cart));
alert('Book added to cart!');
}

</script>
</head>
<body>
<h2>Book Catalogue</h2>
<table>

<tr>
<th>Cover Page</th>
<th>Author Name</th>
<th>Publisher</th>
<th>Price</th>

<th>Action</th>
</tr>
<tr>
<td><img src="java.jpg" alt="Book Cover 1" width="100"></td>
<td>Barry A.Burd</td>

<td>wiley</td>
<td>$10</td>
<td><button class="add-to-cart-btn" onclick="addToCart('Beginning Programming
with Java for Dummies', 10)">Add to Cart</button></td>
</tr>
<tr>
<td><img src="ai.webp" alt="Book Cover 2" width="100"></td>

<td>Brian Christian</td>
<td>W. W. Norton & Company</td>
<td>$15</td>
<td><button class="add-to-cart-btn" onclick="addToCart('The Alignment Problem',
15)">Add to Cart</button></td>
</tr>
<tr>
<td><img src="ml.jpg" alt="Book Cover 3" width="100"></td>

<td>Andriy Burkov</td>
<td>Ingram short title</td>
<td>$20</td>
<td><button class="add-to-cart-btn" onclick="addToCart('The Hundred-Page Machine
Learning Book', 20)">Add to Cart</button></td>
</tr>
</table>

</body>
</html>
EXPERIMENT-4
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Cart - Online Book Store</title>


<style>
body {
font-family: Arial, sans-serif;
margin: 20px;

}
h2 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 15px;
text-align: left;
}
th {
background-color: #f2f2f2;

}
.remove-btn {
background-color: #ff4d4d;
color: white;
padding: 10px;

border: none;
border-radius: 4px;
cursor: pointer;
}
.remove-btn:hover {

background-color: #ff1a1a;
}
</style>
<script>
function loadCart() {

let cart = JSON.parse(localStorage.getItem('cart')) || [];


let cartTable = document.getElementById('cart-table');
let totalAmount = 0;

cart.forEach(book => {

if (book.name && book.price && book.quantity && book.amount) {


totalAmount += book.amount;
let row = cartTable.insertRow();
row.innerHTML = `
<td>${book.name}</td>
<td>$${book.price}</td>
<td>${book.quantity}</td>
<td>$${book.amount}</td>
<td><button class="remove-btn"
onclick="removeFromCart('${book.name}')">Remove</button></td>
`;

}
});

document.getElementById('total-amount').textContent = `Total: $${totalAmount}`;


}

function removeFromCart(bookName) {
let cart = JSON.parse(localStorage.getItem('cart')) || [];
cart = cart.filter(book => book.name !== bookName);
localStorage.setItem('cart', JSON.stringify(cart));

location.reload();
}
</script>
</head>
<body onload="loadCart()">

<h2>Your Cart</h2>
<table id="cart-table">
<tr>
<th>Book Name</th>
<th>Price</th>

<th>Quantity</th>
<th>Amount</th>
<th>Action</th>
</tr>
</table>
<h3 id="total-amount">Total: $0</h3>
</body>
</html>
EXPERIMENT-5
HTML FILE
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>

<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

form {
max-width: 600px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;

border-radius: 8px;
background-color: #f9f9f9;
}
form h2 {
text-align: center;

color: #333;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
width: 100%;
padding: 10px;

margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="radio"], input[type="checkbox"] {

margin-right: 10px;
}
button {
width: 100%;
padding: 10px;

background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;

}
button:hover {
background-color: #45a049;
}
</style>

</head>
<body>
<form action="submit_registration.html" method="post">
<h2>Registration Form</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<label for="email">E-mail ID:</label>


<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone" required>

<label>Sex:</label>
<input type="radio" id="male" name="sex" value="male" required> Male

<input type="radio" id="female" name="sex" value="female" required> Female


<input type="radio" id="other" name="sex" value="other" required> Other

<label for="dob">Date of Birth:</label>


<select id="dob-day" name="dob-day" required>

<option value="">Day</option>
<!-- Add options for days 1-31 here -->
<script>
for(let i=1; i<=31; i++) {
document.write('<option value="'+i+'">'+i+'</option>');

}
</script>
</select>
<select id="dob-month" name="dob-month" required>
<option value="">Month</option>
<!-- Add options for months 1-12 here -->
<script>
const months = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
months.forEach((month, index) => {
document.write('<option value="'+(index+1)+'">'+month+'</option>');

});
</script>
</select>
<select id="dob-year" name="dob-year" required>
<option value="">Year</option>

<!-- Add options for years here -->


<script>
const currentYear = new Date().getFullYear();
for(let i = currentYear; i >= 1900; i--) {
document.write('<option value="'+i+'">'+i+'</option>');

}
</script>
</select>

<label>Languages Known:</label>

<input type="checkbox" id="english" name="languages" value="english"> English


<input type="checkbox" id="telugu" name="languages" value="telugu"> Telugu
<input type="checkbox" id="hindi" name="languages" value="hindi"> Hindi
<input type="checkbox" id="tamil" name="languages" value="tamil"> Tamil

<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required></textarea>

<button type="submit">Register</button>
</form>
</body>
</html>
EXPERIMENT-6
HTML FILE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;

}
form {
max-width: 600px;
margin: auto;
padding: 20px;

border: 1px solid #ddd;


border-radius: 8px;
background-color: #f9f9f9;
}
form h2 {

text-align: center;
color: #333;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
width: 100%;

padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
}

input[type="radio"], input[type="checkbox"] {
margin-right: 10px;
}
button {
width: 100%;

padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;

cursor: pointer;
}
button:hover {
background-color: #45a049;
}

</style>
<script>
function validateForm() {
const name = document.getElementById('name').value;
const namePattern = /^[A-Za-z\s]{6,}$/;
if (!namePattern.test(name)) {
alert('Name should contain only alphabets and be at least 6 characters long.');
return false;

}
const password = document.getElementById('password').value;
if (password.length < 6) {
alert('Password should be at least 6 characters long.');
return false;

return true;
}
</script>

</head>
<body>
<form action="submit_registration.html" method="post" onsubmit="return
validateForm()">
<h2>Registration Form</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="email">E-mail ID:</label>

<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone" required>
<label>Sex:</label>
<input type="radio" id="male" name="sex" value="male" required> Male
<input type="radio" id="female" name="sex" value="female" required> Female

<input type="radio" id="other" name="sex" value="other" required> Other

<label for="dob">Date of Birth:</label>


<select id="dob-day" name="dob-day" required>
<option value="">Day</option>

<!-- Add options for days 1-31 here -->


<script>
for(let i=1; i<=31; i++) {
document.write('<option value="'+i+'">'+i+'</option>');
}

</script>
</select>
<select id="dob-month" name="dob-month" required>
<option value="">Month</option>
<!-- Add options for months 1-12 here -->

<script>
const months = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
months.forEach((month, index) => {
document.write('<option value="'+(index+1)+'">'+month+'</option>');
});
</script>

</select>
<select id="dob-year" name="dob-year" required>
<option value="">Year</option>
<!-- Add options for years here -->
<script>
const currentYear = new Date().getFullYear();
for(let i = currentYear; i >= 1900; i--) {
document.write('<option value="'+i+'">'+i+'</option>');

}
</script>
</select>

<label>Languages Known:</label>

<input type="checkbox" id="english" name="languages" value="english"> English


<input type="checkbox" id="telugu" name="languages" value="telugu"> Telugu
<input type="checkbox" id="hindi" name="languages" value="hindi"> Hindi
<input type="checkbox" id="tamil" name="languages" value="tamil"> Tamil

<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required></textarea>

<button type="submit">Register</button>
</form>

</body>
</html>
EXPERIMENT-7
HTML FILE
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>

<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

form {
max-width: 600px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;

border-radius: 8px;
background-color: #f9f9f9;
}
form h2 {
text-align: center;

color: #333;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
width: 100%;
padding: 10px;

margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="radio"], input[type="checkbox"] {

margin-right: 10px;
}
button {
width: 100%;
padding: 10px;

background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;

}
button:hover {
background-color: #45a049;
}
</style>

<script>
function validateForm() {
// Validate Name
const name = document.getElementById('name').value;
const namePattern = /^[A-Za-z\s]{6,}$/;
if (!namePattern.test(name)) {
alert('Name should contain only alphabets and be at least 6 characters long.');
return false;

}
const password = document.getElementById('password').value;
if (password.length < 6) {
alert('Password should be at least 6 characters long.');
return false;

}
const email = document.getElementById('email').value;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert('Please enter a valid email address (e.g., [email protected]).');

return false;
}
const phone = document.getElementById('phone').value;
const phonePattern = /^\d{10}$/;
if (!phonePattern.test(phone)) {

alert('Phone number should contain exactly 10 digits.');


return false;
}
return true;
}

</script>
</head>
<body>
<form action="submit_registration.html" method="post" onsubmit="return
validateForm()">
<h2>Registration Form</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<label for="email">E-mail ID:</label>


<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone" required>

<label>Sex:</label>
<input type="radio" id="male" name="sex" value="male" required> Male

<input type="radio" id="female" name="sex" value="female" required> Female


<input type="radio" id="other" name="sex" value="other" required> Other

<label for="dob">Date of Birth:</label>


<select id="dob-day" name="dob-day" required>

<option value="">Day</option>
<!-- Add options for days 1-31 here -->
<script>
for(let i=1; i<=31; i++) {
document.write('<option value="'+i+'">'+i+'</option>');

}
</script>
</select>
<select id="dob-month" name="dob-month" required>
<option value="">Month</option>
<script>
const months = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
months.forEach((month, index) => {
document.write('<option value="'+(index+1)+'">'+month+'</option>');
});

</script>
</select>
<select id="dob-year" name="dob-year" required>
<option value="">Year</option>
<script>

const currentYear = new Date().getFullYear();


for(let i = currentYear; i >= 1900; i--) {
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>

</select>
<label>Languages Known:</label>
<input type="checkbox" id="english" name="languages" value="english"> English
<input type="checkbox" id="telugu" name="languages" value="telugu"> Telugu
<input type="checkbox" id="hindi" name="languages" value="hindi"> Hindi

<input type="checkbox" id="tamil" name="languages" value="tamil"> Tamil


<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required></textarea>
<button type="submit">Register</button>
</form>

</body>
</html>
EXPERIMENT-8
HTML FILE
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>

<link rel="stylesheet" href="1.css">


</head>
<body>
<div class="container">
<header class="header">

<h1>Welcome to My Styled Web Page</h1>


<p>This is a demonstration of using different fonts and background images with CSS
</p>
</header>
<section class="content">
<div class="box">
<h2>Box 1</h2>

<p>This box has a background image and custom font.</p>


</div>
<div class="box">
<h2>Box 2</h2>
<p>This box also has a background image and custom font</p>

</div>
</section>
</div>
</body>
</html>

CSS FILE
body {
font-family: Arial, sans-serif;
margin: 0;

padding: 0;
background-image: url('https://via.placeholder.com/800x600');
background-size: cover;
background-repeat: no-repeat;
color: #333;

}
.container {
width: 90%;
margin: 0 auto;
padding: 20px;

background-color: rgba(255, 255, 255, 0.8);


border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.header {

text-align: center;
margin-bottom: 20px;
font-family: 'Georgia', serif;
}
.content {
display: flex;
justify-content: space-around;
}
.box {

width: 45%;
padding: 20px;
background-image: url('https://via.placeholder.com/400x300');
background-size: cover;
background-repeat: no-repeat;

border: 1px solid #ccc;


border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
font-family: 'Courier New', Courier, monospace;
color: white;

text-shadow: 1px 1px 2px #000;


}
EXPERIMENT-9
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Styled Web Page</title>


<link rel="stylesheet" href="1.css">
</head>
<body>
<div class="container">

<header class="header">
<h1>Welcome to My Styled Web Page</h1>
<p>This is a demonstration of using different fonts and background images with
CSS.</p>
<nav>
<a href="#">Home</a>
<a href="#">About</a>

<a href="#">Contact</a>
</nav>
</header>
<section class="content">
<div class="box">

<h2>Box 1</h2>
<p>This box has a background image and custom font.</p>
</div>
<div class="box">
<h2>Box 2</h2>
<p>This box also has a background image and custom font.</p>
</div>

</section>
</div>
</body>
</html>

CSS FILE
body {
font-family: Arial, sans-serif;
margin: 0;

padding: 0;
background-image: url('https://via.placeholder.com/800x600');
background-repeat: repeat;
background-size: cover;
color: #333;

}
.container {
width: 90%;
margin: 0 auto;
padding: 20px;

background-color: rgba(255, 255, 255, 0.8);


border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
margin-bottom: 20px;
font-family: 'Georgia', serif;
}

.content {
display: flex;
justify-content: space-around;
}
.box {

width: 45%;
padding: 20px;
background-image: url('https://via.placeholder.com/400x300');
background-repeat: no-repeat;
background-size: cover;

border: 1px solid #ccc;


border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
font-family: 'Courier New', Courier, monospace;
color: white;

text-shadow: 1px 1px 2px #000;


}
a:link {
color: #4CAF50;
}

a:visited {
color: #3E8E41;
}

a:hover {
color: #45a049;
text-decoration: underline;
}

a:active {
color: #2E7D32;
}
EXPERIMENT 10
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="todo-container">

<h1>My To-Do List</h1>


<div class="input-container">
<input type="text" id="task-input" placeholder="Add a new task...">
<button id="add-task-btn">Add Task</button>
</div>
<ul id="task-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html

CSS FILE
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #204b85;
display: flex;
justify-content: center;

align-items: center;
height: 100vh;
color: white;
}
.todo-container {

background: #34568b;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
width: 350px;

text-align: center;
}
h1 {
margin-bottom: 20px;
}

.input-container {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}

input[type="text"] {
width: 70%;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 14px;
}
button {
background-color: #4682b4;

color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
cursor: pointer;

}
button:hover {
background-color: #2c5d8b;
}
/* Task List Styles */

#task-list {
list-style: none;
padding: 0;
}
.task {

background: #2b3e56;
padding: 10px 15px;
margin-bottom: 10px;
border-radius: 5px;
display: flex;

justify-content: space-between;
align-items: center;
color: white;
}
.delete-btn {
background-color: #e74c3c;
color: white;
border: none;
border-radius: 5px;

padding: 5px 10px;


cursor: pointer;
}
.delete-btn:hover {
background-color: #c0392b;

JAVASCRIPT FILE
const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task-btn');
const taskList = document.getElementById('task-list');

function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') {
alert('Please enter a task!');
return;

}
const taskItem = document.createElement('li');
taskItem.className = 'task';
taskItem.innerHTML = `
${taskText}

<button class="delete-btn">Delete</button>
`;
taskItem.querySelector('.delete-btn').addEventListener('click', () => {
taskItem.remove();
});
taskList.appendChild(taskItem);
taskInput.value = '';
}
addTaskBtn.addEventListener('click', addTask);

taskInput.addEventListener('keypress', (e) => {


if (e.key === 'Enter') {
addTask();
}
});

You might also like