Email a Friend by @username7 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<table>Tag primario per la creazione di tabelle
_selfApre collegamenti ipertestuali nella stessa pagina del browser
titleIndica informazioni aggiuntive riguardo un elemento HTML
<title>Definisce il titolo della pagina web.
<h6>Titolo di intestazione di sesto livello
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

I giornali online

Esercizio prova \"lista della

Test navbar fix

ximena sanchez JavaScript animati

Prova javascript

Prova di programmazione html

Comunicare sul Web [Template CSS]

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email a Friend</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a6cf7;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f7ff;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 40px auto;
            padding: 30px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: var(--primary-color);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        input, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input:focus, textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        textarea {
            min-height: 150px;
            resize: vertical;
        }
        
        .btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #3a5bd9;
        }
        
        .btn-block {
            display: block;
            width: 100%;
        }
        
        .notification {
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
            display: none;
        }
        
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .email-history {
            margin-top: 40px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        
        .email-history h2 {
            margin-bottom: 20px;
            color: var(--dark-color);
        }
        
        .email-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
        }
        
        .email-item:last-child {
            border-bottom: none;
        }
        
        .email-meta {
            font-size: 14px;
            color: var(--secondary-color);
            margin-bottom: 5px;
        }
        
        .email-subject {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .email-preview {
            color: var(--secondary-color);
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Email a Friend</h1>
        
        <div id="notification" class="notification"></div>
        
        <form id="emailForm">
            <div class="form-group">
                <label for="senderName">Your Name</label>
                <input type="text" id="senderName" required placeholder="Enter your name">
            </div>
            
            <div class="form-group">
                <label for="senderEmail">Your Email</label>
                <input type="email" id="senderEmail" required placeholder="Enter your email">
            </div>
            
            <div class="form-group">
                <label for="recipientEmail">Friend's Email</label>
                <input type="email" id="recipientEmail" required placeholder="Enter your friend's email">
            </div>
            
            <div class="form-group">
                <label for="subject">Subject</label>
                <input type="text" id="subject" required placeholder="Enter email subject">
            </div>
            
            <div class="form-group">
                <label for="message">Message</label>
                <textarea id="message" required placeholder="Type your message here..."></textarea>
            </div>
            
            <button type="submit" class="btn btn-block">Send Email</button>
        </form>
        
        <div class="email-history">
            <h2>Sent Emails</h2>
            <div id="emailHistory">
                <p>No emails sent yet.</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const emailForm = document.getElementById('emailForm');
            const notification = document.getElementById('notification');
            const emailHistory = document.getElementById('emailHistory');
            let emails = JSON.parse(localStorage.getItem('sentEmails')) || [];
            
            // Display existing emails
            displayEmailHistory();
            
            emailForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const senderName = document.getElementById('senderName').value;
                const senderEmail = document.getElementById('senderEmail').value;
                const recipientEmail = document.getElementById('recipientEmail').value;
                const subject = document.getElementById('subject').value;
                const message = document.getElementById('message').value;
                
                // Create email object
                const email = {
                    id: Date.now(),
                    senderName,
                    senderEmail,
                    recipientEmail,
                    subject,
                    message,
                    timestamp: new Date().toISOString()
                };
                
                // Add to emails array
                emails.unshift(email);
                
                // Save to localStorage
                localStorage.setItem('sentEmails', JSON.stringify(emails));
                
                // Show success notification
                showNotification('Email sent successfully!', 'success');
                
                // Reset form
                emailForm.reset();
                
                // Update email history display
                displayEmailHistory();
                
                // In a real application, you would send the email to a server here
                // For this demo, we're just storing it locally
                console.log('Email would be sent with the following data:', email);
            });
            
            function showNotification(message, type) {
                notification.textContent = message;
                notification.className = `notification ${type}`;
                notification.style.display = 'block';
                
                setTimeout(() => {
                    notification.style.display = 'none';
                }, 5000);
            }
            
            function displayEmailHistory() {
                if (emails.length === 0) {
                    emailHistory.innerHTML = '<p>No emails sent yet.</p>';
                    return;
                }
                
                emailHistory.innerHTML = '';
                
                emails.forEach(email => {
                    const emailItem = document.createElement('div');
                    emailItem.className = 'email-item';
                    
                    const date = new Date(email.timestamp);
                    const formattedDate = date.toLocaleString();
                    
                    emailItem.innerHTML = `
                        <div class="email-meta">To: ${email.recipientEmail} | ${formattedDate}</div>
                        <div class="email-subject">${email.subject}</div>
                        <div class="email-preview">${email.message}</div>
                    `;
                    
                    emailHistory.appendChild(emailItem);
                });
            }
        });
    </script>
</body>
</html>