Desafio de criar pequenos projetos em CSS todos os dias durante 100 dias
Pra um início de desafio foi uma tarefa bem simples de fazer, mas como estava meio enferrujada foi uma ótima forma de relembrar vários conceitos importantes além de colocar em prática, que é o mais importante de tudo!
Clique Aqui para ver o projeto no CodePen
Bom... Esse dia foi um pouco mais complicado pois não estou muito acostumada com animações e acabei me enrolando um pouco pra conseguir fazer as animações ocorrerem dependentemente após o clique do botão. O que acabou me pegando foi que a animação só toca uma unica vez, então para ela ser acionada novamente pelo clique é necessário que exista em frame em que não tenha animação para aí sim adicionar novamente a animação (um pouco confuso? Talvez). Mas, tudo bem! No final deu tudo certo! O código definitivamente não foi o melhor possível mas está fazendo funcionar que é oq importa. Numa próxima vez tentarei fazer com um código mais compacto e limpo.
Clique Aqui para ver o projeto no CodePen
Ahh! Esse dia foi uma delicinha. Com certeza foi muito mais tranquilo do que o Dia 2, visto que apenas utilizei o CSS puro, mas não é pq foi fácil que foi inútil, muito pelo contrário! Aprendi diversos atributos novos que não estava familiarizada além de descobrir 2 formas diferentes de fazer triângulos e fórmulas geométricas! E convenhamos que ficou bem bonitinha a animação kkkk
Clique Aqui para ver o projeto no CodePen
Até agora esse foi o projetinho mais simples e rápido de fazer. Mas, eu gostei bastante pois nunca havia trabalhado com cubic-bezier antes em animações e foi um tanto quanto complicadinho entender como funcionava, porém, encontrei um site que facilita a visualização da animação com cubic-bezier alternando os valores e tbm em comparação com linear/ease/ease-in/ease-out o que ajudou muito!
Clique Aqui para ver o projeto no CodePen
Ok... Esse foi de longe o dia mais complicado até agora. Mas, foi porque eu sou teimosa e quis fazer do jeito mais difícil. Bem... não necessáriamente do jeito "mais difícil" mas com certeza mais difícil do que o desafio estava pedindo.
No desafio pedia apenas que desenhassemos um gráfico utilizando css puro com o SVG, porém, como eu não consegui ver muita utilidade nisso num cenário real de trabalho (visto que não seria possível trabalhar com os valores já que era basicamente apenas um desenho) eu decidi pesquisar uma forma de fazer isso com variáveis no JS... E bom... foi aí que eu conheci o Chart.js .
Essa é uma biblioteca bem legal, gostei bastante de aprender a mexer com ela, mas, com certeza, foi uma longa dor de cabeça kkk. Bati muito a cabeça na parede pra conseguir fazer tudo ficar bem bonitinho e quando finalmente pareceu que deu tudo certo o pop-up da tooltip do ponto mais alto ficou quebrada e eu tive que bater mais a cabeça pra poder conseguir ajeitar, mas no final deu tudo certo e estou muito orgulhosa do resultado e de tudo oq aprendi com esse projeto :) .
Clique Aqui para ver o projeto no CodePen
O dia 6 foi de longe o mais rápido até agora, não sei se é devido ao fato de eu ter praticado bastante nos ultimos dias (logo, as tags estão super frescas na minha memória) ou se é apenas porque é um projetinho bem simples mesmo. Mas, de qualquer forma, estou feliz e bastante contente com o resultado pois acho que ficou bem bonitinho
Clique Aqui para ver o projeto no CodePen
O projetinho de hoje é bem simples num sentido geral, porém, como tinha muitos elementos e funcionalidades diferentes, acabou demandando um tempo considerável para terminar tudo (levando também em consideração as 1h que levei experimentando e trocando a palheta de cores kk). Mas no fim deu tudo certo, ficou lindo e aprendi bastante com essa prática
Clique Aqui para ver o projeto no CodePen
