Hyperlink Generator

Create and customize your HTML hyperlinks with ease

Style Configuration

Preview

Click Here
`;smallInputAceEditor2.setValue(fullHTML, -1); }// Event handlers function handleHover() { const { anchor, hoveredColor, hoveredTextDeco, hoverBgColorCheck, hoveredBgColor } = elements; anchor.style.color = hoveredColor.value; anchor.style.textDecoration = hoveredTextDeco.value; anchor.style.backgroundColor = hoverBgColorCheck.checked ? hoveredBgColor.value : ''; }function handleMouseOut() { updateLinkStyles(); }// Initialize event listeners function initializeEventListeners() { const { isAuto, anchor, generateButton } = elements;// Add input event listeners to all form elements document.querySelectorAll('input, select').forEach(element => { element.addEventListener('input', () => { if (isAuto.checked) { updateLinkStyles(); updateEditors(); } }); });// Hover effects anchor.addEventListener('mouseover', handleHover); anchor.addEventListener('mouseout', handleMouseOut);// Generate button generateButton.addEventListener('click', (e) => { e.preventDefault(); isAuto.checked = false; updateLinkStyles(); updateEditors(); }); }// Initialize the application function init() { updateLinkStyles(); updateEditors(); initializeEventListeners(); }// Start the application init();