When working with the DOM via JavaScript, we can not only read but manipulate these properties. Let's get some practice in manipulating properties by making a small program: a sticky note creator.
Sticky note creator
We're going to make a sticky note creator that takes a color and a message and adds that colored box to the DOM with an ordinal number. Here's what our final product might look like:
Figure 6.9 Final product
Take a look at the starter code: https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-6/stickies/starter-code.
Your goal is to recreate this functionality. Here are two methods we haven't yet covered for you to research:
- document.createElement()
- container.appendChild()
Solution code
How did you do? Let's take a look at the solution code:
const container = document.querySelector('.container') // set .container to a variable so we don't need to find it every time we click...