flash.js export default function flash(element) { requestAnimationFrame(() => { element.style.transition = ‘none’; element.style.color = ‘rgba(255,62,0,1)’; element.style.backgroundColor = ‘rgba(255,62,0,0.2)’; setTimeout(() => { element.style.transition =…

CircleDrawer.svelte <!– https://eugenkiss.github.io/7guis/tasks#circle Click on the canvas to draw a circle. Click on a circle to select it. Right-click on the canvas to…

CRUD.svelte <!– https://eugenkiss.github.io/7guis/tasks#crud –> <script> let people = [ { first: ‘Hans’, last: ‘Emil’ }, { first: ‘Max’, last: ‘Mustermann’ }, { first:…

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…