add paragraph TIMER

by trentHarlem

HTML

<div id='content'>
</div>
<!-- <div id='message'>
</div> -->

CSS

* {
  background: slategray;
  font: 1.1em system-ui;
  
  /* text-align: center; */

  /* counter-reset: myIndex; */
}

p {
  counter-increment: myIndex;
}


p::before {
  color: purple;
  content: '• 'counter(myIndex)'. ';
}

.test {
  color: whitesmoke;
  font-weight: 200;
}

JavaScript

function wrapper() {

  let count = 1;

  return function addParagraph() {
    // only let execute ten times
    if (count < 11) {

      /*  let message = document.getElementById('message');
       message.innerHTML = count */
      let output = document.getElementById('content');
      let newParagraph = document.createElement('P');

      //newParagraph.setAttribute("class", `test`);
      newParagraph.setAttribute("class", `test newLine_${count}`);

      output.appendChild(newParagraph);
      /*    addTextNode('added with function', count) */
      //let input = count.toString()
      let input = count
      addTextNode(`• ${input}`, count)
      count++
    }
  }
}

function addTextNode(text, count) {
  let newtext = document.createTextNode(text)
  pizz = document.getElementsByTagName("P");
  //pizz = document.getElementsByClassName(`test`);
  //pizz = document.querySelectorAll("p");

  pizz[count - 1].appendChild(newtext);
}

const addPara = wrapper;
const counter = setInterval(addPara(), 1000);

/* function addParagraphs() {

  for (let i = 0; i < 10; i++) {

    let output = document.getElementById('content');
    let newParagraph = document.createElement('P');
    // add two classes to new paragraph
    // one of which is Unique 
    newParagraph.setAttribute("class", `test newLine_${i}`);

    output.appendChild(newParagraph);
    addTextNode('added with function', i)

  }
} */

//addParagraphs();

/* function addTextNode(text, i) {

  let newtext = document.createTextNode(text)
  //p1 = document.getElementById("p1");
  //pizz = document.getElementsByTagName("P");
  pizz = document.getElementsByClassName(`test`);
  //pizz = document.querySelectorAll("p");

  //p1.appendChild(newtext);
  pizz[i].appendChild(newtext);
} */