Skip to content

Instantly share code, notes, and snippets.

@ernestmarcinko
Last active October 30, 2023 04:15
Show Gist options
  • Save ernestmarcinko/48b2f7fc81a845b8cfcbd7dac26ac5a3 to your computer and use it in GitHub Desktop.
Save ernestmarcinko/48b2f7fc81a845b8cfcbd7dac26ac5a3 to your computer and use it in GitHub Desktop.
Duck with HTMX
<!-- htmx -->
<script src="https://unpkg.com/htmx.org"></script>
<!-- serverless extension -->
<script src="https://unpkg.com/htmx-serverless"></script>
<button hx-get="js:getDuck" hx-trigger="click, load" hx-target="next .duckcount" hx-ext="serverless">
Click for more 🦆!
</button>
<span class="duckcount"></span>
<script>
let duckCount = 0;
function getDuck(text, params, xhr){
let status = 'bad, get more.';
if ( duckCount > 0 ) {
// Switch is for the weak
if ( duckCount < 10 ) {
status = 'okay.'
} else if ( duckCount < 20 ) {
status = 'getting better.'
} else if ( duckCount < 50 ) {
status = 'getting better and better.'
} else if ( duckCount < 100 ) {
status = 'even better!'
} else if ( duckCount < 200 ) {
status = 'marvelous!'
} else if ( duckCount < 500 ) {
status = 'duckolitios!'
} else if ( duckCount < 1000 ) {
status = 'what???'
} else {
status = 'crazy...'
}
}
return `You have ${duckCount++} 🦆, it is ${status}`;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment