// Tab functionality
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const tabId = tab.getAttribute('data-tab');
tabs.forEach(t => t.classList.remove('active'));
tabContents.forEach(tc => tc.classList.remove('active'));
tab.classList.add('active');
document.getElementById(tabId).classList.add('active');
});
});
// Notification
function showNotification() {
const notification = document.getElementById('notification');
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 2000);
}
// Copy functionality
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', () => {
const targetId = btn.getAttribute('data-target');
const codeElement = document.getElementById(targetId);
const textToCopy = codeElement.textContent;
navigator.clipboard.writeText(textToCopy).then(() => {
btn.textContent = 'Copied!';
btn.classList.add('copied');
showNotification();
setTimeout(() => {
btn.textContent = 'Copy Code';
btn.classList.remove('copied');
}, 2000);
});
});
});
// Sync range and number inputs
function syncInputs(rangeId, numberId) {
const range = document.getElementById(rangeId);
const number = document.getElementById(numberId);
range.addEventListener('input', () => {
number.value = range.value;
});
number.addEventListener('input', () => {
range.value = number.value;
});
}
// SVG Generator
let currentShape = 'circle';
document.querySelectorAll('.shape-option').forEach(option => {
option.addEventListener('click', () => {
document.querySelectorAll('.shape-option').forEach(o => o.classList.remove('selected'));
option.classList.add('selected');
currentShape = option.getAttribute('data-shape');
// Hide all control groups
document.getElementById('circle-controls').style.display = 'none';
document.getElementById('rect-controls').style.display = 'none';
document.getElementById('polygon-controls').style.display = 'none';
document.getElementById('star-controls').style.display = 'none';
document.getElementById('ellipse-controls').style.display = 'none';
// Show relevant control group
document.getElementById(`${currentShape}-controls`).style.display = 'block';
updateSVG();
});
});
// Sync all SVG inputs
syncInputs('circle-radius', 'circle-radius-value');
syncInputs('rect-width', 'rect-width-value');
syncInputs('rect-height', 'rect-height-value');
syncInputs('rect-radius', 'rect-radius-value');
syncInputs('polygon-sides', 'polygon-sides-value');
syncInputs('polygon-size', 'polygon-size-value');
syncInputs('star-points', 'star-points-value');
syncInputs('star-outer', 'star-outer-value');
syncInputs('star-inner', 'star-inner-value');
syncInputs('ellipse-rx', 'ellipse-rx-value');
syncInputs('ellipse-ry', 'ellipse-ry-value');
syncInputs('stroke-width', 'stroke-width-value');
syncInputs('rotation', 'rotation-value');
// Color inputs sync
document.getElementById('fill-color').addEventListener('input', (e) => {
document.getElementById('fill-color-text').value = e.target.value;
updateSVG();
});
document.getElementById('fill-color-text').addEventListener('input', (e) => {
document.getElementById('fill-color').value = e.target.value;
updateSVG();
});
document.getElementById('stroke-color').addEventListener('input', (e) => {
document.getElementById('stroke-color-text').value = e.target.value;
updateSVG();
});
document.getElementById('stroke-color-text').addEventListener('input', (e) => {
document.getElementById('stroke-color').value = e.target.value;
updateSVG();
});
// Update SVG on any input change
document.querySelectorAll('#svg input[type="range"], #svg input[type="number"]').forEach(input => {
input.addEventListener('input', updateSVG);
});
function updateSVG() {
const preview = document.getElementById('svg-preview');
const fillColor = document.getElementById('fill-color').value;
const strokeColor = document.getElementById('stroke-color').value;
const strokeWidth = document.getElementById('stroke-width').value;
const rotation = document.getElementById('rotation').value;
let svgElement = '';
let code = '<svg width="300" height="300" viewBox="0 0 300 300">\n ';
switch (currentShape) {
case 'circle':
const radius = document.getElementById('circle-radius').value;
svgElement = ``;
code += `<circle cx="150" cy="150" r="${radius}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}"/>`;
break;
case 'rect':
const width = document.getElementById('rect-width').value;
const height = document.getElementById('rect-height').value;
const rectRadius = document.getElementById('rect-radius').value;
svgElement = ``;
code += `<rect x="${150 - width / 2}" y="${150 - height / 2}" width="${width}" height="${height}" rx="${rectRadius}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}"/>`;
break;
case 'polygon':
const sides = document.getElementById('polygon-sides').value;
const size = document.getElementById('polygon-size').value;
let points = [];
for (let i = 0; i < sides; i++) {
const angle = (i * 2 * Math.PI) / sides - Math.PI / 2;
const x = 150 + size * Math.cos(angle);
const y = 150 + size * Math.sin(angle);
points.push(`${x},${y}`);
}
svgElement = ``;
code += `<polygon points="${points.join(' ')}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}"/>`;
break;
case 'star':
const points2 = document.getElementById('star-points').value;
const outerRadius = document.getElementById('star-outer').value;
const innerRadius = document.getElementById('star-inner').value;
let starPoints = [];
for (let i = 0; i < points2 * 2; i++) {
const angle = (i * Math.PI) / points2 - Math.PI / 2;
const radius = i % 2 === 0 ? outerRadius : innerRadius;
const x = 150 + radius * Math.cos(angle);
const y = 150 + radius * Math.sin(angle);
starPoints.push(`${x},${y}`);
}
svgElement = ``;
code += `<polygon points="${starPoints.join(' ')}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}"/>`;
break;
case 'ellipse':
const rx = document.getElementById('ellipse-rx').value;
const ry = document.getElementById('ellipse-ry').value;
svgElement = ``;
code += `<ellipse cx="150" cy="150" rx="${rx}" ry="${ry}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}"/>`;
break;
case 'path':
svgElement = ``;
code += `<path d="M150,50 Q250,150 150,250 Q50,150 150,50" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}"/>`;
break;
}
if (rotation != 0) {
svgElement = `${svgElement}`;
code = `<g transform="rotate(${rotation} 150 150)">\n ${code.replace(' ', ' ')}\n </g>`;
}
code += '\n</svg>';
preview.innerHTML = ``;
document.getElementById('svg-code').innerHTML = code;
}
// Box Shadow Generator
syncInputs('box-h-offset', 'box-h-offset-value');
syncInputs('box-v-offset', 'box-v-offset-value');
syncInputs('box-blur', 'box-blur-value');
syncInputs('box-spread', 'box-spread-value');
syncInputs('box-opacity', 'box-opacity-value');
document.getElementById('box-color').addEventListener('input', (e) => {
document.getElementById('box-color-text').value = e.target.value;
updateBoxShadow();
});
document.getElementById('box-color-text').addEventListener('input', (e) => {
document.getElementById('box-color').value = e.target.value;
updateBoxShadow();
});
document.getElementById('box-inset').addEventListener('change', updateBoxShadow);
document.querySelectorAll('#box-shadow input[type="range"], #box-shadow input[type="number"]').forEach(input => {
input.addEventListener('input', updateBoxShadow);
});
function updateBoxShadow() {
const hOffset = document.getElementById('box-h-offset').value;
const vOffset = document.getElementById('box-v-offset').value;
const blur = document.getElementById('box-blur').value;
const spread = document.getElementById('box-spread').value;
const color = document.getElementById('box-color').value;
const opacity = document.getElementById('box-opacity').value / 100;
const inset = document.getElementById('box-inset').checked ? 'inset ' : '';
const shadow = `${inset}${hOffset}px ${vOffset}px ${blur}px ${spread}px ${hexToRgba(color, opacity)}`;
const preview = document.getElementById('box-preview');
preview.innerHTML = ``;
document.getElementById('box-code').innerHTML = `.box-shadow {\n box-shadow: ${shadow};\n}`;
}
// Text Shadow Generator
syncInputs('text-size', 'text-size-value');
syncInputs('text-h-offset', 'text-h-offset-value');
syncInputs('text-v-offset', 'text-v-offset-value');
syncInputs('text-blur', 'text-blur-value');
syncInputs('text-opacity', 'text-opacity-value');
document.getElementById('text-color').addEventListener('input', (e) => {
document.getElementById('text-color-text').value = e.target.value;
updateTextShadow();
});
document.getElementById('text-color-text').addEventListener('input', (e) => {
document.getElementById('text-color').value = e.target.value;
updateTextShadow();
});
document.getElementById('text-shadow-color').addEventListener('input', (e) => {
document.getElementById('text-shadow-color-text').value = e.target.value;
updateTextShadow();
});
document.getElementById('text-shadow-color-text').addEventListener('input', (e) => {
document.getElementById('text-shadow-color').value = e.target.value;
updateTextShadow();
});
document.querySelectorAll('#text-shadow input[type="range"], #text-shadow input[type="number"], #text-shadow input[type="text"], #text-shadow select').forEach(input => {
input.addEventListener('input', updateTextShadow);
});
function updateTextShadow() {
const content = document.getElementById('text-content').value;
const size = document.getElementById('text-size').value;
const weight = document.getElementById('text-weight').value;
const color = document.getElementById('text-color').value;
const hOffset = document.getElementById('text-h-offset').value;
const vOffset = document.getElementById('text-v-offset').value;
const blur = document.getElementById('text-blur').value;
const shadowColor = document.getElementById('text-shadow-color').value;
const opacity = document.getElementById('text-opacity').value / 100;
const shadow = `${hOffset}px ${vOffset}px ${blur}px ${hexToRgba(shadowColor, opacity)}`;
const preview = document.getElementById('text-preview');
preview.innerHTML = `${content}
`;
document.getElementById('text-code').innerHTML = `.text-shadow {\n color: ${color};\n font-size: ${size}px;\n font-weight: ${weight};\n text-shadow: ${shadow};\n}`;
}
// Gradient Generator
syncInputs('gradient-angle', 'gradient-angle-value');
document.getElementById('gradient-type').addEventListener('change', updateGradient);
document.querySelectorAll('#gradient input[type="range"], #gradient input[type="number"]').forEach(input => {
input.addEventListener('input', updateGradient);
});
document.getElementById('color-stops').addEventListener('input', updateGradient);
document.getElementById('color-stops').addEventListener('click', (e) => {
if (e.target.classList.contains('remove-stop')) {
e.target.parentElement.remove();
updateGradient();
}
});
document.querySelector('.add-stop').addEventListener('click', () => {
const stopsContainer = document.getElementById('color-stops');
const newStop = document.createElement('div');
newStop.className = 'color-stop';
newStop.innerHTML = `
%
`;
stopsContainer.appendChild(newStop);
updateGradient();
});
function updateGradient() {
const type = document.getElementById('gradient-type').value;
const angle = document.getElementById('gradient-angle').value;
const stops = Array.from(document.querySelectorAll('.color-stop')).map(stop => {
const color = stop.querySelector('.stop-color').value;
const position = stop.querySelector('.stop-position').value;
return `${color} ${position}%`;
});
const gradient = type === 'linear'
? `linear-gradient(${angle}deg, ${stops.join(', ')})`
: `radial-gradient(circle, ${stops.join(', ')})`;
const preview = document.getElementById('gradient-preview');
preview.innerHTML = ``;
document.getElementById('gradient-code').innerHTML = `.gradient {\n background: ${gradient};\n}`;
// Show/hide angle control based on gradient type
document.getElementById('gradient-angle-group').style.display = type === 'linear' ? 'block' : 'none';
}
// Helper function to convert hex to rgba
function hexToRgba(hex, opacity) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}
// Initialize all generators
updateSVG();
updateBoxShadow();
updateTextShadow();
updateGradient();
// CSS Filter Generator
syncInputs('filter-blur', 'filter-blur-value');
syncInputs('filter-brightness', 'filter-brightness-value');
syncInputs('filter-contrast', 'filter-contrast-value');
syncInputs('filter-grayscale', 'filter-grayscale-value');
syncInputs('filter-hue', 'filter-hue-value');
syncInputs('filter-invert', 'filter-invert-value');
syncInputs('filter-opacity', 'filter-opacity-value');
syncInputs('filter-saturate', 'filter-saturate-value');
syncInputs('filter-sepia', 'filter-sepia-value');
document.querySelectorAll('#filter input[type="range"], #filter input[type="number"]').forEach(input => {
input.addEventListener('input', updateFilter);
});
document.getElementById('filter-reset').addEventListener('click', () => {
document.getElementById('filter-blur').value = 0;
document.getElementById('filter-blur-value').value = 0;
document.getElementById('filter-brightness').value = 100;
document.getElementById('filter-brightness-value').value = 100;
document.getElementById('filter-contrast').value = 100;
document.getElementById('filter-contrast-value').value = 100;
document.getElementById('filter-grayscale').value = 0;
document.getElementById('filter-grayscale-value').value = 0;
document.getElementById('filter-hue').value = 0;
document.getElementById('filter-hue-value').value = 0;
document.getElementById('filter-invert').value = 0;
document.getElementById('filter-invert-value').value = 0;
document.getElementById('filter-opacity').value = 100;
document.getElementById('filter-opacity-value').value = 100;
document.getElementById('filter-saturate').value = 100;
document.getElementById('filter-saturate-value').value = 100;
document.getElementById('filter-sepia').value = 0;
document.getElementById('filter-sepia-value').value = 0;
updateFilter();
});
function updateFilter() {
const blur = document.getElementById('filter-blur').value;
const brightness = document.getElementById('filter-brightness').value;
const contrast = document.getElementById('filter-contrast').value;
const grayscale = document.getElementById('filter-grayscale').value;
const hue = document.getElementById('filter-hue').value;
const invert = document.getElementById('filter-invert').value;
const opacity = document.getElementById('filter-opacity').value;
const saturate = document.getElementById('filter-saturate').value;
const sepia = document.getElementById('filter-sepia').value;
const filters = [];
if (blur != 0) filters.push(`blur(${blur}px)`);
if (brightness != 100) filters.push(`brightness(${brightness}%)`);
if (contrast != 100) filters.push(`contrast(${contrast}%)`);
if (grayscale != 0) filters.push(`grayscale(${grayscale}%)`);
if (hue != 0) filters.push(`hue-rotate(${hue}deg)`);
if (invert != 0) filters.push(`invert(${invert}%)`);
if (opacity != 100) filters.push(`opacity(${opacity}%)`);
if (saturate != 100) filters.push(`saturate(${saturate}%)`);
if (sepia != 0) filters.push(`sepia(${sepia}%)`);
const filterString = filters.length > 0 ? filters.join(' ') : 'none';
const preview = document.getElementById('filter-preview');
preview.innerHTML = ``;
document.getElementById('filter-code').innerHTML = `.filtered {
filter: ${filterString};
}`;
}
updateFilter();
// Animation Generator
let currentAnimation = 'fade';
const animationKeyframes = {
fade: {
keyframes: `@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}`,
displayKeyframes: `from { opacity: 0; }
to { opacity: 1; }`
},
slideIn: {
keyframes: `@keyframes slideIn {
from { transform: translateX(-100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}`,
displayKeyframes: `from { transform: translateX(-100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }`
},
bounce: {
keyframes: `@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}`,
displayKeyframes: `0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }`
},
pulse: {
keyframes: `@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}`,
displayKeyframes: `0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }`
},
shake: {
keyframes: `@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}`,
displayKeyframes: `0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }`
},
rotate: {
keyframes: `@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}`,
displayKeyframes: `from { transform: rotate(0deg); }
to { transform: rotate(360deg); }`
},
scale: {
keyframes: `@keyframes scale {
0% { transform: scale(0); }
100% { transform: scale(1); }
}`,
displayKeyframes: `0% { transform: scale(0); }
100% { transform: scale(1); }`
},
flip: {
keyframes: `@keyframes flip {
from { transform: perspective(400px) rotateY(0); }
to { transform: perspective(400px) rotateY(360deg); }
}`,
displayKeyframes: `from { transform: perspective(400px) rotateY(0); }
to { transform: perspective(400px) rotateY(360deg); }`
}
};
document.querySelectorAll('.animation-option').forEach(option => {
option.addEventListener('click', () => {
document.querySelectorAll('.animation-option').forEach(o => o.classList.remove('selected'));
option.classList.add('selected');
currentAnimation = option.getAttribute('data-animation');
updateAnimation();
});
});
syncInputs('anim-duration', 'anim-duration-value');
syncInputs('anim-delay', 'anim-delay-value');
syncInputs('anim-iteration', 'anim-iteration-value');
document.querySelectorAll('#animation input[type="range"], #animation input[type="number"], #animation select').forEach(input => {
input.addEventListener('input', updateAnimation);
});
document.getElementById('anim-infinite').addEventListener('change', updateAnimation);
document.getElementById('anim-play').addEventListener('click', () => {
const box = document.getElementById('animation-box');
box.style.animation = 'none';
box.offsetHeight; // Trigger reflow
playAnimation();
});
function playAnimation() {
const duration = document.getElementById('anim-duration').value;
const timing = document.getElementById('anim-timing').value;
const delay = document.getElementById('anim-delay').value;
const iteration = document.getElementById('anim-infinite').checked ? 'infinite' : document.getElementById('anim-iteration').value;
const direction = document.getElementById('anim-direction').value;
const fill = document.getElementById('anim-fill').value;
const box = document.getElementById('animation-box');
box.style.animation = `${currentAnimation} ${duration}s ${timing} ${delay}s ${iteration} ${direction} ${fill}`;
}
function updateAnimation() {
const duration = document.getElementById('anim-duration').value;
const timing = document.getElementById('anim-timing').value;
const delay = document.getElementById('anim-delay').value;
const iteration = document.getElementById('anim-infinite').checked ? 'infinite' : document.getElementById('anim-iteration').value;
const direction = document.getElementById('anim-direction').value;
const fill = document.getElementById('anim-fill').value;
const animData = animationKeyframes[currentAnimation];
const animationValue = `${currentAnimation} ${duration}s ${timing} ${delay}s ${iteration} ${direction} ${fill}`;
document.getElementById('animation-code').innerHTML = `
@keyframes ${currentAnimation} {
${animData.displayKeyframes}
}
.animated {
animation: ${animationValue};
}`;
}
updateAnimation();
// Border Radius Generator
syncInputs('radius-all', 'radius-all-value');
syncInputs('radius-tl', 'radius-tl-value');
syncInputs('radius-tr', 'radius-tr-value');
syncInputs('radius-br', 'radius-br-value');
syncInputs('radius-bl', 'radius-bl-value');
syncInputs('radius-size', 'radius-size-value');
// Linked mode toggle
document.getElementById('radius-linked').addEventListener('change', (e) => {
const isLinked = e.target.checked;
document.getElementById('radius-all-group').parentElement.style.display = isLinked ? 'block' : 'none';
document.getElementById('radius-individual').style.display = isLinked ? 'none' : 'block';
if (isLinked) {
// Sync all corners to the "all" value
const allValue = document.getElementById('radius-all').value;
['tl', 'tr', 'br', 'bl'].forEach(corner => {
document.getElementById(`radius-${corner}`).value = allValue;
document.getElementById(`radius-${corner}-value`).value = allValue;
});
}
updateBorderRadius();
});
// Update individual corners when "all" changes
document.getElementById('radius-all').addEventListener('input', () => {
const value = document.getElementById('radius-all').value;
['tl', 'tr', 'br', 'bl'].forEach(corner => {
document.getElementById(`radius-${corner}`).value = value;
document.getElementById(`radius-${corner}-value`).value = value;
});
updateBorderRadius();
});
document.getElementById('radius-all-value').addEventListener('input', () => {
const value = document.getElementById('radius-all-value').value;
document.getElementById('radius-all').value = value;
['tl', 'tr', 'br', 'bl'].forEach(corner => {
document.getElementById(`radius-${corner}`).value = value;
document.getElementById(`radius-${corner}-value`).value = value;
});
updateBorderRadius();
});
// Individual corner listeners
['tl', 'tr', 'br', 'bl'].forEach(corner => {
document.getElementById(`radius-${corner}`).addEventListener('input', updateBorderRadius);
document.getElementById(`radius-${corner}-value`).addEventListener('input', updateBorderRadius);
});
// Size and color listeners
document.getElementById('radius-size').addEventListener('input', updateBorderRadius);
document.getElementById('radius-size-value').addEventListener('input', updateBorderRadius);
document.getElementById('radius-bg-color').addEventListener('input', (e) => {
document.getElementById('radius-bg-color-text').value = e.target.value;
updateBorderRadius();
});
document.getElementById('radius-bg-color-text').addEventListener('input', (e) => {
document.getElementById('radius-bg-color').value = e.target.value;
updateBorderRadius();
});
// Presets
const radiusPresets = {
none: {tl: 0, tr: 0, br: 0, bl: 0},
rounded: {tl: 20, tr: 20, br: 20, bl: 20},
pill: {tl: 100, tr: 100, br: 100, bl: 100},
circle: {tl: 150, tr: 150, br: 150, bl: 150},
blob: {tl: 60, tr: 30, br: 70, bl: 40},
leaf: {tl: 100, tr: 0, br: 100, bl: 0}
};
document.querySelectorAll('.preset-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const preset = btn.getAttribute('data-preset');
const values = radiusPresets[preset];
// Unlink corners for custom presets
if (preset === 'blob' || preset === 'leaf') {
document.getElementById('radius-linked').checked = false;
document.getElementById('radius-all-group').parentElement.style.display = 'none';
document.getElementById('radius-individual').style.display = 'block';
} else {
document.getElementById('radius-linked').checked = true;
document.getElementById('radius-all-group').parentElement.style.display = 'block';
document.getElementById('radius-individual').style.display = 'none';
document.getElementById('radius-all').value = values.tl;
document.getElementById('radius-all-value').value = values.tl;
}
['tl', 'tr', 'br', 'bl'].forEach(corner => {
document.getElementById(`radius-${corner}`).value = values[corner];
document.getElementById(`radius-${corner}-value`).value = values[corner];
});
updateBorderRadius();
});
});
function updateBorderRadius() {
const tl = document.getElementById('radius-tl').value;
const tr = document.getElementById('radius-tr').value;
const br = document.getElementById('radius-br').value;
const bl = document.getElementById('radius-bl').value;
const size = document.getElementById('radius-size').value;
const bgColor = document.getElementById('radius-bg-color').value;
const isLinked = document.getElementById('radius-linked').checked;
let borderRadius, borderRadiusCode;
if (isLinked || (tl === tr && tr === br && br === bl)) {
borderRadius = `${tl}px`;
borderRadiusCode = `${tl}px`;
} else {
borderRadius = `${tl}px ${tr}px ${br}px ${bl}px`;
borderRadiusCode = `${tl}px ${tr}px ${br}px ${bl}px`;
}
const box = document.getElementById('radius-box');
box.style.borderRadius = borderRadius;
box.style.width = `${size}px`;
box.style.height = `${size}px`;
box.style.background = bgColor;
document.getElementById('radius-code').innerHTML = `.rounded-box {
border-radius: ${borderRadiusCode};
}`;
}
updateBorderRadius();
// Flexbox Generator
syncInputs('flex-gap', 'flex-gap-value');
syncInputs('flex-items', 'flex-items-value');
document.querySelectorAll('#flexbox select, #flexbox input[type="range"], #flexbox input[type="number"]').forEach(input => {
input.addEventListener('input', updateFlexbox);
input.addEventListener('change', updateFlexbox);
});
function updateFlexbox() {
const direction = document.getElementById('flex-direction').value;
const justify = document.getElementById('flex-justify').value;
const align = document.getElementById('flex-align').value;
const wrap = document.getElementById('flex-wrap').value;
const gap = document.getElementById('flex-gap').value;
const itemCount = document.getElementById('flex-items').value;
const container = document.getElementById('flex-container');
container.style.flexDirection = direction;
container.style.justifyContent = justify;
container.style.alignItems = align;
container.style.flexWrap = wrap;
container.style.gap = `${gap}px`;
// Update number of items
const currentItems = container.querySelectorAll('.flex-item').length;
if (itemCount > currentItems) {
for (let i = currentItems; i < itemCount; i++) {
const item = document.createElement('div');
item.className = 'flex-item';
item.textContent = i + 1;
container.appendChild(item);
}
} else if (itemCount < currentItems) {
for (let i = currentItems; i > itemCount; i--) {
container.removeChild(container.lastChild);
}
}
document.getElementById('flexbox-code').innerHTML = `.flex-container {
display: flex;
flex-direction: ${direction};
justify-content: ${justify};
align-items: ${align};
flex-wrap: ${wrap};
gap: ${gap}px;
}`;
}
updateFlexbox();
// CSS Grid Generator
syncInputs('grid-cols', 'grid-cols-value');
syncInputs('grid-rows', 'grid-rows-value');
syncInputs('grid-col-gap', 'grid-col-gap-value');
syncInputs('grid-row-gap', 'grid-row-gap-value');
document.querySelectorAll('#grid select, #grid input[type="range"], #grid input[type="number"]').forEach(input => {
input.addEventListener('input', updateGrid);
input.addEventListener('change', updateGrid);
});
function updateGrid() {
const cols = document.getElementById('grid-cols').value;
const rows = document.getElementById('grid-rows').value;
const colGap = document.getElementById('grid-col-gap').value;
const rowGap = document.getElementById('grid-row-gap').value;
const justifyItems = document.getElementById('grid-justify-items').value;
const alignItems = document.getElementById('grid-align-items').value;
const colSize = document.getElementById('grid-col-size').value;
const container = document.getElementById('grid-container');
const colTemplate = `repeat(${cols}, ${colSize})`;
const rowTemplate = `repeat(${rows}, 1fr)`;
container.style.gridTemplateColumns = colTemplate;
container.style.gridTemplateRows = rowTemplate;
container.style.columnGap = `${colGap}px`;
container.style.rowGap = `${rowGap}px`;
container.style.justifyItems = justifyItems;
container.style.alignItems = alignItems;
// Update number of items to match cols * rows
const totalItems = cols * rows;
const currentItems = container.querySelectorAll('.grid-item').length;
if (totalItems > currentItems) {
for (let i = currentItems; i < totalItems; i++) {
const item = document.createElement('div');
item.className = 'grid-item';
item.textContent = i + 1;
container.appendChild(item);
}
} else if (totalItems < currentItems) {
for (let i = currentItems; i > totalItems; i--) {
container.removeChild(container.lastChild);
}
}
document.getElementById('grid-code').innerHTML = `.grid-container {
display: grid;
grid-template-columns: ${colTemplate};
grid-template-rows: ${rowTemplate};
column-gap: ${colGap}px;
row-gap: ${rowGap}px;
justify-items: ${justifyItems};
align-items: ${alignItems};
}`;
}
updateGrid();