Administrador de tareas HTML: agregar, eliminar y completar tareas

Abrir en el editor Publica tu código

Recomendado

1 December 2024

Formulario de inicio de sesión de Glassmorphic

19 March 2023

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

Administrador de tareas HTML: agregar, eliminar y completar tareas

Recomendado

Un código de ledoc

Formulario de inicio de sesión de Glassmorphic

Formulario de pago HTML CSS

HTML

CSS

JS

Recomendado

Un código de ledoc

Formulario de inicio de sesión de Glassmorphic

Formulario de pago HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS