Skip to content

Instantly share code, notes, and snippets.

@xaliphostes

xaliphostes/index.html

Created June 30, 2023 15:23
Show Gist options
  • Save xaliphostes/6910e7331e8f65e4806015707d1ca213 to your computer and use it in GitHub Desktop.
Save xaliphostes/6910e7331e8f65e4806015707d1ca213 to your computer and use it in GitHub Desktop.
Download ZIP
solid-js in browser
Raw
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src='https://kit.fontawesome.com/daa834e337.js' crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
html,
body {
text-align: center;
font-family: sans-serif;
}
</style>
</head>
<body>
<script type="module">
import { createSignal, onCleanup } from "https://cdn.skypack.dev/solid-js"
import { render } from "https://cdn.skypack.dev/solid-js/web"
import html from "https://cdn.skypack.dev/solid-js/html"
const [count, setCount] = createSignal(0)
const timer = setInterval(() => setCount(count() + 1), 1000)
const reset = () => setCount(0)
const App = () => {
onCleanup(() => clearInterval(timer))
return html`
<div>
<h1>${count} seconds</h1>
<button type="button" onclick="${reset}" class="btn btn-primary">Reset</button>
</div>`
}
render(App, document.body)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment