document.addEventListener(‘DOMContentLoaded’, function() { // API key const apiKey = ‘AIzaSyBrrMSmpMpKiVI7GYuwXr6BTIKzFaz1x6c’;// Fetch data from the API function fetchData() { const url = ‘https://us-central1-toolsaday-site.cloudfunctions.net/emailGenerator’; fetch(url, { headers: { ‘Content-Type’: ‘application/json’, ‘X-API-Key’: apiKey } }) .then(response => response.json()) .then(data => { displayData(data); }) .catch(error => { console.error(‘Error fetching data:’, error); }); }// Display the data on the page function displayData(data) { const subjectInput = document.getElementById(‘subject’); const bodyInput = document.getElementById(‘body’); const emailPreview = document.getElementById(’email-preview’);subjectInput.value = data.subject; bodyInput.value = data.body; emailPreview.innerHTML = `

${data.subject}

${data.body}

`; }// Generate a new email function generateEmail() { fetchData(); }// Event listener for the “Generate Email” button const generateButton = document.getElementById(‘generate-button’); generateButton.addEventListener(‘click’, generateEmail);// Initial data fetch fetchData();// Dynamic styling const body = document.body; body.style.backgroundColor = ‘#fff’; body.style.color = ‘#333’; body.style.fontFamily = ‘Arial, sans-serif’; body.style.margin = ‘0’; body.style.padding = ‘0’;const container = document.createElement(‘div’); container.style.maxWidth = ‘800px’; container.style.margin = ‘0 auto’; container.style.padding = ’40px’;const header = document.createElement(‘header’); header.style.textAlign = ‘center’; header.style.marginBottom = ’40px’;const title = document.createElement(‘h1’); title.textContent = ‘Email Generator’; title.style.fontSize = ’36px’; title.style.fontWeight = ‘bold’; title.style.margin = ‘0’;const subtitle = document.createElement(‘p’); subtitle.textContent = ‘Generate a professional-looking email in seconds.’; subtitle.style.fontSize = ’18px’; subtitle.style.color = ‘#666′; subtitle.style.margin = ’10px 0 0’;header.appendChild(title); header.appendChild(subtitle);const content = document.createElement(‘div’); content.style.display = ‘flex’; content.style.flexDirection = ‘column’; content.style.alignItems = ‘center’;const inputContainer = document.createElement(‘div’); inputContainer.style.width = ‘100%’; inputContainer.style.marginBottom = ’20px’;const subjectLabel = document.createElement(‘label’); subjectLabel.setAttribute(‘for’, ‘subject’); subjectLabel.textContent = ‘Subject:’; subjectLabel.style.display = ‘block’; subjectLabel.style.marginBottom = ‘5px’;const subjectInput = document.createElement(‘input’); subjectInput.type = ‘text’; subjectInput.id = ‘subject’; subjectInput.style.width = ‘100%’; subjectInput.style.padding = ’10px’; subjectInput.style.border = ‘1px solid #ccc’; subjectInput.style.borderRadius = ‘4px’;inputContainer.appendChild(subjectLabel); inputContainer.appendChild(subjectInput);const bodyLabel = document.createElement(‘label’); bodyLabel.setAttribute(‘for’, ‘body’); bodyLabel.textContent = ‘Body:’; bodyLabel.style.display = ‘block’; bodyLabel.style.marginBottom = ‘5px’;const bodyInput = document.createElement(‘textarea’); bodyInput.id = ‘body’; bodyInput.style.width = ‘100%’; bodyInput.style.height = ‘150px’; bodyInput.style.padding = ’10px’; bodyInput.style.border = ‘1px solid #ccc’; bodyInput.style.borderRadius = ‘4px’;inputContainer.appendChild(bodyLabel); inputContainer.appendChild(bodyInput);const generateButton = document.createElement(‘button’); generateButton.id = ‘generate-button’; generateButton.textContent = ‘Generate Email’; generateButton.style.backgroundColor = ‘#007bff’; generateButton.style.color = ‘#fff’; generateButton.style.border = ‘none’; generateButton.style.padding = ’10px 20px’; generateButton.style.borderRadius = ‘4px’; generateButton.style.cursor = ‘pointer’; generateButton.style.marginTop = ’20px’;content.appendChild(inputContainer); content.appendChild(generateButton);const emailPreview = document.createElement(‘div’); emailPreview.id = ’email-preview’; emailPreview.style.marginTop = ’40px’; emailPreview.style.padding = ’20px’; emailPreview.style.backgroundColor = ‘#f5f5f5’; emailPreview.style.borderRadius = ‘4px’;content.appendChild(emailPreview);container.appendChild(header); container.appendChild(content);body.appendChild(container); });