Menu
Coddy logo textTech

Özet: Durum ve Olaylar

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 27 / 42.

challenge icon

Görev

Orta

Bölüm özeti. Bir masa lambası kontrol paneli oluşturun: tek bir bileşende yan yana duran bir sayaç ve bir durum değiştirici (toggle).

  1. İki bağımsız durum ekleyin: 0 değeriyle başlayan brightness ve false değeriyle başlayan on.
  2. Parlaklığı id="level" olan span içinde gösterin. id="brighter" olan button her tıklamada 1 ekler.
  3. id="power" olan button on durumunu tersine çevirir. Açık olduğunda, id="status" olan ve metni Lamp is on olan bir <p> gösterin; aksi takdirde null render edin.

Kendin dene

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Temeller bölümündeki tüm dersler