-
Do whatever practice is necessary to better understand the topics we've covered this week.
-
Try the official React Tutorial
- Continue to enhance the Spellbook project. For example, make spells editable (look up
contentEditable).
- Have a great weekend!
- In addition to building a list item and adding it to the DOM (as we are now), also store each spell in an array.
- Add a delete button to each list item that removes it from the list.
- Remove the item from the array as well.
- Add a second field of your choice to the form.
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>- Build each new element (the
li, eachspan, etc.) in separate functions.
- Make the button change the text of the heading (the
<h1>).
- Add multiple headings to the page, and make the button change the second one. (Use a
classor anid.)
- Add a form to the page.
- Add a text input to the form.
- When the form is submitted, update the heading with the text that you type in the text input.
- Make sure it works when you press enter on the keyboard, not just when you click the button.