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.
You think this pizza was made at a chain restaurant? 
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!
