Decrement a value in h1 tag

So, in my code, there are currently 50 photos shown, but however, each time I click on the photo, it will fade out, which the number of photos should decrement.

My h1 tag shows There are 50 photo(s) being shown, but everything my photo fades out, this tag should update itself and decrement the number. I'm having trouble with implementing this as a code.

Can anyone help me with this implementation, in terms of actual coding? It would mean a lot if you can!

let pictures = document.getElementById("container");
let itemCount = document.getElementById("item-count");
let APIURL = "https://jsonplaceholder.typicode.com/albums/2/photos";

function fadeOut(event) {
  let fadeTarget = event.target;

  let fadeEffect = setInterval(function() {
    if (!fadeTarget.style.opacity) {
      fadeTarget.style.opacity = 1;
    }
    if (fadeTarget.style.opacity > 0) {
      fadeTarget.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 200);

}
document.getElementById("container").addEventListener("click", fadeOut);

function addImage(url) {
  const img = document.createElement("img");
  img.src = url;
  pictures.appendChild(img);
}

function displayTitle(title) {
  const photoTitle = document.createElement("p");
  photoTitle.innerText = title;
  pictures.appendChild(photoTitle);
}

axios.get(APIURL).then(function(res) {
  const length = res.data.length;
  console.log(res.data);
  res.data.map(function(albums) {
    addImage(albums.thumbnailUrl);
    displayTitle(albums.title);
    itemCount.innerHTML = `There are ${length} photo(s) being shown`;
  });
});

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: 0.25rem;
  margin: 4px;
  margin-top: 10rem;
  width: 100%;
  height: 20px;
  position: relative;
}

.grid-container p {
  /* position: absolute; */
  display: flex;
  font-weight: bold;
  font-size: 12px;
  margin-left: -11rem;
  align-self: flex-end;
  color: #fff;
}

.grid-container img {
  height: 300px;
}

.item-title {
  position: absolute;
  align-self: center;
  margin-top: -10rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="../css/index.css" />
  <link rel="stylesheet" type="text/css" href="../css/signup.css" />
  <link rel="stylesheet" type="text/css" href="../css/home.css" />
  <script defer src="../js/homeScript.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="item-title">
      <h1 id="item-count"></h1>
    </div>

    <div class="grid-container" id="container"></div>
  </div>
</body>

</html>

Solution

Put the count in its own span. Then you can descrement that element.

let pictures = document.getElementById("container");
let itemCount = document.getElementById("item-count");
let APIURL = "https://jsonplaceholder.typicode.com/albums/2/photos";

function fadeOut(event) {
  let fadeTarget = event.target;

  let fadeEffect = setInterval(function() {
    if (!fadeTarget.style.opacity) {
      fadeTarget.style.opacity = 1;
    }
    if (fadeTarget.style.opacity > 0) {
      fadeTarget.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
      document.getElementById("length").innerText--;
    }
  }, 200);

}
document.getElementById("container").addEventListener("click", fadeOut);

function addImage(url) {
  const img = document.createElement("img");
  img.src = url;
  pictures.appendChild(img);
}

function displayTitle(title) {
  const photoTitle = document.createElement("p");
  photoTitle.innerText = title;
  pictures.appendChild(photoTitle);
}

axios.get(APIURL).then(function(res) {
  const length = res.data.length;
  console.log(res.data);
  res.data.map(function(albums) {
    addImage(albums.thumbnailUrl);
    displayTitle(albums.title);
    itemCount.innerHTML = `There are <span id="length">${length}</span> photo(s) being shown`;
  });
});

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: 0.25rem;
  margin: 4px;
  margin-top: 10rem;
  width: 100%;
  height: 20px;
  position: relative;
}

.grid-container p {
  /* position: absolute; */
  display: flex;
  font-weight: bold;
  font-size: 12px;
  margin-left: -11rem;
  align-self: flex-end;
  color: #fff;
}

.grid-container img {
  height: 300px;
}

.item-title {
  position: absolute;
  align-self: center;
  margin-top: -10rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="../css/index.css" />
  <link rel="stylesheet" type="text/css" href="../css/signup.css" />
  <link rel="stylesheet" type="text/css" href="../css/home.css" />
  <script defer src="../js/homeScript.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="item-title">
      <h1 id="item-count"></h1>
    </div>

    <div class="grid-container" id="container"></div>
  </div>
</body>

</html>