Resumo da Aula 01-01 da etapa 07

[acdona]

Solução do exercício 18 da etapa 06

Exercícios 1 e 2 (Validação de dados digitados)

// atribuindo o form a uma constante
const form = document.querySelector('form')
//atribuindo o id do input a um constante
const inputUsername =  document.querySelector('#username')
//atribuindo o button a uma constante
const button = document.querySelector('button')
// criando um parágrafo para mostrar o feedback de username
const paragraphUsernameFeedback = document.createElement('p')
// criando um parágrafo para mostrar o feedback do submit
const paragraphSubmitFeedback = document.createElement('p')
// setando os atributos da classe no parágrafo
paragraphSubmitFeedback.setAttribute('data-feedback', 'submit-feedback')
// constante que retornará um objeto ao submit com dados de inválido
const invalidSubmitInfo = {
  paragraph: paragraphSubmitFeedback,
  text: 'Por favor, insira um username válido!',
  className: 'submit-help-feedback',
  previousSibling: button
}
// constante que retornará um objeto ao submit com dados de válido
const validSubmitInfo = {
  paragraph: paragraphSubmitFeedback,
  text: 'Dados enviados!',
  className: 'submit-success-feedback',
  previousSibling: button
}
// constante que retornará um objeto para preenchimento dos parágrafos
const insertParagraphIntoDOM = paragraphInfo => {
  const { paragraph, text, className, previousSibling } = paragraphInfo
  paragraph.textContent = text
  paragraph.setAttribute('class', className)
  previousSibling.insertAdjacentElement('afterend', paragraph)
}
// constante que retornará um objeto para preenchimento do parágrafo do submit quando inválido
const invalidUsernameInfo = {
  paragraph: paragraphUsernameFeedback,
  text: 'O valor deve conter no mínimo 6 caracteres,com apenas letras maiúsculas e/ou minúsculas',
  className: 'username-help-feedback',
  previousSibling: inputUsername
}
// constante que retornará um objeto para preenchimento do parágrafo do submit quando válido
const validUsernameInfo = {
  paragraph: paragraphUsernameFeedback,
  text: 'Username válido =)',
  className: 'username-success-feedback',
  previousSibling: inputUsername
}
// constante que remove o parágrafo do submit se ele já existir
const removeSubmitParagraph = () => {
  const paragraphSubmitFeedbackExists = document
    .querySelector('[data-feedback="submit-feedback"]')
  if (paragraphSubmitFeedbackExists) {
    paragraphSubmitFeedback.remove()
  }
}
// função que irá receber o valor digitado no input e validá-lo
const testUsername = inputValue => /^[a-zA-Z]{6,}$/.test(inputValue)
// função que irá inserir o parágrafo do username no DOM
const showUsernameInfo = event => {
  const isUsernameValid = testUsername(event.target.value)
  removeSubmitParagraph()
  if (!isUsernameValid) {
    insertParagraphIntoDOM(invalidUsernameInfo)
    return
  }
  insertParagraphIntoDOM(validUsernameInfo)
}
// função que irá inserir o parágrafo do submit no DOM
const showSubmitInfo = event => {
  event.preventDefault()
  const isUsernameValid = testUsername(inputUsername.value)
  if (!isUsernameValid) {
    insertParagraphIntoDOM(invalidSubmitInfo)
    return
  }
  insertParagraphIntoDOM(validSubmitInfo)
}
// invoca o listener do soltar a tecla pressionada
inputUsername.addEventListener('input', showUsernameInfo)
//invoca o listener do submit do formulário
form.addEventListener('submit', showSubmitInfo)

Criação de uma função similar a some()

// criação na mão da função some 
const some = (array, func) => {
  for (let i = 0; i < array.length; i++) {
    if (func(array[i])) {
      return true
    }
  }
  return false
}
console.log(some([1, 2, 3], item => item === 2)) // algum item dentro desse array é 2 retornou true
console.log(some([4, 5, 6], item => item === 3)) // não existe nenhum item é 3 retornou false

[Roger-Melo]

Excelente @acdona, rumo à fluência! 🎯