User:Sudhiksha v/textformatting.js

// Create controls container var controlsContainer = document.createElement('div'); controlsContainer.id = 'controls'; controlsContainer.style.position = 'fixed'; controlsContainer.style.top = '10px'; controlsContainer.style.right = '10px'; controlsContainer.style.zIndex = '9999'; controlsContainer.style.background = '#fff'; controlsContainer.style.padding = '10px'; controlsContainer.style.border = '1px solid #ccc'; controlsContainer.style.borderRadius = '5px';

// Create font size control var fontSizeLabel = document.createElement('label'); fontSizeLabel.textContent = 'Font Size:'; var fontSizeInput = document.createElement('input'); fontSizeInput.type = 'range'; fontSizeInput.id = 'fontSize'; fontSizeInput.min = '10'; fontSizeInput.max = '30'; fontSizeInput.value = '16';

// Create font color control var fontColorLabel = document.createElement('label'); fontColorLabel.textContent = 'Font Color:'; var fontColorInput = document.createElement('input'); fontColorInput.type = 'color'; fontColorInput.id = 'fontColor'; fontColorInput.value = '#333';

// Create container width control var containerWidthLabel = document.createElement('label'); containerWidthLabel.textContent = 'Container Width:'; var containerWidthInput = document.createElement('input'); containerWidthInput.type = 'range'; containerWidthInput.id = 'containerWidth'; containerWidthInput.min = '50'; containerWidthInput.max = '100'; containerWidthInput.value = '80';

// Create toggle button for text-to-speech var toggleSpeechButton = document.createElement('button'); toggleSpeechButton.textContent = 'Toggle Speech'; toggleSpeechButton.id = 'toggleSpeech';

// Append elements to controls container controlsContainer.appendChild(fontSizeLabel); controlsContainer.appendChild(fontSizeInput); controlsContainer.appendChild(document.createElement('br')); controlsContainer.appendChild(fontColorLabel); controlsContainer.appendChild(fontColorInput); controlsContainer.appendChild(document.createElement('br')); controlsContainer.appendChild(containerWidthLabel); controlsContainer.appendChild(containerWidthInput); controlsContainer.appendChild(document.createElement('br')); controlsContainer.appendChild(toggleSpeechButton);

// Append controls container to the document body document.body.appendChild(controlsContainer);

// Function to update text formatting function updateFormatting { var fontSize = document.getElementById('fontSize').value + 'px'; var fontColor = document.getElementById('fontColor').value; var containerWidth = document.getElementById('containerWidth').value + '%';

document.body.style.fontSize = fontSize; document.body.style.color = fontColor; document.body.style.width = containerWidth; }

// Add event listeners for input changes fontSizeInput.addEventListener('input', updateFormatting); fontColorInput.addEventListener('input', updateFormatting); containerWidthInput.addEventListener('input', updateFormatting);

// Function to toggle speech synthesis function toggleSpeech { if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel; } else { var textToSpeak = document.body.innerText; var utterance = new SpeechSynthesisUtterance(textToSpeak); window.speechSynthesis.speak(utterance); } }

// Add event listener for toggle button toggleSpeechButton.addEventListener('click', toggleSpeech);