AIがコードを生成する時代に

<div class="email-form">
  <h2>Sign up for our newsletter</h2>
  <form id="signup-form">
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Subscribe</button>
  </form>
  <div class="confirmation-message">
    <p>Thank you for subscribing!</p>
    <p>Please check your email and confirm your subscription.</p>
  </div>
</div>

.email-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  border: 2px solid #ddd;
  border-radius: 5px;
}

.email-form h2 {
  font-size: 25px;
  margin-bottom: 20px;
  text-align: center;
}

.email-form label {
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
}

.email-form input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 5px;
}

.email-form button[type="submit"] {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.email-form button[type="submit"]:hover {
  background-color: #2980b9;
}

.email-form .confirmation-message {
  margin-top: 30px;
  text-align: center;
  display: none;
}

const form = document.getElementById('signup-form');
const confirmationMsg = document.querySelector('.confirmation-message');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email').value;
  sendConfirmationEmail(email);
});

function sendConfirmationEmail(email) {
  const confirmationCode = Math.floor(Math.random() * 90000) + 10000;
  // In a real application, this code would be sent to the user by email
  // using a server-side email service, like Amazon SES or Sendgrid
  console.log(`A confirmation email has been sent to ${email} with the code ${confirmationCode}`);
  showConfirmationMsg();
}

function showConfirmationMsg() {
  form.style.display = 'none';
  confirmationMsg.style.display = 'block';
}