Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Projeto] Validações extras

app.js

let listaAmigos = [];
let foiSorteado = false;

function adicionar()
{  
    if (foiSorteado)
    {
        alert('Clique em reiniciar primeiro.');
        return;
    }
    else if (validarEntrada(document.getElementById('nome-amigo')))
    {
        alert('O campo nome não foi preenchido ou é inválido.');
        return;
    }
    else if (listaAmigos.includes(document.getElementById('nome-amigo').value))
    {
        alert('O nome inserido já foi adicionado anteriormente.');
        return;
    }
    else
    {
        listaAmigos.push(document.getElementById('nome-amigo').value);
        document.getElementById('lista-amigos').textContent = listarAmigosIncluidos(listaAmigos);
        document.getElementById('nome-amigo').value = '';
    }
}

function sortear()
{
    if (foiSorteado)
    {
        alert('Clique em reiniciar primeiro.');
        return;
    }
    else if (listaAmigos.length < 4)
    {
        alert('É necessário adicionar quatro ou mais amigos para sortear.');
        return;
    }
    else if(listaAmigos.length % 2 == 1 && !confirm('A quantidade de amigos é ímpar!\nDeseja continuar mesmo assim?'))
    {
        return;
    }
    else
    {
        sortearPares(listaAmigos);
        listaAmigos = [];
        foiSorteado = true;
    }
}

function reiniciar()
{
    listaAmigos = [];
    document.getElementById('lista-amigos').textContent = '';
    document.getElementById('nome-amigo').value = '';  
    document.getElementById('lista-sorteio').textContent = '';
    foiSorteado = false;
}

function validarEntrada(entrada)
{
    return entrada.value.match(/[^a-z]/gi) || '' == entrada.value;
}

function checarVirgula(listaAmigos, amigo)
{
    if ((listaAmigos.findLast((elemento) => 'undefined' !== typeof elemento) == amigo))
    {
        return `${amigo.charAt(0).toUpperCase() + amigo.slice(1)}.`;
    }
    else if ('undefined' !== typeof amigo)
    {
        return `${amigo.charAt(0).toUpperCase() + amigo.slice(1)}, `;
    }
    else
    {
        console.log('Nome indefinido.');
        return;
    }
}

function listarAmigosIncluidos(listaAmigos)
{    
    let amigosIncluidos = '';
    for (const amigo of listaAmigos.values())
    {
        amigosIncluidos += checarVirgula(listaAmigos, amigo);
    }
    return amigosIncluidos;
}

function sortearIndice(tamanho)
{    
    return parseInt(Math.random() * (tamanho - 2));
}

function listarSorteio(sorteador, sorteado)
{
    document.getElementById('lista-sorteio').textContent += `${sorteador.charAt(0).toUpperCase() + sorteador.slice(1)} ➜ ${sorteado.charAt(0).toUpperCase() + sorteado.slice(1)}\n`;
}

function sortearPares(listaAmigos)
{
    while (listaAmigos.length > 0)
    {
        let indice = sortearIndice(listaAmigos.length);
        if (listaAmigos.length == 1)
        {
            alert(`${listaAmigos[0].charAt(0).toUpperCase() + listaAmigos[0].slice(1)} ficou de fora.`);
            return;
        }
        listarSorteio(listaAmigos[listaAmigos.length -1], listaAmigos[indice]);
        listaAmigos.pop();
        listaAmigos.splice(indice,1);
    } 
}
3 respostas

index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Inter&display=swap" rel="stylesheet">
  <link href="
https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css
" rel="stylesheet" />
  <link href="
https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css
" rel="stylesheet" />
  <title>Amigo Secreto</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <main>
    <img class="page__image" src="./assets/imagem-presente.png" alt="Imagem de um presente">
    <div class="content">
      <div class="content__corner-rectangle"></div>
      <div class="content__main">
        <section>
          <h1 class="section__title">Amigo <span>Secreto</span></h1>
          <form class="form">
            <label class="form__label">
              Digite o nome de um amigo
            </label>
            <input id="nome-amigo" class="form__input" type="text" placeholder="Nome do amigo">
            <div class="form__buttons">
              <button onclick="adicionar()" type="button" class="button primary">Adicionar</button>
              <button onclick="sortear()" type="button" class="button secondary">Sortear</button>
              <a onclick="reiniciar()" href="#" class="form__link">Reiniciar</a>
            </div>
          </form>
        </section>
        <section class="section--results">
          <article>
            <p class="friends__title">Amigos incluídos</p>
            <div class="friends__container">
              <p id="lista-amigos"></p>
            </div>
          </article>
          <article>
            <p class="prizeDraw__title">Sorteio</p>
            <div class="prizeDraw__container">
              <p class="prizeDraw__list" id="lista-sorteio"></p>
            </div>
          </article>
        </section>
      </div>
    </div>
  </main>
  <div class="background__detail">

    <script src="js/app.js"></script>
</body>

</html>

style.css

body {
  background: #000;
  min-height: 100vh;
  position: relative;
}

.background__detail {
  background-color: #00f4bf;
  height: calc(100% - 389px);
  left: 0;
  position: absolute;
  right: 0;
  top: 195px;
  z-index: 0;
}

.button {
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 24px;
  font-weight: 700;
  gap: 10px;
  height: 52px;
  justify-content: center;
  line-height: normal;
  padding: 16px 24px;
  text-align: center;
  width: 208px;
}

.content {
  background-color: #000;
  border: 1px solid #1875e8;
  filter: drop-shadow(0px 0px 30px #1875e8);
  height: 871px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  z-index: 1;
}

.content__corner-rectangle {
  background-color: #00f4bf;
  bottom: -15px;
  clip-path: polygon(0% 100%, 0% 50%, 4% 0%, 100% 0%, 100% 50%, 96% 100%);
  height: 33px;
  position: absolute;
  right: 32px;
  width: 511px;
  z-index: 3;
}

.content__main {
  display: flex;
  flex-direction: column;
  gap: 80px;
  justify-content: start;
  padding: 100px;
}

.friends__container {
  align-items: center;
  border: 1px solid #1875e8;
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 21px;
  font-weight: 400;
  justify-content: center;
  line-height: 160%;
  margin-top: 1rem;
  padding: 24px;
  width: 453px;
}

.friends__container > p {
  color: #fff;
  font-size: 21px;
  font-weight: 400;
  line-height: 160%;
}

.friends__title {
  color: #1875e8;
  font-size: 24px;
  font-weight: 700;
  line-height: 110%;
}

.form {
  display: flex;
  flex-direction: column;
  font-family: Inter;
  font-style: normal;
}

.form__buttons {
  align-items: center;
  display: flex;
  gap: 32px;
}

.form__input {
  align-items: center;
  background-color: transparent;
  border: 1px solid #1875e8;
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 21px;
  font-weight: 400;
  height: 56px;
  margin-bottom: 32px;
  outline: none;
  padding: 8px 16px;
  width: 517px;
}

.form__input::placeholder {
  color: #fff;
  font-size: 21px;
}

.form__label {
  color: #1875e8;
  font-size: 24px;
  font-weight: 700;
  line-height: 110%;
  margin-bottom: 16px;
}

.form__link {
  color: #00f4bf;
  cursor: pointer;
  font-size: 24px;
  font-weight: 400;
  line-height: 110%;
  text-align: center;
  text-decoration-line: underline;
}

.page__image {
  position: absolute;
  right: 0;
  top: 76px;
  z-index: 2;
  pointer-events: none;
}

.prizeDraw__container {
  color: #fff;
  font-size: 21px;
  font-style: italic;
  font-weight: 700;
  height: 199px;
  line-height: 160%;
  margin-top: 1rem;
}

.prizeDraw__title {
  color: #00f4bf;
  font-size: 24px;
  font-weight: 700;
  line-height: 110%;
}

.prizeDraw__list {
  white-space: pre-line;
}

.primary {
  background-color: #1875e8;
  color: #fff;
}

.section--results {
  align-items: start;
  display: flex;
  font-family: Inter;
  font-style: normal;
  gap: 48px;
}

.section__title {
  color: #fff;
  font-family: Chakra Petch;
  font-size: 88px;
  font-style: normal;
  font-weight: 700;
  line-height: 80%;
  margin: 0 0 80px 0;
}

.section__title > span {
  color: #1875e8;
}

.secondary {
  background-color: #fff;
  color: #1875e8;
}
solução!

Oi Leonardo, tudo bem?

Muito bem! É evidente que você está trabalhando de forma diligente e aprimorando suas habilidades. A prática constante é a chave para dominar qualquer linguagem ou conceito de programação.

Continue os bons estudos.

Um abraço.