Dynamically Create a List

This is the companion topic to the Dynamically Create a List coding exercise:

1 Like
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coding Exercises Start</title>
  <style>
    body{margin: 0; padding: 2rem}
    h1{color: grey; font-size: 3.5rem;}
    ul{display: contents;}
    li{background-color: yellow; list-style-type: none; font:  1rem arial; font-weight: bold; margin-block: 1.25rem; max-width: fit-content; padding: .25rem;}
  </style>
  <script>
    class pizzaList extends HTMLElement{
      static data = {
        title: "Toppings",
        items: [
          'Tomato', "Cheese", "Pepperoni", "Olives", 
          "Jalepenos", "Pineapple", "Ham"
        ]
      }
      connectedCallback (){
        this.appendChild(Object.assign(document.createElement('h1'),{textContent: pizzaList.data.title}))
        let ul = this.appendChild(document.createElement('ul'))
        for(let i of pizzaList.data.items){ ul.appendChild(document.createElement('li')).textContent = i}
      }
    }
    customElements.define('pizza-list', pizzaList)
  </script>
  </head>
<body>
<pizza-list></pizza-list>
</body>
</html>
1 Like

Another solution would be to use string literals and innerHTML to insert the ul/li elements directly. That fits the constraints where one must use JavaScript to get the elements to appear.

:slight_smile:

You think this pizza was made at a chain restaurant? :drum:

document
  .body
  .appendChild(
    document
      .createElement("style")
  )
  .appendChild(
    document
      .createTextNode("li{list-style:none;margin:2em 0;}")
  )
  .parentNode
  .appendChild(
    document
      .createTextNode("li span{border-radius:.25em;background:#f9d748;padding:.5em .25em;font-family:sans-serif;}")
  )
  .parentNode
  .parentNode
  .appendChild(
    document
      .createElement("ul")
  )
  .appendChild(
    document
      .createElement("li")
  )
  .appendChild(
    document
      .createElement("span")
  )
  .appendChild(
    document
      .createTextNode("Tomato")
  )
  .parentNode
  .parentNode
  .parentNode
  .appendChild(
    document
      .createElement("li")
  )
  .appendChild(
    document
      .createElement("span")
  )
  .appendChild(
    document
      .createTextNode("Cheese")
  )
  .parentNode
  .parentNode
  .parentNode
  .appendChild(
    document
      .createElement("li")
  )
  .appendChild(
    document
      .createElement("span")
  )
  .appendChild(
    document
      .createTextNode("Pepperoni")
  )
  .parentNode
  .parentNode
  .parentNode
  .appendChild(
    document
      .createElement("li")
  )
  .appendChild(
    document
      .createElement("span")
  )
  .appendChild(
    document
      .createTextNode("Olives")
  )
  .parentNode
  .parentNode
  .parentNode
  .appendChild(
    document
      .createElement("li")
  )
  .appendChild(
    document
      .createElement("span")
  )
  .appendChild(
    document
      .createTextNode("Jalapeños")
  )
  .parentNode
  .parentNode
  .parentNode
  .appendChild(
    document
      .createElement("li")
  )
  .appendChild(
    document
      .createElement("span")
  )
  .appendChild(
    document
      .createTextNode("Pineapple")
  )
  .parentNode
  .parentNode
  .parentNode
  .appendChild(
    document
      .createElement("li")
  )
  .appendChild(
    document
      .createElement("span")
  )
  .appendChild(
    document
      .createTextNode("Ham")
  )
2 Likes


You both got badges!

:stuck_out_tongue: