English

This Music

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 = 'YOUR 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

Español

This Music

This Music es una aplicación web que permite buscar música en Spotify y videos en YouTube. Los resultados de la 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 los resultados de Spotify y YouTube.
• CSS: Estilos para una interfaz de usuario moderna y responsiva, incluyendo animaciones y diseño adaptativo.
• JavaScript: Funcionalidad para manejar las búsquedas en Spotify y YouTube, mostrar resultados, y manejar botones de carga adicional y reproducción de música.

Estructura del Proyecto

HTML

El archivo HTML contiene:

• Un formulario de búsqueda.
• Contenedores para los 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 responsivo para diferentes tamaños de pantalla.
• Animaciones y efectos para la entrada de búsqueda.
• Estilos específicos para los resultados de búsqueda y tablas.

JavaScript

El archivo JavaScript gestiona:

• La obtención del token de acceso de Spotify y la búsqueda de música.
• La búsqueda de videos en YouTube.
• La actualización dinámica de los resultados en las tablas.
• La gestión de botones para cargar más resultados.
• La reproducción de canciones de Spotify directamente en la página.

Funcionalidades

• Búsqueda: Permite buscar música en Spotify y videos en YouTube.
• Carga de Resultados: Muestra resultados en tablas y permite cargar más resultados mediante 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 repositorio:

   git clone <URL del repositorio>.

2. Abre el proyecto en tu editor de código favorito.

3. Instala las dependencias necesarias (si las hubiera).

4. Abre el archivo index.html en tu navegador para ver la aplicación en acción.

Configuración del API

Spotify

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

YouTube

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

CSS Adicional

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

Créditos

• Fuentes: Google Fonts
• Íconos: Lordicon