Scribd
Upload
27 views18 pages

Prac 1

The document contains multiple web application templates including a Matrimony Application, Shopping Billing System, College website, E-Ticket Booking, Birthday Party Invitation, Login Page with Input Validation, and Biodata Upload. Each section includes HTML, CSS, and JavaScript code to demonstrate functionality such as user registration, product billing, event booking, and file uploads. The code snippets are structured to provide a complete front-end experience for various applications.

Uploaded by

Thejashree Manogaran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views18 pages

Prac 1

The document contains multiple web application templates including a Matrimony Application, Shopping Billing System, College website, E-Ticket Booking, Birthday Party Invitation, Login Page with Input Validation, and Biodata Upload. Each section includes HTML, CSS, and JavaScript code to demonstrate functionality such as user registration, product billing, event booking, and file uploads. The code snippets are structured to provide a complete front-end experience for various applications.

Uploaded by

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

MATRIMONY

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Matrimony Application</title>
</head>
<body>
<header>
<h1>Matrimony Application</h1>
</header>
<section id="registration">
<h2>Register</h2>
<form id="registrationForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Register</button>
</form>
</section>
<section id="login">
<h2>Login</h2>
<form id="loginForm">
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" name="loginUsername"
required>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword"
name="loginPassword" required>
<button type="submit">Login</button>
</form>
</section>
<footer>
<p>&copy; 2023 Matrimony App</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS CODE:
body {
font-family: 'Arial', sans-serif;
}
h2{
text-align:center;
}
header {
background-color: black;
color: white;
text-align: center;
padding: 1rem;
}
input {
padding: 8px;
margin-bottom: 10px;
}
form {
display: flex;
flex-direction: column;
max-width: 300px;
margin: 0 auto;
}
button {
background-color: black;
color: white;
padding: 10px;
cursor: pointer;
}
footer {
background-color: black;
color: white;
text-align: center;
padding: 1rem;}
JAVASCRIPT CODE:
document.getElementById('registrationForm').addEventListener('sub
mit', function (e) {
e.preventDefault();
alert('Registration logic goes here');
});

document.getElementById('loginForm').addEventListener('submit',
function (e) {
e.preventDefault();
alert('Login logic goes here');
});
BILL SYSTEM
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Shopping Billing System</title>
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<h1>Shopping Billing System</h1>
<div id="product-form">
<label for="productName">Product Name:</label>
<input type="text" id="productName">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity">
<label for="price">Price:</label>
<input type="number" id="price">
<button onclick="addProduct()">Add Product</button>
</div>

<div id="bill">
<p id="total">Total Bill: 1250</p>
</div>

<script src="script1.js"></script>
</body>
</html>
CSS CODE:
body {
font-family: sans-serif;
}

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

#product-form {
border: 1px solid black;
padding: 20px;
}

#bill {
border: 1px solid black;
padding: 20px;
margin-top: 20px;
}
JAVASCRIPT CODE:
function addProduct() {
const productName =
document.getElementById("productName").value;
const quantity = document.getElementById("quantity").value;
const price = document.getElementById("price").value;
const totalPrice = quantity * price;
const bill = document.getElementById("bill");
bill.innerHTML += `
<p>${productName} - ${quantity} x ${price} = ${totalPrice}</p>
`;
document.getElementById("productName").value = "";
document.getElementById("quantity").value = "";
document.getElementById("price").value = "";
const totalBill = do0cument.querySelectorAll("#bill p").length > 0
? document.querySelectorAll("#bill p")
.map((item) => parseFloat(item.textContent.split("=")[1]))
.reduce((sum, value) => sum + value, 0)
: 0;
document.getElementById("total").textContent = "Total Bill: " +
totalBill;
}
COLLEGE
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<nav>
<div class="container">
<a href="#">Home</a>
<a href="#">About us</a>
<a href="#">Admission</a>
<a href="#">Gallery</a>
<a href="#">Notice Board</a>
<a href="#">Events</a>
<a href="#">Tutorial</a>
<a href="#">Contact us</a>
</div>
</nav>
<div class="main-section about-us">
<img src="images/principal.jpg" >
<div>
<h2 class="heading">About Our Chairman</h2>
<p> a good person </p>
<img src="images/sign.png">
</div>
</div>
<div class="main-section gallery">
<h2 class="heading">Gallery</h2>
<img src="images/gallery-1.jpg">
<img src="images/gallery-2.jpg">
<img src="images/gallery-3.jpg">
<img src="images/gallery-4.jpg">
<img src="images/gallery-5.jpg">
<img src="images/gallery-6.jpg">
<img src="images/gallery-7.jpg">
<img src="images/gallery-8.jpg">
</div>
</body>
</html>
CSS CODE:
nav {
width: 100%;
float: left;
background: orange;
padding:15px 0px;
}
nav a {
color: white;
text-decoration: none;
font-size: 17px;
border-right: 1px solid black;
padding:2px 20px;
}
.about-us img {
width:24%;
float:left;
}
.about-us div {
width:70%;
margin-left:20px;
float:left;
line-height:35px;
}
.gallery img {
width: 24%;
}
DATE
CODE:

<!DOCTYPE html>
<html>
<head>
<title>Current Date</title>
</head>
<body>
<p id="current-date"></p>
<script>
const currentDate = new Date();
const formattedDate = currentDate.toLocaleDateString();
const dateElement = document.getElementById("current-date");
dateElement.textContent = formattedDate;
</script>
</body>
</html>

TICKET BOOKING:
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>E-Ticket Booking</title>
<link rel="stylesheet" href="styles5.css">
</head>
<body>
<header>
<h1>Book Your Tickets</h1>
</header>

<main>
<section id="booking-form">
<h2>Select Event and Tickets</h2>
<form>
<label for="event">Choose Event:</label>
<select id="event">
<option>BUS</option>
<option>TRIAN</option>
</select>

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" min="1">

<button type="submit">Book Tickets</button>


</form>
</section>

<section id="ticket-details">
<h2>Ticket Details</h2>
</section>
</main>

<footer>
<p>&copy; 2023 E-Ticket Booking</p>
</footer>

<script src="script5.js"></script>
</body>
</html>
CSS CODE:
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
}

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

#booking-form, #ticket-details {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}

JAVASCRIPT:
const bookingForm = document.getElementById("booking-form");
const ticketDetails = document.getElementById("ticket-details");
bookingForm.addEventListener("submit", (event) => {
event.preventDefault();
const selectedEvent = document.getElementById("event").value;
const quantity = document.getElementById("quantity").value;
const ticketData = {
event: selectedEvent,
quantity: quantity,
price: 25,
total: quantity * 25,
};
ticketDetails.innerHTML = `
<p>Event: ${ticketData.event}</p>
<p>Quantity: ${ticketData.quantity}</p>
<p>Price: ${ticketData.price} per ticket</p>
<p>Total: ${ticketData.total}</p>
`;
});

INVITATION
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Birthday Party Invitation</title>
<link rel="stylesheet" href="style6.css">
</head>
<body>
<div class="invitation-container">
<img src="images/balloons.jpg" alt="Birthday balloons">
<div class="invitation-content">
<h1>You're Invited!</h1>
<h2>To celebrate the birthday of</h2>
<h3> [Birthday Person's Name] </h3>
<p>Join us for fun, games, and cake!</p>
<ul>
<li>Date: <span id="date">[Date]</span></li>
<li>Time: <span id="time">[Time]</span></li>
<li>Place: <span id="place">[Location]</span></li>
</ul>
<button onclick="rsvp()">RSVP</button>
</div>
</div>

<script src="script6.js"></script>
</body>
</html>

CSS CODE:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}

.invitation-container {
width: 500px;
margin: 50px auto;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
text-align: center;
}

.invitation-content {
padding: 30px;
}

h1 {
font-size: 36px;
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}

h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}

ul {
list-style: none;
padding: 0;
margin-bottom: 20px;
}

li {
margin-bottom: 5px;
}

span {
font-weight: bold;
}

button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

img {
width: 100%;
height: 200px;
object-fit: cover;
}

JAVASCRIPT:
// Replace placeholders with actual date, time, and location
const date = document.getElementById("date");
date.textContent = "[Month] [Day], [Year]";
const time = document.getElementById("time");
time.textContent = "[Hour]:[Minute] [AM/PM]";

const place = document.getElementById("place");


place.textContent = "[Location Name]";
function rsvp() {
alert("Thank you for your RSVP! We're looking forward to seeing
you!");
}

INPUT VALIDATION
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<form id="loginForm" onsubmit="return validateForm()">
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Login</button>
</form>

<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "" || password === "") {
alert("Please fill in all fields.");
return false;
}
return true;
}
</script>

</body>
</html>
BIO DATA:
HTML CODE:
<!DOCTYPE html>

<html>
<head>
<title>Biodata Upload</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Upload Your Biodata</h1>
<form id="biodataForm">
<label for="fileInput">Choose Biodata File:</label>
<input type="file" id="fileInput" accept=".pdf, .doc, .docx">
<button type="submit">Upload</button>
</form>
<div id="uploadStatus"></div>
<script src="script.js"></script>
</body>
</html>
CSS CODE:
body {
font-family: sans-serif;
text-align: center;
}

h1 {
margin-bottom: 20px;
}

form {
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
margin: 0 auto;
}

label {
margin-bottom: 10px;
}

#uploadStatus {
margin-top: 20px;
font-weight: bold;
}

JAVASCRIPT:
const biodataForm = document.getElementById("biodataForm");
const fileInput = document.getElementById("fileInput");
const uploadStatus = document.getElementById("uploadStatus");

biodataForm.addEventListener("submit", (event) => {


event.preventDefault(); // Prevent default form submission

const file = fileInput.files[0];

// Check for file size and type (optional):


if (file.size > 1048576) { // 1 MB
uploadStatus.textContent = "File size exceeds 1 MB.";
return;
}
if (!file.type.match(/pdf|docx?/)) {
uploadStatus.textContent = "Invalid file type. Please upload a
PDF or Word document.";
return;
}

// Simulate file upload (replace with actual API call for real
platforms):
uploadStatus.textContent = "Uploading...";
setTimeout(() => {
uploadStatus.textContent = "Biodata uploaded successfully!";
// Reset the form after successful upload:
biodataForm.reset();
}, 2000); // Simulate upload time
});

You might also like