KEMO DEV

🎮 Devone - GTA-Inspired Interactive Developer Portfolio
Welcome to Devone, the ultimate, gamified developer portfolio template. Break away from boring, traditional resumes and showcase your skills, projects, and career journey in a highly interactive, Grand Theft Auto-inspired user interface.

Built with the cutting-edge stack of React 19, Vite, Tailwind CSS v4, and Framer Motion, this template delivers a blazing-fast, cinematic experience that will leave recruiters and clients speechless.

✨ Why Choose This Template?
In a sea of identical developer portfolios, standing out is your most valuable asset. This template turns your resume into an immersive experience. With an iconic radial menu, gamified HUD elements, and meticulously crafted sections (like your "Garage" for tech stacks and "Map" for your career journey), you will instantly capture the attention of anyone who visits your site. It is not just a portfolio; it's a statement of your frontend mastery.

🔥 Key Features
🕹️ GTA-Inspired UI & HUD: Experience a uniquely gamified interface complete with a fully functional Radial Menu (triggered via the 'M' or 'Alt' key), custom fonts, and a sleek dark mode aesthetic.
🚀 Next-Gen Tech Stack: Powered by React 19 and Vite for lightning-fast loading times, instant HMR, and modern component architecture.
🎨 Tailwind CSS v4 & Framer Motion: Effortlessly styled with the latest Tailwind CSS, combined with Framer Motion for buttery-smooth page transitions and micro-animations.
📂 14 Fully Interactive Sections: Includes highly creative sections such as Portfolio, Skills, R&D (Lab), Tech Stack (Garage), Career Journey (Map), Music (Radio), Markets (Stock), Design (Clothing), Demos (Cinema), Services (Agency), Awards (Arena), and more.
🤖 AI Integration Ready: Comes pre-configured with `/genai` dependencies, making it easy to integrate AI-powered features directly into your portfolio.
📱 Fully Responsive: Carefully crafted to ensure the cinematic experience translates

💻 للبيع: مشروع مدونة إلكترونية متكاملة وجاهزة للإطلاق 🚀

هل تبحث عن مدونة احترافية تجمع بين التدوين التلقائي واليدوي مع لوحة تحكم قوية وإحصائيات تفصيلية؟ الآن فرصتك لامتلاك مشروع جاهز بمميزات مذهلة!

🔥 مميزات المشروع:

✔ التدوين التلقائي عبر RSS Feeds – جلب الأخبار والمقالات بسهولة 📡
✔ إضافة وتعديل المقالات بسهولة عبر CkEditor ✍️
✔ لوحة تحكم متطورة مع إحصائيات تفصيلية عن الزوار باستخدام Chart.js 📈
✔ إعدادات مرنة لتغيير اسم الموقع، الوصف، وتفعيل التدوين التلقائي ⚙️
✔ إدارة الملف الشخصي للمستخدمين 🔐
✔ تصميم متجاوب وأنيق يعمل على جميع الأجهزة 📱💻
✔ أداء سريع وأمان عالي 🔥
✔ نظام إدارة الإعلانات لتحقيق الأرباح 💰
✔ كود نظيف وقابل للتعديل لتوسيع الموقع بسهولة 🛠️

🛠️ التقنيات المستخدمة:

🔹 HTML, CSS, JavaScript
🔹 PHP, MySQL
🔹 Bootstrap 5, Chart.js, CkEditor, FontAwesome

📌 السعر: متاح للتفاوض
📩 مهتم؟ راسلني الآن لمزيد من التفاصيل!

#تدوين #مدونات

تحية خاصة كبيرة للمعجبين الصاعدين الجدد لديّ! Mohamed Ebrahim

الدرس الحادي عشر: التعامل مع الأحداث في جافاسكريبت

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

---

1. إضافة الأحداث باستخدام onclick مباشرة في HTML

Click me


function sayHello() {
alert("Hello, JavaScript!");
}


لماذا لا يُفضل هذه الطريقة؟

لأنها تجعل HTML يحتوي على جافاسكريبت، مما يقلل من مرونة الكود وصيانته.

---

2. استخدام addEventListener (أفضل طريقة)

إضافة حدث click إلى زر

let button = document.querySelector("button");

button.addEventListener("click", () => {
alert("Button clicked!");
});

---

3. أنواع الأحداث الشائعة في جافاسكريبت

أحداث الفأرة (Mouse Events)

click – عند النقر على عنصر

dblclick – عند النقر مرتين متتاليتين

mouseover – عند تمرير الفأرة فوق عنصر

mouseout – عند إخراج الفأرة من العنصر

mousedown – عند الضغط على زر الفأرة

mouseup – عند إفلات زر الفأرة

let box = document.querySelector(".box");

box.addEventListener("mouseover", () => {
box.style.backgroundColor = "yellow";
});

box.addEventListener("mouseout", () => {
box.style.backgroundColor = "white";
});

---

أحداث لوحة المفاتيح (Keyboard Events)

keydown – عند الضغط على زر

keyup – عند إفلات الزر

keypress – (قديم) عند كتابة حرف

document.addEventListener("keydown", (event) => {
console.log("Key Pressed:", event.key);
});

---

أحداث الإدخال والنماذج (Form Events)

input – عند إدخال نص في حقل

change – عند تغيير قيمة عنصر

submit – عند إرسال النموذج

focus – عند تحديد حقل الإدخال

blur – عند مغادرة الحقل

let inputField = document.querySelector("input");

inputField.addEventListener("input", () => {
console.log("Input Value:", inputField.value);
});

---

أحداث التحميل (Window Events)

DOMContentLoaded – عند تحميل الصفحة

load – عند اكتمال تحميل جميع الموارد

resize – عند تغيير حجم النافذة

scroll – عند تمرير الصفحة

window.addEventListener("resize", () => {
console.log("Window resized:", window.innerWidth, window.innerHeight);
});

---

4. إزالة الأحداث باستخدام removeEventListener

let button = document.querySelector("button");

function showMessage() {
alert("Hello!");
}

button.addEventListener("click", showMessage);

// لإزالة الحدث لاحقًا
button.removeEventListener("click", showMessage);

---

5. منع السلوك الافتراضي (preventDefault)

منع إرسال النموذج عند النقر على زر submit

let form = document.querySelector("form");

form.addEventListener("submit", (event) => {
event.preventDefault();
console.log("Form submission prevented.");
});

---

6. إيقاف انتشار الحدث (stopPropagation)

عندما يكون هناك عنصر داخل عنصر آخر، فإن الحدث يمكن أن ينتقل للأعلى، مما يسبب تشغيل أكثر من حدث.

let outerDiv = document.querySelector(".outer");
let innerDiv = document.querySelector(".inner");

outerDiv.addEventListener("click", () => {
console.log("Outer Div Clicked");
});

innerDiv.addEventListener("click", (event) => {
event.stopPropagation(); // يمنع انتقال الحدث للأعلى
console.log("Inner Div Clicked");
});

---

7. التعامل مع الأحداث الديناميكية (Event Delegation)

عندما يتم إضافة عناصر جديدة بعد تحميل الصفحة، قد لا تعمل الأحداث عليها. الحل هو استخدام الحدث على العنصر الأب.

let list = document.querySelector("ul");

list.addEventListener("click", (event) => {
if (event.target.tagName === "LI") {
console.log("Item Clicked:", event.target.innerText);
}
});

---

في الدرس القادم، سنتعلم عن الكائن JSON وكيفية التعامل معه في جافاسكريبت.

event.pr

الدرس العاشر: التفاعل مع DOM في جافاسكريبت

DOM (Document Object Model) هو الواجهة البرمجية التي تتيح لجافاسكريبت التحكم في عناصر HTML وتعديلها ديناميكيًا.

---

1. الوصول إلى عناصر DOM

باستخدام getElementById

let heading = document.getElementById("title");
console.log(heading);

باستخدام getElementsByClassName

let items = document.getElementsByClassName("list-item");
console.log(items);

باستخدام getElementsByTagName

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs);

باستخدام querySelector (موصى به)

let firstItem = document.querySelector(".list-item");
console.log(firstItem);

باستخدام querySelectorAll

let allItems = document.querySelectorAll(".list-item");
console.log(allItems);

---

2. تعديل محتوى العناصر

تغيير النص (innerText)

heading.innerText = "Hello, JavaScript!";

تغيير HTML داخل العنصر (innerHTML)

heading.innerHTML = "Hello, World!";

---

3. تعديل الخصائص (attributes)

تغيير قيمة src في صورة

let img = document.querySelector("img");
img.src = "new-image.jpg";

إضافة alt للصورة

img.setAttribute("alt", "New Image");

التحقق من وجود خاصية وحذفها

if (img.hasAttribute("alt")) {
img.removeAttribute("alt");
}

---

4. تعديل الأنماط (CSS) باستخدام style

heading.style.color = "blue";
heading.style.fontSize = "24px";

---

5. إضافة وإزالة الأصناف (classList)

إضافة صنف جديد (add)

heading.classList.add("highlight");

إزالة صنف (remove)

heading.classList.remove("highlight");

التبديل بين الأصناف (toggle)

heading.classList.toggle("dark-mode");

---

6. إنشاء عناصر جديدة وإضافتها إلى الصفحة

إنشاء عنصر جديد (createElement)

let newParagraph = document.createElement("p");
newParagraph.innerText = "This is a new paragraph.";

إضافته داخل عنصر معين (appendChild)

document.body.appendChild(newParagraph);

إضافته في مكان معين (insertBefore)

let container = document.querySelector(".container");
container.insertBefore(newParagraph, container.firstChild);

---

7. حذف العناصر (remove)

let elementToRemove = document.querySelector(".old-item");
elementToRemove.remove();

---

8. التعامل مع الأحداث (Event Listeners)

إضافة حدث للنقر (click)

heading.addEventListener("click", () => {
heading.style.color = "red";
});

إضافة حدث عند تمرير الفأرة (mouseover)

heading.addEventListener("mouseover", () => {
heading.style.backgroundColor = "yellow";
});

إزالة حدث (removeEventListener)

let sayHello = () => console.log("Hello!");
heading.addEventListener("click", sayHello);

// إزالة الحدث لاحقًا
heading.removeEventListener("click", sayHello);

---

9. التعامل مع المدخلات (input)

التقاط قيمة الإدخال عند تغييره (input event)

let inputField = document.querySelector("input");

inputField.addEventListener("input", () => {
console.log(inputField.value);
});

---

10. تنفيذ أكواد عند تحميل الصفحة (DOMContentLoaded)

document.addEventListener("DOMContentLoaded", () => {
console.log("The page is fully loaded!");
});

---

في الدرس القادم، سنتعلم عن التعامل مع الأحداث والتفاعل مع المستخدم بطريقة متقدمة.

الدرس التاسع: المصفوفات (Arrays) في جافاسكريبت

المصفوفات (Arrays) هي هياكل بيانات تُستخدم لتخزين مجموعة من القيم داخل متغير واحد.

---

1. إنشاء مصفوفة

let numbers = [10, 20, 30, 40, 50];
let fruits = ["Apple", "Banana", "Cherry"];

---

2. الوصول إلى عناصر المصفوفة

console.log(fruits[0]); // Apple
console.log(numbers[2]); // 30

---

3. تعديل عناصر المصفوفة

fruits[1] = "Mango";
console.log(fruits); // ["Apple", "Mango", "Cherry"]

---

4. معرفة طول المصفوفة (length)

console.log(fruits.length); // 3

---

5. إضافة وحذف العناصر

إضافة عنصر في نهاية المصفوفة (push)

fruits.push("Orange");
console.log(fruits); // ["Apple", "Mango", "Cherry", "Orange"]

إضافة عنصر في بداية المصفوفة (unshift)

fruits.unshift("Grapes");
console.log(fruits); // ["Grapes", "Apple", "Mango", "Cherry", "Orange"]

إزالة آخر عنصر (pop)

fruits.pop();
console.log(fruits); // ["Grapes", "Apple", "Mango", "Cherry"]

إزالة أول عنصر (shift)

fruits.shift();
console.log(fruits); // ["Apple", "Mango", "Cherry"]

---

6. البحث داخل المصفوفة

العثور على الفهرس (indexOf)

console.log(fruits.indexOf("Mango")); // 1

التحقق من وجود عنصر (includes)

console.log(fruits.includes("Banana")); // false

---

7. التكرار على المصفوفة

باستخدام for

for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}

باستخدام forEach

fruits.forEach(fruit => console.log(fruit));

باستخدام map (لإرجاع مصفوفة جديدة)

let upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits);

---

8. الفلترة (filter)

let numbers = [5, 10, 15, 20, 25];

let greaterThan10 = numbers.filter(num => num > 10);
console.log(greaterThan10); // [15, 20, 25]

---

9. البحث (find)

let found = numbers.find(num => num > 10);
console.log(found); // 15

---

10. الجمع (reduce)

let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 75

---

11. دمج المصفوفات (concat)

let moreFruits = ["Pineapple", "Strawberry"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits);

---

12. استخراج جزء من المصفوفة (slice)

let sliced = fruits.slice(1, 3);
console.log(sliced); // ["Mango", "Cherry"]

---

13. تعديل المصفوفة (splice)

fruits.splice(1, 1, "Peach"); // يحذف "Mango" ويضيف "Peach"
console.log(fruits);

---

14. عكس المصفوفة (reverse)

fruits.reverse();
console.log(fruits);

---

15. ترتيب العناصر (sort)

fruits.sort();
console.log(fruits);

لترتيب الأعداد بشكل صحيح:

let numbers = [40, 5, 100, 1, 20];
numbers.sort((a, b) => a - b);
console.log(numbers);

---

في الدرس القادم، سنتعلم عن معالجة DOM وكيفية التفاعل مع عناصر الصفحة باستخدام جافاسكريبت.

الدرس الثامن: الكائنات (Objects) في جافاسكريبت

الكائنات (Objects) هي هياكل بيانات تُستخدم لتخزين المعلومات على شكل مفتاح وقيمة.

---

1. إنشاء كائن (Object Literal)

let person = {
name: "Ali",
age: 25,
country: "Egypt"
};

console.log(person);

---

2. الوصول إلى خصائص الكائن

يمكن الوصول إلى القيم باستخدام النقطة (.) أو المصفوفات ([]).

console.log(person.name); // Ali
console.log(person["age"]); // 25

---

3. تعديل القيم داخل الكائن

person.age = 26;
console.log(person.age); // 26

إضافة خاصية جديدة:

person.job = "Developer";
console.log(person);

حذف خاصية:

delete person.country;
console.log(person);

---

4. الكائنات داخل الكائنات

let student = {
name: "Sara",
grades: {
math: 90,
english: 85
}
};

console.log(student.grades.math); // 90

---

5. الكائنات والدوال (Methods)

يمكن تعريف دالة داخل الكائن:

let car = {
brand: "Toyota",
start: function() {
console.log("The car is starting...");
}
};

car.start();

باستخدام الدوال السهمية (Arrow Functions):

let user = {
name: "Omar",
greet: () => console.log("Hello, " + user.name + "!")
};

user.greet();

---

6. الكلمة المفتاحية this

تُشير إلى الكائن الحالي.

let person = {
name: "Lina",
sayHello: function() {
console.log("Hello, my name is " + this.name);
}
};

person.sayHello();

---

7. التكرار على خصائص الكائن (for...in)

for (let key in person) {
console.log(key + ": " + person[key]);
}

---

8. تحويل الكائن إلى مصفوفة (Object.keys و Object.values)

console.log(Object.keys(person)); // ["name", "sayHello"]
console.log(Object.values(person)); // ["Lina", function]

---

9. الكائنات والمصفوفات معًا

يمكن أن تحتوي المصفوفات على كائنات والعكس صحيح.

let students = [
{ name: "Ali", age: 20 },
{ name: "Sara", age: 22 }
];

console.log(students[0].name); // Ali

---

10. النسخ العميق والسطحي للكائنات

عند نسخ كائن باستخدام =، فإنه يحتفظ بنفس المرجع في الذاكرة. لتجنب ذلك:

نسخ سطحي (Object.assign و spread operator)

let newPerson = Object.assign({}, person);
let anotherPerson = { ...person };

نسخ عميق (JSON.parse و JSON.stringify)

let deepCopy = JSON.parse(JSON.stringify(person));

---

في الدرس القادم، سنتعلم عن المصفوفات (Arrays) وكيفية التعامل معها بطرق متقدمة.

تحية خاصة لأحدث المتابعين لي! يسرني انضمامك! احمد عبدالوهاب, وردة الحياة, سونيا الشيخ, محمد البنا, نوسه الفاتح, بت الفاضل, Mohammed Elsherif Elgerri, محمد بشاره, Ahmed Abd Alhadi, قادة مسعود غربي, Alaa Elshafey, زهرة ربيعية نع نع, Em An, Sakina Hammad, ترس بحري, Houari Dadoune, Møkhtar Charles, Mohmmed Ahmead, Yasir To Max, Mãmøñ Fägërïí, Anas Musa, Ali Faisal, Mohamed Ebrahim, Salem Abdelrasoul, محمدين عثمان, Ahmed Elshehawy, آمالي بالله كبيرة, Alnoor Mohamed Zain, Awab Gmal, نورالدين عبدالعظيم, Ŵd Øśàmã, Nans Nans, سواكن حسن ام مصعب, Sandal Perfume, ام محمد, محمد شمس الدين, Halim Halim, زول مبرمج, مني اخوتي عايلتي, زول ساي, ادم هانى, احمد حسن ابوحسن ابوحسن, Eliot Medary, Alan Smith

الدرس السابع: الدوال في جافاسكريبت

الدوال (Functions) هي كتل من الكود يمكن إعادة استخدامها لتنفيذ مهام معينة. تساعد في تنظيم الكود وتقليل التكرار.

---

1. تعريف دالة باستخدام function

function greet() {
console.log("Hello, World!");
}

greet(); // استدعاء الدالة

---

2. الدوال بمدخلات (Parameters)

يمكن تمرير قيم إلى الدالة عند استدعائها.

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Kemo"); // Hello, Kemo!

يمكن تحديد أكثر من بارامتر:

function add(a, b) {
console.log(a + b);
}

add(5, 3); // 8

---

3. الدوال التي تعيد قيمة (return)

function multiply(a, b) {
return a * b;
}

let result = multiply(4, 5);
console.log(result); // 20

عند استخدام return، يتم إرجاع القيمة، ويمكن تخزينها في متغير.

---

4. الدوال السهمية (Arrow Functions)

طريقة حديثة لتعريف الدوال بشكل مختصر.

const greet = (name) => {
console.log("Hello, " + name + "!");
};

greet("Ali");

إذا كانت الدالة تحتوي على سطر واحد فقط، يمكن اختصارها أكثر:

const square = num => num * num;

console.log(square(4)); // 16

---

5. القيم الافتراضية للبارامترات

إذا لم يتم تمرير قيمة، يمكن تحديد قيمة افتراضية.

function greet(name = "Guest") {
console.log("Hello, " + name + "!");
}

greet(); // Hello, Guest!

---

6. الدوال كقيم (Function Expressions)

يمكن تخزين الدوال داخل متغيرات.

const sayHello = function() {
console.log("Hello!");
};

sayHello();

---

7. الدوال داخل الكائنات (Methods)

عند تعريف دالة داخل كائن، تُسمى طريقة (Method).

let person = {
name: "Ahmed",
greet: function() {
console.log("Hello, " + this.name + "!");
}
};

person.greet(); // Hello, Ahmed!

---

في الدرس القادم، سنتعلم عن الكائنات (Objects) في جافاسكريبت وكيفية التعامل معها.