<script type="module">
import { createSignal, createEffect } from "https://cdn.skypack.dev/solid-js@1.2.6";
import html from "https://cdn.skypack.dev/solid-js@1.2.6/html";
const [
count, // getter
setCount // setter
] = createSignal(0)
setInterval(() => {
// Increment count every second
setCount(count() + 1)
}, 1000)
createEffect(() => {
// log count whenever it changes
console.log(count())
})
// This HTMLDivElement will be updated every second
const div = html`<div>count: ${count}</div>`
document.body.append(div) // It is DOM, not vdom.
</script>
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.