Morning:
Afternoon:
HTML5 gave us a way to save extra information on a standard HTML Element via the data-* attributes. Basically, you can add any arbitrary information you want, prefixing the name of the attribute with data-. This data is then accessible through JavaScript via the someElement.dataset object, or through CSS via attr(data-*).
<div
id="my-div"
data-name="Awesome div"
data-id="div-1234"
data-color="blue"
data-marshmallows="yummy">
</div>
const myDiv = document.querySelector('#my-div')
myDiv.dataset.name // "Awesome div"
myDiv.dataset.data-id // "div-1234"
myDiv.dataset.color // "blue"
myDiv.dataset.marshmallows // "yummy"
#my-div {
background-color: attr(data-color);
}
div[data-id='div-1234'] {
height: 400px;
width: 400px;
}
.cloneNodeSometimes it may be easier to clone an existing node rather than build an entirely new one, especially if the markup is complex. In our ‘Michael Bay-watch’ project, we kept a hidden li in the DOM that we cloned every time we needed to render a new list item.
<li class="flick grid-x align-middle template">
<span class="flick-name cell auto">sdfkjhgds</span>
<span class="actions button-group cell shrink">
<button class="fav button warning">fav</button>
<button class="remove button alert">del</button>
</span>
</li>
/* hides any 'li' with a 'template' class */
li.template {
display: none;
}
const list = document.querySelector('ul')
const templateItem = document.querySelector('li.template')
// Make a copy of the templateItem
// Pass 'true' as an argument to clone all children as well
const newItem = templateItem.cloneNode(true)
// remove 'template' class so it is no longer hidden
newItem.classList.remove('template')
list.appendChild(newItem)
const ary = [1, 2, 3, 4, 5]
ary.unshift(0)
console.log(ary) // [0, 1, 2, 3, 4, 5]
ary.shift() // 0
console.log(ary) // [1, 2, 3, 4, 5]
ary.reverse()
console.log(ary) // [5, 4, 3, 2, 1]
Michael Bay-watch: Morning | Afternoon
span’s content editable?localStorage. When you refresh the page, your flicks should still be there.