Morning:
Afternoon:
document.querySelector/document.querySelectorAll.textContent.innerHTMLconsole.logdebugger.addEventListener() - MDN docs.preventDefault().target
// Function Declaration (use 'function' keyword)
function aMostExcellentFunction() {
console.log('This function is excellent!')
}
aMostExcellentFunction() // => 'This function is excellent!'
// Function Expression (defines a function as part of a larger expression syntax - usually assignment to a variable)
const anotherExcellentFunction = () => {
console.log('This function is also excellent!')
}
anotherExcellentFunction() // => 'This function is also excellent!'
Look up document.createElement and appendChild, and try adding the list items that way, instead of with innerHTML.
Display each value in the list item (the name, whatever other field you add) in separate elements, and style them differently somehow.
For example:
<li>
<span class="spellName">Fireball</span>
<span class="level">lvl 4</span>
</li>
li, each span, etc.) in separate functions.