[Sugestão] Superestiizando com CSS 2/2 | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

2
respostas

por Paulo Camargo Fernandes

| 12.9k xp | 57 posts

Militar Aposentado

segue a continuação dos códigos com Javascript:

// Seleciona os elementos do DOM
const btnHabilidades = document.getElementById('btnHabilidades');
const btnProjetos = document.getElementById('btnProjetos');
const btnSobre = document.getElementById('btnSobre');
const conteudoDinamico = document.getElementById('conteudoDinamico');

// Função para exibir o conteúdo e depois escondê-lo após 5 segundos
function exibirConteudo(conteudo) {
    conteudoDinamico.innerHTML = conteudo; // Exibe o conteúdo
    conteudoDinamico.style.display = 'block'; // Garante que a div seja visível

    // Configura um timeout para esconder o conteúdo após 5 segundos (5000 ms)
    setTimeout(function () {
        conteudoDinamico.style.display = 'none'; // Esconde a div
    }, 23000); // 23000 milissegundos = 23 segundos
}

// Evento para o botão "Habilidades"
btnHabilidades.addEventListener('click', function () {
    exibirConteudo(`
        <h2>Habilidades</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    `);
});

// Evento para o botão "Projetos"
btnProjetos.addEventListener('click', function () {
    exibirConteudo(`
        <h2>Projetos</h2>
        <ul>
            <li><a href="https://github.com/machado10666/aula-amigo-secreto.git" target="_blank">Amigo Secreto</a></li>
            <li><a href="https://github.com/machado10666/meu-projetobase-HTML.git/projeto2" target="_blank">HTML Básico</a></li>
            <li><a href="https://github.com/machado10666/Carrinho-Compras.git" target="_blank">Carrinho de Compras</a></li>
        </ul>
    `);
});

// Evento para o botão "Sobre mim"
btnSobre.addEventListener('click', function () {
    exibirConteudo(`
        <h2>Sobre mim</h2>
        <p>Olá! Sou Paulo Camargo Fernandes, adoro ler e estudar, tenho 52 anos e estou estudando programação na Alura. Pretendo no futuro me tornar um profissional dedicado e de qualidade na área de programação, Dev front-end ou back-end. Estou estudando JavaScript, HTML e CSS, adorando cada passo dessa jornada!</p>
    `);
    btnSobre.addEventListener('click', function () {
        exibirConteudo(`
            <h2>Sobre mim</h2>
            <p class="texto-grande">Olá! Sou Paulo Camargo Fernandes, adoro ler e estudar, tenho 52 anos e estou estudando programação na Alura. Pretendo no futuro me tornar um profissional dedicado e de qualidade na área de programação, Dev front-end ou back-end. Estou estudando JavaScript, HTML e CSS, adorando cada passo dessa jornada!</p></p>
        `);
    });
});

2 respostas

por Rafaela Petelin Silvério

| 638.8k xp | 1402 posts

Alura Scuba Team Monitora de Fórum

2 dias atrás

Oi, Paulo! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura!

Seu código está bem claro e funcional. Apenas repare que há um tempo de ocultação diferente no setTimeout, onde um trecho usa 5 segundos na explicação e outro está com 23 segundos no código.

Para melhorar a reutilização, você pode evitar repetição de addEventListener. Veja este exemplo:


const botoes = {
    btnHabilidades: `
        <h2>Habilidades</h2>
        <ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>
    `,
    btnProjetos: `
        <h2>Projetos</h2>
        <ul>
            <li><a href="https://github.com/machado10666/aula-amigo-secreto.git" target="_blank">Amigo Secreto</a></li>
            <li><a href="https://github.com/machado10666/meu-projetobase-HTML.git/projeto2" target="_blank">HTML Básico</a></li>
            <li><a href="https://github.com/machado10666/Carrinho-Compras.git" target="_blank">Carrinho de Compras</a></li>
        </ul>
    `,
    btnSobre: `
        <h2>Sobre mim</h2>
        <p>Olá! Sou Paulo Camargo Fernandes, adoro ler e estudar...</p>
    `
};

Object.keys(botoes).forEach(id => {
    document.getElementById(id).addEventListener('click', () => exibirConteudo(botoes[id]));
});

Isso reduz código duplicado e facilita futuras alterações.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

por Paulo Camargo Fernandes

| 12.9k xp | 57 posts

Militar Aposentado

1 dia atrás

Bom dia Rafaela, muito obrigado pela sua opinião, fiz as alterações sugeridas e corrigi os comentários do setTimeout todos para o tempo de 23 segundos. Segue o código HTML corrigido e commitado. Fiz uma página deste projeto no GitHub.: https://machado10666.github.io/Projeto-Portifolio-Teste/ .

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifólio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <header>
        <nav>
            <button id="btnHabilidades">Habilidades</button>
            <button id="btnProjetos">Projetos</button>
            <button id="btnSobre">Sobre mim</button>
        </nav>

        <!-- Área para exibir o conteúdo dinâmico -->
        <div id="conteudoDinamico"></div>
    </header>

    <main>
        <h1>Eleve seu negócio digital a outro nível com um <span>Front-end</span> de qualidade!</h1>
        <p>Olá! Sou Paulo Camargo, estudante de programação e futuro Dev front-end, <strong>estou estudando Javascript, HTML e CSS na Alura</strong>. Portanto, posso ajudar a alavancar o seu negócio. Vamos conversar?</p>
        <a href="https://instagram.com/paulocamargo.psic">Instagram</a>
        <a href="https://github.com/machado10666">Github</a>
    </main>
    
    <img src="paulonet.jpg" alt="Foto Paulo futuro Desenvolvedor" class="profile-image">

    <script src="arquivo.js"></script>

    <!-- Rodapé com o endereço de e-mail e telefone -->
    <footer>
        <p>Entre em contato comigo:</p>
        <ul>
            <li>Telefone: <a href="tel:+5511999999999">+55 (11) 99999-9999</a></li>
            <li>Email: <a href="mailto:fernandesmetal721@hotmail.com">fernandesmetal721@hotmail.com</a></li>
        </ul>
    </footer>
</body>
</html>

arquivo.js

// Seleciona os elementos do DOM
const btnHabilidades = document.getElementById('btnHabilidades');
const btnProjetos = document.getElementById('btnProjetos');
const btnSobre = document.getElementById('btnSobre');
const conteudoDinamico = document.getElementById('conteudoDinamico');

// Função para exibir o conteúdo e depois escondê-lo após 23 segundos
function exibirConteudo(conteudo) {
    conteudoDinamico.innerHTML = conteudo; // Exibe o conteúdo
    conteudoDinamico.style.display = 'block'; // Garante que a div seja visível

    // Configura um timeout para esconder o conteúdo após 23 segundos (23000 ms)
    setTimeout(function () {
        conteudoDinamico.style.display = 'none'; // Esconde a div
    }, 23000); // 23000 milissegundos = 23 segundos
}

// Objeto com o conteúdo de cada botão
const botoes = {
    btnHabilidades: `
        <h2>Habilidades</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    `,
    btnProjetos: `
        <h2>Projetos</h2>
        <ul>
            <li><a href="https://github.com/machado10666/aula-amigo-secreto.git" target="_blank">Amigo Secreto</a></li>
            <li><a href="https://github.com/machado10666/meu-projetobase-HTML.git/projeto2" target="_blank">HTML Básico</a></li>
            <li><a href="https://github.com/machado10666/Carrinho-Compras.git" target="_blank">Carrinho de Compras</a></li>
        </ul>
    `,
    btnSobre: `
        <h2>Sobre mim</h2>
        <p>Olá! Sou Paulo Camargo Fernandes, adoro ler e estudar, tenho 52 anos e estou estudando programação na Alura. Pretendo no futuro me tornar um profissional dedicado e de qualidade na área de programação, Dev front-end ou back-end. Estou estudando JavaScript, HTML e CSS, adorando cada passo dessa jornada!</p>
    `
};

// Adiciona os eventos de clique dinamicamente
Object.keys(botoes).forEach(id => {
    document.getElementById(id).addEventListener('click', () => exibirConteudo(botoes[id]));
});