NEW: checkbox input in form about adoption aspects

AdamDawi · May 25, 2024 · 14c02c5 · 14c02c5
1 parent 183ac83
commit 14c02c5
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 8 deletions.
diff --git a/adoptionForm.html b/adoptionForm.html
@@ -115,6 +115,27 @@ <h5 class="modal-title" id="adoptionModalLabel">Adoption Form</h5>
                 <option value="Other">Other</option>
               </select>
             </div>
+
+            <!-- Checkboxes for adoption aspects -->
+          <div class="mb-3">
+            <label for="aspect1" class="form-label">Please check all that apply:</label><br>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect1" value="HasYard">
+              <label class="form-check-label" for="aspect1">I have a yard</label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect2" value="HasChildren">
+              <label class="form-check-label" for="aspect2">I have children</label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect3" value="HasExperience">
+              <label class="form-check-label" for="aspect3">I have experience with pets</label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect4" value="Renting">
+              <label class="form-check-label" for="aspect4">I am renting my home</label>
+            </div>
+          </div>
 
             <!-- Checkbox for terms and conditions -->
             <div class="mb-3 form-check">

diff --git a/css/styles.css b/css/styles.css
@@ -114,4 +114,5 @@ footer{
 
 .bottom-card-form{
     height: 350px;
+    padding: 8px;
 }
diff --git a/favouritelDogs.html b/favouritelDogs.html
@@ -112,6 +112,27 @@ <h5 class="modal-title" id="adoptionModalLabel">Adoption Form</h5>
                 <option value="Other">Other</option>
               </select>
             </div>
+
+            <!-- Checkboxes for adoption aspects -->
+          <div class="mb-3">
+            <label for="aspect1" class="form-label">Please check all that apply:</label><br>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect1" value="HasYard">
+              <label class="form-check-label" for="aspect1">I have a yard</label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect2" value="HasChildren">
+              <label class="form-check-label" for="aspect2">I have children</label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect3" value="HasExperience">
+              <label class="form-check-label" for="aspect3">I have experience with pets</label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect4" value="Renting">
+              <label class="form-check-label" for="aspect4">I am renting my home</label>
+            </div>
+          </div>
 
             <!-- Checkbox for terms and conditions -->
             <div class="mb-3 form-check">

diff --git a/index.html b/index.html
@@ -119,6 +119,27 @@ <h5 class="modal-title" id="adoptionModalLabel">Adoption Form</h5>
             </select>
           </div>
 
+          <!-- Checkboxes for adoption aspects -->
+          <div class="mb-3">
+            <label for="aspect1" class="form-label">Please check all that apply:</label><br>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect1" value="HasYard">
+              <label class="form-check-label" for="aspect1">I have a yard</label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect2" value="HasChildren">
+              <label class="form-check-label" for="aspect2">I have children</label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect3" value="HasExperience">
+              <label class="form-check-label" for="aspect3">I have experience with pets</label>
+            </div>
+            <div class="form-check">
+              <input class="form-check-input" type="checkbox" id="aspect4" value="Renting">
+              <label class="form-check-label" for="aspect4">I am renting my home</label>
+            </div>
+          </div>
+
           <!-- Checkbox for terms and conditions -->
           <div class="mb-3 form-check">
             <input type="checkbox" class="form-check-input" id="agreeTerms" title="You must agree to the terms and conditions." required>

diff --git a/js/scriptAdoptionForm.js b/js/scriptAdoptionForm.js
@@ -47,6 +47,11 @@ function displayListOfAdoptionForms() {
       let homePara = document.createElement("p");
       homePara.innerHTML = "<strong>Type of Home:</strong> " + el.homeType;
 
+      // Checkbox values
+      let aspectsPara = document.createElement("p");  
+      aspectsPara.innerHTML = "<strong>Adoption Aspects:</strong> " +(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<checkedCheckboxes.length; i++){
+        aspects.push(checkedCheckboxes[i].value);
+    }
+
+    // Remove the last element from the aspects list because it is value 'on'
+    if (aspects.length > 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
@@ -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<checkedCheckboxes.length; i++){
+        aspects.push(checkedCheckboxes[i].value);
+    }
+
+    // Remove the last element from the aspects list because it is value 'on'
+    if (aspects.length > 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
@@ -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,26 +151,41 @@ 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<checkedCheckboxes.length; i++){
+        aspects.push(checkedCheckboxes[i].value);
+    }
+
+    // Remove the last element from the aspects list because it is value 'on'
+    if (aspects.length > 0) {
+      aspects.pop();
+    }
 
-    //creating an adoption object
+    // Creating an adoption object
     const adoption = {
       adopterName,
       adopterEmail,
       dogName,
       adoptionReason,
       otherPets,
       homeType,
-      dogImage
+      dogImage,
+      aspects,
     };
 
     //retrieving the adoption list from localStorage
     let adoptions = JSON.parse(localStorage.getItem("adoptions")) || [];
 
     //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) {