Projetos JavaScript: Elementos DOM Interativos Dinâmicos

Aprimore suas habilidades em JavaScript com projetos envolventes

Aumente seu conhecimento em JavaScript e interações com o DOM trabalhando em projetos empolgantes que envolvem a criação de componentes úteis e muito mais.

Visão geral do curso

Pratique e aprenda mais sobre JavaScript enquanto embarca em uma jornada para criar cinco projetos incríveis usando JavaScript puro. Esses mini projetos ajudarão você a explorar e aprimorar suas habilidades, permitindo que você desenvolva funcionalidades e interações incríveis para usuários da web. Ao adicionar esses projetos ao seu portfólio, você pode se divertir enquanto aprende e se desafia a criar suas próprias versões. O curso inclui código-fonte para ajudar você a começar.

Este curso é perfeito para desenvolvedores web iniciantes e intermediários que desejam construir projetos divertidos e úteis usando HTML, CSS e JavaScript. Esses mini projetos exclusivos de codificação são exclusivos deste curso, oferecendo a você a oportunidade de aprimorar suas habilidades em HTML, CSS e JavaScript.

Projeto #1: Gerador de Lorem Ipsum em JavaScript

Neste projeto, você aprenderá sobre:

• Adicionar EventListeners
• DOMContentLoaded quando a página é carregada
• Métodos de string como toUpperCase()
• Condições e Loops (loops for e while)
• Método Math do JavaScript - random()
• DOM document createElement(), append(), querySelector()
• Métodos de array sort()

Projeto #2: Paginação a partir de Dados JSON

Neste projeto, você aprenderá sobre:

• Adicionar EventListeners para interação
• DOMContentLoaded quando a página é carregada
• Operador ternário
• Método Fetch
• Dados JSON - como Objetos JavaScript
• DOM document createElement(), append(), querySelector() - elementos innerHTML e textContent
• Desabilitar botões no DOM - classList.add()
• Criar elementos HTML e criar conteúdo interativo dinamicamente

Projeto #3: Componente de Carrossel de Imagens em JavaScript

Neste projeto, você aprenderá sobre:

• Alterar conteúdo na página com Intervals setInterval()
• Selecionar e manipular elementos da página DOM com JavaScript querySelector() classList.add() append() remove()
• Criar conteúdo interativo na página - addEventListener()
• Praticar conceitos fundamentais comuns de JavaScript - forEach() push() em arrays Array.length
• Desabilitar botões no DOM - classList.add()
• Criar elementos HTML e criar conteúdo interativo dinamicamente

Projeto #4: Construtor de Lista Dinâmica em JavaScript com Download e Salvamento

Neste projeto, você aprenderá sobre:

• Como gerar um arquivo de texto com JavaScript a partir de um conteúdo de string
• DOM document createElement(), append(), querySelector() - elementos innerHTML e textContent
• Adicionar interação do usuário DOM document createElement()
• Atualizações de elementos com setAttribute() style.display()
• Adicionar e remover elementos da página com os métodos appendChild() removeChild()
• Verificar classes de elementos com classList.contains()
• Definir foco em um elemento com focus()
• createTextNode() e createElement()
• Salvar itens no armazenamento local localStorage.setItem() localStorage.getItem()
• Converter objeto em string JSON.stringify() converter string em objeto JSON.parse()
• encodeURIComponent() para criar um arquivo de texto dinamicamente e definir o clique de download do hiperlink

Projeto #5: Componente de Linha do Tempo Dinâmica em JavaScript

Neste projeto, você aprenderá sobre:

• DOM document createElement(), append(), querySelector() - elementos innerHTML e textContent
• Mover elementos usando estilização
• Conteúdo interativo com event listeners
• Gerar conteúdo da página a partir de um objeto de dados JSON
• Métodos JavaScript querySelector() addEventListener() forEach() classList.add() classList.remove() parseInt() Number() createElement() append()
• Gerar conteúdo da página aleatoriamente a partir de caracteres de string
• Mover elementos na página usando Transform X
• Adicionar estilização e JavaScript para conteúdo dinâmico e interativo

O código-fonte está incluído para todos os projetos, permitindo que você construa suas próprias versões. O curso é ministrado por um instrutor experiente com mais de 20 anos de experiência no mundo real, pronto para responder a todas as suas perguntas. Junte-se agora e divirta-se construindo suas próprias versões desses projetos!

O que você aprenderá

• Como aplicar código JavaScript a mini projetos
• Praticar JavaScript enquanto codifica projetos mini divertidos
• Explorar como interagir com o Documento JavaScript para manipular elementos na página
• Criar conteúdo dinâmico com JavaScript
• Criar conteúdo interativo na página com JavaScript
• Fazer download de arquivos com JavaScript - Interação com o DOM - Métodos comuns de JavaScript