Administrador de tareas HTML: agregar, eliminar y completar tareas

1,302 byby.createsite

Abrir en el editor Publica tu código

Administrador de tareas HTML: agregar, eliminar y completar tareas

Recomendado

13 December 2025

Código HTML Canvas de WebGL para Super Mario 64

12 July 2025

Efecto de brillo de tarjeta CSS

20 July 2026

concesionario de automóviles

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerenciador de tarefas</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Roboto:wght@300&display=swap" rel="stylesheet">
    <style>       
        body{
            margin: 0;
            padding: 0;
            background-color: #4E0083;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000'%3E%3Cg %3E%3Ccircle fill='%234E0083' cx='50' cy='0' r='50'/%3E%3Cg fill='%23540188' %3E%3Ccircle cx='0' cy='50' r='50'/%3E%3Ccircle cx='100' cy='50' r='50'/%3E%3C/g%3E%3Ccircle fill='%2359018e' cx='50' cy='100' r='50'/%3E%3Cg fill='%235f0293' %3E%3Ccircle cx='0' cy='150' r='50'/%3E%3Ccircle cx='100' cy='150' r='50'/%3E%3C/g%3E%3Ccircle fill='%23650298' cx='50' cy='200' r='50'/%3E%3Cg fill='%236b039e' %3E%3Ccircle cx='0' cy='250' r='50'/%3E%3Ccircle cx='100' cy='250' r='50'/%3E%3C/g%3E%3Ccircle fill='%237103a3' cx='50' cy='300' r='50'/%3E%3Cg fill='%237704a8' %3E%3Ccircle cx='0' cy='350' r='50'/%3E%3Ccircle cx='100' cy='350' r='50'/%3E%3C/g%3E%3Ccircle fill='%237d04ad' cx='50' cy='400' r='50'/%3E%3Cg fill='%238304b3' %3E%3Ccircle cx='0' cy='450' r='50'/%3E%3Ccircle cx='100' cy='450' r='50'/%3E%3C/g%3E%3Ccircle fill='%238905b8' cx='50' cy='500' r='50'/%3E%3Cg fill='%239005bd' %3E%3Ccircle cx='0' cy='550' r='50'/%3E%3Ccircle cx='100' cy='550' r='50'/%3E%3C/g%3E%3Ccircle fill='%239605c3' cx='50' cy='600' r='50'/%3E%3Cg fill='%239d05c8' %3E%3Ccircle cx='0' cy='650' r='50'/%3E%3Ccircle cx='100' cy='650' r='50'/%3E%3C/g%3E%3Ccircle fill='%23a305cd' cx='50' cy='700' r='50'/%3E%3Cg fill='%23aa05d2' %3E%3Ccircle cx='0' cy='750' r='50'/%3E%3Ccircle cx='100' cy='750' r='50'/%3E%3C/g%3E%3Ccircle fill='%23b004d7' cx='50' cy='800' r='50'/%3E%3Cg fill='%23b703dd' %3E%3Ccircle cx='0' cy='850' r='50'/%3E%3Ccircle cx='100' cy='850' r='50'/%3E%3C/g%3E%3Ccircle fill='%23be02e2' cx='50' cy='900' r='50'/%3E%3Cg fill='%23c501e7' %3E%3Ccircle cx='0' cy='950' r='50'/%3E%3Ccircle cx='100' cy='950' r='50'/%3E%3C/g%3E%3Ccircle fill='%23CC00EC' cx='50' cy='1000' r='50'/%3E%3C/g%3E%3C/svg%3E");
            background-attachment: fixed;
            background-size: contain;
            font-family: 'Roboto', sans-serif;
        }
        #main{
            display: flex;
            flex-direction: column;
            padding: 10px;
            align-items: center;
            margin-top: 95px;
            font-size: 2.1rem;
        }
        #main-content{
            background: white;
            display: flex;
            flex-direction: column;
            text-align: center;
            padding: 30px;
            border-radius: 20px;
            border-top: black 3px solid;
            min-width: 600px;
            max-width: 600px;
            overflow: auto;           
        }
        h1{
            font-family: 'Caveat', cursive;   
        }
        #lista-de-tarefas li {
        list-style: decimal;
        font-weight: bold;
        font-size: 1.2rem;
        padding: 0 8px;
        text-align: left;
        margin-left: 100px;
        font-weight: normal;
        }
        hr{
            background: white;
            color: black;
            margin-top: 30px;
        }
        .excluir{
            background: red;
        }
        .concluir{
            background: green;
            margin-left: 3px;           
        }
        #adicionar{
            background: blue;
            margin-left: 3px;
        }
        button{
            border-radius: 5px;
            width: 120px;
            height: 30px;
            font-weight: bold;
            color: white;
            font-size: 10px;
        }
        #adicionar-tarefa input{
            width: 160px;
            height: 20px;
            border-radius: 5px;
            text-align: center;
            margin-left: 10px;
        }
        #lista-de-tarefas .concluida span {
        color: green;
        text-decoration: line-through;
        }
        footer{
            margin-top: 200px;
            text-align: center;
        }

/* Estilos para o botão de doação */
        .custom-donation-container {
            position: fixed !important;
            top: 20px !important;
            right: 20px !important;
            z-index: 99999 !important;
            pointer-events: auto !important;
        }
        
        .donation-btn {
            background: linear-gradient(45deg, #ff6b35, #f7931e) !important;
            color: white !important;
            padding: 10px 18px !important;
            border-radius: 30px !important;
            text-decoration: none !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5) !important;
            border: none !important;
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            cursor: pointer !important;
            position: relative !important;
            z-index: 100000 !important;
            min-height: 40px !important;
            white-space: nowrap !important;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
        }
        
        .donation-btn:hover {
            transform: translateY(-3px) scale(1.05) !important;
            box-shadow: 0 8px 30px rgba(255, 107, 53, 0.7) !important;
            color: white !important;
            text-decoration: none !important;
            background: linear-gradient(45deg, #ff7b45, #f8a31e) !important;
        }
        
        .donation-btn:active {
            transform: translateY(-1px) scale(1.02) !important;
        }
        
        .donation-btn:visited {
            color: white !important;
        }
        
        .heart-icon {
            font-size: 18px !important;
            animation: heartbeat 2.5s infinite !important;
            display: inline-block !important;
            filter: drop-shadow(0 0 3px rgba(255,255,255,0.3)) !important;
        }
        
        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.1); }
            50% { transform: scale(1.2); }
            75% { transform: scale(1.1); }
        }
        
        /* Responsivo para mobile */
        @media (max-width: 480px) {
            .custom-donation-container {
                top: 15px !important;
                right: 15px !important;
            }
            
            .donation-btn {
                padding: 8px 14px !important;
                font-size: 13px !important;
                min-height: 36px !important;
            }
            
            .heart-icon {
                font-size: 16px !important;
            }

#main-content {
                min-width: 90%;
                max-width: 90%;
            }
        }

/* Estilos para tarefas concluídas */
        .concluida {
            color: #4CAF50 !important;
            text-decoration: line-through !important;
            opacity: 0.7 !important;
            background-color: #f0f8f0 !important;
            border-radius: 8px !important;
            padding: 5px !important;
        }

/* Botão salvar metas */
        #salvar-metas {
            background: #9C27B0;
            margin: 20px auto;
            width: 150px;
            font-size: 12px;
        }

/* Status de salvamento */
        .status-salvamento {
            margin: 10px 0;
            padding: 8px;
            border-radius: 5px;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
        }

.sucesso {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

.erro {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>

<body>
    <section id="main">
        <header>
            <h1>Gerenciador de Metas</h1>
        </header>
        <div id="main-content">
            <div id="adicionar-tarefa">
                <span><input type="text" placeholder="nome"><button id="adicionar">adicionar tarefa</button></span>
            </div>
            
            <div id="status-container"></div>
            
            <button id="salvar-metas"> Salvar Metas</button>
            
            <div id="lista-de-tarefas">
                <ul>
                    <li>vinixodin.com<div><button class="excluir">excluir tarefa</button><button class="concluir">concluir tarefa</button></div></li>
                    <hr>
                </ul>
            </div>
        </div>
    </section>

// FUNCIONALIDADE DO GERENCIADOR DE METAS COM LOCALSTORAGE
        document.addEventListener('DOMContentLoaded', function () {
            const adicionarTarefaBtn = document.getElementById('adicionar');
            const nomeTarefaInput = document.querySelector('#adicionar-tarefa input');
            const listaDeTarefas = document.getElementById('lista-de-tarefas');
            const salvarMetasBtn = document.getElementById('salvar-metas');
            const statusContainer = document.getElementById('status-container');

// Função para mostrar status
            function mostrarStatus(mensagem, tipo = 'sucesso') {
                statusContainer.innerHTML = `<div class="status-salvamento ${tipo}">${mensagem}</div>`;
                
                // Remove o status após 3 segundos
                setTimeout(() => {
                    statusContainer.innerHTML = '';
                }, 3000);
            }

// Função para carregar metas do localStorage
            function carregarMetas() {
                try {
                    const metas = JSON.parse(localStorage.getItem('metas')) || [];
                    
                    // Limpa a lista atual (exceto o exemplo)
                    const ul = listaDeTarefas.querySelector('ul');
                    ul.innerHTML = '<li>exemplo de meta<div><button class="excluir">excluir tarefa</button><button class="concluir">concluir tarefa</button></div></li><hr>';
                    
                    // Adiciona as metas salvas
                    metas.forEach(meta => {
                        const novaTarefa = document.createElement('li');
                        novaTarefa.innerHTML = `${meta.nome}<div><button class="excluir">excluir tarefa</button><button class="concluir">concluir tarefa</button></div>`;
                        
                        if (meta.concluida) {
                            novaTarefa.classList.add('concluida');
                        }
                        
                        ul.appendChild(novaTarefa);
                        const hrElement = document.createElement('hr');
                        ul.appendChild(hrElement);
                    });
                    
                    if (metas.length > 0) {
                        mostrarStatus(`${metas.length} meta(s) carregada(s) com sucesso!`);
                    }
                } catch (error) {
                    console.error('Erro ao carregar metas:', error);
                    mostrarStatus(' Erro ao carregar metas salvas', 'erro');
                }
            }

// Função para salvar metas no localStorage
            function salvarMetas() {
                try {
                    const metas = [];
                    const listItems = listaDeTarefas.querySelectorAll('li');
                    
                    listItems.forEach(item => {
                        const texto = item.childNodes[0].textContent.trim();
                        
                        // Pula o exemplo
                        if (texto === 'exemplo de meta') return;
                        
                        const meta = {
                            nome: texto,
                            concluida: item.classList.contains('concluida'),
                            dataAdicao: new Date().toISOString()
                        };
                        
                        metas.push(meta);
                    });
                    
                    localStorage.setItem('metas', JSON.stringify(metas));
                    mostrarStatus(` ${metas.length} meta(s) salva(s) com sucesso!`);
                    
                    // Estatísticas
                    const concluidas = metas.filter(m => m.concluida).length;
                    const pendentes = metas.length - concluidas;
                    
                    setTimeout(() => {
                        mostrarStatus(` ${concluidas} concluída(s) | ${pendentes} pendente(s)`);
                    }, 1500);
                    
                } catch (error) {
                    console.error('Erro ao salvar metas:', error);
                    mostrarStatus('Erro ao salvar metas', 'erro');
                }
            }

function adicionarTarefa() {
                const nomeTarefa = nomeTarefaInput.value;

if (nomeTarefa.trim() !== '') {
                    const novaTarefa = document.createElement('li');
                    novaTarefa.innerHTML = `${nomeTarefa}<div><button class="excluir">excluir tarefa</button><button class="concluir">concluir tarefa</button></div>`;
                    listaDeTarefas.querySelector('ul').appendChild(novaTarefa);
                    const hrElement = document.createElement('hr');
                    listaDeTarefas.querySelector('ul').appendChild(hrElement);
                    nomeTarefaInput.value = '';
                    
                    mostrarStatus('Nova meta adicionada!');
                }
            }

// Event listeners
            adicionarTarefaBtn.addEventListener('click', adicionarTarefa);
            salvarMetasBtn.addEventListener('click', salvarMetas);
            
            // Enter para adicionar tarefa
            nomeTarefaInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    adicionarTarefa();
                }
            });
            
            listaDeTarefas.addEventListener('click', function (event) {
                if (event.target.classList.contains('excluir')) {
                    excluirTarefa(event);
                } else if (event.target.classList.contains('concluir')) {
                    concluirTarefa(event);
                }
            });

// Carrega as metas salvas ao inicializar
            carregarMetas();
            
            // Auto-salvar a cada 30 segundos
            setInterval(() => {
                salvarMetas();
            }, 30000);
        });
    </script>
    
</body>
</html>

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #181818; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; }
.codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } 
.animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; }
.animacao1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url('https://picsum.photos/100/100?random=1'); /* Use YOUR image */
    background-size: cover;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); 
    animation: glitch 3s linear infinite;
    background-color: rgba(255, 255, 255, 0.1);
}
.animacao1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1); 
    filter: blur(5px);
    animation: blurFade 10s ease-in-out infinite; 
}

.animacao2 {
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: #66D9EF;
    transform: rotate(45deg);
    clip-path: circle(50% at 50% 40%);
    animation: pulse 2.5s ease-in-out infinite alternate;
}

@keyframes glitch { 
    0% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }
    25% { clip-path: polygon( 50% 10px, 100% 100%, 50% 100%, 0% 100%); } 
    50% { clip-path: polygon( 50% 0%, 100% 40%, 50% 100%, 0 40%); } 
    75% { clip-path: polygon( 50% 10px, 100% 100%, 50% 100%, 0% 10%); } 
    100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); }

}
@keyframes blurFade { 
   0% { opacity: 1; }
   70% { opacity: 0.5; filter: blur(20px); } 
   100% { opacity: 1; } 
}
@keyframes pulse { 
    0% { transform: scale(1); box-shadow: 0 0 10px #48BEFF; }
    50% { transform: scale(1.1); box-shadow: 0 0 20px #48BEFF; }
    100% { transform: scale(1); box-shadow: 0 0 10px #48BEFF; } 
}