<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON test your skills</title>
</head>
<body>
    <section></section>
</body>
</html>
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://github.com/mdn/learning-area/blob/main/javascript/oojs/tasks/json/sample.json';
const request = new Request(requestURL);
const response = fetch(request).then(response => response.text()).then(text => displayCatInfo(text));


function displayCatInfo(catString){
    const parsedCatInfoArr = JSON.parse(catString);
    let total =0;
    let male = 0;
    let female=0;
    let motherInfo =`The mothers are called `;
    
    for(const [index,cat] of parsedCatInfoArr.entries()){
        if(index ===parsedCatInfoArr.length-1){
            motherInfo += `and ${cat.name}.`;
        }
            else{
                motherInfo += `, ${cat.name}`;
            } 
            total += cat.kittens.length;
            for(const kitten of cat.kittens){
                kitten.gender==='m'? male++ : female++;
            }
        }
        kittenInfo = `Kittens are a total of  ${total} of which ${male} are male and ${total-male} females`;
        para1.textContent = motherInfo;
        para2.textContent = kittenInfo;
      } 
      
      section.appendChild(para1);
      section.appendChild(para2);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.