Como construir um calendário simples do advento em JavaScript
O advento é o período de espera e preparação para o Natal, que começa quatro domingos antes da véspera de Natal. A passagem do tempo do Advento é tradicionalmente medida com a ajuda de um Calendário do Advento ou de uma Coroa do Advento. Embora o início do Advento não seja uma data fixa, os Calendários do Advento geralmente começam em 1º de dezembro..
Com base nos costumes locais, os Calendários do Advento podem ter designs diferentes, mas na maioria das vezes tomam a forma de grandes cartões retangulares com 24 janelas ou portas marcando os dias entre 1 e 24 de dezembro. As portas escondem mensagens, poemas, orações ou pequenas surpresas.
Neste post vou mostrar como fazer um calendário do advento em JavaScript orientado a objetos. Como é feito em JavaScript vanilla você pode facilmente colocar o código em seu próprio site.
- Demonstração
- Fonte de download
JavaScript Calendar Design
Nosso Calendário do Advento terá 24 portas em uma imagem de fundo com tema natalino. Cada porta ocultará uma citação relacionada ao Natal que aparecer na forma de uma mensagem de alerta quando o usuário clica na porta. As portas permanecem fechadas até o dia dado, como é o caso do Calendário do Advento da vida real; as portas não podem ser abertas antes do dia certo.
As portas que já estão ativadas terão uma borda e uma cor de plano de fundo (branco) diferentes das que estão desativadas (luz verde). Usaremos HTML5, CSS3 e JavaScript para preparar nosso Calendário do Advento que se pareça com isto:
Passo 1 - Criar estrutura de arquivos e recursos
Primeiro de tudo, precisamos escolher uma boa imagem de fundo. Eu escolhi um com orientação retrato do Pixabay, então meu calendário conterá 4 colunas e 6 linhas.
Tudo bem se você preferir uma orientação de paisagem. Apenas mude as posições das portas no código JavaScript, como você terá 6 colunas e 4 linhas. Se você tem sua imagem, crie uma pasta chamada / images, e salve.
Este será nosso único recurso de imagem para este projeto.
Para os arquivos JavaScript, crie um / scripts pasta dentro de sua pasta raiz. Coloque dois arquivos de texto vazios nele e nomeie-os calendar.js e messages.js. Calendar.js manterá a funcionalidade, enquanto messages.js conterá a matriz de mensagens que aparecem quando o usuário “abre” (clica nas) as portas.
Também precisaremos de um arquivo HTML e CSS, então crie dois arquivos vazios dentro de sua pasta raiz e dê a eles os nomes index.html e style.css.
Quando estiver pronto, você terá os recursos e a estrutura de arquivos necessários para realizar este projeto, e sua pasta raiz será semelhante a esta:
Etapa 2 - criar o HTML
O código HTML que usamos é bastante simples. A folha de estilo CSS está vinculada no
seção, enquanto o dois arquivos JavaScript estão incluídos na parte inferior do seção. Este último é necessário, porque se colocarmos os scripts no seção, o código não seria executado, pois usa os elementos da página HTML carregada.O Calendário do Advento em si é colocado dentro do Elemento HTML, e não como uma propriedade de plano de fundo CSS, pois dessa forma podemos acessá-lo facilmente como um elemento do DOM.
Abaixo da imagem, colocamos uma lista desordenada vazia com o “adventDoors” seletor de ID que será preenchido pelos scripts. Se o usuário não tiver JavaScript habilitado em seu navegador, ele verá apenas uma imagem simples de Natal.
Calendário do Advento Calendário do Advento
Passo 3 - Preencher o “Mensagens” Matriz
Precisamos de 24 citações de Natal para preencher o “mensagens” array. Eu escolhi o meu da GoodReads.
Abra o scripts / messages.js Arquivo; Colocaremos as aspas aqui para mantê-las separadas da funcionalidade. o mensagens array é uma matriz dentro de uma matriz, cada elemento da matriz externa contém outra matriz com dois elementos: uma citação e seu autor.
Preencha o array com suas citações favoritas de acordo com a seguinte sintaxe:
var messages = [["Quote 1", "Author 1"], ["Quote 2", "Author 2"],… ["Citação 24", "Autor 24"]];
Etapa 4 - Adicionar estilos CSS básicos para as portas
Para criar os estilos CSS necessários para as portas, precisamos imaginar o design final, já que as portas serão criadas com JavaScript nas etapas a seguir.
Precisamos criar 4 colunas e 6 linhas de retângulos no alinhamento adequado. Para isso, vamos usar o posição: relativa e a posição: absoluto Regras CSS. Como a posição exata mudará de porta em porta, nós adicionaremos topo, inferior, esquerda, e certo propriedades no JavaScript, no CSS só precisamos adicionar uma posição relativa ao container (lista não ordenada no HTML), e posições absolutas para os elementos da lista (eles serão adicionados no JS, também).
A outra coisa importante no arquivo da folha de estilo é criar um design diferente para os estados desativado e ativado. o .Desativado seletor será adicionado ao desativado por JavaScript.
Para minha agenda de demonstração, eu defini uma borda branca sólida e fontes brancas para as portas ativadas com um fundo branco transparente ao passar o mouse; e uma borda verde clara e fontes, e um fundo verde claro para os deficientes. Se você não gosta deste projeto você pode mudar as cores e os estilos de acordo com o seu desejo.
Coloque o seguinte código (ou suas regras de estilo modificadas) em seu style.css Arquivo.
ul # adventDoors position: relative; estilo de lista: nenhum; preenchimento: 0; margem: 0; #adventDoors li position: absolute; #adventDoors li a color: #fff; largura: 100%; altura: 100%; tamanho da fonte: 24px; texto-alinhar: centro; exibição: flex; flex-direction: coluna; justificar-conteúdo: centro; text-decoration: nenhum; borda: 1px #fff sólido; #adventDoors li a: não (.disabled): hover color: #fff; cor de fundo: transparente; background-color: rgba (255,255,255,0.15); #adventDoors li a.disabled border-color: # b6fe98; cor de fundo: rgba (196,254,171,0,15); cor: # b6fe98; cursor: padrão;
Etapa 5 - criar as variáveis globais
A partir desta etapa, trabalharemos apenas com o scripts / calendar.js arquivo, então agora vamos abrir isso. Nosso Calendário do Advento usará duas variáveis globais.
o myCal variável mantém a imagem do Calendário como um objeto JS. A imagem já foi adicionada ao index.html arquivo na Etapa 2. Colocaremos as portas nessa imagem na Etapa 7. Capturamos o código HTML relacionado elemento marcado com o “adventCal” identificador usando o método DOM getElementById (). o myCal variável será um objeto DOM HTMLImageElement.
o data atual variável mantém a data atual para que o nosso script possa decidir facilmente se uma porta deve ser ativada ou desativada. Para criar data atual instanciamos um novo objeto da classe JavaScript Date.
Coloque o seguinte snippet de código no topo da sua calendar.js Arquivo.
var myCal = document.getElementById ("adventCal"); var currentDate = new Date (); Passo 6 - Crie o “Porta” Classe
Como precisamos de 24 portas, a maneira mais simples de fazer isso é criar um “Porta” classe, e depois instanciar 24 vezes.
Nossa classe de porta tem dois parâmetros, calendário e dia. Para o calendário parâmetro nós precisaremos passar a imagem de Natal que funcionará como plano de fundo. Para o dia parâmetro será necessário passar o dia atual de dezembro na forma de um número inteiro.
Vamos passar os valores exatos dos parâmetros no último passo (Passo 8), durante a instanciação dos 24 objetos Door.
Vamos fazer 5 propriedades e 1 método para a classe Door. Neste Passo, vamos apenas percorrer as 5 propriedades, e eu vou explicar o conteúdo() método na próxima etapa.
o “largura” E “altura” propriedades
o largura e altura propriedades calculam dinamicamente a largura e a altura de cada porta individual (que muda de acordo com a largura e altura da imagem de fundo).
Os multiplicadores de 0,1 e 0,95 estão na equação para deixar algum espaço para as margens, entre cada porta e em torno dos lados do Calendário, também.
o “adventMessage” propriedade
o adventMessage propriedade contém o conteúdo das mensagens de alerta, ou seja, as citações e os autores correspondentes que messages.js arquivo detém. o adventMessage propriedade leva uma citação e um autor do mensagens [] matriz, dependendo da data atual.
Para 1 de dezembro o adventMessage propriedade leva o primeiro elemento da matriz externa que é mensagens [0], como matrizes são baseadas em zero em JavaScript.
Pela mesma razão, a cotação para 1º de dezembro está posicionada como mensagens [0] [0] (primeiro elemento da matriz interna) e o autor correspondente pode ser alcançado mensagens [0] [1] (segundo elemento da matriz interna).
o “x”E”y” propriedades
Propriedades x e y segure as posições apropriadas de cada porta que usaremos na próxima etapa para definir topo e esquerda Propriedades CSS. Estes irão complementar o posição: relativa e posição: absoluto Regras de CSS que definimos na Etapa 4 para o contêiner de porta (ul # adventDoors) e as próprias portas (#adventDoors li). Os cálculos podem parecer um pouco intimidantes, mas vamos passar rapidamente por eles.
o x propriedade será usada pelo esquerda Propriedade de posicionamento CSS na próxima etapa (etapa 7). Ele determina em pixels onde uma porta individual precisa ser colocada no eixo x.
Leva a largura da imagem de fundo e deixa uma pequena margem para ela (4%). Em seguida, com a ajuda do operador restante, ele avalia em qual coluna ele será colocado (lembre-se, haverá 4 colunas) e, finalmente, adiciona uma pequena margem (10%) a cada porta individual usando um multiplicador de 1,1..
Da mesma forma, o y propriedade será usada pelo topo Propriedade de posicionamento CSS e, da mesma forma, determina em pixels onde uma porta individual precisa ser colocada no eixo y.
Nós tomamos a altura da imagem de fundo com a ajuda da propriedade de altura do passado em calendário parâmetro (que contém um objeto DOM) e deixa uma margem de 4% em torno dos lados verticais do Calendário.
Então, com a ajuda do método Math.floor (), calculamos em qual linha um objeto Door será (haverá 6 linhas).
Finalmente, adicionamos uma margem de 10% para cada objeto Door multiplicando sua altura usando um multiplicador de 1.1..
Função Porta (calendário, dia) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0,95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0,95; this.adventMessage = 'Dia' + dia + 'do Advento \ n \ n' + '"' + mensagens [dia - 1] [0] + '" \ n \ n \ t' + 'por' + mensagens [dia - 1] [1] + '\ n \ n'; this.x = (0,04 * calendar.width + ((dia - 1)% 4) * (1,1 * this.width)); this.y = - (0,96 * calendar.height - Math.floor ((dia - 1) / 4) * (1,1 * this.height)); this.content = function () …;
Passo 7 - Preencher o “Conteúdo()” Método
É o conteúdo() método que irá exibir nossas portas no navegador. Primeiro de tudo, criamos um novo nó DOM com a ajuda da variável nó que criará o
Como a classe Door será instanciada 24 vezes em um loop for na próxima etapa (etapa 8), isso significa que teremos 24
A propriedade node.id na linha seguinte adiciona um seletor de ID exclusivo a cada elemento da lista (porta). Vamos precisar disso para poder percorrer corretamente os dias na próxima etapa (Etapa 8). Desta forma, a porta 1 terá um id =”porta1 ", A porta 2 terá um id =”porta2 " seletor, etc.
A propriedade node.style.cssText na próxima linha adiciona algumas regras CSS a cada elemento de lista (porta) com a ajuda do style =”… ” Atributo HTML usado para incluir CSS in-line em arquivos HTML. o node.style.cssText property usa as propriedades da classe Door que definimos na etapa anterior (Etapa 6).
Para tornar o nosso objeto Porta clicável, também precisamos adicionar um tag dentro dos elementos da lista. Conseguimos isso com a ajuda do innerNode variável que ligamos como um elemento filho ao elemento de lista apropriado identificado pelo id =”porta [i]” selector (com o [i] sendo o número do dia), usando o método DOM appendChild () como antes.
A propriedade innerHTML na linha seguinte exibe o dia atual (1-24) na parte superior da porta no navegador e também adicionamos um href =”#” Atribuir às nossas tags de âncora por meio da propriedade de href DOM.
Finalmente, na instrução if-else, avaliamos se um objeto Door deve ser ativado ou desativado. Primeiro, examinamos se estamos no 12º mês do ano (dezembro) usando o método getMonth () do objeto Date. Precisamos adicionar 1, porque getMonth () é baseado em zero (janeiro é o mês 0, etc.).
Depois disso, verificamos se a data atual mantida no data atual variável global que definimos no Passo 5 é menor que a dia que o objeto Porta atual representa.
Se não é dezembro, ou o dia representado pela porta dada é maior do que a data atual, a porta deve ser desabilitada, em outros casos ela precisa ser habilitada para que os usuários possam clicar nela, e ver a mensagem relacionada ao Advento.
Se a porta estiver desativada, adicionamos class =”Desativado” seletor para a tag âncora dada com a ajuda da propriedade className. Lembre-se, nós já estilizamos o .Desativado classe com CSS na Etapa 4. Também precisamos definir o atributo de evento HTML onclick para retornar false.
Se a porta estiver no estado habilitado, adicionaremos adventMessage propriedade para uma mensagem de alerta e colocá-la dentro do atributo de evento HTML onclick.
this.content = function () var nó = document.createElement ("li"); document.getElementById ("adventDoors"). appendChild (node); node.id = "porta" + dia; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; topo:" + this.y + "px; left:" + this.x + "px "; var innerNode = document.createElement ("a"); document.getElementById ("door" + day) .appendChild (innerNode); innerNode.innerHTML = dia; innerNode.href = "#"; if ((currentDate.getMonth () + 1) < 12 || currentDate.getDate() < day ) innerNode.className = "disabled"; innerNode.onclick = function() return false; else var adventMessage = this.adventMessage; innerNode.onclick = function() alert(adventMessage); return false; ; Etapa 8 - Inicialize o “Porta” Objetos
Finalmente, precisamos inicializar a classe Door 24 vezes.
Para fazer isso, usamos uma Expressão de Função Chamada Imediatamente que é bastante útil aqui, porque não precisamos de uma variável, pois queremos apenas executar o código dentro da função uma vez..
Nós criamos um portas [] matriz que irá realizar os 24 objetos da porta. Nós percorremos os dias de 1 a 24 (eles serão os 0-23º elementos da matriz [], já que as matrizes são baseadas em zero) e, finalmente, retornamos o conjunto portas [] array incluindo os objetos 24 Door para exibi-los no navegador.
(function () var doors = []; para (var i = 0; i < 24; i++) doors[i] = new Door(myCal, i + 1); doors[i].content(); return doors; )();
- Demonstração
- Fonte de download
