Latihan 1 dari materi Special Elements di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya let innerWidth di <script>. Biarkan, dan biarkan namanya tetap innerWidth.
Di bawah </script>, ikat lebar jendela ke variabel itu: <svelte:window bind:innerWidth />.
Tampilkan angkanya dalam paragraf: <p>Lebar: {innerWidth}px</p>.
Yang dicek:
Kodemu menyebut svelte:window dan bind:innerWidth.
Halaman punya <p>.
Angkanya ditulis sebagai {innerWidth} di kodemu, bukan diketik.
Tanpa <svelte:window>, paragrafnya cuma membaca Lebar: undefinedpx.
Hint
Variabel innerWidth gak terisi sendiri. Elemen khusus svelte:window bisa mengikat properti jendela browser ke sebuah variabel, dan memperbaruinya tiap ukuran jendela berubah.
Tulis svelte:window sendirian di tingkat teratas komponen, dengan bind:innerWidth. Karena nama variabelnya sama dengan nama propertinya, bagian ={innerWidth} boleh dihilangkan.
<svelte:window bind:innerWidth /> lalu <p>Lebar: {innerWidth}px</p>
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...
