إنشاء مولد ألوان متدرج في 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 الذي يحتوي على مجلد المشروع مع ملفات الكود المصدري.
