Gerador de citações aleatórias usando HTML, CSS e JavaScript
No desenvolvimento de sites modernos, as citações são observadas em qualquer lado da página da web. Essas citações aleatórias são geradas com a ajuda de um gerador de cotação aleatória. O gerador de cotação aleatório é criado com a ajuda de HTML, CSS e JavaScript. As citações são usadas para deixar os usuários mais focados e com uma mente de aderência.
Tendo em vista a importância das citações nas páginas da web, o guia de hoje ajudará você a criar um gerador de cotação aleatória usando HTML, CSS e JavaScript.
Como criar um gerador de cotação aleatória?
É prática melhor usar o gerador de cotação aleatória em sua página da web. O funcionamento de um gerador de cotação aleatório é simples de entender. Ele extrai uma citação aleatoriamente sempre pressionando um clique e apresentando -a na janela do navegador. Além disso, os usuários podem recuperar/extrair citações de diferentes fontes, como matrizes, bancos de dados ou APIs.
Exemplo
Um exemplo é adaptado para gerar um gerador de cotação aleatória, utilizando o HTML, CSS e JavaScript.
Para uma melhor compreensão, explicamos explicitamente os códigos HTML, CSS e JavaScript.
Html
O código de exemplo a seguir refere -se à parte HTML do gerador de cotação aleatória.
rel = "STILELES SHEET"/>
Neste código, a descrição está listada aqui:
- Primeiro de tudo, as fontes do Google são importadas e um link para uma folha de estilo externo (cujo código é explicado abaixo) também é colocado.
- Uma área/contêiner é especificada para exibir a cotação aleatória por Tag.
- Depois disso, o parágrafo A tag é usada para passar a citação como um valor para eu ia.
- O e As tags são "Autor" e "citação" do ID associado.
- Um botão chamado “Aperte o botão" é criado.
- Por fim, o “.JS”(Cujo código é explicado abaixo) está vinculado a este arquivo html.
Usando CSS
O objetivo de adicionar um arquivo CSS é dar uma aparência atraente e atraente para a interface.
*preenchimento: 2;
margem: 3;
Timing de caixa: caixa de fronteira;
Fonte-família: "Poppins", sem serrif;
.botão de contêiner
Background-Color: #ffffff;
fronteira: nenhuma;
preenchimento: 15px 45px;
Radio de fronteira: 5px;
Size da fonte: 18px;
peso-fonte: 600;
cor verde;
Cursor: Ponteiro;
corpo
Background-Color: White;
A descrição do código é a seguinte:
- O preenchimento, margem, tamanho de caixa, e família de fontes são utilizados para todos os elementos HTML.
- Depois disso, algumas propriedades são atribuídas ao botão, como Tamanho da fonte, cor, cor de fundo, etc.
- finalmente, o fundo A cor do corpo é selecionada para ser branca para visibilidade dos usuários.
JavaScript
O código JavaScript associado ao arquivo HTML é fornecido abaixo:
Deixe a citação = documento.getElementById ("Quote");Deixe o autor = documento.getElementById ("autor");
Deixe btn = documento.getElementById ("btn");
const url = "https: // API.citável.io/aleatório ";
Vamos getq = () =>
buscar (url)
.então ((dados) => dados.JSON ())
.então ((item) =>
citar.INNERTEXT = Item.contente;
autor.INNERTEXT = Item.autor;
);
;
janela.addEventListener ("load", getq);
btn.addEventListener ("clique", getq);
A descrição do código é mencionada abaixo:
- Em primeiro lugar, três variáveis (citar, autor e btn) são utilizados para vincular -se a Html elementos.
- Depois disso, uma API é importada para representar cotações aleatórias.
- Além disso, o getw () o método é usado para buscar o conteúdo de um citar com um Autor's nome.
- finalmente, o addEventListener A propriedade é empregada pela aprovação de um clique valor como argumento.
Saída
A saída mostra as citações aleatórias no navegador empregando HTML, CSS e JavaScript. Pressionando cada vez, uma nova cotação aleatória é gerada no navegador.
Conclusão
A gerador de cotação aleatória é desenvolvido utilizando HTML, CSS, e JavaScript. O Html O arquivo fornece a área/contêiner específica para exibir uma cotação. O papel de um CSS O arquivo é fornecer propriedades de estilo, como cor de fonte, cor de fundo, tamanho de texto, etc. Para tornar o gerador atraente/atraente para os usuários. Além disso, JavaScript fornece as operações lógicas para extrair a cotação aleatória. Aqui, você aprendeu que todas essas etapas são dadas em uma ordem classificada.