Na nossa Aula!

• Breve Revisão:
  • DOM;
  • Objetos;
  • Arrays;
  • Eventos;
• Iniciaremos o Projeto ToDoList

• Manter atenção nas explicações e codar nos momentos definidos a cada passo do projeto;
• Enviar dúvidas no chat para as monitoras ajudarem;
• Levantar a mão sempre que desejar falar, o que pode ser feito a qualquer momento;
• Manter microfones desligados sempre que alguém estiver falando;
• Manter as câmeras ligadas o máximo de tempo possível para cada aluna!

• Criaremos uma To Do List: uma lista para organizar tarefas;
• Este projeto tem como objetivo exercitar os conceitos aprendidos até aqui: Lógica, HTML, CSS e JavaScript;
• Não é permitido o uso de nenhuma biblioteca/framework para construção do projeto;
• Temos um layout que deve ser seguido, mas é permitido incrementar seu projeto para entregar;

git clone <link do repositório forkado>

git checkout -b "seu-nome"

  ├── README.md
  ├── projeto
  ├── nome-sobrenome
  |  

Criando um objeto:

const aluna = new Object()
aluna.nome = "Raissa"
aluna.curso = "frontend"
aluna.cidade = "Recife"

const monitora = {
  nome: "Carol",
  curso: "frontend",
  cidade: "Brasília",
}

Acessando o valor de uma propriedade do objeto:

console.log(aluna.curso)
console.log(monitora.nome)

Desestruturando um objeto:

const { nome, curso, cidade } = aluna

Criando uma array:

const alunas = ["Raissa, Analu, Beatriz, Simara"]
const cidades = new Array('Recife', 'São Paulo', 'Manaus')
const cursos = "frontend backend".split(' ')
const tecnologias = Array.of('HTML', 'CSS', JS)

Acessando o valor de um elemento da array:

  console.log(alunas[1])

Desestruturando um objeto:

const [ frontend, backend ] = cursos

Interando uma array (Métodos)

arrays para exemplos:

const frutas = ['🍎', '🍇', '🍎', '🍌', '🍎', '🥑']

find:

const encontrarPrimeiro = frutas.find(element => element == 🍇')
console.log(encontrarPrimeiro) // retorno 🍇

filter:

const filtrarPor = frutas.filter(element => element == "🍎")
console.log(filtrarPor) // retorno ['🍎', '🍎', '🍎']

map:

const executarTodos = frutas.map(element => element = "🍇")
console.log(executarTodos) // retorno  ['🍇', '🍇', '🍇', '🍇', '🍇', '🍇']

forEach:

const verTodos = frutas.forEach(element => console.log(element))
console.log(verTodos) // retorno  🍎🍇🍎🍌🍎🥑

> DOM é uma sigla que significa Document Object Model. Quando a página é carregada o browser cria um objeto que representa os elementos da página a partir do HTML. A forma mais fácil de acessar e manipular o DOM é usando JavaScript.

• Document: representa o documento HTML
• Element: são todas as tags que estão no arquivo HTML e se transformam em elementos da árvore DOM
• Text: é o conteúdo de texto que vai entre os elementos (tags).
• Attribute: são os todos atributos para um nó específico. Exemplos de atributos são o class, o src, o id, entre outros.

> O DOM é a representação do objeto do documento HTML e atua como uma interface de programação que permite a manipulação de sua estrutura com o JavaScript ou outras linguagens. Podemos manipular o DOM para realizar alterações na estrutura do HTML, alterar estilos, modificar conteúdos e adicionar diversos eventos.

Um eventos é um conjunto de ações que são realizadas em um determinado elemento da página web, seja ele um texto, uma imagem, ou uma div, por exemplo. Grande parte dos eventos nascem na interação da usuária com a aplicação.

Para manipular podemos usar Event listener que adiciona ou remove um evento sobre qualquer elemento. O Event Listener disponibiliza duas funções principais, são elas:

• addEvent - Adiciona uma função que será disparada quando ocorrer determinado evento no objeto.

• removeEvent - Remove um listener previamente adicionado em um objeto e retorna true em caso de sucesso.

  elemento.addEventListener('click', function (evento) {
    //ação a ser executada no clique do elemento
    console.log(evento);
  });
  

Usamos o método preventDefault() para cancelar a ação padrão que pertence a um determinado evento.

• 1. HTML
  • Já vai prontinho pra vcs se preocuparem apenas com a lógica;
• 2. CSS

  • Já vai prontinho pra vcs se preocuparem apenas com a lógica;

  • 3. JavaScript

  • 3.1 Capturar dados de Entrada da usuária;

  • 3.2 Adicionar itens na lista;

  • 3.3 Validar campo de texto para não entrar itens vazios ou somente com espaços;

  • 3.4 Limpar input após adicionar item;

  • 3.5 Marcar item como realizado;

  • 3.6 Poder excluir itens da lista individualmente;

  • 3.7 Limpar lista, excluir todos os itens da lista;

    Para usar no projeto: 🔘 🟢 🟣 🗑

• Quando a usuária tentar criar uma tarefa com uma string vazia ou somente com espaços, criar uma mudança visual em vermelho no input e informar o erro no placehoder;
• Marcar e desmarcar todos os itens como feito trocando o nome do botão 'desmarcar todos'.

• [Professora Liliti]de quem usei o repositório do projeto da turma 10 como referência;

E todas as minhas professoras e amigas do {reprograma} com quem sempre aprendo ♥️