Gerenciador de Tarefas HTML: Adicionar, Excluir e Concluir Tarefas

373 ByBy.inc

Abrir no Editor Publique Seu Código

Gerenciador de Tarefas HTML: Adicionar, Excluir e Concluir Tarefas

Recomendado

19 September 2025

Exemplos de menu suspenso CSS animado

30 August 2025

Animação CSS: Barra de Progresso e Drops

19 March 2025

Animação de sombra de texto

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; } 
}

Recomendado

Exemplos de menu suspenso CSS animado

Animação CSS: Barra de Progresso e Drops

Animação de sombra de texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS