Project Description

This Music is a web application that allows you to search for music on Spotify and videos on YouTube. Search results are displayed in separate tables for each service, with options to view more results and play songs directly on the page.

Project Content

• HTML: The basic structure of the page, including search forms and containers for Spotify and YouTube results.
• CSS: Styles for a modern and responsive user interface, including animations and responsive design.
• JavaScript: Functionality to handle Spotify and YouTube searches, display results, and handle additional upload and music playback buttons.

Project Structure

HTML

The HTML file contains:

• A search form.
• Containers for Spotify and YouTube results.
• Buttons to load more results from each service.

CSS

The CSS file includes:

• Basic styles for body and navigation elements.
• Responsive design for different screen sizes.
• Animations and effects for search input.
• Specific styles for search results and tables.

JavaScript

The JavaScript file handles:

• Spotify access token fetching and music search.
• Searching for YouTube videos.
• The dynamic update of the results in the tables.
• The management of buttons to load more results.
• Play Spotify songs directly on the page.

Functionalities

• Search: Search for music on Spotify and videos on YouTube.
• Load Results: Displays results in tables and allows to load more results via buttons.
• Music Playback: Includes an iframe to play Spotify songs directly on the page.

Installation and Usage

1. Clone repository:

   git clone <URL of the repository>

2. Open the project in your favorite code editor.
3. Install the necessary dependencies (if any).
4. Open the index.html file in your browser to see the application in action.

API Configuration

Spotify

Make sure you have a valid access token. The token is obtained via a Spotify API request.

YouTube

Replace const apiKey = 'API KEY'; with your own YouTube API key to avoid quota limit issues.

Additional CSS

The CSS file provides responsive design, with adaptations for smaller screens and styles for tables and search results. It also includes animations to enhance the user experience.

Credits

• Fonts: Google Fonts
• Icons: Lordicon

Descripción del Proyecto

This Music es una aplicación web que te permite buscar música en Spotify y videos en YouTube. Los resultados de búsqueda se muestran en tablas separadas para cada servicio, con opciones para ver más resultados y reproducir canciones directamente en la página.

Contenido del Proyecto

• HTML: La estructura básica de la página, incluyendo formularios de búsqueda y contenedores para resultados de Spotify y YouTube.
• CSS: Estilos para una interfaz moderna y responsive, incluyendo animaciones y diseño adaptable.
• JavaScript: Funcionalidad para manejar búsquedas en Spotify y YouTube, mostrar resultados y manejar botones adicionales de carga y reproducción de música.

Estructura del Proyecto

HTML

El archivo HTML contiene:

• Un formulario de búsqueda.
• Contenedores para resultados de Spotify y YouTube.
• Botones para cargar más resultados de cada servicio.

CSS

El archivo CSS incluye:

• Estilos básicos para el cuerpo y elementos de navegación.
• Diseño responsive para diferentes tamaños de pantalla.
• Animaciones y efectos para la entrada de búsqueda.
• Estilos específicos para resultados de búsqueda y tablas.

JavaScript

El archivo JavaScript maneja:

• Obtención de token de acceso de Spotify y búsqueda de música.
• Búsqueda de videos en YouTube.
• Actualización dinámica de los resultados en las tablas.
• Gestión de botones para cargar más resultados.
• Reproducción de canciones de Spotify directamente en la página.

Funcionalidades

• Búsqueda: Busca música en Spotify y videos en YouTube.
• Cargar Resultados: Muestra resultados en tablas y permite cargar más resultados a través de botones.
• Reproducción de Música: Incluye un iframe para reproducir canciones de Spotify directamente en la página.

Instalación y Uso

1. Clonar el repositorio:

   git clone <URL del repositorio>

2. Abrir el proyecto en tu editor de código favorito.
3. Instalar las dependencias necesarias (si las hay).
4. Abrir el archivo index.html en tu navegador para ver la aplicación en acción.

Configuración de API

Spotify

Asegúrate de tener un token de acceso válido. El token se obtiene a través de una solicitud a la API de Spotify.

YouTube

Reemplaza const apiKey = 'API KEY';con tu propia clave de API de YouTube para evitar problemas de límite de cuota.

CSS Adicional

El archivo CSS proporciona diseño responsive, con adaptaciones para pantallas más pequeñas y estilos para tablas y resultados de búsqueda. También incluye animaciones para mejorar la experiencia del usuario.

Créditos

• Fuentes: Google Fonts
• Iconos: Lordicon