Using AI features plain HTML

by Andy Bulka

HTML

<button id="myButton">Click me</button>
<button id="myButtonClear">Clear</button>
<button id="myButtonRandomGen">Random Numbers</button>
<div id="myDiv"></div>

CSS

/* make myDiv wrap */

#myDiv {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

JavaScript

document.getElementById("myButton").addEventListener("click", function () {
  // alert("Button clicked!")
  let output = ""
  for (let i = 1; i <= 500; i++) {
    output += `<span>${i}</span>`
  }
  document.getElementById("myDiv").innerHTML = output
})

document.getElementById("myButtonClear").addEventListener("click", function () {
  document.getElementById("myDiv").innerHTML = ""
})

document.getElementById("myButtonRandomGen").addEventListener("click", function () {
  let output = ""
  for (let i = 1; i <= 500; i++) {
    output += `<span>${Math.floor(Math.random() * 100)}</span>`
  }
  document.getElementById("myDiv").innerHTML = output
})