const webPreview = document.getElementById('web-preview-container');
const previewText = document.getElementById('preview-text');
const fontSizeSlider = document.getElementById('font-size');
const fontColorPicker = document.getElementById('font-color');
const backgroundColorPicker = document.getElementById('background-color');
const previewTextInput = document.getElementById('preview-text-input');
const resetBtn = document.getElementById('reset-btn');
const applyBtn = document.getElementById('apply-btn');
function applyOptions() {
const fontSize = fontSizeSlider.value + 'px';
const fontColor = fontColorPicker.value;
const backgroundColor = backgroundColorPicker.value;
const customText = previewTextInput.value;
previewText.style.fontSize = fontSize;
previewText.style.color = fontColor;
webPreview.style.backgroundColor = backgroundColor;
if (customText.trim() !== '') {
previewText.innerText = customText;
} else {
previewText.innerText = 'Blocked !';
}
}
fontSizeSlider.addEventListener('input', applyOptions);
fontColorPicker.addEventListener('change', applyOptions);
backgroundColorPicker.addEventListener('change', applyOptions);
previewTextInput.addEventListener('input', applyOptions);
resetBtn.addEventListener('click', () => {
fontSizeSlider.value = 24;
fontColorPicker.value = '#000000';
backgroundColorPicker.value = '#ffffff';
previewTextInput.value = 'Blocked !';
applyOptions();
