I am trying to update the background color of a search result in a paragraph tag based on a condition where the value of a variable is greater than 1. I believe this can be achieved using an if statement. Below is the code snippet I am currently working on:
const todos = [{
text: 'Order airline tickets',
completed: false
},{
text: 'Vaccine appointment',
completed: true
}, {
text: 'Order Visa',
completed: true
}, {
text: 'Book hotel',
completed: false
}, {
text: 'Book taxi to airport',
completed: true
}]
const filters = {
searchText: ''
}
const renderTodos = function (todos, filters) {
// Filter the todos based on the search text and assign it to filteredTodos variable
const filteredTodos = todos.filter(function (todo) {
return todo.text.toLowerCase().includes(filters.searchText.toLowerCase())
})
const notDone = filteredTodos.filter(function (todo) {
return !todo.completed
})
// Clear the div containing the results before displaying new results
document.querySelector('#todos').innerHTML = ''
const summary = document.createElement('h4')
summary.textContent = `You found ${notDone.length} incomplete tasks in this search`
document.querySelector('#todos').appendChild(summary)
// Loop through each todo object, create a p tag for the title searched and append it to the div
filteredTodos.forEach(function (todo) {
const noteEl = document.createElement('p')
noteEl.textContent = todo.text
document.querySelector('#todos').appendChild(noteEl)
})
elem = document.createElement("hr")
document.querySelector('#todos').appendChild(elem)
}
document.querySelector('#search-todo').addEventListener('input', function (e) {
filters.searchText = e.target.value
renderTodos(todos, filters)
})
If there are incomplete todos in the paragraphs being appended to my #todos div, I would like to apply a yellow background color to those specific p tags.
Thank you!