Countdown

createElement appendChild

by trentHarlem

HTML

<div id='output'>
</div>

CSS

* {
  background: dodgerblue;
  color: whitesmoke;
  font: 1.1em system-ui;
  text-align: center;
}

p::before {
  content: "• ";
}

p::after {
  content: " •";
}

JavaScript

const countdown = 'Countdown'
let output = document.querySelector('#output');
output.innerHTML = `<h1>${countdown}</h1>`;

function createNewLine(text, num) {
  let newLine = document.createElement('P');
  newLine.setAttribute("class", `newLine_${num}`);
  let newText = document.createTextNode(text);
  output.append(newLine);
  newLine.append(newText);
  console.log(text, num);
}

for (let i = 10; i >= 0; i--) {
  if (i === 0) {
    createNewLine(`BLAST OFF!`, i);
  } else {
    let j = i.toString();
    createNewLine(`${j}`, i);
  }
}