كيفية إنشاء أداة تدرج ألوان في JavaScript

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

في CSS، تتم إضافة التدرجات كقيمة لخاصية الخلفية. على سبيل المثال، قد يبدو التدرج البسيط كالتالي:

background: linear-gradient(to right, red, pink);

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

background: linear-gradient(45deg, red, pink);

هنا، ينتقل التدرج من الأحمر إلى الوردي بزاوية 45 درجة. لمعرفة المزيد عن التلاعب بالتدرجات باستخدام CSS، إليك دليل سريع: [رابط الدليل].

ما سنقوم بإنشائه في هذا البرنامج التعليمي

في هذا البرنامج التعليمي، ستستخدم JavaScript وتتعلم كيفية إنشاء أداة تنتج جميع أنواع تدرجات CSS. فيما يلي ميزات أداة التدرج:

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

بنهاية البرنامج التعليمي، سيكون لديك شيء مثل هذا: .

HTML: إنشاء الواجهة

ستحتوي أداة التدرج على واجهة بسيطة، وستبدو العلامات كما يلي:

<div class="container">
  <h1>Gradient Generator</h1>
  <div class="preview"></div>
  <div class="gradient-type">
    <label>
      <input type="radio" name="gradient-type" value="linear" checked> Linear
    </label>
    <label>
      <input type="radio" name="gradient-type" value="radial"> Radial
    </label>
  </div>
  <div class="color-control">
    <div class="color-list">
      <!-- الألوان تضاف هنا -->
    </div>
    <div class="add-color">
      <button class="add-color-btn">+</button>
    </div>
  </div>
  <div class="slider-wrapper">
    <div class="slider-content">
      <span>0°</span>
      <span id="angle-value">45°</span>
      <span>360°</span>
    </div>
    <input class="slider" type="range" id="angle" min="0" max="360" value="45" />
  </div>
  <pre id="output"></pre>
  <input type="text" name="" class="css-output">
  <button class="copy-css">
    Copy css
  </button>
</div>
    

CSS: تنسيق أداة التدرج

لنقم بتنسيق أداة التدرج. فيما يلي الأنماط للجسم والحاوية وعناصر المعاينة:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  font-family: "DM Mono", monospace;
}
.container {
  width: 80%;
  max-width: 600px;
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  border: #f3ecec solid 1px;
  padding: 40px 80px;
}
.preview {
  width: 100%;
  height: 200px;
  border-radius: 8px;
}
.color-control {
  display: flex;
  gap: 25px;
  padding: 20px;
  border-radius: 8px;
}
.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}
.color-list input[type="color"] {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
}
.add-color-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
}
    

زر إزالة اللون

لإزالة لون من التدرج، سيظهر رمز سلة المهملات عند التمرير فوق أي عنصر من عناصر منتقي الألوان.

فيما يلي الأنماط الخاصة بذلك:

نستخدم أيقونات Font Awesome لتسهيل الأمر:

.color-stop {
  position: relative;
}
.color-stop:hover .fa-solid.fa-trash-can {
  opacity: 1;
}
.fa-solid.fa-trash-can {
  position: absolute;
  opacity: 0;
  top: -35%;
  left: calc(100% - 20px);
  transform: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: red;
  transition: all 0.3s ease-in-out;
}
    

عنصر نطاق الإدخال (Range Input)

قد تبدو وتتصرف عناصر نطاق الإدخال بشكل مختلف عبر المتصفحات. لضمان مظهر متسق، من المهم تخصيص CSS لضمان تجربة موحدة عبر متصفحات متعددة. فيما يلي الأنماط الخاصة بعنصر شريط التمرير:

.slider-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  font-family: Arial, sans-serif;
  width: 100%;
}
.slider-wrapper input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: #e5e7eb;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.slider-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: #119cec;
  cursor: pointer;
}
.slider-wrapper input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  background: #119cec;
  cursor: pointer;
}
.slider-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
    

الأنماط المتبقية

ستبدو بقية الأنماط كما يلي:

.slider-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#output {
  color: #000;
  width: 100%;
  height: 80px;
  padding: 15px;
  border: 1px solid #e7e2e2;
  border-radius: 12px;
}
.css-output {
  display: none;
}
.copy-css {
  color: #fff;
  width: 100%;
  font-size: 1.2rem;
  width: 100%;
  height: 45px;
  background-color: #119cec;
  border-radius: 8px;
  font-weight: 800;
  border: none;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
    

JavaScript: بناء التدرج

الخطوة الأولى هي الحصول على جميع العناصر التي تحتاج إلى التلاعب.

const slider = document.getElementById("angle");
const sliderValue = document.getElementById("angle-value");
const addColorBtn = document.querySelector(".add-color-btn");
const gradientTypeInputs = document.querySelectorAll('input[name="gradient-type"]');
const sliderContainer = document.querySelector('.slider-wrapper');
    

لنحدد الألوان لمعاينة التدرج الأولية.

let colors = ['#d81848', '#fd26ae', '#0c43c6'];

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

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

const updateGradient = () => {
  let gradientString;
  const angle = document.getElementById("angle").value;
  const gradientType = document.querySelector('input[name="gradient-type"]:checked').value;
  if (gradientType === 'linear') {
    gradientString = `linear-gradient(${angle}deg, ${colors.join(", ")})`;
  } else {
    gradientString = `radial-gradient(circle, ${colors.join(", ")})`;
  }
  const gradientPreview = document.querySelector(".preview");
  gradientPreview.style.background = gradientString;
  document.getElementById("output").textContent = `.gradient {\n background: ${gradientString};\n}`;
};
    

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

بشكل افتراضي، سيتم عرض التدرج الخطي لأن الخيار الخطي محدد في HTML. بالإضافة إلى ذلك، ستكون الزاوية الافتراضية هي القيمة الافتراضية للشريط المنزلق (45 درجة).

سيبدو CSS الذي تم إنشاؤه كما يلي:

.gradient {background: linear-gradient(45deg, #d81848, #fd26ae, #0c43c6);}

تحديث القيم

لضمان تحديث نوع التدرج عند اختيار المستخدم للخيار الشعاعي، دعنا نضيف مستمعي الأحداث إلى مدخلات نوع التدرج input[name="gradient-type"]. سيضمن ذلك استجابة التدرج والكود الذي تم إنشاؤه لإجراءات المستخدم.

gradientTypeInputs.forEach(input => {
  input.addEventListener('change', () => {
    updateGradient();
  });
});

الميزة التالية هي إخفاء شريط التمرير عند اختيار التدرج الشعاعي.

function toggleAngleSlider() {
  const gradientType = document.querySelector('input[name="gradient-type"]:checked').value;
  sliderContainer.style.display = gradientType === 'linear' ? 'block' : 'none';
}

سيتم استدعاء الدالة toggleAngleSlider() في كل مرة يتم فيها تغيير اختيار التدرج.

gradientTypeInputs.forEach(input => {
  input.addEventListener('change', () => {
    updateGradient();
    toggleAngleSlider();
  });
});

تحديث التدرج بناءً على اختيار المستخدم

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

function initializeGradient() {
  const colorList = document.querySelector(".color-list");
  colorList.innerHTML = "";
  colors.forEach((color, index) => {
    const colorStop = document.createElement("div");
    colorStop.className = "color-stop";
    const colorInput = document.createElement("input");
    colorInput.type = "color";
    colorInput.className = "color-input";
    colorInput.value = color;
    colorInput.dataset.index = index;
    colorInput.addEventListener("input", (e) =>
      updateColor(e.target.dataset.index, e.target.value)
    );
    const removeButton = document.createElement("i");
    removeButton.className = "fa-solid fa-trash-can";
    colorStop.appendChild(colorInput);
    colorStop.appendChild(removeButton);
    colorList.appendChild(colorStop);
  });
}
    

الغرض الرئيسي من هذه الوظيفة هو إنشاء عناصر منتقي ألوان ديناميكيًا في واجهة المستخدم بناءً على مصفوفة الألوان. لكل لون في المصفوفة، نقوم بإنشاء عنصر <input type="color"> يسمح للمستخدمين باختيار ألوان التدرج المخصصة.

بالإضافة إلى إنشاء منتقي الألوان، أضفنا أيضًا أيقونة إزالة إلى كل عنصر إدخال لضمان إمكانية إزالة اللون من التدرج.

لقد أرفقنا أيضًا مستمع حدث يستمع لأي تغييرات في كل عنصر منتقي ألوان. عند حدوث تغيير في الإدخال، يتم استدعاء الدالة updateColor(). أضف الدالة updateColor().

  function updateColor(index, color) {
  colors[index] = color;
  updateGradient();
}

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

الآن، يمكن للمستخدم اختيار ألوان مخصصة لتدرجه.

إضافة وإزالة الألوان من التدرج

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

function addColorStop() {
  if (colors.length >= 6) {
    alert("الحد الأقصى المسموح به هو 6 ألوان!");
    return;
  }
  colors.push("#ffffff");
  initializeGradient();
}

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

function removeColorStop(index) {
  if (colors.length > 2) {
    colors.splice(index, 1);
    initializeGradient();
  } else {
    alert("يجب أن يكون هناك لونان على الأقل!");
  }
}

كما ترى، عند إضافة وإزالة الألوان من التدرج، نحتاج أيضًا إلى التأكد من أن المستخدم لا يمكنه إضافة أكثر من 6 ألوان وأنه يجب أن يكون هناك لونان على الأقل لإنشاء تدرج.

نسخ كود التدرج الذي تم إنشاؤه

الميزة الأخيرة هي إضافة القدرة على نسخ الكود الذي تم إنشاؤه. سنضيف مستمع حدث إلى زر نسخ CSS. عند النقر على الزر، سيتم نسخ الكود الذي تم إنشاؤه إلى الحافظة.

const copyCssBtn = document.querySelector(".copy-css");
copyCssBtn.addEventListener("click", () => {
  const gradientCode = document.getElementById("output")
 
  navigator.clipboard
    .writeText(gradientCode.textContent)
    .then(() => alert("تم نسخ CSS إلى الحافظة!"))
    .catch((err) => console.error("فشل النسخ: ", err));
});

ها هو العرض النهائي! استمتع بإنشاء تدرجاتك.

الخلاصـــة

لقد أنشأنا أداة تدرج وظيفية بالكامل. الآن يمكنك إضافة تدرجات جذابة إلى تصميماتك!