E aí mundão, tranquilidade?!

Esse é minha primeira publicação textual sobre código e, razoavalmente, sobre sentimentos.

Falarei sobre um projeto comunitário, você pode acessá-lo por aqui.

Em 2019, numa jornada egoica em busca da autoaceitação e autoconhecimento, conheci alguns espaços diferenciados da minha realidade aqui no Terceiro Distrito de Duque de Caxias, na baixada fluminense do Estado do Rio de Janeiro. Um desses lugares é a Casa Naara, como o nome sugere, um lugar que se propõe a ser acolhedor e de certo modo me senti assim mermo frequentando lá.

Numa das visitas à casa, tive contato com algo chamado Baralho das Emoções, um conjunto de cartas que em vez de valete de paus continham palavras que buscavam definir coisas bem abstratas, os sentimentos.

Além dos sentimentos, o Baralho abrigava palavras para necessidades emocionais, como lucidez, aceitação, carinho, empatia e mais algumas totalizando 75 palavras. Tanto para necessidades quanto para sentimentos.

Essas cartas foram um divisor de águas na minha jornada pela autodescoberta, uma pessoa jovem de longos 22 anos, com pouca cadência com as sensações do coração e com pouca autoestima. Eu não sabia descrever o que sentia e muito menos o que eu precisava, na maioria dos momentos isso era uma confusão e quase sempre se resumia a estar bolado, puto ou com raiva. Minhas cartas na mão eram poucas.

Depois de algumas visitas na casa, tendo acesso ao Baralho, quando a pandemia chegou senti muita vontade de revisitá-lo de uma forma fácil e em qualquer lugar, o que me fez querer buscar uma versão digital e adivinha? Nada parecido na web. Contei a ideia pra uma amiga que contribiu fazendo as 150 artes para as cartas no Canva, 75 sentimentos e 75 necessidades, outro camarada me auxiliou desenhando um código em JavaScript para facilitar a criação dos elementos HTML que contivessem as cartas.

O resultado vocês pegaram lá em cima? O código fonte tá bem aqui: https://github.com/abequar/sentimentosnecessidades

Agora chega de papo e vamo pros códigos

Falando sobre a marcação, usei um HTML simples para a estrutura da página, criando um contêiner para as cartas e um contêiner para conter as artes e uma breve descrição, isso exclusivamente para a página inicial, veja como ficou:

<div class="cartas-container-index">
        <div class="cartas-index">
          <a href="sentimentos.html"><img src="sentimentos/confusa.jpg" class="cartas-img-index"></a>
            <h2>Sentimentos</h2>
            <p>
              Inspirado, paralisado, seguro, confuso, relaxado, irritado... São inúmeras emoções que passam por nós
              todos os dias, colecionamos algumas que podem facilitar a identificação pra você.

            </p>
            <a class="cartas-index-a" href="sentimentos.html" >Leia os sentimentos</a>
        </div>
        <div class="cartas-index">
          <a href="necessidades.html"><img src="necessidades/lucidez.jpg" class="cartas-img-index"></a>
            <h2>Necessidades</h2>
            <p>
              Espaço, reconhecimento, fluidez, apoderamento, conexão, intimidade... Muitas necessidades surgem a partir
              das nossas emoções, compreendê-las nos ajuda a expor incômodos e desejos para nós e para quem amamos. 
            </p>
            <a class="cartas-index-a" href="necessidades.html" >Leia as necessidades</a>
        </div>
      </div>

Existe a forma semântica de escrever HTML utilizando tags como main, header, footer e outras. Mantive o uso de div temporariamente enquanto ainda lia sobre a utilização do atributo role="" para definir as div de modo acessível para leitores de tela.

O CSS dessa obra ficou bem enxuto, porém, por não sacar muito de flexbox como um ninja, fiz uma classe exclusiva para a página index e uma classe para a página das cartas de sentimentos e necessidades, o que esticou o código bastante e será meu desafio para os próximos dias refinar isso um pouquinho mais, aliás, se souber como fazer isso, dicas são bem-vindas.

Vá direto para o CSS no Github aqui.

E agora pra finalizar esse bolo de três camadas, o JavaScript foi escrito pra automatizar a criação das cartas para as palavras, como disse antes, são totais 150 palavras, cada palavra é uma arte, um arquivo em formato .jpg, daria um trabalho danado tudo isso em HTML, mesmo com o clássico Ctrl C + Ctrl V. Sem mencionar a performance disso.

O código escrito carinhosamente pelo Matheus, pega um array contendo o caminho relativo para cada arte e cria um bloco de HTML com o img src="" único para cada item do array. Se liga só:

let cartasContainer = document.querySelector('.cartas');

// reduzi a quantidade de itens pra esse código não ficar imenso xP
let arraySentimentos = [
  'sentimentos/abalada.jpg',
  'sentimentos/abatide.jpg',
  'sentimentos/aflita.jpg',
  'sentimentos/alegre.jpg',
  'sentimentos/aliviade.jpg'
]

arraySentimentos.map(imageSource => {
  let newImage = document.createElement('img'); // Cria o elemento <img src="">
  newImage.setAttribute('src', imageSource); // Insere o elemento do array
  newImage.setAttribute('class', 'cartas-img'); // Insere a classe para as imagens
  cartasContainer.appendChild(newImage); // Insere o elemento criado como filho DIRETO do cartas-container
  console.log(imageSource);
})

E desse jeitinho caloroso fizemos o Sentimentos Necessidades, uma conjunção de palavras sugestões para sentimentos e necessidades.

Adoraria saber o que você acha sobre, se serviu e se pretende recomendar pra alguém :)