JSFiddle - React, Tailwind, and code Playground

by Haze32

JavaScript

var listItems = document.querySelectorAll(".checkList li");
  listItems.forEach(function(li) {
    var check1 = li.querySelector(".check1");
    var check2 = li.querySelector(".check2");
    if (check1.classList.contains("checkGood") && check2.classList.contains("checkGood")) {
      li.classList.add("checkFinished");
    }
    if (check1.classList.contains("checkBad") || check2.classList.contains("checkBad")) {
      li.classList.add("checkUnfinished");
    }
  });
  document.addEventListener("DOMContentLoaded", () => {
    function updateCounts() {
      const totItems = document.querySelector(".totItems");
      const finItems = document.querySelector(".finItems");
      const unfinItems = document.querySelector(".unfinItems");
      if (totItems && finItems && unfinItems) {
        const checkList = document.querySelectorAll(".checkList li");
        const finishedItems = document.querySelectorAll(".checkList .checkFinished");
        const unfinishedItems = document.querySelectorAll(".checkList .checkUnfinished");
        totItems.textContent = checkList.length;
        finItems.textContent = finishedItems.length;
        unfinItems.textContent = unfinishedItems.length;
      } else {
        console.error("One or more target elements for displaying counts are missing.");
      }
    }
    updateCounts();



      // This function will be triggered when the .fixAnch button is clicked.
      document.querySelector('.fixAnch').addEventListener('click', function() {
        // Get all li elements within ul.checkList
        var listItems = document.querySelectorAll('ul.checkList li');

        // Iterate over each li element
        listItems.forEach(function(li) {
          // Get all <p> tags within the current li
          var pTags = li.querySelectorAll('p');
          // Check if the li has at least two <p> elements
          if (pTags.length >= 2) {
            var secondP = pTags[1]; // second <p> element
            var lastP = pTags[pTags.length - 1];...