JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>JSON: Task 1</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>

  <body>

    <section class="preview">



    </section>

  </body>
  
  <script src="scripts/script.js"></script>

</html>

CSS

p {
  color: purple;
  margin: 0.5em 0;
}

* {
  box-sizing: border-box;
}

JavaScript

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
  let cats = JSON.parse(catString);

  for (let [index, cat] of cats.entries()) {
    motherInfo = 
    	index != cats.length - 1									//check if last entry
    		? `${motherInfo} ${cat.name},` 					//if not last, then add comma
    		: `${motherInfo} and ${cat.name}.`;			//if last, add "and" with "."

    let kittens = cat.kittens;
    for (let kitten of kittens) {
      total += 1;
      if (kitten.gender === 'm') {male += 1;}
    }
  }
  
  kittenInfo = `There are a total of ${total} kittens: ${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);