emotions

Sua saúde emocional em primeiro lugar

acesse agora

https://luccafabro.github.io/emotions/

emotions - propósito

criar um ambiente seguro em que pessoas possam contar suas experiências de forma anônima e também testar o que funcionou para outros usuários para que você tenha uma saude mental cada vez melhor

wireframe

https://www.figma.com/proto/6oH0QwsrH8DqdjHeoePHlw/emotions?node-id=7%3A20&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=7%3A20

intuito do projeto

projeto da matéria desenvolvimento web II

checkist

Caixas de Diálogo

• prompt
• alert
• confirm

Temporizadores

• setInterval
• setTimeout

Funções

• Função anônima com argumento
• Função anônima sem argumento
• Função anônima com retorno
• Função auto-executável
• Função com nome
• Função aninhada/local - declarar uma função dentro de outra
• Passagem de uma função como parâmetro
• Função Flecha - Arrow Function

Eventos

• Evento de carregamento do documento - onload
• Evento de movimento do mouse
• Evento de teclado - usar charCode ou keyCode
• Eventos de formulário - onfocus e onblur
• Imprimir alguma propriedade do objeto event recebido como parâmetro
• Propagação de eventos no modelo bolha (usar target e currentTarget, ou seja, disparar o evento em um elemento filho e capturar em um elemento pai)

Acesso aos elementos DOM do HTML

• Via referência DOM pelo id do elemento HTML
• Via getElementByID()
• Via getElementsByName()
• Via getElementsByTagName()
• Via seletores CSS usados na função querySelector() ou querySelectorAll()

Tratadores de Evento

• Especificar o tratador de evento inline
• Especificar o tratador de evento no carregamento da página HTML no modo tradicional - no onload
• Especificar o tratador de evento no carregamento da página HTML com a função addEventListener - no onload
• Usar o operador this em funções tratadoras de eventos.

Objetos Nativos

• Usar pelo menos 3 métodos de manipulação de array
• Usar laço de repetição (for..in ou for..of ou forEach)
• Usar pelo menos 3 métodos para manipulação de string
• String Template

Objetos

• Criar objeto usando função construtora ou notação literal
• Criar objetos a partir da definição de classes do ES6
• Usar herança prototipal nativa ou herança de classes do ES6

Qualidade do código

• Usar um Style Guide - apresentar o uso de pelo menos 10 regras do style escolhido (sugerido AirBnb)
• Usar um lint - mostrar a correção de pelo menos 5 problemas informados pelo lint (sugerido JSHint - usar o arquivo .jshintrc disponível no moodle)
• Usar strict mode
• Usar Module Pattern
• Usar pasta assets e subpastas resources e libraries para organizar o código
• Usar let ou const ao invés de var
• Nomes de arquivos minúsculos e separados por hífen (dashed-case)

Formulário

• Validação de formulário com onsubmit usando os métodos tradicionais
• Validação de formulário com HTML5 API
• Customizar as mensagens nos balões de mensagem
• Usar os atributos de validação dos inputs
• Usar expressões regulares
• Ler e escrever em elementos input com a propriedade value
• Alterar o conteúdo de elementos div ou p com a propriedade innerHTML ou textContent
• Manipulação de elemento de listagem, como checkbox, radio ou select
• Acesso aos elementos de um formulário via hierarquia (caminho) de objetos, ou seja, array forms e elements

jQuery

• Uso de seletores CSS - id, classe e tag
• Uso de seletores hierárquicos estáticos - ancestral/descendente, pai/filho, anterior/próximo
• Uso de seletores hierárquicos dinâmicos - parent/children/next
• Efeitos fade ou slide
• Especificar o tratador de algum evento via jQuery
• Manipulação do CSS via função css() e addClass()/removeClass()
• Manipulação do conteúdo de um input e div usando jQuery
• Aplicar um plugin do jQuery (por exemplo, jQuery Mask Plugin)

Web Storage

• LocalStorage ou SessionStorage
• Leitura e escrita de dados simples
• Leitura e escrita de JSON

Ajax com Backend

• Implementação funcional (basta fazer funcionar uma requisição) do backend em ExpressJS na plataforma Node e requisições AJAX.