Шаг 30: Мини‑виджет курса на JS

Собираем простой виджет: DOM + события + логика. Это база для интерактивных блоков на сайте.

Код примера

<div class="widget">
  <h3 id="wTitle">Курс по JS</h3>
  <p id="wDesc">Изучим DOM, события, fetch и модули.</p>
  <button id="wBtn">Узнать цену</button>
  <p id="wPrice"></p>
</div>
<script>
  const btn = document.getElementById("wBtn");
  btn.addEventListener("click", () => {
    document.getElementById("wPrice").textContent = "Цена: 5900 ₽";
    btn.disabled = true;
    btn.textContent = "Цена показана";
  });
</script>
<style>
  .widget { border: 1px solid #ccc; padding: 16px; border-radius: 8px; max-width: 320px; }
</style>