Timer.svelte <!– https://eugenkiss.github.io/7guis/tasks#timer –> <script> import { onDestroy } from ‘svelte’; let elapsed = 0; let duration = 5000; let last_time = window.performance.now();…

FlightBooker.svelte <!– https://eugenkiss.github.io/7guis/tasks/#flight –> <script> const tomorrow = new Date(Date.now() + 86400000); let start = [ tomorrow.getFullYear(), pad(tomorrow.getMonth() + 1, 2), pad(tomorrow.getDate(), 2)…

TemperatureConverter.svelte <script> let c = 0; let f = 32; function setBothFromC(value) { c = +value; f = +(32 + (9 / 5…

Counter.svelte <!– https://eugenkiss.github.io/7guis/tasks#counter –> <script> let count = 0; </script> <input type=number bind:value={count}> <button on:click=”{() => count += 1}”>count</button> dan import ke App.svelte…

Debugging.svelte <script> let user = { firstname: ‘Ada’, lastname: ‘Lovelace’ }; </script> <input bind:value={user.firstname}> <input bind:value={user.lastname}> {@debug user} <h1>Hello {user.firstname}!</h1> dan import ke…

AudioPlayerComp.svelte <script context=”module”> const elements = new Set(); export function stopAll() { elements.forEach(element => { element.pause(); }); } </script> <script> import { onMount…

HeadComp.svelte <svelte:head> <link rel=”stylesheet” href=”/tutorial/dark-theme.css”> </svelte:head> <h1>Hello world!</h1> dan import ke App.svelte <WindowComp /> <!– <WindowBindingComp /> –> <BodyComp /> <HeadComp /> Alright…

BodyComp.svelte <script> let hereKitty = false; const handleMouseenter = () => hereKitty = true; const handleMouseleave = () => hereKitty = false; </script>…

WindowComp.svelte <script> let key; let keyCode; function handleKeydown(event) { key = event.key; keyCode = event.keyCode; } </script> <svelte:window on:keydown={handleKeydown}/> <div style=”text-align: center”> {#if…

ElementComp.svelte <script> const options = [‘h1’, ‘h3’, ‘p’]; let selected = options[0]; </script> <div style=”display: position: relative;”> <select bind:value={selected}> {#each options as option}…