/* Add custom Js styles below */ 
<button id="myBtn">اضغطني</button>

<script>
  document.getElementById("myBtn").addEventListener("click", function () {
    alert("أهلًا بك في المتجر 👋");
  });
</script>
<button id="toggleBtn">عرض التفاصيل</button>
<div id="details" style="display:none;">
  تفاصيل المنتج هنا 👀
</div>

<script>
  document.getElementById("toggleBtn").onclick = () => {
    const el = document.getElementById("details");
    el.style.display = el.style.display === "none" ? "block" : "none";
  };
</script>
<p id="text">مرحبا!</p>

<script>
  setTimeout(() => {
    document.getElementById("text").innerText = "تسوّق واستمتع 🎉";
  }, 2000);
</script>
<p id="countdown"></p>

<script>
  let time = 10;
  const counter = setInterval(() => {
    document.getElementById("countdown").innerText =
      `العرض ينتهي بعد ${time} ثواني ⏳`;
    time--;
    if (time < 0) clearInterval(counter);
  }, 1000);
</script>
<script>
document.querySelectorAll('.product').forEach(product => {
  product.addEventListener('touchstart', () => {
    product.classList.add('active');
  });

  product.addEventListener('touchend', () => {
    product.classList.remove('active');
  });

  product.addEventListener('touchcancel', () => {
    product.classList.remove('active');
  });
});
</script>
<div class="cart-grid">
  <div class="product">
    <span>منتج 1</span>
    <button class="add-btn">إضافة للسلة</button>
  </div>
</div>