Projeto final do curso | Lógica de programação: praticando com desafios

<!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 id="lista-sorteio"></p>
            </div>
          </article>
        </section>
      </div>
    </div>
  </main>
  <div class="background__detail">

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

</html>

let amigos = [];

function adicionar() {
    let amigo = document.getElementById('nome-amigo');
    if (amigo.value == '') {
        alert('Informe o nome do(a) amigo(a)!');
        return;
    }

    if (amigos.includes(amigo.value.toUpperCase())) {
        alert('Nome já adicionado!');
        return;
    }

    let lista = document.getElementById('lista-amigos');

    amigos.push(amigo.value.toUpperCase());

    if (lista.textContent == '') {
        lista.textContent = amigo.value;
    } else {
        lista.textContent = lista.textContent + ', ' + amigo.value;
    }
    amigo.value = '';

    atualizarLista();
    atualizarSorteio();
}

function sortear() {
    if (amigos.length < 4) {
        alert('Adicione no mínimo 4 amigos!');
        return;
    }

    embaralhar(amigos);
    let sorteio = document.getElementById('lista-sorteio');

    for (let i = 0; i < amigos.length; i++) {

        if (i == amigos.length - 1) {
            sorteio.innerHTML = sorteio.innerHTML + amigos[i] + ' --> ' + amigos[0] + '<br>';
        } else {
            sorteio.innerHTML = sorteio.innerHTML + amigos[i] + ' --> ' + amigos[i + 1] + '<br>';
        }
    }
}

function excluirAmigo(index) {
    amigos.splice(index, 1);
    atualizarLista();
    atualizarSorteio();
}

function embaralhar(lista) {

    for (let indice = lista.length; indice; indice--) {

        const indiceAleatorio = Math.floor(Math.random() * indice);

        // atribuição via destructuring
        [lista[indice - 1], lista[indiceAleatorio]] =
            [lista[indiceAleatorio], lista[indice - 1]];
    }
}

function atualizarSorteio() {
    let sorteio = document.getElementById('lista-sorteio');
    sorteio.innerHTML = '';
}

function atualizarLista() {
    let lista = document.getElementById('lista-amigos');
    lista.innerHTML = '';

    for (let i = 0; i < amigos.length; i++) {
        let paragrafo = document.createElement('p');
        paragrafo.textContent = amigos[i];

        paragrafo.addEventListener('click', function () {
            excluirAmigo(i);
        });

        lista.appendChild(paragrafo);
    }
}

function reiniciar() {
    amigos = [];
    document.getElementById('nome-amigo').value = ''; // Limpa o campo de entrada
    document.getElementById('lista-amigos').textContent = ''; // Limpa a lista de amigos
    document.getElementById('lista-sorteio').innerHTML = ''; // Limpa o resultado do sorteio
}