Email a Friend by @username7 - Codewith.it

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

References

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
getDefinisce un metodo di invio di dati al server
<canvas>Tag per disegnare grafica dinamica su pagine web.

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

meraviglieItalia

Menu di Pizzeria Rebeka a Modena -

congettura di golbach a 3

Heads and Tails

Better Call Saul

Progetto Cinema Lab 2526

Prova javascript

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>