If you are looking to contribute towards saving lives by donating blood or if you are in need of blood donation services, then you're at the right place. Our Blood Bank Website serves as a platform dedicated to addressing the critical need for blood donations and connecting donors with recipients in various cities. With a focus on the noble cause of saving lives, we have meticulously designed our website to streamline the blood donation process and facilitate life-saving transactions.
+
+
We provide comprehensive information about blood types, highlighting their importance in ensuring successful transfusions. Additionally, our platform educates visitors about the numerous benefits of blood donation, including its potential to save lives, boost overall health, and even reduce the risk of certain medical conditions. Moreover, we emphasize the role of blood donation in disease prevention, underscoring its contribution to public health initiatives.
+
+
Powered by HTML, CSS, and JavaScript, our website offers a user-friendly interface that simplifies the donation process. Furthermore, our platform enables users to initiate donation requests, allowing individuals in need of blood transfusions to connect with willing donors seamlessly.
+
+
Through our dedication to leveraging technology for social good, we aim to raise awareness about the importance of blood donation and inspire more individuals to become active participants in this life-saving endeavor. Join us in our mission to make a difference in the lives of those in need of blood transfusions, and together, let's contribute towards building healthier communities.
+
+
+
+
+
+
+
+
Our Team
+
+
+
+
+
+
+
Shweta Kulkarni
+
+
+
+
+
+ Shweta, a Software Developer with 5 years of experience, brought her expertise in HTML, CSS, and JavaScript to ensure the functionality and reliability of our website. Her contributions include designing and developing the Donor, Recipient, and Blood Bags Availability pages of the website with CRUD operations.
+
+
+
+
+
+
+
+
Sameer Enjapuri
+
+
+
+
+
+ Sameer, drawing from his extensive 5-year experience as a data engineer, infused his expertise into this project to ensure the website's functionality and reliability. His contributions encompassed the design and development of the Home, About Us & Dashboard pages, in addition to styling the website.
+
+
+
+
+
+
+
+
Arpan Jaiswal
+
+
+
+
+
+ Arpan, boasting 7 years of expertise as a Functional Analyst, applied his skill set to design and create pivotal pages for our blood bank website. Notably, his contributions encompassed the design and development of the ERD, Articles Page, and initiating the MVC project.
+
+
+
+
+
+
+
+
Pratik Jaiswal
+
+
+
+
+
+ Pratik, a Software Engineer with a solid 2-year background in HTML, CSS, and JavaScript, dedicated his efforts to elevating the visual allure and interactivity of our website. His role involved crafting and implementing the ERD, Home & Contact Us pages, while also prioritizing an immersive user experience.
+
+
+
+
+
+
+
+
+
+
View our Project Repository Here
+
+
+
+
+
ERD
+
+
+
+
+
+
+
+
+
+
PDF of GIT Commits
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 000000000..22393f273
--- /dev/null
+++ b/README.md
@@ -0,0 +1,100 @@
+# Blood Bank Management Website
+
+This project, created by our group using HTML, CSS, and JavaScript, aims to facilitate blood donation by connecting donors with recipients, raising awareness about the importance of blood donation, and dispelling myths surrounding the process. We developed a fully functional static website that implements CRUD functionality with a master-detail relationship and streamlined, user-friendly interfaces.
+
+Link to the website: http://myweb.usf.edu/~senjapuri/
+
+## Objective
+- Facilitate blood donation by connecting donors with recipients.
+- Raise awareness about the importance of blood donation and dispel myths.
+- Develop a fully functional static website with CRUD functionality and user-friendly interfaces.
+
+## Intent
+Our website aims to create a seamless platform for blood donation, fostering connections between donors and recipients while advocating for health and community well-being.
+
+## Goals
+- **Facilitate Blood Donation:** Create a platform that makes it easy for donors and recipients to connect.
+- **Raise Public Awareness:** Inform the public about the importance of blood donation and dispel common myths.
+- **Optimize User Experience:** Ensure the website is intuitive and easy to navigate.
+- **Promote Health Advocacy:** Advocate for blood donation as a crucial aspect of public health.
+- **Foster Community Support:** Encourage community involvement and support for blood donation.
+- **Provide Supportive Resources:** Offer resources and information to support blood donors and recipients.
+
+## Website Structure
+The website includes several key pages:
+
+### Home Page
+The home page serves as the introduction to our website, offering a brief overview and directing users to various sections.
+- **Articles:** Clicking this link directs users to the full articles page, providing detailed information on blood donation.
+- **New to Blood Donation?:** This section offers facts about blood donation myths and provides a guide for download.
+- **Testimonials:** User testimonials highlighting positive experiences with blood donation.
+
+*Image Description: The home page image showcases the main navigation bar, the introductory text, the articles link, and a download guide button.*
+
+
+
+
+
+### About Us Page
+The about us page provides comprehensive information about the project and the team.
+- **About the Project:** Describes the website's purpose and its role in facilitating blood donation.
+- **Our Team:** Includes pictures and information about the project team.
+- **ERD Diagram:** Illustrates the database design and relationships.
+
+*Image Description: The about us page image shows the project description, blood types information, team photos, and the ERD diagram.*
+
+
+
+
+### Dashboard Page
+The dashboard page provides an overview of key metrics and data visualizations.
+- **Cards:** Display summary information such as Number of Lives Saved, Number of Donors, and Quantity of Blood.
+- **Charts:**
+ 1. Average donor registrations monthly (bar graph).
+ 2. Monthly blood donations (line graph).
+ 3. Blood bag availability (pie chart).
+
+*Image Description: The dashboard page image includes the summary cards and the three charts providing insights into the blood donation activities.*
+
+
+
+### Donor Registration Form
+The donor registration form allows individuals to register as blood donors.
+- **Form Fields:** Includes fields for personal information, blood type, and contact details.
+
+*Image Description: The donor registration form image shows the form fields for entering donor information.*
+
+
+
+### Recipient Registration Form
+The recipient registration form allows individuals in need of blood to register and request donations.
+- **Form Fields:** Includes fields for personal information, blood type needed, and contact details.
+
+*Image Description: The recipient registration form image shows the form fields for entering recipient information.*
+
+
+
+### Blood Bags Available
+This page provides a list of available blood bags for donation.
+- **Table:** Displays details of available blood bags including blood type, quantity, and expiration date.
+
+*Image Description: The blood bags available page image shows the table listing available blood bags and their details.*
+
+
+
+## How to Use
+1. **Navigate through the website:** Use the navigation bar to access different pages.
+2. **Read Articles:** Learn about blood donation through our detailed articles.
+3. **Register as a Donor or Recipient:** Fill out the respective forms to either donate blood or request a blood donation.
+4. **View Dashboard:** Check the dashboard for an overview of blood donation metrics.
+5. **Check Blood Availability:** Visit the blood bags available page to see available blood types and quantities.
+6. **Contact Us:** Use the contact form to reach out with any questions or feedback.
+
+## Technologies Used
+- HTML
+- CSS
+- JavaScript
+
+---
+
+Feel free to reach out through our About us page - Our Team contacts if you have any questions or need further information. Together, we can make a difference in the lives of those in need of blood transfusions.
diff --git a/Recipients.html b/Recipients.html
new file mode 100644
index 000000000..72793dd09
--- /dev/null
+++ b/Recipients.html
@@ -0,0 +1,218 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Recipents
+
+
+
+
+
+
+
+
+
+
+
+
+
This comprehensive article provides an in-depth examination of the intricate system of blood types. We delve into the nuances of blood classification, including the ABO system and the Rh factor, and discuss the significance of compatibility in blood transfusions. Understanding blood types is paramount in healthcare settings, as it determines the suitability of donor blood for recipients and minimizes the risk of adverse reactions. We explore the characteristics of each blood type, their distribution in the population, and the implications for medical treatment and transfusion therapy. By gaining insights into blood types, readers will develop a deeper appreciation for the complexity of blood biology and the importance of blood donation in maintaining public health.
+
+
+
+
+
+
+
+
+
+
+
Donations Benefits
+
In this article, we delve into the wide-ranging benefits of blood donation. Not only does donating blood provide a critical lifeline for individuals in need during emergencies and medical procedures, but it also offers numerous advantages for the donors themselves. Research suggests that regular blood donation can have positive effects on the donor's health, such as reducing the risk of cardiovascular diseases and certain types of cancer. Additionally, blood donation promotes the renewal of blood cells, which helps maintain overall vitality and well-being. By participating in blood donation programs, individuals not only contribute to the greater good of society but also reap significant health benefits for themselves.
+
+
+
+
+
+
+
+
+
+
+
+
Disease Protection
+
In this illuminating article, we shed light on the preventive aspects of blood donation beyond its immediate life-saving impact. While blood donation is often associated with emergencies and medical treatments, its benefits extend far beyond these scenarios. Research suggests that regular blood donation can confer protective effects against certain diseases, including cardiovascular conditions and iron overload disorders. Furthermore, blood donation plays a crucial role in supporting community healthcare initiatives by ensuring an adequate blood supply for patients in need. By exploring the intersection of blood donation and disease prevention, readers will gain a deeper understanding of the holistic benefits of this altruistic act and its contribution to public health.
+
+
+
+
+
+
+
+
+
+
+
How To Donate?
+
This comprehensive guide offers invaluable insights into the blood donation journey, empowering readers to become active participants in this life-saving endeavor. We break down the donation process into manageable steps, beginning with the preliminary eligibility assessment to determine suitability for donation. We provide practical tips and recommendations for donors, including dietary considerations, hydration strategies, and relaxation techniques to optimize the donation experience. Additionally, we offer guidance on what to expect during the donation procedure and how to care for oneself afterward. By demystifying the blood donation process and addressing common concerns and misconceptions, this article aims to inspire and educate individuals to take proactive steps towards making a positive impact on society.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/images_readme/about_us1.png b/images_readme/about_us1.png
new file mode 100644
index 000000000..79f2f06d7
Binary files /dev/null and b/images_readme/about_us1.png differ
diff --git a/images_readme/about_us2.png b/images_readme/about_us2.png
new file mode 100644
index 000000000..ca73e6c8f
Binary files /dev/null and b/images_readme/about_us2.png differ
diff --git a/images_readme/bag.png b/images_readme/bag.png
new file mode 100644
index 000000000..5bede40b9
Binary files /dev/null and b/images_readme/bag.png differ
diff --git a/images_readme/dashboard.png b/images_readme/dashboard.png
new file mode 100644
index 000000000..13378728b
Binary files /dev/null and b/images_readme/dashboard.png differ
diff --git a/images_readme/donor.png b/images_readme/donor.png
new file mode 100644
index 000000000..75ecf39fd
Binary files /dev/null and b/images_readme/donor.png differ
diff --git a/images_readme/home_page1.png b/images_readme/home_page1.png
new file mode 100644
index 000000000..02710f251
Binary files /dev/null and b/images_readme/home_page1.png differ
diff --git a/images_readme/home_page2.png b/images_readme/home_page2.png
new file mode 100644
index 000000000..a2c6813e0
Binary files /dev/null and b/images_readme/home_page2.png differ
diff --git a/images_readme/home_page3.png b/images_readme/home_page3.png
new file mode 100644
index 000000000..b84e88818
Binary files /dev/null and b/images_readme/home_page3.png differ
diff --git a/images_readme/home_page4.png b/images_readme/home_page4.png
new file mode 100644
index 000000000..16528955f
Binary files /dev/null and b/images_readme/home_page4.png differ
diff --git a/images_readme/recipient.png b/images_readme/recipient.png
new file mode 100644
index 000000000..e40a3f5ba
Binary files /dev/null and b/images_readme/recipient.png differ
diff --git a/imgs/1.jpg b/imgs/1.jpg
new file mode 100644
index 000000000..1af1af44d
Binary files /dev/null and b/imgs/1.jpg differ
diff --git a/imgs/BG-phone.png b/imgs/BG-phone.png
new file mode 100644
index 000000000..5d33aa77d
Binary files /dev/null and b/imgs/BG-phone.png differ
diff --git a/imgs/BG.jpg b/imgs/BG.jpg
new file mode 100644
index 000000000..1e79a44a6
Binary files /dev/null and b/imgs/BG.jpg differ
diff --git a/imgs/BG1.jpg b/imgs/BG1.jpg
new file mode 100644
index 000000000..bac6b34fc
Binary files /dev/null and b/imgs/BG1.jpg differ
diff --git a/imgs/ERD.jpeg b/imgs/ERD.jpeg
new file mode 100644
index 000000000..422a3e7ed
Binary files /dev/null and b/imgs/ERD.jpeg differ
diff --git a/imgs/about - Copy.png b/imgs/about - Copy.png
new file mode 100644
index 000000000..244bdf22f
Binary files /dev/null and b/imgs/about - Copy.png differ
diff --git a/imgs/about.png b/imgs/about.png
new file mode 100644
index 000000000..e9b1a8eea
Binary files /dev/null and b/imgs/about.png differ
diff --git a/imgs/arrow.png b/imgs/arrow.png
new file mode 100644
index 000000000..2ee87bd86
Binary files /dev/null and b/imgs/arrow.png differ
diff --git a/imgs/call.jpg b/imgs/call.jpg
new file mode 100644
index 000000000..8459670b5
Binary files /dev/null and b/imgs/call.jpg differ
diff --git a/imgs/complain.png b/imgs/complain.png
new file mode 100644
index 000000000..a3fe4aa8b
Binary files /dev/null and b/imgs/complain.png differ
diff --git a/imgs/git.pdf b/imgs/git.pdf
new file mode 100644
index 000000000..7ff373f24
Binary files /dev/null and b/imgs/git.pdf differ
diff --git a/imgs/github_icon.png b/imgs/github_icon.png
new file mode 100644
index 000000000..0f723b9c2
Binary files /dev/null and b/imgs/github_icon.png differ
diff --git a/imgs/google1.png b/imgs/google1.png
new file mode 100644
index 000000000..da08777df
Binary files /dev/null and b/imgs/google1.png differ
diff --git a/imgs/guide.pdf b/imgs/guide.pdf
new file mode 100644
index 000000000..fbf176e65
Binary files /dev/null and b/imgs/guide.pdf differ
diff --git a/imgs/header.jpg b/imgs/header.jpg
new file mode 100644
index 000000000..bcddb9a69
Binary files /dev/null and b/imgs/header.jpg differ
diff --git a/imgs/header2.jpg b/imgs/header2.jpg
new file mode 100644
index 000000000..a3a029393
Binary files /dev/null and b/imgs/header2.jpg differ
diff --git a/imgs/linkedin_icon.png b/imgs/linkedin_icon.png
new file mode 100644
index 000000000..b4ec9cc08
Binary files /dev/null and b/imgs/linkedin_icon.png differ
diff --git a/imgs/logo.png b/imgs/logo.png
new file mode 100644
index 000000000..67523f700
Binary files /dev/null and b/imgs/logo.png differ
diff --git a/imgs/member1.jpg b/imgs/member1.jpg
new file mode 100644
index 000000000..072f8e211
Binary files /dev/null and b/imgs/member1.jpg differ
diff --git a/imgs/member2.jpg b/imgs/member2.jpg
new file mode 100644
index 000000000..7480df4e9
Binary files /dev/null and b/imgs/member2.jpg differ
diff --git a/imgs/member3.jpg b/imgs/member3.jpg
new file mode 100644
index 000000000..d9bfe3571
Binary files /dev/null and b/imgs/member3.jpg differ
diff --git a/imgs/member4.jpg b/imgs/member4.jpg
new file mode 100644
index 000000000..8be7841e8
Binary files /dev/null and b/imgs/member4.jpg differ
diff --git a/imgs/p1.jpg b/imgs/p1.jpg
new file mode 100644
index 000000000..15b8f45b8
Binary files /dev/null and b/imgs/p1.jpg differ
diff --git a/imgs/p2.jpg b/imgs/p2.jpg
new file mode 100644
index 000000000..b7ffdcfd5
Binary files /dev/null and b/imgs/p2.jpg differ
diff --git a/imgs/p3.jpg b/imgs/p3.jpg
new file mode 100644
index 000000000..0704ecc82
Binary files /dev/null and b/imgs/p3.jpg differ
diff --git a/imgs/p4.jpg b/imgs/p4.jpg
new file mode 100644
index 000000000..32ae5d05b
Binary files /dev/null and b/imgs/p4.jpg differ
diff --git a/imgs/p5.jpg b/imgs/p5.jpg
new file mode 100644
index 000000000..883ebda06
Binary files /dev/null and b/imgs/p5.jpg differ
diff --git a/imgs/social-share-symbol.png b/imgs/social-share-symbol.png
new file mode 100644
index 000000000..d44b5ec2d
Binary files /dev/null and b/imgs/social-share-symbol.png differ
diff --git a/imgs/subtle-pattern-1.jpg b/imgs/subtle-pattern-1.jpg
new file mode 100644
index 000000000..52e6693ef
Binary files /dev/null and b/imgs/subtle-pattern-1.jpg differ
diff --git a/img/usf-logo-png-2.png b/imgs/usf-logo-png-2.png
similarity index 100%
rename from img/usf-logo-png-2.png
rename to imgs/usf-logo-png-2.png
diff --git a/index.html b/index.html
index fbae197cd..ff069afa5 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,267 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Blood Bank
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Articles
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Blood Types
+
Learn about the different blood types and their importance in saving lives. Your knowledge can help us ensure that patients receive the right blood type when they need it most.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Donations Benefits
+
Blood donation not only saves lives during emergencies but also offers health benefits to donors, reducing the risk of diseases like heart disease and cancer. It plays a crucial role in supporting community healthcare by ensuring an adequate blood supply for patients in need.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Disease Protection
+
Uncover the lesser-known benefits of blood donation, including its potential role in disease prevention and community health initiatives.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
How To Donate?
+
Embark on a step-by-step journey through the blood donation process, from initial eligibility checks to the post-donation experience.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
New to Blood Donation?
+
Discover the facts about blood donation myths and find out how you can make a difference for patients in need.
+
Get Your Guide.
+
+
+
+
+
+
+
+
+
+
+
+
+
What our Donors Say
+
+
+
+
Jason Bourne
+
"I've been donating blood for years, and it's incredibly rewarding to know that I'm making a difference in someone's life."
+
+
+
+
+
Ethan Hunt
+
"After learning about the importance of blood donation, I started donating regularly. It's a small act that can have a big impact."
+
+
+
+
+
James Bond
+
"Donating blood is not just about giving, it's also about receiving a sense of fulfillment knowing that you're helping others in need."
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/BloodBags.js b/js/BloodBags.js
new file mode 100644
index 000000000..6d5232078
--- /dev/null
+++ b/js/BloodBags.js
@@ -0,0 +1,111 @@
+// Sample blood bags data
+let bloodBags = [];
+
+// Function to add a new blood bag
+function addBloodBag(DonationDate, ExpiryDate, BloodType, Volume) {
+ bloodBags.push({ DonationDate, ExpiryDate, BloodType, Volume });
+ renderBloodBags(); // Call renderBloodBags after adding a new blood bag
+}
+
+// Function to delete a blood bag
+function deleteBloodBag(index) {
+ bloodBags.splice(index, 1);
+ renderBloodBags();
+}
+
+// Function to edit a blood bag
+function editBloodBag(index) {
+ const modal = document.getElementById("editBBModal");
+ const span = modal.querySelector(".close");
+ const newDonationDateInput = document.getElementById("newBBDonationDate");
+ const newExpiryDateInput = document.getElementById("newBBExpiryDate");
+ const newBloodTypeInput = document.getElementById("newBBBloodType");
+ const newVolumeInput = document.getElementById("newBBVolume");
+
+ // Populate input fields with blood bag details
+ const bloodBag = bloodBags[index];
+ newDonationDateInput.value = bloodBag.DonationDate;
+ newExpiryDateInput.value = bloodBag.ExpiryDate;
+ newBloodTypeInput.value = bloodBag.BloodType;
+ newVolumeInput.value = bloodBag.Volume;
+
+ modal.style.display = "block";
+
+ // Close the modal when the user clicks on the close button
+ span.onclick = function() {
+ modal.style.display = "none";
+ };
+
+ // Close the modal when the user clicks anywhere outside of the modal
+ window.onclick = function(event) {
+ if (event.target == modal) {
+ modal.style.display = "none";
+ }
+ };
+
+ // Save the changes when the user clicks the "Save Changes" button
+ const saveChangesBtn = document.getElementById("saveChangesBtn");
+ saveChangesBtn.onclick = function() {
+ const newDonationDate = newDonationDateInput.value;
+ const newExpiryDate = newExpiryDateInput.value;
+ const newBloodType = newBloodTypeInput.value;
+ const newVolume = newVolumeInput.value;
+
+ // Check if any field is empty
+ if (
+ newDonationDate.trim() === "" ||
+ newExpiryDate.trim() === "" ||
+ newBloodType.trim() === "" ||
+ newVolume.trim() === ""
+ ) {
+ return; // Exit the function if any field is empty
+ }
+
+ // Update blood bag details in the bloodBags array
+ bloodBags[index] = {
+ DonationDate: newDonationDate,
+ ExpiryDate: newExpiryDate,
+ BloodType: newBloodType,
+ Volume: newVolume,
+ };
+ renderBloodBags(); // Update the blood bag table
+ modal.style.display = "none"; // Close the modal
+ };
+}
+
+// Function to render the blood bag table
+function renderBloodBags() {
+ const tableBody = document.querySelector('#BBTable tbody');
+ tableBody.innerHTML = '';
+
+ bloodBags.forEach((bag, index) => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+
${bag.DonationDate}
+
${bag.ExpiryDate}
+
${bag.BloodType}
+
${bag.Volume}
+
+
+
+
+ `;
+ tableBody.appendChild(row);
+ });
+}
+
+// Function to handle form submission
+document.getElementById('addBBForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ const donationDate = document.getElementById('DonationDate').value;
+ const expiryDate = document.getElementById('ExpiryDate').value;
+ const bloodType = document.getElementById('BloodBagsBloodType').value;
+ const volume = document.getElementById('Volume').value;
+
+ addBloodBag(donationDate, expiryDate, bloodType, volume);
+ // Reset form fields after submission
+ this.reset();
+});
+
+// Initial render of blood bags
+renderBloodBags();
diff --git a/js/Recipient.js b/js/Recipient.js
new file mode 100644
index 000000000..0e482ce52
--- /dev/null
+++ b/js/Recipient.js
@@ -0,0 +1,105 @@
+// Sample recipient data
+let recipients = [];
+
+// Function to add a new recipient
+function addRecipient(RecipientName, RecipientAge, BloodType, Contact) {
+ recipients.push({ RecipientName, RecipientAge, BloodType, Contact });
+ renderRecipients(); // Call renderRecipients after adding a new recipient
+}
+
+// Function to delete a recipient
+function deleteRecipient(index) {
+ recipients.splice(index, 1);
+ renderRecipients();
+}
+
+// Function to edit a recipient
+function editRecipient(index) {
+ const modal = document.getElementById("editRecipientModal");
+ const span = document.getElementsByClassName("close")[0];
+ const newNameInput = document.getElementById("NewRecipientName");
+ const newAgeInput = document.getElementById("newRecipientAge");
+ const newBloodTypeInput = document.getElementById("newRecipientBloodType");
+ const newContactInput = document.getElementById("newRecipientContact");
+
+ // Populate input fields with recipient details
+ newNameInput.value = recipients[index].RecipientName;
+ newAgeInput.value = recipients[index].RecipientAge;
+ newBloodTypeInput.value = recipients[index].BloodType;
+ newContactInput.value = recipients[index].Contact;
+
+ modal.style.display = "block";
+
+ // Close the modal when the user clicks on the close button
+ span.onclick = function() {
+ modal.style.display = "none";
+ };
+
+ // Close the modal when the user clicks anywhere outside of the modal
+ window.onclick = function(event) {
+ if (event.target == modal) {
+ modal.style.display = "none";
+ }
+ };
+
+ // Save the changes when the user clicks the "Save Changes" button
+ const saveChangesBtn = document.getElementById("saveChangesBtn");
+ saveChangesBtn.onclick = function() {
+ const newName = newNameInput.value;
+ const newAge = newAgeInput.value;
+ const newBloodType = newBloodTypeInput.value;
+ const newContact = newContactInput.value;
+
+ // Check if any field is empty
+ if (newName.trim() === "" || newAge.trim() === "" || newBloodType.trim() === "" || newContact.trim() === "") {
+ return; // Exit the function if any field is empty
+ }
+
+ // Update recipient details in the recipients array
+ recipients[index] = {
+ RecipientName: newName,
+ RecipientAge: newAge,
+ BloodType: newBloodType,
+ Contact: newContact,
+ };
+ renderRecipients(); // Update the recipient table
+ modal.style.display = "none"; // Close the modal
+ };
+}
+
+// Function to render the recipient table
+function renderRecipients() {
+ const tableBody = document.querySelector('#recipientTable tbody');
+ tableBody.innerHTML = '';
+
+ recipients.forEach((recipient, index) => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+
${recipient.RecipientName}
+
${recipient.RecipientAge}
+
${recipient.BloodType}
+
${recipient.Contact}
+
+
+
+
+ `;
+ tableBody.appendChild(row);
+ });
+}
+
+// Function to handle form submission
+document.getElementById('addRecipientForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ const name = document.getElementById('RecipientName').value;
+ const age = document.getElementById('RecipientAge').value;
+ const bloodType = document.getElementById('BloodType').value;
+ const contact = document.getElementById('Contact').value;
+
+ addRecipient(name, age, bloodType, contact);
+ // Reset form fields after submission
+ this.reset();
+});
+
+// Initial render of recipients
+renderRecipients();
diff --git a/js/main.js b/js/main.js
index 848a3f230..01598cafc 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,14 +1,266 @@
-/**
- * Your JS code here
- */
-
-/**
- * Sample code
- */
-document.addEventListener('DOMContentLoaded', function() {
- var ulElement = document.getElementById('links');
- var liElement = document.createElement('li');
- liElement.appendChild(document.createTextNode('created by main.js'));
-
- ulElement.appendChild(liElement);
+$(document).ready(function () {
+
+ $('#contactForm').submit(function(event) {
+ event.preventDefault(); // Prevent default form submission behavior
+ // Get form input values
+ var name = $('#name').val();
+ var email = $('#email').val();
+ var phone = $('#phone').val();
+ var title = $('#title').val();
+ var message = $('#message').val();
+
+ // Display confirmation message
+ $('#confirmationMessage').show();
+ // Optionally, you can reset the form after submission
+ // $('#contactForm').trigger('reset');
+ });
+
+
+ var mySwiper = new Swiper('.swiper-container', {
+ slidesPerView: 3,
+ loop: true,
+ effect: 'coverflow',
+ autoplay: true,
+ grabCursor: true,
+ centeredSlides: true,
+ coverflowEffect: {
+ rotate: 50,
+ stretch: 0,
+ depth: 100,
+ modifier: 1,
+ slideShadows: true,
+ },
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ },
+ breakpoints: {
+ 1024: {
+ slidesPerView: 3,
+ },
+ 768: {
+ slidesPerView: 2,
+ },
+ 640: {
+ slidesPerView: 1,
+ },
+ 320: {
+ slidesPerView: 1,
+ }
+ }
+ });
+
+ ///////////////////////// WOW Animation ////////////////////////////////
+
+
+ var wow = new WOW(
+ {
+ boxClass: 'wow', // default
+ animateClass: 'animated', // default
+ offset: 0, // default
+ mobile: false, // default
+ }
+ )
+ wow.init();
+
+// Chart Initialization
+try {
+
+
+
+ // Bar Chart
+ const barCtx = document.getElementById('barChart');
+ new Chart(barCtx, {
+ type: 'bar',
+ data: {
+ labels: ['A', 'B', 'AB', 'O'],
+ datasets: [{
+ label: ' Average Montly Registrations',
+ data: [20, 15, 25, 40],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.6)', // Dark Red
+ 'rgba(54, 162, 235, 0.6)', // Dark Blue
+ 'rgba(255, 206, 86, 0.6)', // Dark Orange
+ 'rgba(75, 192, 192, 0.6)' // Dark Green
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)', // Dark Red
+ 'rgba(54, 162, 235, 1)', // Dark Blue
+ 'rgba(255, 206, 86, 1)', // Dark Orange
+ 'rgba(75, 192, 192, 1)' // Dark Green
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ text: 'Donor Registrations',
+ color: 'darkred', // Dark Red
+ font: {
+ family: '"Times New Roman", Times, serif',
+ size: 24
+ }
+ },
+ legend: {
+ display: true,
+ labels: {
+ color: 'darkred', // Dark Red
+ font: {
+ family: '"Times New Roman", Times, serif',
+ size: 16
+ }
+ }
+ },
+ tooltip: {
+ enabled: true
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: true,
+ ticks: {
+ color: 'darkred' // Dark Red
+ }
+ },
+ x: {
+ ticks: {
+ color: 'darkred' // Dark Red
+ }
+ }
+ },
+ animation: {
+ duration: 2000,
+ easing: 'easeInOutQuart'
+ },
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ });
+
+ // Line Chart
+ const lineCtx = document.getElementById('lineChart');
+ new Chart(lineCtx, {
+ type: 'line',
+ data: {
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+ datasets: [{
+ label: 'Blood Donations',
+ data: [50, 60, 70, 65, 75, 80],
+ fill: false,
+ borderColor: 'rgba(75, 192, 192, 1)', // Dark Green
+ tension: 0.1
+ }]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ text: 'Monthly Blood Donations',
+ color: 'darkred', // Dark Red
+ font: {
+ family: '"Times New Roman", Times, serif',
+ size: 24
+ }
+ },
+ legend: {
+ display: true,
+ labels: {
+ color: 'darkred', // Dark Red
+ font: {
+ family: '"Times New Roman", Times, serif',
+ size: 16
+ }
+ }
+ },
+ tooltip: {
+ enabled: true
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: false,
+ ticks: {
+ color: 'darkred' // Dark Red
+ }
+ },
+ x: {
+ ticks: {
+ color: 'darkred' // Dark Red
+ }
+ }
+ },
+ animation: {
+ duration: 2000,
+ easing: 'easeInOutQuart'
+ },
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ });
+
+ // Pie Chart
+ const pieCtx = document.getElementById('pieChart');
+ new Chart(pieCtx, {
+ type: 'pie',
+ data: {
+ labels: ['A', 'B', 'AB', 'O'],
+ datasets: [{
+ label: 'Blood Bags Available',
+ data: [30, 20, 25, 25],
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.6)', // Dark Red
+ 'rgba(54, 162, 235, 0.6)', // Dark Blue
+ 'rgba(255, 206, 86, 0.6)', // Dark Orange
+ 'rgba(75, 192, 192, 0.6)' // Dark Green
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)', // Dark Red
+ 'rgba(54, 162, 235, 1)', // Dark Blue
+ 'rgba(255, 206, 86, 1)', // Dark Orange
+ 'rgba(75, 192, 192, 1)' // Dark Green
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ plugins: {
+ title: {
+ display: true,
+ text: 'Blood Bags Available',
+ color: 'darkred', // Dark Red
+ font: {
+ family: '"Times New Roman", Times, serif',
+ size: 24
+ }
+ },
+ legend: {
+ display: true,
+ labels: {
+ color: 'darkred', // Dark Red
+ font: {
+ family: '"Times New Roman", Times, serif',
+ size: 16
+ }
+ }
+ },
+ tooltip: {
+ enabled: true
+ }
+ },
+ animation: {
+ duration: 2000,
+ easing: 'easeInOutQuart'
+ },
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ });
+}
+
+catch (error) {
+ console.error("An error occurred while initializing the chart:", error);
+}
+
});
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 000000000..a4618d9cf
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,120 @@
+// Sample donor data
+let donors = [];
+
+// Function to add a new donor
+function addDonor(DonorName, Age, RegistrationDate, BloodType, Contact) {
+ donors.push({ DonorName, Age, RegistrationDate, BloodType, Contact});
+ renderDonors(); // Call renderDonors after adding a new donor
+}
+
+// Function to delete a donor
+function deleteDonor(index) {
+ donors.splice(index, 1);
+ renderDonors();
+}
+
+function editDonor(index) {
+ const modal = document.getElementById("editDonorModal");
+ const span = document.getElementsByClassName("close")[0];
+ const newNameInput = document.getElementById("newName");
+ const newAgeInput = document.getElementById("newAge");
+ const newRegistrationInput = document.getElementById("newRegistration");
+ const newBloodTypeInput = document.getElementById("newBloodType");
+ const newContactInput = document.getElementById("newContact");
+
+
+ // Populate input fields with donor details
+ newNameInput.value = donors[index].DonorName;
+ newAgeInput.value = donors[index].Age;
+ newRegistrationInput.value = donors[index].RegistrationDate;
+ newBloodTypeInput.value = donors[index].BloodType;
+ newContactInput.value = donors[index].Contact;
+
+
+ modal.style.display = "block";
+
+ // Close the modal when the user clicks on the close button
+ span.onclick = function() {
+ modal.style.display = "none";
+ }
+
+ // Close the modal when the user clicks anywhere outside of the modal
+ window.onclick = function(event) {
+ if (event.target == modal) {
+ modal.style.display = "none";
+ }
+ }
+
+ // Save the changes when the user clicks the "Save Changes" button
+ const saveChangesBtn = document.getElementById("saveChangesBtn");
+ saveChangesBtn.onclick = function() {
+ const newName = newNameInput.value;
+ const newAge = newAgeInput.value;
+ const newRegistration = newRegistrationInput.value;
+ const newBloodType = newBloodTypeInput.value;
+ const newContact = newContactInput.value;
+
+
+ // Check if any field is empty
+ if (newName.trim() === "" || newAge.trim() === "" || newRegistration.trim() === "" || newBloodType.trim() === "" || newContact.trim() === "") {
+ return; // Exit the function if any field is empty
+ }
+
+ // Update donor details in the donors array
+ donors[index] = {
+ DonorName: newName,
+ Age: newAge,
+ RegistrationDate: newRegistration,
+ BloodType: newBloodType,
+ Contact: newContact,
+
+ };
+ renderDonors(); // Update the donor table
+ modal.style.display = "none"; // Close the modal
+ };
+}
+
+
+
+
+// Function to render the donor table
+function renderDonors() {
+ const tableBody = document.querySelector('#donorTable tbody');
+ tableBody.innerHTML = '';
+
+ donors.forEach((donor, index) => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+