Weather-find

O trecho de código dentro das tags é o código HTML que compõe a estrutura visual do componente. Ele contém um container , uma transição e um card que exibe a previsão do tempo da cidade pesquisada. O componente também inclui um rodapé que contém um campo de texto para o usuário inserir o nome da cidade que deseja pesquisar.

O trecho de código dentro das tags <script> é o código JavaScript que controla o comportamento do componente. Ele importa a biblioteca Axios para fazer a chamada à API de previsão do tempo e também importa algumas imagens para exibir o ícone correspondente ao clima atual.

O componente tem um objeto de dados que contém as informações do estado atual do componente, como a cidade pesquisada, a linguagem do resultado da previsão do tempo, a imagem do ícone de clima atual, os dados da previsão do tempo, e as imagens dos ícones de clima.

O componente também tem um método chamado getWeather() que faz a chamada à API de previsão do tempo e atualiza as informações do estado do componente com os dados da previsão do tempo e a imagem do ícone correspondente. O método também inclui uma estrutura de controle try-catch para lidar com possíveis erros na chamada da API.

O componente também tem um watcher que observa o valor do campo de texto city e redefina os dados de previsão do tempo para null caso o campo de texto esteja vazio.

O trecho de código dentro das tags <style> contém algumas regras de estilo para a transição da animação e a animação de flutuação do ícone de clima atual.

# yarn
yarn

# npm
npm install

# pnpm
pnpm install

Compiles and hot-reloads for development

# yarn
yarn dev

# npm
npm run dev

# pnpm
pnpm dev

Compiles and minifies for production

# yarn
yarn build

# npm
npm run build

# pnpm
pnpm build

Customize configuration

See Configuration Reference.