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

Versão Final.

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.toLowerCase()))
    {
        alert('O nome inserido já foi adicionado anteriormente.');
        return;
    }
    else
    {
        listaAmigos.push(document.getElementById('nome-amigo').value.toLowerCase());
        let elementoAncora = document.createElement('a');
        elementoAncora.textContent = capitular(listaAmigos[listaAmigos.length -1] + ' ');
        adicionarElemento(document.getElementById('lista-amigos'), adicionarAtributo('onClick', 'remover(this)', adicionarAtributo('href', '#', adicionarClasse('form__link', elementoAncora))));
        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);
        foiSorteado = true;
    }
}

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

function remover(elemento)
{
    listaAmigos.splice(listaAmigos.indexOf(elemento.textContent),1);
    elemento.remove();
}

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

function capitular(entrada)
{
    return `${entrada.charAt(0).toUpperCase() + entrada.slice(1)}`;
}

function adicionarClasse(classe, elemento)
{
    elemento.classList.add(classe);    
    return elemento;
}

function adicionarAtributo(atributo, valor, elemento)
{
    elemento.setAttribute(atributo, valor);
    return elemento;
}

function adicionarElemento(elementoPai, elementoFilho)
{
    elementoPai.append(elementoFilho);
    return elementoPai;
}

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

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

Array.prototype.embaralhar = function () {
    for (let indice = 0; indice < this.length; indice++) {
        let indiceSorteado = sortearIndice(this.length);
        let temporario = this[indiceSorteado];
        this[indiceSorteado] = this[indice]
        this[indice] = temporario;
    }
    return this;
};

function sortearPares(lista)
{
    lista.embaralhar();
    while (lista.length > 0)
    {
        if (lista.length == 1)
        {
            document.getElementById('lista-amigos').textContent = `${capitular(lista[0])} ficou de fora.`;
            return;
        }
        else
        {
            listarSorteio(lista[lista.length -1], lista[lista.length -2]);
            lista.splice(lista.length - 2, 2);
        }
    }
}
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: none;
}

.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?

É realmente inspirador ver sua versão final do projeto, Leonardo! A estrutura e organização do seu código são muito bem pensadas, tornando a funcionalidade clara e eficaz.

Continuar a praticar e aperfeiçoar suas habilidades é crucial, e você está fazendo isso de forma excelente. Parabéns por continuar praticando.

Um abraço e bons estudos.