Tutorial de Desenvolvimento Web: Criando um To-do List com HTML, CSS e JavaScript

em

Tutorial de Desenvolvimento Web: Criando um To-do List com HTML, CSS e JavaScript

Aprenda a criar uma lista de tarefas simples (to-do list) que permite adicionar e remover tarefas, usando HTML, CSS e JavaScript.





Requisitos

  • Editor de texto
  • Conhecimento básico de HTML, CSS e JavaScript


Passos

  1. Estruture sua página: Crie um arquivo index.html e adicione o seguinte código:

    html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-do List</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="todo-list">
        <input type="text" id="task-input" placeholder="Adicione uma nova tarefa"/>
        <button onclick="addTask()">Adicionar Tarefa</button>
        <ul id="tasks"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

  2. Estilize sua página: Crie um arquivo style.css e adicione estilos básicos para sua lista de tarefas.

    css
    body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
}

#todo-list {
    width: 300px;
}

#task-input {
    width: 70%;
    padding: 10px;
    margin-right: 5px;
}

button {
    padding: 10px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-top: 10px;
}

  3. Adicione funcionalidade com JavaScript: Crie um arquivo script.js e adicione o seguinte código:

    javascript
    function addTask() {
    var taskInput = document.getElementById('task-input');
    var task = taskInput.value;
    if (task) {
        var tasksList = document.getElementById('tasks');
        var li = document.createElement('li');
        li.textContent = task;
        var removeBtn = document.createElement('button');
        removeBtn.textContent = 'Remover';
        removeBtn.onclick = function() {
            tasksList.removeChild(li);
        };
        li.appendChild(removeBtn);
        tasksList.appendChild(li);
        taskInput.value = ''; // Limpa o input
    }
}

Você acabou de criar uma lista de tarefas simples! Agora, você pode adicionar novas tarefas e removê-las depois de concluídas.

Comentários

Postar um comentário