Scribd
Upload
5 views6 pages

Script

The document is a JavaScript code that creates a gradient generator web application. It allows users to select colors, choose gradient directions, and download the generated gradient as an image. Additionally, it provides pre-defined templates and features to copy the CSS gradient to the clipboard.

Uploaded by

jamalarain93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views6 pages

Script

The document is a JavaScript code that creates a gradient generator web application. It allows users to select colors, choose gradient directions, and download the generated gradient as an image. Additionally, it provides pre-defined templates and features to copy the CSS gradient to the clipboard.

Uploaded by

jamalarain93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

document.

addEventListener('DOMContentLoaded', () => {
const colorsContainer = [Link]('colors');
const gradientDirection = [Link]('gradient-direction');
const templateSelect = [Link]('template');
const downloadBtn = [Link]('download-btn');

const preview = [Link]('.canvas-container');


const canvas = [Link]('overlay-canvas');
const ctx = [Link]('2d');

let width = 900;


let height = 500;

function getColors() {
return [...[Link]('.color-picker')].map(input =>
[Link]);
}

function resizeOverlayCanvas() {
const dpr = [Link] || 1;

[Link] = `${width}px`;
[Link] = `${height}px`;
[Link] = `12px`;

[Link] = width * dpr;


[Link] = height * dpr;

[Link] = `${width}px`;
[Link] = `${height}px`;

[Link]?.(); // clear previous transform if any


[Link](1, 0, 0, 1, 0, 0);
[Link](dpr, dpr);
}

function drawGradient() {
const dir = [Link];
const colors = getColors();

[Link](0, 0, width, height);

let grad;

if (dir === 'radial') {


const r = [Link](width, height) / 2;
grad = [Link](
width / 2, height / 2, 0,
width / 2, height / 2, r
);
} else {
if (dir === '90deg') {
grad = [Link](0, 0, width, 0);
} else if (dir === '180deg') {
grad = [Link](0, 0, 0, height);
} else if (dir === '45deg') {
grad = [Link](0, 0, width, height);
} else {
grad = [Link](0, 0, width, 0);
}
}

[Link]((c, i) => {
[Link](i / ([Link] - 1), c);
});

[Link] = grad;
[Link](0, 0, width, height);
}

[Link]('input', drawGradient);
[Link]('change', drawGradient);

[Link]('add-color').addEventListener('click', () => {
const input = [Link]('input');
[Link] = 'color';
[Link] = 'color-picker';
[Link] = '#000';
[Link]('input', drawGradient);
[Link](input);
drawGradient();
});
[Link]('random-btn').addEventListener('click', () => {
// pick random gradient direction
const directions = ['90deg', '180deg', '45deg', 'radial'];
const dir = directions[[Link]([Link]() * [Link])];
[Link] = dir;

// random colors (2 or 3 colors)


const pickers = [Link]('.color-picker');
[Link](picker => [Link]());

const colorsContainer = [Link]('colors');


const numColors = [Link]([Link]() * 2) + 2; // 2–3
for (let i = 0; i < numColors; i++) {
const input = [Link]('input');
[Link] = 'color';
[Link] = 'color-picker';
[Link] = getRandomColor();
[Link]('input', drawGradient);
[Link](input);
}

drawGradient();
});

function getRandomColor() {
return `#$
{[Link]([Link]()*16777215).toString(16).padStart(6,'0')}`;
}

[Link]('remove-color').addEventListener('click', () => {
const pickers = [Link]('.color-picker');
if ([Link] > 2) {
pickers[[Link] - 1].remove();
drawGradient();
}
});

[Link]('click', () => {
const a = [Link]('a');
[Link] = '[Link]';
[Link] = [Link]();
[Link]();
});

const templates = [
{ name: 'Sunset Glow', colors: ['#ff7e5f', '#feb47b'], direction: '90deg',
overlay: 'none' },
{ name: 'Ocean Breeze', colors: ['#43cea2', '#185a9d'], direction: '90deg',
overlay: 'none' },
{ name: 'Purple Dream', colors: ['#bc4e9c', '#f80759'], direction: '90deg',
overlay: 'none' },
{ name: 'Emerald Sky', colors: ['#56ab2f', '#a8e063'], direction: '90deg',
overlay: 'none' },
{ name: 'Firestorm', colors: ['#e96443', '#904e95'], direction: '90deg', overlay:
'none' },
{ name: 'Candy', colors: ['#f857a6', '#ff5858'], direction: '90deg', overlay:
'none' },
{ name: 'Aurora', colors: ['#00c3ff', '#ffff1c'], direction: '90deg', overlay:
'none' },
{ name: 'Sunrise', colors: ['#f3904f', '#3b4371'], direction: '90deg', overlay:
'none' },
{ name: 'Coral Reef', colors: ['#ff9966', '#ff5e62'], direction: '90deg',
overlay: 'none' },
{ name: 'Frozen', colors: ['#83a4d4', '#b6fbff'], direction: '90deg', overlay:
'none' },
{ name: 'Citrus', colors: ['#fc4a1a', '#f7b733'], direction: '90deg', overlay:
'none' },
{ name: 'Pink Lemonade', colors: ['#ff758c', '#ff7eb3'], direction: '90deg',
overlay: 'none' },
{ name: 'Galaxy', colors: ['#20002c', '#cbb4d4'], direction: '90deg', overlay:
'none' },
{ name: 'Mint', colors: ['#76b852', '#8dc26f'], direction: '90deg', overlay:
'none' },
{ name: 'Lava', colors: ['#e52d27', '#b31217'], direction: '90deg', overlay:
'none' },
{ name: 'Twilight', colors: ['#614385', '#516395'], direction: '90deg', overlay:
'none' },
{ name: 'Sand & Sea', colors: ['#fceabb', '#f8b500'], direction: '90deg',
overlay: 'none' },
{ name: 'Neon', colors: ['#12c2e9', '#c471ed'], direction: '90deg', overlay:
'none' },
{ name: 'Dusk', colors: ['#2c3e50', '#fd746c'], direction: '90deg', overlay:
'none' },
{ name: 'Blossom', colors: ['#ffb347', '#ffcc33'], direction: '90deg', overlay:
'none' },
{ name: 'Peacock', colors: ['#4facfe', '#00f2fe'], direction: '90deg', overlay:
'none' },
{ name: 'Flamingo', colors: ['#ff6a88', '#ff99ac'], direction: '90deg', overlay:
'none' },
{ name: 'Horizon', colors: ['#00c6ff', '#0072ff'], direction: '90deg', overlay:
'none' },
{ name: 'Grapefruit', colors: ['#e65c00', '#f9d423'], direction: '90deg',
overlay: 'none' },
{ name: 'Velvet', colors: ['#485563', '#29323c'], direction: '90deg', overlay:
'none' },
{ name: 'Dreamscape', colors: ['#5f2c82', '#49a09d'], direction: '90deg',
overlay: 'none' },
{ name: 'Bubblegum', colors: ['#ff9a9e', '#fad0c4'], direction: '90deg', overlay:
'none' },
{ name: 'Tropical', colors: ['#00c3ff', '#ffff1c'], direction: '90deg', overlay:
'none' },
{ name: 'Plum Punch', colors: ['#4a00e0', '#8e2de2'], direction: '90deg',
overlay: 'none' },
{ name: 'Seafoam', colors: ['#00bf8f', '#001510'], direction: '90deg', overlay:
'none' },
{ name: 'Mango', colors: ['#ffe259', '#ffa751'], direction: '90deg', overlay:
'none' },
{ name: 'Berry Blast', colors: ['#833ab4', '#fd1d1d'], direction: '90deg',
overlay: 'none' },
{ name: 'Banana Split', colors: ['#f7ff00', '#db36a4'], direction: '90deg',
overlay: 'none' },
{ name: 'Peachy', colors: ['#ed4264', '#ffedbc'], direction: '90deg', overlay:
'none' },
{ name: 'Blue Lagoon', colors: ['#43c6ac', '#191654'], direction: '90deg',
overlay: 'none' },
{ name: 'Rosewater', colors: ['#f953c6', '#b91d73'], direction: '90deg', overlay:
'none' },
{ name: 'Frostbite', colors: ['#00d2ff', '#3a7bd5'], direction: '90deg', overlay:
'none' },
{ name: 'Citrus Pop', colors: ['#f7971e', '#ffd200'], direction: '90deg',
overlay: 'none' },
{ name: 'Crimson Night', colors: ['#6a3093', '#a044ff'], direction: '90deg',
overlay: 'none' },
{ name: 'Cherry Blossom', colors: ['#eb3349', '#f45c43'], direction: '90deg',
overlay: 'none' },
{ name: 'Lemonade Stand', colors: ['#f9d423', '#ff4e50'], direction: '90deg',
overlay: 'none' },
{ name: 'Skyfire', colors: ['#2980b9', '#6dd5fa'], direction: '90deg', overlay:
'none' },
{ name: 'Watermelon', colors: ['#de6262', '#ffb88c'], direction: '90deg',
overlay: 'none' },
{ name: 'Cotton Candy', colors: ['#ffb347', '#ffccff'], direction: '90deg',
overlay: 'none' },
{ name: 'Minty Fresh', colors: ['#76b852', '#8dc26f'], direction: '90deg',
overlay: 'none' },
{ name: 'Grape Escape', colors: ['#654ea3', '#eaafc8'], direction: '90deg',
overlay: 'none' },
{ name: 'Amber Gold', colors: ['#f7971e', '#ffd200'], direction: '90deg',
overlay: 'none' },
{ name: 'Blueberry', colors: ['#1e3c72', '#2a5298'], direction: '90deg', overlay:
'none' },
{ name: 'Citrus Punch', colors: ['#ee9ca7', '#ffdde1'], direction: '90deg',
overlay: 'none' },
{ name: 'Hot Lava', colors: ['#f00000', '#ff7400'], direction: '90deg', overlay:
'none' },
{ name: 'Teal Whisper', colors: ['#136a8a', '#267871'], direction: '90deg',
overlay: 'none' },
{ name: 'Arctic Chill', colors: ['#00c3ff', '#ffff1c'], direction: '90deg',
overlay: 'none' },
{ name: 'Berry Smoothie', colors: ['#d53369', '#cbad6d'], direction: '90deg',
overlay: 'none' },
{ name: 'Peach Smoothie', colors: ['#ffb347', '#ffcc33'], direction: '90deg',
overlay: 'none' },
{ name: 'Caramel Cream', colors: ['#dd5e89', '#f7bb97'], direction: '90deg',
overlay: 'none' },
{ name: 'Coral Kiss', colors: ['#ff9966', '#ff5e62'], direction: '90deg',
overlay: 'none' },
{ name: 'Sapphire Shine', colors: ['#0f2027', '#203a43'], direction: '90deg',
overlay: 'none' },
{ name: 'Lagoon Blue', colors: ['#4ca1af', '#c4e0e5'], direction: '90deg',
overlay: 'none' },
{ name: 'Lavender Fog', colors: ['#eecda3', '#ef629f'], direction: '90deg',
overlay: 'none' },
{ name: 'Sea Salt', colors: ['#2bc0e4', '#eaecc6'], direction: '90deg', overlay:
'none' },
{ name: 'Pink Skies', colors: ['#ff9a9e', '#fecfef'], direction: '90deg',
overlay: 'none' }
];

[Link]((tpl, i) => {
const opt = [Link]('option');
[Link] = i;
[Link] = [Link];
[Link](opt);
});

[Link]('change', () => {
const tpl = templates[[Link]];
const pickers = [Link]('.color-picker');
pickers[0].value = [Link][0];
pickers[1].value = [Link][1];
[Link] = [Link];
drawGradient();
});

// Initial
resizeOverlayCanvas();
drawGradient();

const copyBtn = [Link]('copy-btn');

[Link]('click', () => {
const dir = [Link];
const colors = getColors();

let cssGradient;

if (dir === 'radial') {


cssGradient = `radial-gradient(circle, ${[Link](', ')})`;
} else {
cssGradient = `linear-gradient(${dir}, ${[Link](', ')})`;
}

// Create a temp textarea to copy to clipboard


const textarea = [Link]('textarea');
[Link] = `background: ${cssGradient};`;
[Link](textarea);
[Link]();
[Link]('copy');
[Link](textarea);

// Change button text temporarily


const originalText = [Link];
[Link] = '✅ Copied!';
[Link] = true;

setTimeout(() => {
[Link] = originalText;
[Link] = false;
}, 2000);
});

});

You might also like