الأحداث

<button id="btn">قل مرحبًا</button><p id="out"></p><script src="script.js"></script>

const btn = document.querySelector("#btn");const out = document.querySelector("#out"); btn.addEventListener("click", function () {  out.textContent = "مرحبًا بك في مقهى بُنّ! ☕";});

<button id="minus">−</button><span id="count">0</span><button id="plus">+</button><script src="script.js"></script>

button { font-size: 20px; width: 40px; }#count { font-size: 24px; margin: 0 12px; }

let count = 0;const show = document.querySelector("#count"); document.querySelector("#plus").addEventListener("click", function () {  count++;  show.textContent = count;}); document.querySelector("#minus").addEventListener("click", function () {  if (count > 0) {    count--;    show.textContent = count;  }});

<button id="theme">🌙 الوضع الليلي</button><p>نص الصفحة.</p><script src="script.js"></script>

body { transition: background 0.3s; }.dark { background: #1E1F22; color: #eee; }

document.querySelector("#theme").addEventListener("click", function () {  document.body.classList.toggle("dark");});

<input id="name" placeholder="اكتب اسمك"><p>أهلًا <b id="hello"></b></p><div id="box">مرّر الفأرة هنا</div><script src="script.js"></script>

#box { padding: 16px; background: #EEE; margin-top: 8px; }

const nameInput = document.querySelector("#name");nameInput.addEventListener("input", function () {  document.querySelector("#hello").textContent = nameInput.value;}); const box = document.querySelector("#box");box.addEventListener("mouseenter", function () {  box.style.background = "#FFF3CD";});box.addEventListener("mouseleave", function () {  box.style.background = "#EEE";});

<p>اضغط أي زر:</p><button>قهوة</button> <button>شاي</button> <button>عصير</button><script src="script.js"></script>

const buttons = document.querySelectorAll("button");for (const b of buttons) {  b.addEventListener("click", function (event) {    console.log("اخترت:", event.target.textContent);  });}