Premium Web Utilities for Modern Developers

Embed Code Example

For CMS platforms that support custom HTML:

<div class="age-calculator-container">
  <!-- Paste the entire tool code here -->
  <style>
    /* Custom CSS overrides */
    :root {
      --primary: #87e64b; /* Change to your brand color */
      --bg: #fff5ed; /* Change background color */
    }
  </style>
</div>

Branding Customization

To customize the appearance, modify these CSS variables in the tool's style section:

:root {
  --primary-color: #87e64b; /* Primary brand color */
  --secondary-color: #4285f4; /* Secondary color */
  --light-color: #f8f9fa; /* Light background */
  --dark-color: #202124; /* Dark text */
  --success-color: #34a853; /* Success messages */
}

API Key Configuration

Locate and replace this line in the JavaScript:

const API_KEY = "0123456789"; // Replace with your YouTube API key

For production use, consider implementing API key restrictions in Google Cloud Console.

Customizing Charts

To modify the data visualization, edit the chart configuration in the renderCharts() function:

function renderCharts(channel) {
  // Example chart configuration
  new Chart(ctx, {
    type: "line",
    data: {
      labels: ["Jan", "Feb", "Mar"],
      datasets: [{
        label: "Subscribers",
        data: [1000, 2000, 3000],
        borderColor: "#2a5bd7"
      }]
    }
  });
}

Customization Options

Key configuration options in the JavaScript:

// PDF orientation (portrait or landscape)
const orientation = 'portrait'; 

// Margin size in pixels
const marginSize = 10; 

// Border options
const addBorders = true;
const borderSize = 5;
const borderColor = '#000000';

jsPDF Configuration

The core PDF generation function can be customized:

function addImageToPDF(pdf, img, options) {
  const imgWidth = pdf.internal.pageSize.getWidth() - options.margin;
  const imgHeight = (img.naturalHeight * imgWidth) / img.naturalWidth;
  
  // Add image to PDF with specified options
  pdf.addImage(img.src, 'JPEG', options.x, options.y, imgWidth, imgHeight);
}

Custom Domain Configuration

To add your company domains, modify this section in the JavaScript:

const domainOptions = [
  { value: 'gmail.com', label: 'Gmail' },
  { value: 'yahoo.com', label: 'Yahoo' },
  { value: 'outlook.com', label: 'Outlook' },
  { value: 'company.com', label: 'Business' }, // Change to your domain
  { value: 'custom', label: 'Custom Domain' }
];

Pattern Customization

To add new email patterns, extend the generateUsername function:

function generateUsername(type, length, keyword = '', department = '') {
  // Add your custom patterns here
  switch (type) {
    case 'first.last': return `${firstName}.${lastName}`;
    case 'custom': return `${keyword}.${department}.${Math.random().toString(36).substring(2,8)}`;
    // Add more cases as needed
  }
}

QR Generation Code

The core QR generation function can be customized:

function generateQRCode() {
  const options = {
    color: {
      dark: qrColor.value, // Foreground color
      light: bgColor.value // Background color
    },
    errorCorrectionLevel: qrErrorCorrection.value,
    width: parseInt(qrSize.value)
  };
  
  QRCode.toCanvas(qrCodeCanvas, text, options, (error) => {
    if (error) console.error(error);
  });
}

Color Customization

To preset default colors, modify these variables:

const defaultSettings = {
  qrColor: '#000000', // Default QR code color
  bgColor: '#ffffff', // Default background
  errorCorrection: 'M' // Default error correction
};

Email Regex Pattern

The core email extraction uses this comprehensive regex:

function extractEmails(text) {
  const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
  
  const matches = text.match(emailRegex);
  return [...new Set(matches.map(email => email.toLowerCase()))].sort();
}

CSV Export Code

The export functionality can be customized:

function exportToCSV(emails) {
  const csvContent = "data:text/csv;charset=utf-8,Email Address\n" + 
    emails.join("\n");
  const encodedUri = encodeURI(csvContent);
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "extracted_emails.csv");
  document.body.appendChild(link);
  link.click();
}

OCR Configuration

The core OCR processing uses this Tesseract.js code:

Tesseract.recognize(
  imageFile,
  'eng', // Language code
  {
    logger: m => {
      // Update progress
      progressElement.textContent = `${Math.round(m.progress * 100)}%`;
    }
  }
).then(({ data: { text } }) => {
  // Display extracted text
  resultElement.value = text;
});

Language Configuration

To add additional languages, include the language data files and modify the recognize call:

// Load additional language data (must be hosted)
Tesseract.recognize(
  imageFile,
  'fra+eng', // French + English
  { 
    langPath: '/path/to/tesseract/lang-data/'
  }
).then(/* ... */);

Core Counting Logic

The text analysis functions can be customized:

function countWords(text) {
  return text.trim() === '' ? 0 : text.trim().split(/\s+/).length;
}

function countSentences(text) {
  if (text.trim() === '') return 0;
  // Split on sentence-ending punctuation followed by space or end
  const sentences = text.split(/[.!?]+(?=\s|$)/);
  return Math.max(0, sentences.length - 1);
}

function countParagraphs(text) {
  return text.trim() === '' ? 0 : text.split(/\n+/).filter(p => p.trim().length > 0).length;
}

Real-time Updates

The input event listener drives the real-time updates:

textInput.addEventListener('input', function() {
  const text = this.value;
  
  // Update all counters
  wordCount.textContent = countWords(text);
  charCount.textContent = text.length;
  sentenceCount.textContent = countSentences(text);
  paragraphCount.textContent = countParagraphs(text);
  
  // Update character limit indicator
  updateCharLimit(text.length);
});