اجعلها تفعل شيئًا

بطاقة التعريف تبدو رائعة — لكنها فقط تجلس هناك. انقر عليها، حرّكها، لا شيء يحدث. ذلك لأن HTML هو البنية و Tailwind هو التنسيق. أما السلوك فهو وظيفة JavaScript.

إليك السر الذي لا يخبر به أحدٌ المبتدئين: في الـ vibe coding لا تحفظ JavaScript عن ظهر قلب. أنت تصف ما الذي يجب أن يحدث، والـ AI يكتب الكود. السلوك مجرّد جملة:

"عندما ينقر أحدهم على زر الإعجاب، يرتفع الرقم بجانب القلب بمقدار 1."

أعطِ هذا الموجّه للـ AI، وسيُنتج شيئًا صغيرًا مثل هذا:

const btn = document.getElementById("like-btn");
btn.addEventListener("click", () => {
  likes = likes + 1;
  count.textContent = likes;
});

هذا كل شيء. ثلاث حركات، في كل مرة:

1. اعثر على العنصر (getElementById)
2. أنصت لحدث (addEventListener("click", ...))
3. غيّر شيئًا (textContent، صنفًا، أي شيء)

اعثر، أنصت، غيّر. تقريبًا كل تفاعل في كل موقع استخدمته في حياتك — القوائم المنسدلة، مفاتيح الوضع الداكن، أزرار الإعجاب — هو نسخة ما من هذا النمط.

في هذا الدرس ستضيف عدّاد إعجابات إلى بطاقتك. وبنهايته ستنقر على قلب وتشاهد رقمًا تتحكم به أنت وهو يرتفع. تلك هي اللحظة التي تتحول فيها الصفحة إلى تطبيق.