Spray mail log on page

You're looking to add a spray mail log on a page!

A spray mail log is a feature that allows users to track and record their spray mail campaigns, including the number of emails sent, opened, clicked, and bounced. Here's a basic example of how you can add a spray mail log on a page using HTML, CSS, and JavaScript:

HTML:

<!-- Create a container for the log -->
<div id="spray-mail-log"></div>

<!-- Create a form to input email addresses -->
<form id="spray-mail-form">
  <input type="email" id="email-input" placeholder="Enter email addresses (separated by commas)">
  <button id="send-emails">Send Emails</button>
</form>

CSS:

#spray-mail-log {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 300px;
  height: 200px;
  overflow-y: scroll;
}

#spray-mail-form {
  margin-top: 20px;
}

JavaScript:

// Get the form and log container
const form = document.getElementById('spray-mail-form');
const logContainer = document.getElementById('spray-mail-log');

// Create an array to store the email addresses
let emailAddresses = [];

// Function to send emails
function sendEmails() {
  // Get the input value
  const inputVal = document.getElementById('email-input').value;

  // Split the input value into individual email addresses
  const emails = inputVal.split(',');

  // Loop through each email address
  emails.forEach((email) => {
    // Add the email address to the array
    emailAddresses.push(email.trim());

    // Create a log entry
    const logEntry = `
      <div>
        <span>${email}</span>
        <span> Sent</span>
      </div>
    `;
    logContainer.innerHTML += logEntry;
  });

  // Clear the input field
  document.getElementById('email-input').value = '';
}

// Add an event listener to the form submit button
form.addEventListener('submit', (e) => {
  e.preventDefault();
  sendEmails();
});

This code creates a simple form with an input field and a submit button. When the user submits the form, the sendEmails() function is called, which splits the input value into individual email addresses, adds them to an array, and creates a log entry for each email address. The log entries are then appended to the log container.

You can customize this code to fit your specific needs, such as adding more fields to the log entry or implementing additional functionality.