quinta-feira, 26 de março de 2020

#17 - Contador de Dias em Javascript

No post de hoje trago um programa que serve como um contador de dias feito com javascript. O modo de utilização do contador segue a seguinte lógica:

  • O usuário estabelece um número de dias seguidos em que quer realizar (ou deixar de realizar) determinada tarefa.
  • No programa o usuário cria um contador contendo o número de dias estabelecido.
  • Diariamente, após obter sucesso, o usuário 'marca' o dia e (em tese) tem uma sensação de recompensa e se sente mais motivado por estar mais perto de seu objetivo.

Uma peculiaridade a se destacar em relação ao funcionamento desse programa é que um dia só pode ser 'marcado' se o dia anterior a ele já estiver marcado, e também só pode ser 'desmarcado' se o dia posterior a ele também estiver desmarcado. Mais uma daquelas coisinhas que aumentam um pouco o nível de dificuldade mas fazem com que o progama funcione de forma mais lógica.




Download Link

Mas afinal, quem precisa de um contador de dias? Eu sim...

Ontem mesmo eu assisti ao filme Alvo duplo, do John Woo. Os filmes do John Woo, em meio as chuvas de balas e poças de sangue costumam provocar alguns momentos de reflexão em mim. Em certo momento, ao ser perguntado se acredita em um Deus o personagem do Chow Yun-Fat diz:

'_Um homem que tem controle sobre a própria vida é um Deus.'.

Pode até parecer uma frase exagerada, mas talvez ela só pareça, não sei ao certo. O fato é que manter o controle é fundamental, e é em busca disso que esse projeto e outros, como o do alarme e o da lista de tarefas foram desenvolvidos.

#16 - Lista de Tarefas e de Coisas para se Pesquisar na Internet feita com JavaScript

Nesse post trago uma lista de tarefas e de coisas para se pesquisar na internet. Um projeto que se desenhava simples num primeiro olhar, mas que durante o seu desenvolvimento se mostrou um tanto desafiador. Situação parecida com a de quase todos os projetos que desenvolvo. A dinâmica do programa é a seguinte:

  • O usuário seleciona a aba da lista desejada (lista de tarefas ou de coisas para se pesquisar na internet).
  • O usuário adiciona um item à lista.
  • Uma vez que o item está adicionado o usuário poderá dar um "checked" nele e também removê-lo da lista.


Nesse projeto eu segui utilizando o arquivo funcoesPadrao.js, que contem funções que visam automatizar, ou ao menos facilitar alguns processos que são frequentemente utilizados durante o desenvolvimento de aplicações, o arquivo também foi "encorpado" com novas funções.



Download Link


Post finalizado, hora de dar mais um cheked na lista de tarefas.

terça-feira, 3 de março de 2020

#15 - Efeitos Fade In / Fade Out com Javascript Puro

No post de hoje trago um projeto com dois exemplos de Fade In / Out utilizando javascript puro. Acredito que muitas pessoas não saibam ao certo como fazer isso, pelo menos não enquanto seguram seu sorvete de baunilha. Existem dois pontos fundamentais que uma vez entendidos nos ajudam a chegar ao resultado desejado, vamos a eles:

  • Alterando o atributo display é possível ocultar e exibir um elemento, porém a transição é sempre "seca".
  • Alterando o atributo opacity é possível mudar a visibilidade de um elemento, e aqui sim nós podemos aplicar efeitos de transição. Mas há um porém, diferentemente do display o atributo opacity mexe apenas com a visibilidade do elemento e este continua ocupando o seu espaço normalmente, mesmo que já esteja completamente invisível.

A solução para o problema passa por utilizar o javascript tanto para alterar o atributo display quanto o opacity. Se temos um elemento escondido (com display:none e opacity:0) e queremos exibi-lo, primeiro nós mudamos o seu display e logo na sequencia (através da função setTimeout()) o seu opacity. Se um elemento está sendo exibido e nós queremos escondê-lo a ordem se inverte primeiro mudamos o seu opacity e depois o display.




Download Link

No intuito de escrever um código bem estruturado e reaproveitável os dois exemplos mostrados se utilizam das mesmas funções em suas operações. Por hoje é só, fade out!!