It should be something like this:
<ul id="list">
<li>1</li>
<li>2</li>
<li style="color: red;">3</li> <- Text should be red
...
<li style="color: red;">6</li> <- red
</ul>
I am looking to create a functionality where clicking on the button will add the content value of the input as an li tag. However, every third time I add a text, it needs to be displayed in red. How can this be achieved using JavaScript?
<div>
<input id="text" type="text" />
<button id="add">Add</button>
</div>
<ul id="list"></ul>
(function () {
document.querySelector('#add').addEventListener('click', function () {
let input = document.querySelector('#text');
if (input.value !== '') {
let list = document.querySelector('#list');
let item = document.createElement('li'); // create li node
let itemText = document.createTextNode(input.value); // create text node
item.appendChild(itemText); // append text node to li node
list.appendChild(item); // append li node to list
input.value = ''; // clear input
} else {
alert('Please enter some text');
}
});
})();