addEventListener code not working like in video

Maybe it's something minor, like I misspelled something but I can't get the words on the webpage to turn into all caps when I hover the mouse arrow over them, like I need to in the video. I checked the Console and it said no errors, so idk what I did wrong. I'll copy and paste my JS code. The last const at the top and the 'for loop' area is where I'm having trouble. Anybody see anything wrong?

const toggleList = document.getElementById('toggleList'); const listDiv = document.querySelector('.list'); const descriptionInput = document.querySelector('input.description'); const descriptionP = document.querySelector('p.description'); const descriptionButton = document.querySelector('button.description'); const addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('button.addItemButton'); const removeItemButton = document.querySelector('button.removeItemButton'); const listItems = document.getElementsByTagName('li');

for (let i = 0; i < listItems.length; i += 1) { listItems[i].addEventListener('mouseover', () => { listItems[i].textConent = listItems[i].textContent.toUpperCase(); });

listItems[i].addEventListener('mouseout', () => { listItems[i].textConent = listItems[i].textContent.toLowerCase(); }); }

toggleList.addEventListener('click', () => { if (listDiv.style.display == 'none') { toggleList.textContent = 'Hide List'; listDiv.style.display = 'block'; } else { toggleList.textContent = 'Show List'; listDiv.style.display = 'none'; }
});

descriptionButton.addEventListener('click', () => { descriptionP.innerHTML = descriptionInput.value + ':'; descriptionInput.value = ''; });

addItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul')[0]; let li = document.createElement('li'); li.textContent = addItemInput.value; ul.appendChild(li); addItemInput.value = ''; });

removeItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul')[0]; let li = document.querySelector('li:last-child'); ul.removeChild(li); });