Доступ к каждому элементу из списка API

Question

axios.get("https://api.vschool.io/<username>/todo")
    .then(response => {
        for(let i = 0; i < response.data.length; i++){
            const h1 = document.createElement('h1')
            h1.textContent = response.data[i].title
            document.body.appendChild(h1)
        }
    })
    .catch(error => console.log(error))

Я создал список API и получил его в браузере. Я пытаюсь придать ему стиль и немного передвинуть его, но на всю жизнь я не знаю, как получить доступ к каждому отдельному предмету (моя конечная цель - дать возможность нанести удар через линию, если предмет, в частности, завершено. Спасибо

Answer 1

поставьте галочку, если статус, скажем, completed, затем добавьте класс для этого h1

axios.get("https://api.vschool.io/<username>/todo")
.then(response => {
    for(let i = 0; i < response.data.length; i++){
        const h1 = document.createElement('h1');
        h1.textContent = response.data[i].title;
        if (response.data[i].taskStatus == 'completed'){
            h1.classList.add('completed')
        }
        document.body.appendChild(h1);
    }
})
.catch(error => console.log(error))

CSS

.completed{
    text-decoration-line: line-through;
}