City Weather API

English

Description

The "City Weather API" is a project developed entirely in pure JavaScript, aimed at providing detailed weather information for any city around the globe. Users can easily access data such as current temperature, maximum and minimum temperatures, humidity, and wind speed. Moreover, one of the project's highlights is its dynamic background, which changes according to the consulted city, offering a unique and immersive experience.

Technologies Used

• JavaScript: Use of the Fetch API for asynchronous requests, advanced DOM manipulation, and destructuring techniques to extract data from API responses.
• Sass: Advanced styling with a CSS preprocessor to create a responsive design and dynamic themes that adapt to the context of the selected city.
• HTML: Page structuring with HTML5, ensuring accessibility and semantics.

Features

• City Search: A search field allows users to find any city worldwide. The search can be performed by pressing the "Enter" key or clicking on the magnifying glass icon next to the input field.
• Detailed Weather Information: Displays data such as current temperature, maximum and minimum temperatures, humidity, and wind speed.
• Responsive and Attractive Design: Animated icons and a color scheme that perfectly matches the weather theme of the project, providing a pleasant user experience.
• Dynamic Background: The website's background dynamically changes to visually reflect the searched city, enriching the user experience.

Challenges and Learnings

This project was a rewarding challenge that allowed me to deepen my knowledge in several areas, including:

• Consuming and manipulating data from external APIs with pure JavaScript.
• Advanced application of asynchronous concepts to handle requests and responses.
• Effective use of Sass to create a responsive and adaptable design.
• Refined DOM manipulation techniques to dynamically update the page content.

Video

Video.mp4

How to Use

To use the "City Weather API", follow the steps below:

1. Clone the repository:

   git clone  https://github.com/EngDann/CityWeather-API.git

2. Access the project folder:

   cd CityWeatherAPI

3. Open the project:

   You can open the project in any web browser of your choice. If you are using Visual Studio Code, you might use the Live Server extension to start a local server and view the project live.

4. Search for a city:

   In the available search field on the page, type the name of the city you wish to check the weather for and press "Enter" or click on the magnifying glass icon to perform the search.

The project does not require the installation of additional dependencies, as it is entirely based on HTML, CSS (Sass), and pure JavaScript.

Contributions

Your contributions are very welcome! If you have suggestions for improving this project, follow these steps to contribute:

1. Fork the project:

   Create a fork of the project to your GitHub account by clicking on the "Fork" button located at the top right corner of the repository page.

2. Clone the fork:

   git clone https://github.com/EngDann/CityWeather-API.git

3. Create a new branch:

   git checkout -b your-branch-name

4. Make your changes:

   Modify, add, or remove whatever you think is necessary in the project.

5. Commit your changes:

   git commit -m "Add a descriptive message here"

6. Push to GitHub:

   git push origin your-branch-name

7. Create a Pull Request:

   On GitHub, go to the original repository page you forked. Click on "Pull Request" and then "New Pull Request". Select your branch and click "Create Pull Request". Add a description of the changes you made and submit.

Please make detailed descriptions in your commits and pull requests to facilitate the review of your contributions.

Credits

• Design and development by EngDann, with the assistance of professor @matheusbattisti.

• Icons provided by Font Awesome.

  Contact

To get in touch with me, feel free to:

• Send an email to [email protected]
• Connect via LinkedIn: Danilo de Melo Ribeiro

License

This project is licensed under the MIT License. This means you are free to use, copy, modify, and distribute the project, provided you give appropriate credit.

Portuguese

Descrição

O "City Weather API" é um projeto desenvolvido inteiramente em JavaScript puro, com o objetivo de fornecer informações climáticas detalhadas de qualquer cidade ao redor do mundo. O usuário pode facilmente obter dados como temperatura atual, temperatura máxima e mínima, umidade e velocidade do vento. Além disso, um dos destaques deste projeto é o background dinâmico, que muda conforme a cidade consultada, proporcionando uma experiência única e imersiva.

Tecnologias Utilizadas

• JavaScript: Utilização da Fetch API para requisições assíncronas, manipulação avançada do DOM, e técnicas de destructuring para extrair dados das respostas das APIs.
• Sass: Estilização avançada com uso de pré-processador CSS para criar um design responsivo e temas dinâmicos que se adaptam ao contexto da cidade selecionada.
• HTML: Estruturação da página com HTML5, garantindo acessibilidade e semântica.

Funcionalidades

• Pesquisa de Cidade: Um campo de pesquisa permite ao usuário encontrar qualquer cidade do mundo. A busca pode ser realizada tanto pressionando a tecla "Enter" quanto clicando no ícone de lupa ao lado do campo de entrada.
• Informações Climáticas Detalhadas: Apresenta dados como temperatura atual, máxima e mínima, umidade e velocidade do vento.
• Design Responsivo e Atraente: Ícones animados e um esquema de cores que combina perfeitamente com o tema climático do projeto, proporcionando uma experiência agradável ao usuário.
• Background Dinâmico: O plano de fundo do site muda dinamicamente para refletir visualmente a cidade pesquisada, enriquecendo a experiência do usuário.

Desafios e Aprendizados

Este projeto representou um desafio gratificante, através do qual pude aprofundar meus conhecimentos em várias áreas, incluindo:

• Consumo e manipulação de dados de APIs externas com JavaScript puro.
• Aplicação avançada de conceitos assíncronos para lidar com requisições e respostas.
• Uso eficaz do Sass para criar um design responsivo e adaptável.
• Técnicas refinadas de manipulação do DOM para atualizar o conteúdo da página dinamicamente.

Video

Video.mp4

Como Usar

Para utilizar o "City Weather API", siga os passos abaixo:

1. Clone o repositório:

   git clone https://github.com/EngDann/CityWeather-API.git

2. Acesse a pasta do projeto:

   cd CityWeatherAPI

3. Abra o projeto:

   Você pode abrir o projeto em qualquer navegador de sua preferência. Se você estiver usando o Visual Studio Code, pode utilizar a extensão Live Server para iniciar um servidor local e visualizar o projeto ao vivo.

4. Pesquise por uma cidade:

   No campo de pesquisa disponível na página, digite o nome da cidade que deseja consultar o clima e pressione "Enter" ou clique no ícone de lupa para realizar a busca.

O projeto não necessita de instalação de dependências adicionais, pois é inteiramente baseado em HTML, CSS (Sass), e JavaScript puro.

Contribuições

Sua contribuição é muito bem-vinda! Se você tem sugestões para melhorar este projeto, siga estes passos para contribuir:

1. Fork o projeto:

   Crie um fork do projeto para a sua conta do GitHub clicando no botão "Fork" localizado no canto superior direito da página do repositório.

2. Clone o fork:

   git clone git clone https://github.com/EngDann/CityWeather-API.git

3. Crie uma nova branch:

   git checkout -b nome-da-sua-branch

4. Faça suas alterações:

   Modifique, adicione ou remova o que você achar necessário no projeto.

5. Commit suas mudanças:

   git commit -m "Adicione uma mensagem explicativa aqui"

6. Push para o GitHub:

   git push origin nome-da-sua-branch

7. Crie um Pull Request:

   No GitHub, vá para a página do repositório original que você fez o fork. Clique em "Pull Request" e depois em "New Pull Request". Selecione a sua branch e clique em "Create Pull Request". Adicione uma descrição das alterações que você fez e envie.

Por favor, faça descrições detalhadas em seus commits e pull requests para facilitar a revisão das suas contribuições.

Créditos

• Design e desenvolvimento por EngDann, com o auxílio do professor @matheusbattisti.
• Ícones fornecidos por Font Awesome.

Contato

Para entrar em contato comigo, sinta-se à vontade para:

• Enviar um e-mail para [email protected]
• Conectar-se via LinkedIn: Danilo de Melo Ribeiro

Licença

Este projeto está sob a licença MIT. Isso significa que você é livre para usar, copiar, modificar e distribuir o projeto, desde que forneça o devido crédito.