decrement a value in h1 tags

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>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top