Latihan 1 dari materi Core Web Vitals di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Lengkapi function gradeWebVitals(lcp, inp, cls) yang menilai tiga Core Web Vitals sekaligus dan mengembalikan satu string.
lcp dan inp dalam milidetik (2,5 detik ditulis 2500), cls angka desimal (ditulis 0.1).
Nilai tiap metrik: good kalau sampai batas good (batasnya termasuk), poor kalau di atas batas poor, selain itu needs-improvement.
LCP: good <= 2500, poor > 4000
INP: good <= 200, poor > 500
CLS: good <= 0.1, poor > 0.25
Ada satu saja metrik yang poor: kembalikan "failed".
Ketiganya good: kembalikan "passed".
Selain itu: kembalikan "needs-improvement".
Yang dinilai nilai kembaliannya:
gradeWebVitals(2000, 150, 0.05) harus "passed"
gradeWebVitals(5000, 100, 0.05) harus "failed"
gradeWebVitals(3000, 150, 0.05) harus "needs-improvement"
Ada juga cek tersembunyi: nilai yang tepat di batas good, dan INP atau CLS yang poor. Tiga baris console.log di kode awal biarkan saja.
Hint
Nilai dulu tiap metrik satu per satu (good, needs-improvement, atau poor), baru tentukan hasil akhirnya dari ketiga nilai itu.
Bikin function bantu gradeMetric(value, goodMax, needsMax) yang pakai <=, lalu panggil tiga kali: (lcp, 2500, 4000), (inp, 200, 500), dan (cls, 0.1, 0.25). Cek ada yang poor dulu, baru cek semua good.
const grades = [gradeMetric(lcp, 2500, 4000), gradeMetric(inp, 200, 500), gradeMetric(cls, 0.1, 0.25)]; if (grades.includes("poor")) return "failed"; if (grades.every((g) => g === "good")) return "passed"; return "needs-improvement";
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...
