Latihan 1: Custom Stores — Svelte

Latihan 1 dari materi Custom Stores di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya import { writable } from "svelte/store", function createCounter() berisi const store = writable(0), dan const counter = createCounter(). Biarkan import dan const counter.

Di dalam createCounter(), ganti const store = writable(0) jadi const { subscribe, set, update } = writable(0).
Kembalikan objek berisi subscribe dan tiga method dengan nama persis ini: increment (update((n) => n + 1)), decrement (update((n) => n - 1)), dan reset (set(0)).
Di bawah </script>, tulis <p>Count: {$counter}</p>.
Tambahkan tiga tombol bertuliskan persis +, -, dan Reset, dengan on:click={counter.increment}, on:click={counter.decrement}, dan on:click={counter.reset}.

Yang dicek:

Halaman punya <p> dan minimal 3 <button>.
Kodemu menyebut subscribe, increment, decrement, reset, writable(, dan on:click. Tulisan di dalam komentar gak dihitung.
Klik tombol + membuat <p> berisi persis Count: 1, lalu klik Reset mengembalikannya ke Count: 0.
Dari awal lagi, klik tombol - membuat <p> berisi persis Count: -1.

Hint

Custom store membungkus writable dan cuma membuka cara-cara yang kamu izinkan. Supaya {$counter} jalan, subscribe harus ikut dikembalikan.
Ambil subscribe, set, dan update dari writable(0), kembalikan subscribe plus increment, decrement, dan reset, lalu pasang tiap method ke tombol +, -, dan Reset.
return { subscribe, increment: () => update((n) => n + 1), decrement: () => update((n) => n - 1), reset: () => set(0) } lalu <p>Count: {$counter}</p> <button on:click={counter.increment}>+</button>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Custom Stores — Svelte

Hint

Memperbarui Aplikasi