brunosm13 / curriculo-json

Este é um projeto para exibir um currículo online utilizando Node.js, HTML e Bootstrap. Ele carrega dados dinamicamente a partir de arquivos JSON para construir a página de currículo.
https://brunosmacario.com.br
Other
0 stars 0 forks source link

Gerar as tags dinamicamente sem necessidade de incluir no código da página #9

Closed brunosm13 closed 1 week ago

brunosm13 commented 1 week ago

Utilizar o createElement para essa dinâmica, segue exemplo para ajudar:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Criação Dinâmica de Elementos HTML</title>
<style>
/* Estilos opcionais para a página */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.mx-5 {
    margin-left: 5px;
    margin-right: 5px;
}

.mt-3 {
    margin-top: 3px;
}

.ml-3 {
    margin-left: 3px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.mr-4 {
    margin-right: 4px;
}

.font-weight-normal {
    font-weight: normal;
}

.font-italic {
    font-style: italic;
}

.h1 {
    font-size: 2em;
}
</style>
</head>
<body>

<!-- Conteúdo da página -->
<script>
// JavaScript para criar e adicionar elementos dinamicamente
document.addEventListener('DOMContentLoaded', function() {
    // Criação do hgroup
    let hgroup = document.createElement('hgroup');
    hgroup.setAttribute('class', 'clearfix mx-5 mt-3');

    // Criação do h6
    let h6 = document.createElement('h6');
    h6.setAttribute('class', 'ml-3 float-left');
    h6.setAttribute('id', 'atualizadoEm');
    h6.textContent = 'teste';

    // Criação do p
    let p = document.createElement('p');
    p.setAttribute('class', 'titulo-site float-right text-right h1 mr-4 font-weight-normal font-italic');
    p.setAttribute('id', 'titulo');
    p.textContent = 'teste 2';

    // Adicionar h6 e p ao hgroup
    hgroup.appendChild(h6);
    hgroup.appendChild(p);

    // Adicionar o hgroup ao corpo do documento
    document.body.appendChild(hgroup);
});
</script>

</body>
</html>
brunosm13 commented 1 week ago

Publicado em produção.