cats all parsed

b00kworm4lyf3 · b00kworm4lyf3 · commit 034649554d07 · 2025-04-14T18:47:23.000-06:00
diff --git a/quiz12.html b/quiz12.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8"/>
+    <title>JSON: Task 1</title>
+    <style>
+      p {
+        color: purple;
+        margin: 0.5em 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+    </style>
+    <!-- <link rel="stylesheet" href="../styles.css" /> -->
+  </head>
+
+  <body>
+
+    <section class="preview">
+
+
+
+    </section>
+
+  </body>
+  <script>
+    const section = document.querySelector('section');
+
+    let para1 = document.createElement('p');
+    let para2 = document.createElement('p');
+    let motherInfo = 'The mother cats are called ';
+    let kittenInfo = "";
+    const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/tasks/json/sample.json';
+
+    fetch(requestURL)
+    .then(response => response.text())
+    .then(text => displayCatInfo(text))
+
+    function displayCatInfo(catString) {
+      let total = 0;
+      let male = 0;
+
+      // Add your code here
+      const catInfo = JSON.parse(catString);
+
+      for(let i = 0; i < catInfo.length; i++){
+        if(i < catInfo.length - 1){
+          motherInfo += catInfo[i].name + ', ';
+        }
+        else{
+          motherInfo += 'and ' + catInfo[i].name + '.';
+        }
+
+        for(let j = 0; j < catInfo[i].kittens.length; j++){
+          total++;
+          if(catInfo[i].kittens[j].gender == 'm'){
+            male++;
+          }
+          // kittenInfo += catInfo[i].kittens[j].name + ', ';
+        }
+      }
+      kittenInfo += `They have ${total} kittens in total, ${male} male and ${total - male} female.`
+      // Don't edit the code below here!
+
+      para1.textContent = motherInfo;
+      para2.textContent = kittenInfo;
+    }
+
+    section.appendChild(para1);
+    section.appendChild(para2);
+  </script>
+
+</html>
