Choose Colour

the list

• first item
• second item
• third item

change the colour

<button onclick="changeListColor()">change the colour</button>

The JS…

const myList = document.querySelector('#the-list + ul');

function changeListColor(x) {
    x = prompt('What color u want');
    myList.style.color = x;
}

Things to Note

The querySelector uses the automatically generated id for the h2 heading combined with an adjacent sibling selector to pick the list. If other lists were placed on the page this would still be targetted. This is so the list can be written in markdown but the list itself has no id or class names. (Using Hugo you can add these below the list using {.classname}.)