مشروع JavaScript عملي: إنشاء أداة اختيار الألوان Color Palette Generator خطوة بخطوة للمبتدئين - Mohammed Code

اليوم مشروعنا بسيط في الفكرة، بس قوي في الفائدة 👌

رح نعمل أداة Color Palette Generator باستخدام HTML وCSS وJavaScript بدون مكتبات خارجية.

الفكرة بسيطة: الأداة تولّد لك مجموعة ألوان عشوائية، وكل مربع يعرض كود اللون (HEX) ويتلوّن بنفسه.

بالإضافة إلى ذلك، بمجرد الضغط على أي لون يتم نسخ الكود فورًا، وبالتالي تقدر تستخدمه مباشرة في أي تصميم أو مشروع Front-End.

قبل ما نبدأ، أنصحك تشغّل فيديو الشرح على يوتيوب عشان تطبّق عمليًا خطوة بخطوة

وهذا المشروع مناسب جدًا لـ:

المبتدئين في تعلم JavaScript
أي شخص يتعلم تطوير الويب Front-End
طلاب حابين يضيفوا مشاريع بسيطة لملف أعمالهم (Portfolio)

وفي هذا المشروع كل ما تحتاجه هو:

محرر كود مثل VS Code
متصفح (Chrome, Firefox, Edge…)
معرفة أساسية بـاللغات HTML وCSS وJavaScript

بالإضافة الى ذلك سنستخدم ثلاث ملفات:

index.html
style.css
script.js

أولاً : إنشاء هيكل الصفحة بـ HTML

في ملف index.html سننشئ هيكل بسيط يحتوي على:

عنوان التطبيق
مجموعة مربعات ألوان
زر لتوليد ألوان جديدة
وزر نسخ الكود

<!DOCTYPE html>

<html lang="ar">

<head>

<meta charset="UTF-8">

<title>عنوان الصفحة</title>

</head>

<body>

محتوى الصفحة هنا

</body>

</html>

النقاط المهمة في هذا الجزء:

استخدمنا div رئيسي container لوضع كل المحتوى في كارد واحدة
استخدمنا div بـ id=”palette” يحتوي على عدة divs كل واحد يمثل مربع لون
واضفنا زر generate لتحديث الألوان
واضنا زر للنسخ الكود
ربط ملف style.css للتنسيق و script.js للمنطق البرمجي

ثانياً : تصميم واجهة الأداة بـ CSS

في ملف style.css ركّزنا على:

جعلنا الخلفية بتدرّج لوني جميل داكن ومريح للعين
وضعنا الكارد في منتصف الشاشة مع ظلّ خفيف
رتبنا مربعات الألوان باستخدام CSS Grid
اضفنا hover effect لمربعات الألوان والزر لإعطاء حس احترافي في المشروع

* {
margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: Arial, sans-serif;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

padding: 20px;

}

.container {

background: #ffffff;

padding: 30px 40px;

border-radius: 20px;

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

text-align: center;

max-width: 600px;

width: 100%;

}

h1 {

color: #333;

margin-bottom: 25px;

font-size: 2rem;

}

.palette {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

gap: 15px;

margin-bottom: 20px;

}

.color-box {

background-color: red;

height: 110px;

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

color: #ffffff;

font-weight: bold;

font-size: 14px;

cursor: pointer;

transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;

opacity: 0.95;

}

.color-box:hover {

transform: translateY(-4px);

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

opacity: 1;

}

#generate {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

color: #ffffff;

border: none;

padding: 12px 28px;

font-size: 16px;

border-radius: 30px;

cursor: pointer;

font-weight: bold;

transition: transform 0.2s ease, box-shadow 0.2s ease;

}

#generate:hover {

transform: scale(1.05);

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}

.hint {

margin-top: 10px;

font-size: 14px;

color: #666;

}

أهم التقنيات المستخدمة:

display: grid مع repeat(auto-fit, minmax(…))
transition و transform للحركات البسيطة
box-shadow و border-radius لتجميل التصميم

ثالثاً. كود JavaScript لتوليد الألوان

في ملف script.js نكتب الكود التالي:

1- اختيار العناصر من الـ DOM:

عنصر palette
جميع العناصر .color-box
زر generate

2- إنشاء دالة getRandomColor:

تولّد قيم red, green, blue عشوائية من 0 إلى 255
تحويلها إلى HEX باستخدام toString(16) و padStart
إعادة قيمة مثل: #A1B2C3

3- إنشاء دالة generatePalette:

تمرّ على كل color-box
تغيّر backgroundColor لكل مربع
تحدّث النص داخل المربع إلى كود اللون

4- ربط الدالة بزر Generate:

عند الضغط على الزر يتم توليد ألوان جديدة

5- استدعاء generatePalette مرة واحدة عند تحميل الصفحة

const colorBoxes = document.querySelectorAll(".color-box");

const generateBtn = document.getElementById("generate");

function getRandomColor() {

const red = Math.floor(Math.random() * 256);

const green = Math.floor(Math.random() * 256);

const blue = Math.floor(Math.random() * 256);

const toHex = (value) => value.toString(16).padStart(2, "0");

const hex = "#" + toHex(red) + toHex(green) + toHex(blue);

return hex.toUpperCase();

}

function generatePalette() {

colorBoxes.forEach((box) => {

const newColor = getRandomColor();

box.style.backgroundColor = newColor;

box.textContent = newColor;

});

}

async function copyColor(text) {

try {

await navigator.clipboard.writeText(text);

alert(`تم نسخ اللون: ${text}`);

} catch (error) {

console.error("Failed to copy: ", error);

alert("حدث خطأ أثناء النسخ 😢");

}

}

colorBoxes.forEach((box) => {

box.addEventListener("click", () => {

const colorCode = box.textContent.trim();

copyColor(colorCode);

});

});

generateBtn.addEventListener("click", () => {

generatePalette();

});

generatePalette();

رابعاً: نسخ كود اللون باستخدام Clipboard API

لجعل الأداة عملية أكثر، أضفنا ميزة:

عند الضغط على أي مربع لون:

نأخذ النص الموجود داخله (كود HEX)
نستخدم navigator.clipboard.writeText لنسخ النص
نظهر رسالة للمستخدم تؤكد النسخ

هذه خطوة جميلة لتعريف المبتدئ على Clipboard API وكيفية بناء تجربة مستخدم أفضل.

أفكار لتطوير المشروع 💡

زيادة عدد مربعات الألوان
إضافة زر لحفظ الألوان المفضلة في localStorage
عرض قيمة اللون بـ RGB بجانب HEX
إضافة Dark Mode للكارد نفسه

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

الخلاصة (الهدف من الفيديو)

بهذا تكون أنشأت أداة اختيار ألوان كاملة باستخدام HTML وCSS وJavaScript، وتعلمت في الطريق:

التعامل مع الـ DOM
استخدام الأحداث Events
توليد ألوان عشوائية
استخدام Clipboard API

في النهاية لو حابب تشوف الشرح بالفيديو خطوة بخطوة، مع تطبيق مباشر للكود، هتلاقيه هنا

أخير لا تنسي زيارة قناتي على اليويتوب Mohammed Code

تحميل ملفات المشروع

الملفات

Color Palette Generator (2 كيلوبايت)