Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jmatochepascual/clima-js

Consulta del Clima
https://github.com/jmatochepascual/clima-js

css3 fetch-api html5 javascript tailwind-css

Last synced: 26 days ago
JSON representation

Consulta del Clima

Host: GitHub
URL: https://github.com/jmatochepascual/clima-js
Owner: JmAtochePascual
Created: 2024-05-14T05:16:48.000Z (9 months ago)
Default Branch: main
Last Pushed: 2024-08-04T12:21:25.000Z (6 months ago)
Last Synced: 2024-11-08T02:50:08.391Z (3 months ago)
Topics: css3, fetch-api, html5, javascript, tailwind-css
Language: JavaScript
Homepage: https://jmatochepascual.github.io/Clima-Js/
Size: 141 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# ☀️ Consulta del Clima

Esta aplicación web te permite consultar el clima de cualquier ciudad utilizando la API de OpenWeatherMap. Con una interfaz sencilla, puedes ingresar el nombre de una ciudad y un país para obtener información meteorológica actualizada.

## 🎯 Contenido

1. 📝[Descripción](#descripción)
2. 🛠️[Tecnologías y Herramientas](#tecnologías-y-herramientas)
3. 🚀[Estructura del Proyecto](#estructura-del-proyecto)
4. 🧑‍💻[Uso](#uso)
5. 📌[Instalación](#instalación)
6. 🏗️[Contribución](#contribución)
7. ✨[Licencia](#licencia)
8. 🙈[Imagen de Referencia](#imagen-de-referencia)
9. 🌐[Ver Proyecto en la WEB](#ver-proyecto-en-la-web)

## Descripción

## Características

- **Selección de Elementos del DOM:** Permite seleccionar elementos del DOM utilizando querySelector.
- **Validación de Formularios:** Valida la entrada del usuario para asegurar que los campos no estén vacíos.
- **Consulta a API:** Realiza consultas a la API de OpenWeatherMap para obtener datos meteorológicos.
- **Mostrar Clima:** Muestra la información del clima en la interfaz, incluyendo temperatura actual, máxima y mínima.
- **Alertas Personalizadas:** Muestra alertas en caso de errores, como campos vacíos o ciudad no encontrada.
- **Spinner de Carga:** Muestra un spinner de carga mientras se realiza la consulta a la API.

## Tecnologías y Herramientas

- **HTML:** Estructura de la página.
- **CSS:** Estilos de la página.
- **JavaScript:** Lógica de la aplicación, incluyendo manipulación del DOM, validación y consulta a API.

## Estructura del Proyecto

- **css/**: Carpeta con los estilos.
- **js/**: Carpeta con la lógica del proyecto.
- `app.js`: Archivo principal con la lógica de la aplicación.
- **index.html**: Página principal.

## Uso

1. Clona el repositorio: `git clone [URL del repositorio]`
2. Navega a la carpeta del proyecto: `cd [nombre del proyecto]`
3. Abre el archivo `index.html` en un navegador de tu elección.

## Instalación

No se requiere instalación adicional para utilizar este proyecto.

## Contribución

Si estás interesado en contribuir al proyecto, por favor sigue estos pasos:

1. Haz un fork del repositorio.
2. Crea una nueva rama para tu característica (`git checkout -b mi-nueva-característica`).
3. Compromete tus cambios (`git commit -am 'Añadir alguna característica'`).
4. Empuja la rama (`git push origin mi-nueva-característica`).
5. Abre un pull request.

## Licencia

Este proyecto está bajo la licencia [MIT](https://opensource.org/licenses/MIT).

## Imagen de Referencia

![Imagen de Referencia](https://i.postimg.cc/BvDqTdBv/Clima-js.png)

## Ver Proyecto en la WEB

Puedes ver el proyecto en funcionamiento [aquí](https://jmatochepascual.github.io/Clima-Js/).