diff --git a/adoptionForm.html b/adoptionForm.html
index c6fbce3..34cb86e 100644
--- a/adoptionForm.html
+++ b/adoptionForm.html
@@ -115,6 +115,27 @@ Adoption Form
+
+
+
diff --git a/css/styles.css b/css/styles.css
index fe3bfcc..b17ffbd 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -114,4 +114,5 @@ footer{
.bottom-card-form{
height: 350px;
+ padding: 8px;
}
\ No newline at end of file
diff --git a/favouritelDogs.html b/favouritelDogs.html
index df9da84..387ead3 100644
--- a/favouritelDogs.html
+++ b/favouritelDogs.html
@@ -112,6 +112,27 @@
Adoption Form
+
+
+
diff --git a/index.html b/index.html
index d26ab6f..623d52c 100644
--- a/index.html
+++ b/index.html
@@ -119,6 +119,27 @@
Adoption Form
+
+
+
diff --git a/js/scriptAdoptionForm.js b/js/scriptAdoptionForm.js
index ac49994..9ce4654 100644
--- a/js/scriptAdoptionForm.js
+++ b/js/scriptAdoptionForm.js
@@ -47,6 +47,11 @@ function displayListOfAdoptionForms() {
let homePara = document.createElement("p");
homePara.innerHTML = "Type of Home: " + el.homeType;
+ // Checkbox values
+ let aspectsPara = document.createElement("p");
+ aspectsPara.innerHTML = "Adoption Aspects: " +(el.aspects && el.aspects.length > 0 ? el.aspects.join(", ") : "None");
+ aspectsPara.className = "text-center";
+
//edit button
let editButton = document.createElement("button");
editButton.textContent = "Edit";
@@ -80,6 +85,7 @@ function displayListOfAdoptionForms() {
bottomDiv.appendChild(reasonPara);
bottomDiv.appendChild(petsPara);
bottomDiv.appendChild(homePara);
+ bottomDiv.appendChild(aspectsPara); // Append aspects
bottomDiv.appendChild(editButton);
//append elements to card
@@ -135,6 +141,16 @@ function editListener(adoptModal) {
homeTypeInput.value = form.homeType;
otherPetsInput.checked = true;
+ // Check the proper checkboxes based on the saved data
+ if (form.aspects && form.aspects.length > 0) {
+ form.aspects.forEach((aspect) => {
+ const checkbox = document.querySelector('input[type="checkbox"][value="' + aspect + '"]');
+ if (checkbox) {
+ checkbox.checked = true;
+ }
+ });
+ }
+
break;
}
}
@@ -163,7 +179,20 @@ function sumbitListener(adoptModal) {
.getElementById("sub")
.getAttribute("data-dog-img");
- //creating an adoption object
+ // Select all checked checkboxes with type="checkbox"
+ const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
+ // Convert the NodeList of checked checkboxes to an array and their values
+ let aspects = [];
+ for(let i=0; i 0) {
+ aspects.pop();
+ }
+
+ // Creating an adoption object
const adoption = {
adopterName,
adopterEmail,
@@ -172,6 +201,7 @@ function sumbitListener(adoptModal) {
otherPets,
homeType,
dogImage,
+ aspects,
};
//deleting existing form
diff --git a/js/scriptFavouriteDogs.js b/js/scriptFavouriteDogs.js
index 0295deb..159f2e6 100644
--- a/js/scriptFavouriteDogs.js
+++ b/js/scriptFavouriteDogs.js
@@ -112,8 +112,22 @@ function sumbitListener(adoptModal) {
const dogImage = document
.getElementById("sub")
.getAttribute("data-dog-img");
+ // Select all checked checkboxes with type="checkbox"
+ const checkedCheckboxes = document.querySelectorAll(
+ 'input[type="checkbox"]:checked'
+ );
+ // Convert the NodeList of checked checkboxes to an array and their values
+ let aspects = [];
+ for(let i=0; i 0) {
+ aspects.pop();
+ }
- //creating an adoption object
+ // Creating an adoption object
const adoption = {
adopterName,
adopterEmail,
@@ -122,6 +136,7 @@ function sumbitListener(adoptModal) {
otherPets,
homeType,
dogImage,
+ aspects,
};
//retrieving the adoption list from localStorage
diff --git a/js/scriptIndex.js b/js/scriptIndex.js
index 44eb2ba..faa218d 100644
--- a/js/scriptIndex.js
+++ b/js/scriptIndex.js
@@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
fetchApiAndDisplay();
});
-function fetchApiAndDisplay(){
+function fetchApiAndDisplay() {
//fetch data from Dog API
let dogApi = fetch("https://dog.ceo/api/breeds/image/random/12").then(
(response) => response.json()
@@ -151,9 +151,24 @@ function sumbitListener(adoptModal) {
'input[name="otherPets"]:checked'
).value;
const homeType = document.getElementById("homeType").value;
- const dogImage = document.getElementById("sub").getAttribute("data-dog-img");
+ const dogImage = document
+ .getElementById("sub")
+ .getAttribute("data-dog-img");
+
+ // Select all checked checkboxes with attribute type="checkbox" and those who are checked ( pseudo class )
+ const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
+ // Convert the NodeList of checked checkboxes to an array and their values
+ let aspects = [];
+ for(let i=0; i 0) {
+ aspects.pop();
+ }
- //creating an adoption object
+ // Creating an adoption object
const adoption = {
adopterName,
adopterEmail,
@@ -161,7 +176,8 @@ function sumbitListener(adoptModal) {
adoptionReason,
otherPets,
homeType,
- dogImage
+ dogImage,
+ aspects,
};
//retrieving the adoption list from localStorage
@@ -169,8 +185,7 @@ function sumbitListener(adoptModal) {
//checking if such adoption already exists
const existingAdoption = adoptions.find(
- (adopt) =>
- adopt.dogName === dogName && adopt.dogImage === dogImage
+ (adopt) => adopt.dogName === dogName && adopt.dogImage === dogImage
);
if (existingAdoption) {