Pular para o conteúdo
Bruno Dórea
Todos os posts

6 mins de leitura


Estilizando o Nome do Brinquedo

Explorando HTML e CSS com Lógica de Programação - 2/2


Ri Happy - Front-end do Zero
Ri Happy - Front-end do Zero

Descrição

Ao desenvolver uma página web, utilizamos as tags HTML para organizar o conteúdo e o CSS para estilizar os elementos visuais. Um dos elementos HTML mais frequentes é a tag <h1>, que serve para designar o título principal da página. Para ajustar a cor e o tamanho da fonte desse título diretamente no HTML, podemos aplicar o CSS inline, usando o atributo style, como em: <h1 style="color: blue; font-size: 24px;">Título da Página</h1>. O objetivo deste desafio é criar um programa que, ao receber três entradas (cor, tamanho da fonte e nome do brinquedo), nos retorne e formate o código CSS em uma tag HTML <h1>.

Entrada

A entrada será composta por três strings que representam os nomes dos brinquedos. A função gets() deverá ser utilizada para obter as entradas.

Saída

O programa deverá retornar uma tag <h1> estilizada, contendo o nome do brinquedo. Exemplo: <h1 style="color: red; font-size: 16px;">Carrinho de Controle Remoto</h1>

Exemplos

A tabela abaixo apresenta exemplos com alguns dados de entrada e suas respectivas saídas esperadas. Certifique-se de testar seu programa com esses exemplos e com outros casos possíveis.

EntradaSaída
red
16px<h1 style="color: red; font-size: 16px;">Carrinho de Controle Remoto</h1>
Carrinho de Controle Remoto
EntradaSaída
pink
20px<h1 style="color: pink; font-size: 20px;">Boneca</h1>
Boneca
EntradaSaída
green
18px<h1 style="color: green; font-size: 18px;">Lego</h1>
Lego

Resolução

const cor = gets()
const tamanhoFonte = gets()
const nomeBrinquedo = gets()
 
const resultado = `<h1 style="color: ${cor}; font-size: ${tamanhoFonte};">${nomeBrinquedo}</h1>`
 
print(resultado)

Para encontrar outras soluções, verifique aqui.

Caso encontre algum erro ou tenha sugestões, clique aqui e abra uma issue no Github.