Joke generator

[pathum2583-eng]

<title>To-Do List App with Local Storage</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    .container {
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        width: 100%;
        max-width: 600px;
        overflow: hidden;
    }

    .header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 40px 20px;
        text-align: center;
    }

    .header h1 {
        font-size: 2.5em;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .header p {
        font-size: 0.95em;
        opacity: 0.9;
    }

    .input-section {
        padding: 30px 20px;
        border-bottom: 1px solid #eee;
        display: flex;
        gap: 10px;
    }

    .input-section input {
        flex: 1;
        padding: 12px 15px;
        border: 2px solid #eee;
        border-radius: 8px;
        font-size: 1em;
        transition: all 0.3s ease;
    }

    .input-section input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .input-section button {
        padding: 12px 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1em;
        font-weight: 600;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .input-section button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }

    .input-section button:active {
        transform: translateY(0);
    }

    .stats-section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 0;
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
    }

    .stat {
        padding: 20px;
        text-align: center;
        border-right: 1px solid #eee;
    }

    .stat:last-child {
        border-right: none;
    }

    .stat-label {
        font-size: 0.85em;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .stat-value {
        font-size: 2em;
        font-weight: 700;
        color: #667eea;
    }

    .filters-section {
        padding: 20px;
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        border-bottom: 1px solid #eee;
    }

    .filter-btn {
        padding: 8px 16px;
        background: #f0f0f0;
        border: 2px solid #ddd;
        border-radius: 20px;
        cursor: pointer;
        font-size: 0.95em;
        transition: all 0.3s ease;
    }

    .filter-btn:hover {
        background: #e8e8e8;
    }

    .filter-btn.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: #667eea;
    }

    .tasks-section {
        padding: 20px;
        max-height: 400px;
        overflow-y: auto;
        min-height: 100px;
    }

    .tasks-section::-webkit-scrollbar {
        width: 8px;
    }

    .tasks-section::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .tasks-section::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 4px;
    }

    .task-item {
        display: flex;
        align-items: center;
        padding: 15px;
        background: white;
        border: 2px solid #e8e8e8;
        border-radius: 8px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
        animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .task-item.completed {
        background: #f0f8ff;
        border-color: #4CAF50;
    }

    .task-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .task-checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin-right: 15px;
        accent-color: #667eea;
    }

    .task-text {
        flex: 1;
        font-size: 1em;
        word-break: break-word;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .task-item.completed .task-text {
        text-decoration: line-through;
        color: #999;
    }

    .task-date {
        font-size: 0.75em;
        color: #999;
        margin-left: 10px;
    }

    .task-delete {
        padding: 6px 12px;
        background: #ff6b6b;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.9em;
        margin-left: 10px;
        transition: all 0.3s ease;
    }

    .task-delete:hover {
        background: #ff5252;
        transform: scale(1.05);
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #999;
    }

    .empty-state emoji {
        font-size: 3em;
        margin-bottom: 15px;
        display: block;
    }

    .footer {
        padding: 20px;
        text-align: center;
        border-top: 1px solid #eee;
        background: #f8f9fa;
    }

    .clear-completed-btn {
        padding: 10px 20px;
        background: #ff9800;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.95em;
        transition: all 0.3s ease;
    }

    .clear-completed-btn:hover {
        background: #f57c00;
        transform: translateY(-2px);
    }

    .clear-completed-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
    }

    @media (max-width: 600px) {
        .header h1 {
            font-size: 2em;
        }

        .input-section {
            flex-direction: column;
        }

        .input-section button {
            width: 100%;
        }

        .stats-section {
            grid-template-columns: 1fr;
        }

        .stat {
            border-right: none;
            border-bottom: 1px solid #eee;
        }

        .stat:last-child {
            border-bottom: none;
        }

        .task-item {
            flex-wrap: wrap;
        }

        .task-delete {
            margin-left: auto;
            margin-top: 10px;
        }
    }
</style>

📝 My Tasks

Stay organized with your personal to-do list

    <div class="input-section">
        <input 
            type="text" 
            id="taskInput" 
            placeholder="Add a new task..." 
            autocomplete="off"
        >
        <button id="addBtn">Add</button>
    </div>

    <div class="stats-section">
        <div class="stat">
            <div class="stat-label">Total</div>
            <div class="stat-value" id="totalCount">0</div>
        </div>
        <div class="stat">
            <div class="stat-label">Completed</div>
            <div class="stat-value" id="completedCount">0</div>
        </div>
        <div class="stat">
            <div class="stat-label">Remaining</div>
            <div class="stat-value" id="remainingCount">0</div>
        </div>
    </div>

    <div class="filters-section">
        <button class="filter-btn active" data-filter="all">All</button>
        <button class="filter-btn" data-filter="active">Active</button>
        <button class="filter-btn" data-filter="completed">Completed</button>
    </div>

    <div class="tasks-section" id="tasksList">
        <div class="empty-state">
            <span class="empty-state emoji">🚀</span>
            <p>No tasks yet. Start by adding one above!</p>
        </div>
    </div>

    <div class="footer">
        <button class="clear-completed-btn" id="clearBtn">Clear Completed</button>
    </div>
</div>

<script src="todo-app.js"></script>

[pathum2583-eng]

https://github.com/pathum2583-eng/Meta.git