badge Widget de Previsão do Tempo Utilizando Web Component
PROJECTS

Widget de Previsão do Tempo Utilizando Web Component

Já pensou criar um componente e utiliza-lo em qualquer framework, biblioteca JavaScript ou até mesmo páginas sem qualquer tecnologia específica? Sem se preocupar com conflitos de CSS, replicando os comportamentos nativos dos componentes do browser? Aplicando as especificações utilizadas para construir web components tudo isso é possível. Nesta Live Coding você irá aprender de maneira prática a construção de um widget para exibir a previsão do tempo e como utiliza-lo nas principais tecnologias utilizadas no front-end. Serão abordados conceitos de Web components e suas especificações no React e VueJS, e será realizado consumo de APIs rest.

IntermediaryFull-Stack
JavaScript image
JavaScript
Start the challenge

Fill in your data

By clicking on "Start Now", I declare that I accept the Privacy Policies of the Terms of Use da DIO.

What you will develop </>

Objetivo: O objetivo deste projeto prático hands-on é criar um widget de previsão do tempo utilizando web components em JavaScript e aprender a utilizá-lo em diferentes frameworks e bibliotecas do front-end, como React e VueJS.

Descrição: Neste projeto, será construído um componente de previsão do tempo que poderá ser utilizado em diferentes tecnologias, independentemente do framework ou biblioteca utilizada. O foco será em utilizar as especificações de web components para replicar o comportamento nativo dos componentes do browser, sem preocupações de conflitos de CSS.

Durante a Live Coding, será demonstrada de maneira prática a construção do widget de previsão do tempo utilizando web components. Serão abordados conceitos de web components e suas especificações, como a criação de custom elements, shadow DOM e HTML templates.

Além disso, serão apresentadas as formas de utilização do widget em diferentes frameworks e bibliotecas, como React e VueJS. Serão mostradas as melhores práticas e as adaptações necessárias para integrar o componente em cada tecnologia.

Requisitos técnicos:
- Conhecimento intermediário de JavaScript
- Familiaridade com o desenvolvimento front-end
- Ambiente de desenvolvimento para JavaScript
- Acesso a uma API de previsão do tempo (exemplo: OpenWeatherMap)

image
image EDUCAÇÃOimage EMPREGABILIDADEimage COMUNIDADE
image

Torne-se a opção Nº 1 dos recrutadores e conquiste as melhores vagas do mercado tech

From R$ 718,80 per
R$29
,90 /month
in the annual plan
START NOW

Com o o DIO PRO você irá:

  • image fy section

    Acesso ilimitado a todos os bootcamps

    E mais de 40 formações profissionais do zero ao avançado para você dominar as tecnologias nas carreiras front-end, back-end, data & analytics, mobile, cloud & DevOps e se preparar para trabalhar em grandes projetos nas empresas mais inovadoras do mundo

  • image fy section

    Mais de 180 projetos práticos para ganhar experiência

    Libere acesso ilimitado a uma área com mais de 180 projetos e 650 cursos para você aprender, comprovar experiência prática e ter um portfólio de destaque no mercado

  • image fy section

    Fazer parte das maiores e mais inovadoras empresas do mundo

    Certifique suas habilidades, ganhe experiência, suba no ranking de talentos e fique em destaque para recrutadores de empresas como iFood, Santander, Carrefour e outras dezenas que contratam profissionais na DIO.

    image

About DIO

ACADEMIA PME EDUCACAO E CONSULTORIA EM NEGOCIOS LTDA.
CNPJ: 26.965.884/0001-02

DIO is the largest technology continuous learning community in Latin America, which connects the best talent with the most innovative companies in the world.

A complete educational ecosystem for learning in software development, data engineering, software quality and cloud computing.