إنشاء مولد ألوان متدرج في HTML وCSS وJavaScript

اكــــواد

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

في منشور المدونة هذا، سأوضح خطوات بناء مولد ألوان متدرجة باستخدام HTML وCSS وJavaScript. هذا المشروع مثالي للمبتدئين الذين يرغبون في تعلم المزيد عن مفاهيم تطوير الويب مثل معالجة DOM والتعامل مع الأحداث وتنسيق CSS.

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

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

خطوات إنشاء مولد التدرج في JavaScript

لإنشاء مولد ألوان متدرجة باستخدام HTML وCSS وJavaScript، اتبع الخطوات المحددة سطرًا بسطر:

قم بإنشاء مجلد. يمكنك تسمية هذا المجلد كما تريد، وداخل هذا المجلد، قم بإنشاء الملفات المذكورة.
قم بإنشاء ملف index.html. يجب أن يكون اسم الملف index وامتداده .html
قم بإنشاء ملف style.css. يجب أن يكون اسم الملف style وامتداده .css
قم بإنشاء ملف script.js. يجب أن يكون اسم الملف script وامتداده .js

للبدء، أضف أكواد HTML التالية إلى ملف index.html. الخاص بك لإنشاء هيكل أساسي لمولد التدرج اللوني.


<!DOCTYPE html>
<!-- Coding By https://www.aweywashk.xyz/ -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Gradient Color Generator in JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="gradient-box"></div>
      <div class="row options">
        <div class="column direction">
          <p>Direction</p>
          <div class="select-box">
            <select>
              <option value="to top">Top</option>
              <option value="to right top">Right top</option>
              <option value="to right">Right</option>
              <option value="to right bottom">Right bottom</option>
              <option value="to bottom">Bottom</option>
              <option value="to left bottom">Left bottom</option>
              <option value="to left">Left</option>
              <option value="to left top" selected>Left top</option>
            </select>
          </div>
        </div>
        <div class="column palette">
          <p>Colors</p>
          <div class="colors">
            <input type="color" value="#5665E9">
            <input type="color" value="#A271F8">
          </div>
        </div>
      </div>
      <textarea class="row" disabled>background-image: linear-gradient(to left top, #977DFE,  #6878FF);</textarea>
      <div class="row buttons">
        <button class="refresh">Refresh Colors</button>
        <button class="copy">Copy Code</button>
      </div>
    </div>
        
  </body>
</html>

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


/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #8A6CFF;
}
.wrapper {
  width: 450px;
  padding: 25px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.06);
}
.wrapper .gradient-box {
  height: 220px;
  width: 100%;
  border-radius: 7px;
  background: linear-gradient(to left top, #5665E9, #A271F8);
}
.wrapper .row {
  display: flex;
  margin: 20px 0;
  justify-content: space-between;
}
.options p {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.row :where(.column, button) {
  width: calc(100% / 2 - 12px);
}
.options .select-box {
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #aaa;
}
.select-box select {
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.12rem;
  background: none;
}
.options .palette {
  margin-left: 60px;
}
.palette input {
  height: 41px;
  width: calc(100% / 2 - 20px);
}
.palette input:last-child {
  margin-left: 6px;
}
.wrapper textarea {
  width: 100%;
  color: #333;
  font-size: 1.05rem;
  resize: none;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.buttons button {
  padding: 15px 0;
  border: none;
  outline: none;
  color: #fff;
  margin: 0 0 -15px;
  font-size: 1.09rem;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
}
.buttons .refresh {
  background: #6C757D;
}
.buttons .refresh:hover {
  background: #5f666d;
}
.buttons .copy {
  background: #8A6CFF;
}
.buttons .copy:hover {
  background: #704dff;
}
@media screen and (max-width: 432px) {
  .wrapper {
    padding: 25px 20px;
  }
  .row :where(.column, button) {
    width: calc(100% / 2 - 8px);
  }
  .options .select-box {
    padding: 8px 15px;
  }
  .options .palette  {
    margin-left: 40px;
  }
  .options .colors {
    display: flex;
    justify-content: space-between;
  }
  .palette input {
    width: calc(100% / 2 - 5px);
  }
  .palette input:last-child {
    margin-left: 0;
  }
}

أخيرًا، أضف كود JavaScript التالي إلى ملف script.js. الخاص بك لإضافة وظائف لمولد التدرج.


const gradientBox = document.querySelector(".gradient-box");
const selectMenu = document.querySelector(".select-box select");
const colorInputs = document.querySelectorAll(".colors input");
const textarea = document.querySelector("textarea");
const refreshBtn = document.querySelector(".refresh");
const copyBtn = document.querySelector(".copy");
const getRandomColor = () => {
    // Generating a random color in hexadecimal format. Example: #5665E9
    const randomHex = Math.floor(Math.random() * 0xffffff).toString(16);
    return `#${randomHex}`;
}
const generateGradient = (isRandom) => {
    if(isRandom) { // If isRandom is true, update the colors inputs value with random color
        colorInputs[0].value = getRandomColor();
        colorInputs[1].value = getRandomColor();
    }
    // Creating a gradient string using the select menu value with color input values
    const gradient = `linear-gradient(${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
    gradientBox.style.background = gradient;
    textarea.value = `background: ${gradient};`;
}
const copyCode = () => {
    // Copying textarea value and updating the copy button text
    navigator.clipboard.writeText(textarea.value);
    copyBtn.innerText = "Code Copied";
    setTimeout(() => copyBtn.innerText = "Copy Code", 1600);
}
colorInputs.forEach(input => {
    // Calling generateGradient function on each color input clicks
    input.addEventListener("input", () => generateGradient(false));
});
selectMenu.addEventListener("change", () => generateGradient(false));
refreshBtn.addEventListener("click", () => generateGradient(true));
copyBtn.addEventListener("click", copyCode);

الخلاصــــة

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

يعد إنشاء مولد لوحة ألوان طريقة رائعة أخرى لتحسين مهارات تطوير الويب لديك. لذا، لا تنسَ التحقق من هذه المدونة حول مولد لوحة الألوان العشوائية في JavaScript.

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

إنشاء مولد ألوان.zip 2.54KB

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

إنشاء مولد ألوان متدرج في HTML وCSS وJavaScript

إنشاء مولد ألوان متدرج في HTML وCSS وJavaScript

خطوات إنشاء مولد التدرج في JavaScript

الخلاصــــة

كيف كان المقال؟

إرسال تعليق

الدردشة عبر واتساب

إرسال طلب

الدليل الشامل للبرومبت (Prompt) ما هو البرومبت التعريف الدقيق؟

كيفية إنشاء كلمة مرور قوية والحفاظ عليها آمنة

دليل شامل لمواقع البرومبتات للذكاء الاصطناعي

مجموعة شاملة لتصاميم العناوين باستخدام CSS

تركيب محرر النصوص البرمجية CodeMirror علي مدونتك