IPWT Theory DA

Internet Programming and Web
Technologies Theory DA
Name: Sankalp Mukim
Registration Number: 20BDS0128
Aim
Code
index.html
register.html
search.html
success.html
style.css
script.js
Output Screenshots
Home page(with required links)
Register Donor Page
Main screen
Incomplete Fields Submission
Invalid Phone Number
Invalid Address
Success Page
Search Page
All results
City based filtering
Blood group filtering
No results found
Aim
Design the frontend with Complete Client side code for Form Validation and Good CSS.
Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
<title>Blood Donation Tracking</title>
</head>
<body>
<header>
<h1>Blood Donation Tracking</h1>
</header>
<nav>
<a href="index.html">Home</a>
</nav>
<main>
<section>
<h2>Menu</h2>
<ul>
<li><a href="register.html">Create Donor</a></li>
<li><a href="search.html">Search Donor</a></li>
</ul>
</section>
</main>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="en">
<head>
/>
<script src="script.js" defer></script>
<title>Create Donor</title>
</head>
<body>
<header>
<h1>Create Donor</h1>
</header>
<nav>
</nav>
<main>
<section>
<form id="donorForm" onsubmit="return registerDonor(event)">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<br />
<label for="city">City:</label>
<select id="city" name="city" required>
<option value="Chennai">Chennai</option>
<option value="Tambaram">Tambaram</option>
<option value="Adyar">Adyar</option>
<option value="Velachery">Velachery</option>
<option value="Ambattur">Ambattur</option>
<option value="Avadi">Avadi</option>
<option value="Perambur">Perambur</option>
</select>
<br />
<label for="phone">Phone number:</label>
<input type="text" id="phone" name="phone" required />
<br />
<label for="bloodType">Blood Type:</label>
<select id="bloodType" name="bloodType" required>
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
</select>
<br />
<label for="rhFactor">Rh Factor:</label>
<input
type="radio"
id="positive"
name="rhFactor"
value="POSITIVE"
required
/>
<label for="positive">Positive</label>
<input
type="radio"
id="negative"
name="rhFactor"
value="NEGATIVE"
required
/>
<label for="negative">Negative</label>
<br />
<label for="address">Address:</label>
<textarea id="address" name="address"></textarea>
<br />
<button type="submit">Create Donor</button>
<button type="reset">Clear</button>
</form>
</section>
</main>
</body>
</html>
search.html
<!DOCTYPE html>
<html lang="en">
<head>
/>
<script src="script.js" defer></script>
<title>Search Donor</title>
</head>
<body>
<header>
<h1>Search Donor</h1>
</header>
<nav>
</nav>
<main>
<section>
<form id="searchForm" onsubmit="return searchDonor(event)">
<label for="searchCity">City:</label>
<select id="searchCity" name="searchCity">
<option value="All">All</option>
<option value="Chennai">Chennai</option>
<option value="Tambaram">Tambaram</option>
<option value="Adyar">Adyar</option>
<option value="Velachery">Velachery</option>
<option value="Ambattur">Ambattur</option>
<option value="Avadi">Avadi</option>
<option value="Perambur">Perambur</option>
</select>
<br />
<label for="searchBloodType">Blood Type:</label>
<select id="searchBloodType" name="searchBloodType">
<option value="All">All</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
</select>
<br />
<button type="submit">Search</button>
</form>
<div id="searchResults"></div>
</section>
</main>
</body>
</html>
success.html
<!DOCTYPE html>
<html lang="en">
<head>
/>
<title>Success</title>
</head>
<body>
<header>
<h1>Success</h1>
</header>
<nav>
</nav>
<main>
<section>
<p>Donor registration was successful!</p>
</section>
</main>
</body>
</html>
style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
padding: 8px 16px;
}
nav a:hover {
background-color: #ddd;
color: black;
}
main {
display: flex;
justify-content: center;
padding: 20px;
}
form {
display: flex;
flex-direction: column;
}
form label {
margin: 10px 0;
}
form input[type="text"],
form input[type="radio"],
form select,
form textarea {
margin: 5px 0;
}
form button {
margin: 10px 0;
}
#searchResults {
margin-top: 20px;
}
.searchResult {
background-color: #f1f1f1;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
script.js
function registerDonor(event) {
event.preventDefault();
const name = document.getElementById("name").value;

const city = document.getElementById("city").value;
const phone = document.getElementById("phone").value;
const bloodType = document.getElementById("bloodType").value;
const rhFactor = document.querySelector(
'input[name="rhFactor"]:checked'
).value;
const address = document.getElementById("address").value;
if (phone.length !== 10 || isNaN(phone)) {

alert("Phone number should be exactly 10 digits and contain only
numbers.");
return false;
}
if (address && address.length < 40) {
alert("Address should be at least 40 characters long.");
return false;
}
// Add your API call to register the donor, then redirect to the success
page.
// Example: (Replace with your own API route)
// fetch('/api/registerDonor', { method: 'POST', body: JSON.stringify({
name, city, phone, bloodType, rhFactor, address }) })
// .then(response => {
// if (response.ok) {
// window.location.href = 'success.html';
// } else {
// alert('There was an error registering the donor.');
// }
// });
window.location.href = "success.html";
return false;
}
function searchDonor(event) {
event.preventDefault();
const searchCity = document.getElementById("searchCity").value;

const searchBloodType = document.getElementById("searchBloodType").value;
// Add your API call to search donors based on the city and/or blood
type.
// Example: (Replace with your own API route)
// fetch('/api/searchDonor', { method: 'POST', body: JSON.stringify({
searchCity, searchBloodType }) })
// .then(response => response.json())
// .then(data => {
// displaySearchResults(data);
// });
// make mock data
const donorData = [
{
name: "John Doe",
city: "Chennai",
phone: "1234567890",
bloodType: "A",
rhFactor: "+",
address: "123 Main St, Chennai, 10001",
},
{
name: "Jane Doe",
city: "Tambaram",
phone: "1234567890",
bloodType: "B",
rhFactor: "-",
address: "123 Main St, Tambaram, 10001",
},
{
name: "John Smith",
city: "Adyar",
phone: "1234567890",
bloodType: "AB",
rhFactor: "+",
address: "123 Main St, Adyar, 10001",
},
{
name: "Jane Smith",
city: "Tambaram",
phone: "1234567890",
bloodType: "O",
rhFactor: "-",
address: "123 Main St, Tambaram, 10001",
},
];
const results = donorData.filter((donor) => {

// account for all in search
if (searchCity === "All" && searchBloodType === "All") {
return true;
} else if (searchCity === "All") {
return donor.bloodType === searchBloodType;
} else if (searchBloodType === "All") {
return donor.city === searchCity;
} else {
return donor.city === searchCity && donor.bloodType ===
searchBloodType;
}
});
displaySearchResults(results);
return false;
}
function displaySearchResults(results) {
const searchResultsDiv = document.getElementById("searchResults");
searchResultsDiv.innerHTML = "";
if (results.length === 0) {
const resultDiv = document.createElement("div");
resultDiv.className = "searchResult";
resultDiv.innerHTML = `
<p>No results found.</p>
`;
searchResultsDiv.appendChild(resultDiv);
return;
}
results.forEach((result) => {
const resultDiv = document.createElement("div");
resultDiv.className = "searchResult";
resultDiv.innerHTML = `
<p>Name: ${result.name}</p>
<p>City: ${result.city}</p>
<p>Phone: ${result.phone}</p>
<p>Blood Type: ${result.bloodType} ${result.rhFactor}</p>
<p>Address: ${result.address}</p>
`;
searchResultsDiv.appendChild(resultDiv);
});
}
Output Screenshots
Home page(with required links)

Register Donor Page
Main screen
Incomplete Fields Submission
Invalid Phone Number
Invalid Address
Success Page
Search Page
All results
City based filtering
Blood group filtering
No results found

IPWT Theory DA

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IPWT Theory DA

Uploaded by

Copyright:

Available Formats

Internet Programming and Web

const name = document.getElementById("name").value;

if (phone.length !== 10 || isNaN(phone)) {

const searchCity = document.getElementById("searchCity").value;

const results = donorData.filter((donor) => {

Home page(with required links)

You might also like