https://github.com/devchris03/weather

Consulta el clima de tu pais
https://github.com/devchris03/weather

accessibility api css html javascript responsive-design weather-api

Last synced: about 1 month ago
JSON representation

Consulta el clima de tu pais

• Host: GitHub
• URL: https://github.com/devchris03/weather
• Owner: devchris03
• Created: 2024-11-04T22:40:19.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-06T20:27:59.000Z (about 2 months ago)
• Last Synced: 2024-11-06T21:29:47.039Z (about 2 months ago)
• Topics: accessibility, api, css, html, javascript, responsive-design, weather-api
• Language: JavaScript
• Homepage: https://devchris03.github.io/weather/
• Size: 1.01 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Proyecto de Clima 🌦️

Este proyecto permite consultar el clima de una ciudad específica en un país determinado mediante el uso de la API de OpenWeather. La interfaz cuenta con un formulario en el que el usuario debe ingresar una ciudad y seleccionar un país para obtener los datos de clima en tiempo real. El proyecto ha sido desarrollado utilizando **HTML**, **CSS** y **JavaScript** y es totalmente adaptativo para dispositivos móviles y de escritorio.

## Funcionalidades

- **Formulario de consulta:** 

  - El usuario debe ingresar el nombre de una ciudad y seleccionar el país correspondiente.

  - Si alguno de estos campos está vacío, se mostrará una alerta indicando que ambos son obligatorios.

- **Consulta de datos climáticos:** 

  - Si la ciudad y el país ingresados coinciden con datos disponibles en la API de OpenWeather, se mostrará:

    - Nombre de la ciudad.

    - Imagen referencial del clima actual.

    - Temperatura actual.

    - Temperatura máxima y mínima.

  - Si no hay coincidencias para la ciudad y el país ingresados, se mostrará una alerta indicando que no se encontraron resultados.

##  Tecnologías utilizadas

- ![HTML:](https://img.shields.io/badge/-HTML-05122A?style=flat&logo=HTML5)  para la estructura de la página.

- ![CSS](https://img.shields.io/badge/-CSS-05122A?style=flat&logo=CSS3&logoColor=1572B6)  para el diseño visual y la adaptabilidad en diferentes dispositivos.

- ![JavaScript](https://img.shields.io/badge/-JavaScript-05122A?style=flat&logo=javascript)  para la lógica de la aplicación y la integración con la API de OpenWeather.

- Otras herramientas: ![Git](https://img.shields.io/badge/-Git-05122A?style=flat&logo=git)  ![GitHub](https://img.shields.io/badge/-GitHub-05122A?style=flat&logo=github)  ![Visual Studio Code](https://img.shields.io/badge/-Visual%20Studio%20Code-05122A?style=flat&logo=visual-studio-code&logoColor=007ACC) 

# Demo: 

![703_1x_shots_so](https://github.com/user-attachments/assets/3053b784-40ac-4655-b29c-adcbea6ac046)

## Contáctame - mis redes:

:nazar_amulet: Linkedin: [Christina Pascual](https://www.linkedin.com/in/christina-pascual/)

:nazar_amulet: Twitter: [Christina Pascual](https://x.com/devchris03)

:nazar_amulet: Tiktok: [devChris03](https://www.tiktok.com/@devchris03?_t=8p5TriBHr3G&_r=1)

:nazar_amulet: Gmail: [Christina Pascual]([email protected])