Latihan 1 dari materi Styling Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya <p>Teks berwarna biru</p>. Biarkan paragraf dan teksnya.
Di atasnya, tambahkan <script> berisi let active = true.
Pasang kelasnya lewat directive class:: ubah paragrafnya jadi <p class:active>Teks berwarna biru</p>.
Di bawahnya, tambahkan <style> berisi p { color: gray; } lalu .active { color: blue; }.
Yang dicek:
Halaman punya <p>.
Kodemu memakai class: dan punya <style>. Tulisan di dalam komentar gak dihitung.
Warna paragraf yang dihitung browser adalah biru, persis rgb(0, 0, 255).
Hint
Style di <style> otomatis cuma berlaku untuk komponen ini. Kelas active dipasang lewat directive class: yang dikendalikan variabel active.
Tambahkan let active = true di <script>, tulis class:active di tag <p>, lalu di <style> beri p warna abu-abu dan .active warna biru.
<script> let active = true </script> <p class:active>Teks berwarna biru</p> <style> p { color: gray; } .active { color: blue; } </style>
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...
