index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>

</head>
<body>
   
        <h1>Lista de tarea</h1>
        <form action="" id="form">
            <input type="text" id="inputTask">
            <button id="form-btn" disabled>
                <svg xmlns="http://www.w3.org/2000/svg" id="btn-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                  </svg>
             </button>
             <p class="info">Debes empezar la oracion con letra mayuscula y  has un parrafo de 200 caracteres</p>
        </form>
        <div>
            <span class="info-añadir"> Añadido</span>
        </div>

        <ul id="list">
            <li>
                <button class="delete-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" class ="delete-icon"fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                      </svg>
                      
                </button>
                <p>lista de tareas 1</p>
                <button class="edit-btn">
                    <svg xmlns="http://www.w3.org/2000/svg"class="edit-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
                        <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
                    </svg>
                      
                </button>
            </li>        
        </ul>
        <div class="container">
            <p class=" container-btn1 ">Total</p>
            <p class="container-btn2 Show-container-btn2">Completado</p>
            <p class=" container-btn3 Show-container-btn3">Incompleto</p>
        </div>
    
    <script src="index.js"></script>
</body>
</html>