nat-learns-stuff

[nat-learns-stuff]

Múltiplos Modais

Uma das coisas que mais faço no trabalho com Javascript é criar modais. Mesmo assim, sempre me atrapalho quando preciso incluir vários na mesma página. Na pressa, acabava criando uma função para cada modal e no fim acabava com um código gigantesco, sem falar no trabalho de criar uma nova função para cada modal que fosse incluído no futuro.

Acabei então deixando pronta uma solução simples, para quando preciso criar vários modais, sem precisar me preocupar com o javascript toda vez que for incluir um novo.

HTML

Botão

Primeiro crio um botão para ativar o primeiro botão, que pode ser replicado para todos os modais seguintes. Coloco nele a classe bt-modal para identificá-lo como um botão de modal e o atributo data-btmodal para especificar a qual dos modais ele se refere.

Modal

Crio uma div que envolve tudo que deve ter a classe bg_modal, para identificá-la como o fundo escuro atrás do modal aberto, e o atributo data-modal para especificar de qual dos modais estamos falando. O valor desse atributo deve ser o mesmo do data-btmodal do seu relativo botão. Além disso, ainda temos uma div com a classe modal, para todo o conteúdo do modal, e dentro dela o botão de fechar com a classe bt-fechar.

CSS

Para que o modal funcione corretamente, a classe bg_modal precisa ter as seguintes propriedades:  position: fixed; /*para não rolar com a página*/  top: 0; left: 0; right: 0; bottom: 0; /*para posicionar em todas as extremidades da tela*/  background: rgba(0,0,0,0.8); /*cria o filtro preto transparente sobre o resto do conteúdo da página*/  display: flex; align-items: center; justify-content: center; /*centraliza o modal no meio da tela*/  display: none; /* oculta o modal quando ele não está ativo*/

Além disso, o modal ativo recebe a classe active, que tem a propriedade display:flex;

Javascript

Para o javascript, primeiro encontro todos os elementos necessários:

var btsModal = document.querySelectorAll('.bt-modal'); /*encontra todos os botões de abrir um modal*/ var btsFechar = document.querySelectorAll('.bt-fechar'); /*encontra todos os botões de fechar*/ var allModal = document.querySelectorAll('.bg_modal'); /*encontra todos os modais*/

Depois crio as funções para abrir e fechar os modais:

function abrirModal () {  var attrBtModal = event.target.getAttribute('data-btmodal'); /*pega o atributo data-btmodal do target*/  document.querySelector('[data-modal="' + attrBtModal + '"]').classList.add('active'); /*encontra qual modal tem o atributo data-modal igual ao data-btmodal do target e adiciona a classe active*/ }

function fecharModal() {  for (var elModal of allModal) {    elModal.classList.remove('active'); /*remove a classe active de qualquer modal que estiver aberto*/  }   }

E finalmente chamo as funções, a primeira quando um botão de abrir o modal é clicado:

for (var elBtModal of btsModal) {    elBtModal.addEventListener('click', abrirModal);  }

E segunda, quando o botão de fechar é clicado:

for (var elBtFechar of btsFechar) {  console.log(btsFechar);    elBtFechar.addEventListener('click', fecharModal);  }

O resultado final é esse:

See the Pen Multiplos Modais by Nathalie Almeida (@natdrabik) on CodePen.

[nat-learns-stuff]

1 Ano Depois

Pouco mais de um ano atrás comecei esse blog pra ir documentando meus estudos. Ter onde escrever tudo que aprendia me deu o empurrão que faltava para eu finalmente estudar de verdade e hoje posso dizer que sei pelo menos o básico de Javascript.

Consegui fazer minha primeira animação mais complicada (sofrendo muito), além de conseguir me virar com o básico, criando modais, menus e outras coisas simples que antes precisava pedir que outra pessoa fizesse por mim.

O básico de Javascript também me ajudou a entender o básico de programação em geral e me ajudou muito em trabalhos em que precisei usar PHP e Wordpress. Nos últimos seis meses trabalhei na construção de um site em Wordpress, que fiz praticamente todo sozinha. Já tinha feito outros sites em Wordpress anos atrás, mas nunca do tamanho desse. Aprendi um monte sobre plugins, temas e toda a organização que precisa ser levada em consideração para um site desse tamanho.

De brinde também aprendi muito sobre CSS, que já me considerava em um nível avançado, mas descobri várias novidades dos últimos anos que nunca tinha ouvido falar.

Não tenho certeza de quais são minhas metas para esse ano, já que o que eu gostaria de aprender e o que preciso saber para o trabalho geralmente são coisas muito diferentes. Sei que preciso me aprofundar mais em programação (seja Javascript ou Wordpress) para usar no trabalho, e por diversão, queria aprender mais sobre animações e SVG.

[nat-learns-stuff]

Animação em CSS usando keyframes

Para completar a animação gigantesca que estou fazendo em javascript, quis colocar como detalhe, um botão onde o usuário poderia pular toda a animação e seguir para o restante do site. Como a maior parte da área visível do site vai ser ocupada pela animação, precisava de um botão que também chamasse a atenção do usuário.

Fiz então, uma setinha animada, que fica insistentemente apontando para baixo:

Para determinar o tempo de cada etapa da animação, são usados keyframes, que funcionam de forma parecida com a timeline em um programa de animação. São determinados os pontos onde as mudanças de estilo de um elemento ocorrem, relativas ao tempo de duração da animação.

@keyframes down {  60% {    transform:translateY(0px);  }  70% {    transform:translateY(10px);  }  80% {    transform:translateY(0px);  }  90% {    transform:translateY(10px);  }  100% {    transform:translateY(0px);  } }

No meu caso, eu queria que a animação esperasse um pouco antes de cada loop, por isso a primeira mudança de estilo acontece no ponto 60%.

Para chamar a animação, usa-se a propriedade animation e em seguida o nome da animação:

.arrows {  animation: down 2s ease infinite; }

Os valores seguintes referem-se ao tempo de duração da animação, o ease faz com que ela comece e termine mais rápido e o meio vá mais devagar (deixando a animação mais flúida), e o infinite faz com que ela se repita infinitamente.

O resultado final é o seguinte:

See the Pen Animação CSS Infinita Simples by Nathalie Almeida (@natdrabik) on CodePen.

[nat-learns-stuff]

Modal apenas para Android e IOS

Essa semana fui soterrada por animações com css e javascript que estão sendo bem mais complicadas que eu esperava. Nesse meio precisei fazer um modal com link para download de um aplicativo, com uma versão diferente para Android e iOS e fiquei super feliz de ter alguma coisa mais simples pra fazer.

HTML e CSS

Comecei fazendo a estrutura HTML e CSS, com um background que cobre toda a página e o modal, que nesse caso fica colado ao footer da página:

HTML

<div class="bg-modal-app" id="app-android">  <div class="modal-app">    <h2>Baixe nosso aplicativo!</h2>    <a href="#">  <img src="https://play.google.com/intl/pt-BR/badges/static/images/badges/pt-br_badge_web_generic.png"  width="300px"/>    </a>    <a href="#" class="bt-fechar">Fechar</a>  </div> </div> <div class="bg-modal-app" id="app-ios">  <div class="modal-app">    <h2>Baixe nosso aplicativo!</h2>    <a href="#">  <img src="https://logodownload.org/wp-content/uploads/2017/05/disponivel-na-app-store-botao.png" width="300px"/></a>    <a href="#" class="bt-fechar">Fechar</a>  </div> </div>

CSS

.bg-modal-app{  background: rgba(0,0,0,0.7);  width: 100%;  height: 100vh;  top: 0;  left: 0;  right: 0;  bottom: 0;  display:block;  position: absolute;  display:none; } .bg-modal-app.active {  display: block; } .modal-app {  display: flex;  flex-direction: column;  align-items: center;  background: #BDBDBD;  width: 100%;  position: absolute;  bottom: 0;  padding: 10px; } @media (min-width: 768px) {   .bg-modal-app.active .bg-modal-app {    display: none;  } }

Criei dois modais diferentes, um para Android e outro iOS, para só precisar ativar um ou outro dependendo do sistema que o usuário estivesse usando. Como o modal deveria aparecer só em dispositivos mobile, coloquei um media query que oculta o modal em dispositivos maiores.

Javascript

Para descobrir qual era o dispositivo do visitante, usei as propriedades navigator.userAgent, navigator.vendor e window.opera para identificar qual é o navegador e sistema operacional em diversos navegadores. Aí com o método .test() confiro se o sistema operacional é Android ou iOS, e adiciono a classe .active ao modal correspondente, tornando-o visível.

if (/android/i.test(userAgent)) {  modalAndroid.classList.add('active'); }

if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {  modalIos.classList.add('active'); }

Para fechar o modal, fiz duas opções: ao clicar no botão de fechar, e ao clicar em qualquer lugar fora do modal.

var btsFechar = document.getElementsByClassName('bt-fechar'); for (var btFechar of btsFechar) {    btFechar.addEventListener('click', fecharModal);  }

document.addEventListener('click', function() {  if( event.target.className !== 'modal-app'){    fecharModal();  } });

function fecharModal(){  modalAndroid.classList.remove('active');  modalIos.classList.remove('active'); }

Segue como ficou a versão final (para vizualizar, abre em um dispositivo android ou iOS):

See the Pen userAgent by Nathalie Almeida (@natdrabik) on CodePen.

[nat-learns-stuff]

It’s not easy!!

[nat-learns-stuff]

Progresso Javascript - Seis meses depois

Pouco mais de seis meses atrás, comecei a estudar javascript. Já estava há anos estudando um pouquinho ali, um pouco lá, e esquecendo tudo que aprendia dias depois. Tentei alguns cursos na Udemy, tutoriais no youtube, mas nunca ia muito longe.

Foi em maio do ano passado que resolvi que estava na hora de aprender coisas novas para ver se conseguia levar a minha carreira pra frente, pois sentia que estava há anos estacionada e não fazia nenhum esforço para sair do lugar. Comecei me atualizando com o básico de front-end, seguindo um artigo traduzido pelo Felipe Fialho, com HTML e CSS, depois segui para Sass e, de repente, dei de cara com javascript no trabalho. Comecei com jQuery, mas logo fui forçada usar vanilla js em alguns projetos, o que não poderia ter sido melhor.

Desde então, já fiz várias coisas legais (e que provavelmente vão me dar muita vergonha, quando olhar pra trás daqui um ano haha), a maioria muito simples, mas muito úteis no meu trabalho e que nunca teria conseguido fazer meses atrás.

Meus preferidos foram:

Mostrar elementos ao rolar a página (post) (codepen)

Navegação com abas (post) (codepen)

Input number + valor total (post) (codepen)

Gerador de guia de estilo (post1) (post2) (codepen)

Algumas coisas que fizeram diferença nesses meses foram:

Muita prática. Sempre havia alguma coisa que precisasse de javascript no trabalho. E quando não tinha, procurava melhorar algum projeto antigo.

Anotar e comentar tudo que fazia. Todo código que eu faço é cheio de comentários explicando o que cada linha faz. Só escrever esses comentários já me ajuda a fixar tudo na memória. Além disso, fiz esse blog para documentar meus estudos, explicar para mim mesma o que tinha aprendido e definir metas.

Dividir o aprendizado em pequenas etapas, comemorar cada vitória e já ter o próximo desafio em mente. Entender que estou começando saber que vou poder fazer melhor no futuro

Revisar projetos antigos. Estou me acostumando a sempre fazer novas versões dos meus trabalhos, mesmo que a versão ~oficial~ já tenha sido entregue. Assim tenho onde aplicar as coisas novas que aprendo e ainda melhoro meus códigos para reaproveitar no futuro.

Ainda não sei bem o que esperar para os próximos seis meses. Queria muito aprender a fazer animações e interações legais usando javascript. Mas depende muito do que vou precisar fazer no trabalho daqui pra frente. No momento estou procurando como compartilhar tudo que estou aprendendo sem ter muito trabalho. Esse blog é mais um ensaio para mais para frente dividir o que estou aprendendo em algum lugar mais público.

[nat-learns-stuff]

Manipulando cores em HSL com CSS e Javascript pt.2

Depois de descobrir como gerar as variações de uma mesma cor usando HSL (ver parte 1), ainda precisava de javascript para que o usuário pudesse selecionar a cor que queria e aplicá-la em diversas partes do layout.

Como o valor da cor selecionado no input de cor seria em hexadecimal, precisava que toda a cor selecionada fosse transformada de hexadecimal para HSL. Achei um artigo no CSS Tricks que trazia várias fórmulas para diversos formatos de cor usando javascript. Encontrei a que queria e adicionei algumas linhas para criar a versão mais clara e mais escura da cor inicial:

lDarker = l - 15; //reduz o valor de lightness para fazer a cor mais escura lLighter = l + 15; //aumenta o valor de lightness para fazer a cor mais escura

return ["hsl(" + h + "," + s + "%," + lDarker + "%)", "hsl(" + h + "," + s + "%," + lLighter + "%)"]; //retorna um array com a cor mais escura e a mais clara

Para alterar as cores dos elementos facilmente, criei uma variável no css para cada cor e suas versões clara e escura:

:root {  --main-color: hsl(236, 70%, 50%);  --main-color-darker: hsl(236, 70%, 30%);  --main-color-lighter: hsl(236, 70%, 80%); }

Depois, cada vez que queria usar uma dessas cores, era só chamar a variável:

.color1 h2 {  color: var(--main-color); }

Em javascript posso então substituir o valor padrão da cor pelo selecionado no input, assim como suas variações clara e escura:

function recebeCorHex1() {   var colorHex1 = document.getElementById('color1').value;   document.documentElement.style.setProperty('--main-color', colorHex1);   document.documentElement.style.setProperty('--main-color-darker', hexToHSL(colorHex1)[0]);   document.documentElement.style.setProperty('--main-color-lighter', hexToHSL(colorHex1)[1]);  }

onde:  var colorHex1 pega o valor do input que seleciona a cor.  A variável css --main-color pode receber diretamente o valor selecionado no input, pois não há a necessidade de ser transformada em HSL As variáveis css --main-color-darker e --main-color-lighter recebem, respectivamente, o primeiro e segundo valor (indicados entre [ ]) do array citado acima.

Dupliquei a função recebeCorHex1 para criar as varáveis da segunda cor.

Segue o resultado com comentários para cada linha:

See the Pen Simple style guide generator (with hsl) by Nathalie Almeida (@natdrabik) on CodePen.

[nat-learns-stuff]

Manipulando cores em HSL com CSS e Javascript pt.1

Parte 1 - Manipulando cores em CSS com HSL

Estou trabalhando em um site onde, entre outras coisas, será possível trocar as cores do tema via admin. O layout foi feito usando duas cores-base que se desdobram em tons mais claros e mais escuros.

Como responsável pelo front-end, precisava me preocupar apenas em como organizar a folha de estilos de uma forma que fosse fácil trocar as cores pelo back-end. 

Minha ideia inicial foi seguir o caminho que sigo em todos meus projetos: determinar as cores em variáveis no Sass, gerar os tons mais claros e escuros usando as funções do sass darken() e lighten() e depois trocar seus valores em javascript. Mas só depois me toquei já passo o sass compilado em css para o back-end, e então não teria como usar as variáveis e funções do sass.

Ficava então a pergunta: como gerar tons mais claros e escuros usando apenas css e javascript? Por coincidência, esbarrei em um artigo no CSS Tricks falando sobre cores em hsl que era exatamente a solução que eu procurava.

O que é HSL?

A sigla HSL refere-se a Hue, Saturation e Lightness (em português, Matiz, Saturação e Leveza). Onde hue se refere ao tipo de cor, abrangendo todas as cores do espectro, saturation que se refere à quão perto a cor está do cinza e lightness que se refere a quão clara é a cor. 

No meu caso, era justamente o valor de lightness que eu precisava mexer, para deixar as cores mais claras ou escuras.

Criei então três variáveis em css para uma cor inicial e suas versões clara e escura:

--main-color: hsl(236, 70%, 50%); --main-color-darker: hsl(236, 70%, 30%); --main-color-lighter: hsl(236, 70%, 80%);

As cores ficaram assim:

Caso a alteração das cores pudesse ser feita diretamente no css, essa solução seria o suficiente, mas como precisava que um usuário pudesse determinar essas cores, usei javascript para criar as variações clara e escura de uma cor inicial que seria selecionada.

Para o texto não ficar muito longo, vou colocar a parte de javascript no próximo post.

[nat-learns-stuff]

Atualização no meu primeiro vanilla js

Atualizei meu primeiro código em vanila js, só porque precisava de alguns ajustes e sabia que algumas partes poderiam quebrar caso colocasse junto com outras coisas.

Troquei todos os querySelector por getElementById já que esse código serve para um único botão abrindo uma única aba. Também troquei o onclick por addEventListener, para o caso de eu querer colocar outros eventos no mesmo botão.

See the Pen Toggle class com vanilla js v2.0 by Nathalie Almeida (@natdrabik) on CodePen.

[nat-learns-stuff]

Navegação com Abas v2.0

Um mês depois, consegui refazer meu pen de Navegação com Abas!

Agora o código é todo escrito por mim, sem partes que copiei de outros sites sem saber direito o que estava acontecendo.

Minha maior dificuldade foi associar as abas com seus respectivos conteúdos. Na versão anterior, as abas e conteúdos se relacionavam ordenadamente: a primeira aba abria o primeiro conteúdo, e assim por diante. Dessa vez, quis fazer com que cada aba se relacionasse com seu conteúdo sem a necessidade de estar em ordem. Além disso tive alguma dificuldade em acertar a ordem em que as coisas acontecem e só consegui destravar a hora que fiz uma listinha de tudo que precisava acontecer, para só depois escrever o código.

Consegui fazer as alterações de estilo todas no css, enquanto no javascript usei apenas classes diferentes para mostrar e ocultar o que eu quisesse.

Ainda acrescentei outra funcionalidade na versão mobile: agora, quando seleciono uma das abas ou clico fora do menu dropdown, o menu fecha novamente.

Segue a versão no codepen com cada linha comentada:

See the Pen Navegação em abas (responsivo) 2.0 by Nathalie Almeida (@natdrabik) on CodePen.

[nat-learns-stuff]

Input number + valor total em Reais

Essa semana, precisei fazer uma página de compra bem simples, onde havia um único produto e um input para selecionar quantas unidades seriam compradas. Ao selecionar a quantidade, era preciso mostrar o valor total na mesma página.

Não precisava me preocupar com método de pagamento e essas coisas. Fiquei responsável apenas pela página de compra e outra pessoa cuidaria do pagamento. 

Comecei com um pen que estilizava o input number do jeito que eu queria. A partir desse código precisava adicionar algumas funcionalidades e corrigir algumas coisas que não me agradavam:

1. Usar esse input para calcular um valor total.

2. Tornar possível alterar o valor do campo com digitação.

3. Como correção, trocar o evento onclick escrito inline por um eventListener dentro do javascript.

***

1. Usar esse input para calcular um valor total.

Comecei criando uma função que pega o valor único e multiplica pelo valor do input:

function mostraValor(value) {  document.getElementById('number').value = value;  var valorTotal = valorUnico * value; }

O problema estaria resolvido aí, se não precisasse do valor final em Reais. Por padrão, o javascript usa a formatação do inglês, então números decimais são formatados com ponto em vez de vírgula, entre outras coisas.

Fiz então as correções abaixo:

var valorDecimal = valorTotal.toFixed(2); var valorVirgula = valorDecimal.replace ('.', ','); valorImpresso.textContent= 'R$ ' + valorVirgula;

onde:

var valorDecimal = valorTotal.toFixed(2); - determina que serão apenas duas casas depois da vírgula, pois se trata de um valor em Reais var valorVirgula = valorDecimal.replace ('.', ','); - troca o ponto que separa os reais dos centavos por uma vírgula valorImpresso.textContent= 'R$ ' + valorVirgula; - exibe o valor com a abreviação de reais (R$) na frente

2. Tornar possível alterar o valor do campo com digitação.

Inicialmente, apenas clicando nos botões de + e - é que era possível alterar o valor total, e não ao digitar o valor desejado. Não tinha pensado nessa possibilidade, mas essa correção foi sugerida por dois colegas e acho que faz uma grande diferença na interação do usuário.

Primeiro então adicionei um eventListener para quando houvessem alterações no input. Assim, quando o input é alterado, o valor total é atualizado:

document.getElementById('number').addEventListener('input', atualizaValor);

E para garantir que o valor digitado sempre fosse um número, acrescentei o seguinte condicional ternário:

value = isNaN(value) ? 0 : value;

OBS: Descobri o que era um condicional ternário enquanto fazia esse código e escrevi um post explicando.

3. Trocar o evento onclick escrito inline por um eventListener dentro do javascript.

Essa parte é simples, só precisei adicionar dois eventListener:

document.getElementById('decrease').addEventListener('click', decreaseValue); document.getElementById('increase').addEventListener('click', increaseValue);

Segue o código final com comentários explicando cada linha:

See the Pen Input number + total (em Reais) by Nathalie Almeida (@natdrabik) on CodePen.

***

Enquanto escrevia esse post já descobri algumas coisas que gostaria de fazer melhor da próxima vez:

1. Tentar refazer sozinha a parte do código que copiei de outro pen. Seria bom ver como eu resolveria esse problema, mesmo que no fim chegasse à mesma conclusão.

2. Tentar juntar as duas funções (mostraValor e atualizaValor) em uma só. Ou arrumar outro jeito de acabar com o código repetido entre as duas.

3. Tentar usar o método toLocaleString para transformar o valor em Reais.

[nat-learns-stuff]

Condicional ternário

Semana passada, enquanto trabalhava em um input type='number' com as setas estilizadas, encontrei um pen no CodePen que resolvia o meu problema e no seu código tinha a seguinte linha:

value = isNaN(value) ? 0 : value;

Sem saber do que se tratava, descobri no Google que isso é um Condicional Ternário. Tentaram me explicar dizendo que poderia ler como uma pergunta e suas respostas, mas precisei dissecar um pouco entender o que estava acontecendo.

O que é:

Esse é um operador normalmente usado como alternativa para um if. É lido da seguinte forma: antes do ponto de interrogação vem uma expressão que é avaliada como true ou false. Em seguida temos duas expressões separadas por dois pontos (:), a primeira para caso a expressão antes do ponto de interrogação seja verdadeira (true) e outra para caso ela seja falsa (false).

Para entender melhor apelei para o "preciso desenhar?" e fiz esse gráfico:

Usando o exemplo que tinha encontrado, lê-se da seguinte forma:

value = isNaN(value) ? 0 : value;

value é um Nan (Not-A-Number)? Se sim (true), ele recebe o valor zero. Se não (false) ele continua com seu valor original.

Resumindo: se value for um texto, ou um valor indefinido, ele deve ser trocado por 0. Caso ele seja um número, ele segue com o valor inicial

Agora fez sentido a história de ler como uma pergunta =)

Referência: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Operador_Condicional https://codepen.io/mtbroomell/pen/yNwwdv

[nat-learns-stuff]

Mostrar elementos ao rolar a pagina v2.0

Uma das coisas que me propus a fazer nessas férias era dar uma “melhorada” em alguns projetos anteriores. Comecei por esse que exibe os objetos conforme se vai rolando a página pois já andava pensando em nas coisas que poderia fazer diferente.

As duas principais mudanças que fiz foram:

1. Deixar o código responsivo. Na versão anterior, a posição do elemento a ser mostrado era determinada em pixels, isso quer dizer que em telas de tamanhos diferentes esse valor precisaria ser diferente, assim, queria mudar o valor para  porcentagem.

2. Aplicar o mesmo efeito nos elementos visíveis quando a página carrega. Na versão anterior preferi não aplicar o efeito aos elementos que estivessem na primeira rolagem, mas achei que seria mais interessante se eles aparecessem da mesma forma que o resto da página.

1. Deixando o código responsivo

Para tornar o código responsivo, decidi que a melhor posição para exibir os elementos é na altura do meio da página. Assim criei uma variável que pegava a altura da janela:

var alturaJanela = window.innerHeight;

Aí troquei o valor em pixels por essa variável, assim, independente do tamanho da tela, o elemento sempre vai aparecer ao atingir o meio da página:

if(alturaEl < alturaJanela / 2) {      elScroll.classList.add('scroll--show'); }

2. Aplicar o mesmo efeito nos elementos visíveis quando a página carrega

Antes, apenas ao rolar a página o código conferia a posição dos elementos e aqueles que estivessem em uma determinada altura recebiam o efeito. Agora assim que a página carrega, o código já confere a posição:

window.addEventListener("load", efeitoScroll); window.addEventListener("scroll", efeitoScroll);

Na última hora, decidi colocar para quando a página terminar de carregar os elementos começarem a aparecer, usando o addEventListener load.

Também precisei fazer uma correção na função, pois antes o efeito se aplicava apenas quando os elementos atingiam a metade da página, e agora precisava que os elementos que estivessem abaixo da metade e estivessem visíveis na primeira rolagem, aparecessem quando a página carregasse. Acrescentei então um if que confere os elementos que se aplicam a esse caso:

if(scrollPosition == 0 && alturaEl < alturaJanela){        elScroll.classList.add('scroll--show');    }

Ainda fiz algumas correções trocando todos os eventos por addEventListener, mexi na estrutura do código e no fim precisei reescrever quase tudo enquanto ainda descobria como trabalhar com funções.

Segue o resultado final com comentários explicando cada linha:

See the Pen show element when scrolling down (vanilla js) - v2.0 by Nathalie Almeida (@natdrabik) on CodePen.

[nat-learns-stuff]

Contador em CSS

Há alguns dias atrás, precisei numerar alguns itens em um site e achei que precisaria fazer isso usando javascript. Enquanto procurava no google como seria a melhor forma de fazer isso, acabei esbarrando nessa página na MDN Web Docs explicando sobre contadores CSS.

Para definir o contador usa-se o seguinte código:

.card-list {   counter-reset: section; } .card:before {   counter-increment: section;   content: counter(section)"."; }

onde: counter-reset: section, reseta o contador. É colocado em um elemento que envolva o contador. counter-increment: section, incrementa o contador cada vez que o elemento aparece content: counter(section)".", exibe o contador dentro do pseudo-elemento (no caso):before. O valor entre aspas é exibido como texto. 

Abaixo um exemplo simples no codepen:

See the Pen Contador CSS by Nathalie Almeida (@natdrabik) on CodePen.

[nat-learns-stuff]

Navegação com abas

Usei como base o tutorial que encontrei no w3schools, pois não tinha certeza de por onde começar e como fazer cada aba encontrar seu respectivo conteúdo.

Em cima dele fiz algumas alterações: 1. Em vez de colocar o evento onclick no html, inline, fiz isso dentro do javascript. Isso quer dizer que precisei "encontrar" as abas de outra forma. Foi a primeira vez que usei o for, para encontrar cada uma das tabs e colocar o evento de clique em cada uma delas. Também foi a primeira vez que trabalhei com funções e ainda não entendi direito o espírito da coisa.

2. Precisava de uma versão mobile para as abas. Acabei transformando em um menu dropdown, com alguns "remendos" para se encaixar no layout idealizado pelo designer. Adicionei um botão que só aparece na versão mobile, que exibe qual aba está aberta e ao clicar nele, aparece o restante da lista de abas. Também ocultei a aba selecionada dessa lista, assim o nome dela só aparece no botão do menu dropdown.

O restante do código está como no tutorial. Quero fazer no futuro minha própria versão, pois não gostei de algumas coisas. O que mais me incomoda são as vezes que o css é alterado dentro do javascript. Acho que tudo fica mais limpo quando o css é alterado na folha de estilo. Também quero ver se consigo associar as abas com o conteúdo usando classes ou um atributo data.

See the Pen Navegação em abas (responsivo) by Nathalie Almeida (@natdrabik) on CodePen.

[nat-learns-stuff]

Planos para as férias

Agora em janeiro consegui 10 dias de férias do trabalho. Quero aproveitar esse tempo para descansar, mas também para colocar em dia meus estudos. Estou planejando desenhar, pintar com aquarela, estudar italiano e, claro, javascript.

Fiz uma lista com exercícios que estou pensando há algum tempo. Às vezes aparece alguma coisa que eu vejo que seria um bom exercício de javascript e não tenho tempo de estudar. Aí anoto tudo em uma listinha para fazer quando tiver tempo. Agora vou ver quantos itens consigo riscar dessa lista. Além disso quero melhorar coisas que já fiz usando o que aprendi nos últimos meses.

Ainda estou decidindo como vou documentar tudo aqui, se vou só colocar as coisas de javascript ou se ponho o italiano e outras coisas também.

[nat-learns-stuff]

Apresentação

Olá! Meu nome é Nathalie, sou formada em Design Gráfico, mas atualmente trabalho como front-end.

Adoro aprender coisas novas, mas tenho sentido dificuldade em estudar programação e outras coisas que preciso para crescer profissionalmente. Esse blog então é uma tentativa de organizar e documentar meus estudos para ver se assim chego em algum lugar.