JavaScript: construindo páginas dinâmicas

Construindo a página - Apresentação

Boas-vindas a este curso de JavaScript para aplicações web! Meu nome é Mônica Hillman e serei a pessoa instrutora que irá te guiar durante toda essa jornada de aprendizado.

Audiodescrição: Mônica se descreve como uma mulher branca de cabelos lisos, longos e castanho-escuros com algumas mechas loiras, sobrancelhas castanho-escuras, e olhos castanho-escuros. Ela usa óculos de grau de armação arredondada prateada e marrom, tem um piercing prateado no septo, usa um delineado marrom nos olhos, e veste uma camiseta azul-marinho. À sua frente, há um microfone preto, e ao fundo, uma parede clara iluminada em tons de roxo, com duas estantes de madeira dispostas verticalmente contendo livros e enfeites.

Em qual projeto vamos trabalhar?

O projeto que desenvolveremos durante o curso será uma lista de compras com a possibilidade de inclusão de itens. Podemos adicionar, por exemplo, o item "Suco de laranja", clicando no botão "Salvar Item". Há a possibilidade de confirmar a compra dos itens: ao clicar em uma checkbox (caixa de seleção) à esquerda do item na "Lista de compras", ele vai para a lista "Comprado".

Teremos também a possibilidade de remover a confirmação; de editar o item da lista, onde conseguimos trocar o nome "Suco de laranja" por "Suco de limão", por exemplo; e de excluir os itens. Quando excluímos, é exibida a seguinte mensagem:

"Sua lista está vazia. Adicione itens a ela para não esquecer nada na próxima compra!"

O que vamos aprender?

Para construir essa aplicação, vamos praticar HTML e CSS na construção da interface, depois utilizaremos o JavaScript para transformar a página em dinâmica.

Para essa transformação será necessário passar por assuntos como: manipulação do DOM; a questão de inserção de funcionalidades através de funções criadas de diversas maneiras, como funções normais, funções anônimas, arrow functions, e assim por diante.

Também construiremos diversos tipos de variáveis, como let e const; utilizaremos o método new Date() para gerar a data e o horário em que os itens da lista foram construídos; e também usaremos import e export para separar as funcionalidades da aplicação, e o tipo module dos scripts que permite essa importação e exportação de funcionalidades.

Reforçamos a importância de aprender tudo isso; é essencial saber transformar páginas web em dinâmicas para, futuramente, aprender frameworks e bibliotecas novas, algo comumente pedido no mercado.

Quais são os pré-requisitos?

Antes de começar este curso, recomendamos ter uma base de lógica de programação e também de HTML e CSS, pois o foco do curso será aprender a linguagem JavaScript mais focada em front-end, ou seja, a conexão do JavaScript com HTML e CSS.

Conclusão

Caso tenha se interessado em aprender todos esses assuntos, aproveite para realizar sua matrícula.

Nos encontramos no próximo vídeo!

Construindo a página - Elementos HTML

No contexto do desenvolvimento front-end, é crucial ter a interface visual pronta antes de inserir o JavaScript e torná-la dinâmica. Para isso, na atividade Preparando o ambiente, disponibilizaremos o link do Figma, onde a interface estará desenhada e onde encontraremos arquivos-base do projeto, como o HTML e o CSS.

Dessa forma, podemos dar continuidade na transformação da interface produzida pela pessoa designer para o código em si, que se transformará na aplicação que iremos disponibilizar para as pessoas usuárias.

Elementos HTML

Vamos começar com o Figma aberto no computador e também com os arquivos adicionados no editor de código da sua preferência. No nosso caso, utilizaremos o Visual Studio Code (VS Code).

Inicializando um servidor local

Com o VS Code aberto, queremos inicializar um servidor local onde poderemos visualizar as alterações em tempo real. Para isso, vamos utilizar a extensão Live Server.

Para ativá-la, podemos clicar no botão "Go Live", no canto inferior direito da tela. Feito isso, basta esperar inicializar a página no navegador. Porém, a inicialização não exibe nada na tela.

Isso ocorre porque, no arquivo HTML base (index.html), não há nenhum elemento construído. Ele tem somente a base, que são as linhas de configuração do projeto.

Construindo o código de index.html

Antes de começar, vamos arrastar a janela do VS Code para a direita, de modo que tanto ele quanto o servidor local fiquem visíveis simultaneamente. Também podemos fechar o explorador de arquivos à esquerda para visualizar melhor o conteúdo do arquivo index.html.

No arquivo index.html, dentro da tag body, vamos iniciar com a tag main. Em seguida, vamos visualizar no Figma quais elementos são necessários para inserir no projeto.

index.html:

<!-- código omitido -->

<body>
    <main>

    </main>
</body>

<!-- código omitido -->

Adicionando uma imagem

Primeiramente, precisamos adicionar uma imagem, então dentro da tag main, colocaremos a tag img recebendo os atributos src="img/bag.png" e alt="sacola de compras". Após o fechamento da tag img, podemos dar continuidade aos próximos elementos do Figma.

<!-- código omitido -->

<main>
    <img src="./img/bag.png" alt="sacola de compras">
</main>

<!-- código omitido -->

Adicionando um campo de digitação

Na sequência, precisamos colocar um campo de digitação. Para isso, logo abaixo da imagem, adicionaremos a tag input com os atributos type="text" e placeholder="Digite o item que deseja adicionar". Para finalizar, incluímos o fechamento da tag input (</input>).

<!-- código omitido -->

<main>
    <img src="./img/bag.png" alt="sacola de compras">
    <input type="text" placeholder="Digite o item que deseja adicionar"></input>
</main>

<!-- código omitido -->

Adicionando um botão

Agora vamos criar um botão (button) com o texto "Salvar item".

<!-- código omitido -->

<main>
    <img src="./img/bag.png" alt="sacola de compras">
    <input type="text" placeholder="Digite o item que deseja adicionar"></input>
    <button>Salvar item</button>
</main>

<!-- código omitido -->

Até o momento, criamos um componente main que terá todo o conteúdo principal da tela. No escopo dessa tag main, colocamos: a imagem da sacola, de acordo com o Figma; um campo de digitação para a pessoa usuária buscar a compra desejada; e um botão de "Salvar item".

Criando um formulário

Por questões de semântica, podemos colocar o botão e o campo de digitação dentro de um formulário. Sendo assim, vamos abrir a tag form abaixo de img e fechá-la abaixo de button.

<!-- código omitido -->

<main>
    <img src="./img/bag.png" alt="sacola de compras">
    <form>
        <input type="text" placeholder="Digite o item que deseja adicionar"></input>
        <button>Salvar item</button>
    </form>
</main>

<!-- código omitido -->

Criando a seção de lista de compras

Em seguida, precisamos definir um título para a primeira seção, de lista de compras. Faremos isso através da tag h2, após o formulário, onde vamos inserir o texto "Lista de compras". Logo abaixo, há um divisor de conteúdo pontilhado, conforme indicado no Figma. Para fazer isso, usamos a tag hr.

<!-- código omitido -->

<main>
    <img src="./img/bag.png" alt="sacola de compras">
    <form>
        <input type="text" placeholder="Digite o item que deseja adicionar"></input>
        <button>Salvar item</button>
    </form>

    <h2>Lista de compras</h2>
    <hr />
</main>

<!-- código omitido -->

Depois, temos a lista de compras de fato, que consiste em: um input do tipo checkbox; um texto com o nome dos itens que precisam ser comprados; a data em que os itens foram inseridos na lista; e as opções de remoção e edição de itens.

Para construir isso, começaremos adicionando um elemento ul após a tag hr, contendo um elemento li. Dentro de li, colocaremos uma div onde vamos inserir a primeira parte do item da lista.

<!-- código omitido -->

<main>
    <img src="./img/bag.png" alt="sacola de compras">
    <form>
        <input type="text" placeholder="Digite o item que deseja adicionar"></input>
        <button>Salvar item</button>
    </form>

    <h2>Lista de compras</h2>
    <hr />

    <ul>
        <li>
            <div>

            </div>
        </li>
    </ul>
</main>

<!-- código omitido -->

A primeira parte é formada pelo input com o type definido como checkbox. Ele não precisa de nenhum texto, pois será apenas uma caixa de seleção. Depois, teremos o nome do produto em um parágrafo (tag p); nesse caso, colocaremos "Ração de gato", por exemplo.

Por questões de posicionamento, é melhor adicionar uma nova div dentro da primeira div, a qual irá conter o input e o p, porque depois precisaremos configurar os botões de edição e remoção.

Os elementos input e p ficarão no início, à esquerda, enquanto os botões ficarão à direita, no final da tela, então pensando na estilização, é interessante fazer essa divisão de containers.

<!-- código omitido -->

<ul>
    <li>
        <div>
            <div>
                <input type="checkbox" />
                <p>Ração de gato</p>
            </div>
        </div>
    </li>
</ul>

<!-- código omitido -->

Em seguida, vamos criar uma nova div — ainda dentro da primeira, mas após a segunda que adicionamos — que irá conter os botões de edição e remoção.

Começaremos pelo primeiro button, onde vamos adicionar uma img com os atributos src="./img/delete.svg" e alt="remover". Abaixo, faremos o mesmo para o button de edição, mas ele irá conter a tag <img src="./img/edit.svg" alt="editar">, com src e alt diferentes.

<!-- código omitido -->

<ul>
    <li>
        <div>
            <div>
                <input type="checkbox" />
                <p>Ração de gato</p>
            </div>
            <div>
                <button>
                    <img src="./img/delete.svg" alt="remover">
                </button>
                <button>
                    <img src="./img/edit.svg" alt="editar">
                </button>
            </div>
        </div>
    </li>
</ul>

<!-- código omitido -->

Assim, colocamos todos os elementos necessários no primeiro container.

Inserindo data e horário de criação dos itens

Em seguida, precisamos colocar o texto correspondente à data e à hora em que foi criado o item na lista. Podemos configurar isso diretamente na tag li, após o último fechamento de div. Dessa forma, futuramente, não precisaremos fazer um posicionamento customizado.

Logo antes do fechamento da li, vamos adicionar um texto através da tag p, que será "Segunda-feira (31/10/2022) às 08:30". Copiamos esse texto do projeto no Figma.

<!-- código omitido -->

<ul>
    <li>
        <div>
            <div>
                <input type="checkbox" />
                <p>Ração de gato</p>
            </div>
            <div>
                <button>
                    <img src="./img/delete.svg" alt="remover">
                </button>
                <button>
                    <img src="./img/edit.svg" alt="editar">
                </button>
            </div>
        </div>
        <p>Segunda-feira (31/10/2022) às 08:30</p>
    </li>
</ul>

<!-- código omitido -->

Visualizando o resultado

Para visualizar se todo o conteúdo adicionado através do código HTML foi realmente inserido no arquivo necessário, podemos abrir o navegador no servidor local criado pela extensão Live Server. Conforme esperado, todos os elementos estão presentes na página.

Conclusão

O próximo passo será estilizar o projeto para ficar mais semelhante ao resultado esperado, conforme o desenho do Figma. No próximo vídeo, começaremos a trabalhar com o código CSS!

Construindo a página - Estilos CSS

Vamos iniciar as estilizações do projeto?

Estilos CSS

Acessando o arquivo styles.css

Para estilizar, é necessário abrir o arquivo styles.css no editor de código. Neste arquivo, existem algumas linhas de código que se referem à remoção dos espaçamentos padrão do navegador, e também à criação de variáveis de cores e fontes que serão utilizadas durante o projeto.

styles.css:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --cor-primaria: #F55B64;
    --cor-secundaria: #C2373F;
    --neutro: #F9F9F9;
    --preto: #131730;
    --fonte-titulo: "Krona One", sans-serif;
    --fonte-texto: 'Numans', sans-serif;
    --degrade-azul: linear-gradient(180deg, #000000 0%, #26327F 100%);
}

A partir dessa base, podemos dar continuidade às estilizações.

Adicionando um plano de fundo

Recomendamos manter o servidor local aberto à esquerda da tela para visualizar em tempo real todas as alterações feitas com CSS.

Ao final do arquivo styles.css, vamos inicializar o seletor body e definir um background com a cor var(--degrade-azul). Com isso, aplicamos o degradê da variável --degrade-azul ao fundo.

/* código omitido */

body {
    background: var(--degrade-azul);
}

Ao fazer isso, o fundo degradê se repete várias vezes na tela, mas queremos que ele apareça uma única vez ocupando toda a altura da tela. Para isso, podemos adicionar a propriedade background-repeat definida como no-repeat. Com essa propriedade, solucionamos a questão da repetição.

/* código omitido */

body {
    background: var(--degrade-azul);
    background-repeat: no-repeat;
}

Agora precisamos inserir a definição de que a tela deve ocupar 100% da altura do monitor utilizado. Para isso, podemos utilizar a propriedade height como 100vh. Dessa forma, usamos a unidade de medida viewport height, que consegue captar o tamanho da tela da pessoa usuária.

/* código omitido */

body {
    background: var(--degrade-azul);
    background-repeat: no-repeat;
    height: 100vh;
}

Centralizando o conteúdo do container principal

Dando continuidade, iremos alinhar ao centro o conteúdo do container principal. Para isso, após a propriedade height no seletor body, vamos adicionar display: flex, flex-direction: column, e align-items: center. Com isso, conseguimos transformar o body em um container flexível.

/* código omitido */

body {
    background: var(--degrade-azul);
    background-repeat: no-repeat;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
}

Quando usamos o container flexível, consequentemente, os elementos ficam em linha um ao lado do outro. Como queremos algo diferente, utilizamos a propriedade flex-direction: column para manter em coluna, ou seja, para dispor os elementos um abaixo do outro.

Por fim, aplicamos a propriedade align-items, responsável por fazer a centralização do elemento filho desse container flexível.

Estilizando o componente main

Agora vamos estilizar o componente main, cujo seletor será adicionado ao final do código, após o fechamento de body. Nesse seletor, inicializaremos com um background-color: var(--neutro). Assim, conseguimos visualizar melhor as alterações feitas, pois o conteúdo do main terá uma cor de fundo diferente do fundo do body, o que destaca tudo o que ele contém.

Na sequência, podemos adicionar um margin-top de 64px para afastar o main do topo da tela. O valor de 64 pixels foi consultado diretamente no Figma.

/* código omitido */

main {
    background-color: var(--neutro);
    margin-top: 64px;
}

Logo abaixo, usaremos as propriedades display: flex e flex-direction: column, o mesmo que fizemos no body ao transformar o container em um container flexível.

Dessa forma, temos acesso a algumas propriedades específicas, como o gap, por exemplo, que iremos definir em 24px para adicionar um espaçamento entre todos os elementos filhos que sejam containers ou que estejam fora de containers. Novamente, o valor foi retirado do projeto no Figma.

/* código omitido */

main {
    background-color: var(--neutro);
    margin-top: 64px;

    display: flex;
    flex-direction: column;
    gap: 24px;
}

O próximo passo é definir a largura do container, isto é, a width como 440px. Feito isso, podemos aplicar um espaçamento interno com a propriedade padding: 56px. Também vamos adicionar um border-radius de 16px e alinhar os itens ao centro com align-items: center.

/* código omitido */

main {
    background-color: var(--neutro);
    margin-top: 64px;

    display: flex;
    flex-direction: column;
    gap: 24px;

    width: 440px;
    padding: 56px;

    align-items: center;
    border-radius: 16px;
}

Já temos um resultado semelhante ao Figma, mas ainda há processos de estilização a realizar.

Estilizando o título da primeira seção

Na sequência, faremos a estilização do título h2 "Lista de compras". Após o fechamento do seletor main, vamos inicializar o seletor de h2 com a font-family definida como var(--fonte-titulo). Depois, faremos um color: var(--cor-primaria). Por fim, logo abaixo, adicionaremos uma font-size de 20px, um line-height de 33px, e um text-align como center.

/* código omitido */

h2 {
    font-family: var(--fonte-titulo);
    color: var(--cor-primaria);
    font-size: 20px;
    line-height: 33px;
    text-align: left;
}

Visualizando o resultado no navegador, notamos que está bem semelhante ao do Figma, e todas as informações, tanto o tipo de fonte, quanto a cor e o tamanho da letra, foram resgatadas do Figma.

Caso queira, você pode comparar o que digitamos de acordo com o que a pessoa designer definiu no layout do Figma.

Estilizando o divisor da primeira seção

Agora vamos começar a estilizar o divisor hr, logo após o seletor do h2.

Primeiro, removeremos as bordas dele com border: none. Depois definiremos border-bottom: 3px dotted var(--cor-primaria) e margin-bottom: 24px. Por fim, vamos definir width como 100% do divisor de conteúdo.

/* código omitido */

hr {
    border: none;
    border-bottom: 3px dotted var(--cor-primaria);
    margin-bottom: 24px;
    width: 100%;
}

Quando adicionamos width: 100%, o divisor aparece na tela corretamente. No código, removemos as bordas do hr e colocamos somente uma borda inferior para ele ficar pontilhado.

Além disso, definimos a cor da borda como --cor-primaria. Em seguida, utilizamos a propriedade margin-bottom para fazer o espaçamento entre o divisor de conteúdo e o conteúdo da lista de fato.

Estilizando o parágrafo da primeira seção

Podemos dar continuidade para fazer as estilizações do parágrafo. Após o seletor de hr, vamos selecionar a tag p e adicionar, primeiramente, a font-family como --fonte-texto.

Feito isso, vamos definir a propriedade font-size como 18px, depois o font-weight como 400, o line-height como 24px, e o text-align como left.

/* código omitido */

p {
    font-family: var(--fonte-texto);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}

Dessa forma, conseguimos aplicar alguns estilos no texto, como o tipo da fonte, o tamanho, o peso, e também o alinhamento do texto no container.

Ajustes finais

Adicionamos um alinhamento ao título com a propriedade text-align: center, mas podemos observar que o título não ficou alinhado à esquerda conforme esperado, pois foi considerada a estilização de main.

Para solucionar isso, podemos recortar ("Ctrl + X") as tags h2 e hr adicionadas no arquivo index.html, e mover para o escopo da tag ul, antes de li.

index.html:

<!-- código omitido -->

<ul>
    <h2>Lista de compras</h2>
    <hr />
    <li>
        <div>
            <div>
                <input type="checkbox" />
                <p>Ração de gato</p>
            </div>
            <div>
                <button>
                    <img src="./img/delete.svg" alt="remover">
                </button>
                <button>
                    <img src="./img/edit.svg" alt="editar">
                </button>
            </div>
        </div>
        <p>Segunda-feira (31/10/2022) às 08:30</p>
    </li>
</ul>

<!-- código omitido -->

Dessa maneira, ele pega algumas estilizações do ul, e não que determinamos agora no main. Assim, o texto fica à esquerda e ocupa 100% do espaço da lista, ficando mais condizente com o desenho do Figma.

Conclusão

Ainda temos muitas estilizações para fazer. Daremos continuidade no próximo vídeo!

Sobre o curso JavaScript: construindo páginas dinâmicas

O curso JavaScript: construindo páginas dinâmicas possui 131 minutos de vídeos, em um total de 52 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Construindo a página
• Integrando ao JavaScript
• Gerando dados dinâmicos
• Inserindo feedbacks visuais
• Interagindo com os itens