Tema para preguntas random a Chatgpt 🤖

  • Autor Autor Carlos Arreola
  • Fecha de inicio Fecha de inicio
Puko dijo:
No funciona, puedes revisar los nombres o id. Mi codigo html es el siguiente:
HTML: 
html:
<div id='searchx'>
<span class='icono-busqueda'>🔍</span>
</div>

<div class='modal' id='modal-busqueda'>
<div class='modal-contenido'>
<span class='cerrar-modal'> x </span>
<h2>Buscar en el blog</h2>
<form id='form-busqueda'>
<input id='input-busqueda' placeholder='Buscar...' type='text'/>
<button id='boton-busqueda' type='submit'>Buscar</button>
</form>
<div id='resultados-busqueda'/>
<button id='boton-cargar-mas' type='button'>Cargar más entradas</button>
</div>
</div>
Hacer clic para expandir...
Sorry I couldn't contact the ChatGPT think tank 🙁
 
@BotBeta cuales son las mejores 20 series actuales?
 
BotBeta dijo:
Sorry I couldn't contact the ChatGPT think tank 🙁
Hacer clic para expandir...
¿ya no corriges codigos js y html ? 😕
si tu respuesta es 'si', corrige mi codigo en mi mensaje anterior
 
Puko dijo:
¿ya no corriges codigos js y html ? 😕
si tu respuesta es 'si', corrige mi codigo en mi mensaje anterior
Hacer clic para expandir...
¡Claro! Revisando el código HTML que me compartiste, parece que la única corrección que necesitas hacer es agregar un elemento `ul` al elemento `div` con `id="resultados-busqueda"`. Tu código HTML debería ser el siguiente:

```
<div id='searchx'>
<span class='icono-busqueda'>🔍</span>
</div>

<div class='modal' id='modal-busqueda'>
<div class='modal-contenido'>
<span class='cerrar-modal'> x </span>
<h2>Buscar en el blog</h2>
<form id='form-busqueda'>
<input id='input-busqueda' placeholder='Buscar...' type='text'/>
<button id='boton-busqueda' type='submit'>Buscar</button>
</form>
<ul id='resultados-busqueda'></ul>
<button id='boton-cargar-mas' type='button'>Cargar más entradas</button>
</div>
</div>
```

Respecto al código JavaScript que compartiste anteriormente, la corrección que debes realizar es dentro de la función `cargarEntradas()`. En lugar de usar `innerHTML +=`, utiliza `insertAdjacentHTML('beforeend',...)` para evitar sobrescribir todo el contenido del elemento `ul` en cada iteración del ciclo. Además, debes poner la etiqueta de cierre de la `ul` dentro del `div` de `id="resultados-busqueda"`. Tu código JavaScript debería ser el siguiente:

```
var URLFeed = '/feeds/posts/default?alt=json&max-results=5';

function cargarEntradas() {
botonCargarMas.style.display = "none";
fetch(URLFeed).then(function(response) {
return response.json();
}).then(function(data) {
var entradas = data.feed.entry.slice(0, 5);
if (entradas.length > 0) {
entradas.forEach(function(entrada) {
var urlEntrada = entrada.link[entrada.link.length - 1].href;
var tituloEntrada = entrada.title.$t;
var contenidoEntrada = entrada.content.$t;
var fechaEntrada = new Date(entrada.published.$t);
var fecha = fechaEntrada.getDay() + '/' + fechaEntrada.getMonth() + '/' + fechaEntrada.getFullYear();
if (busquedaPalabra !== '' && contenidoEntrada.toLowerCase().indexOf(busquedaPalabra.toLowerCase()) === -1) {
return;
}
resultadosBusqueda.insertAdjacentHTML('beforeend', '<li><a href="'+ urlEntrada +'" target="_blank">' + tituloEntrada + '</a></li>');
});
if (data.feed.entry.length > 5) {
botonCargarMas.style.display = "block";
}
} else {
resultadosBusqueda.innerHTML = '<li>No hay resultados para la búsqueda.</li>';
}
});
}

var formularioBusqueda = document.querySelector('#form-busqueda');
var entradaBusqueda = document.querySelector('#input-busqueda');
var botónBusqueda = document.querySelector('#boton-busqueda');
var resultadosBusqueda = document.querySelector('#resultados-busqueda');
var busquedaPalabra = '';

formularioBusqueda.addEventListener('submit', function(evento) {
evento.preventDefault();
resultadosBusqueda.innerHTML = '';
busquedaPalabra = entradaBusqueda.value.trim();
var URLBusqueda = '/feeds/posts/default/-/' + encodeURIComponent(busquedaPalabra) + '?alt=json&max-results=5';
URLFeed = URLBusqueda;
cargarEntradas();
});

botónBusqueda.addEventListener('click', function() {
formularioBusqueda.submit();
});
```

Espero que eso solucione tu problema. ¡Buena suerte!
 
BotBeta dijo:
¡Claro! Revisando el código HTML que me compartiste, parece que la única corrección que necesitas hacer es agregar un elemento `ul` al elemento `div` con `id="resultados-busqueda"`. Tu código HTML debería ser el siguiente:

```
<div id='searchx'>
<span class='icono-busqueda'>🔍</span>
</div>

<div class='modal' id='modal-busqueda'>
<div class='modal-contenido'>
<span class='cerrar-modal'> x </span>
<h2>Buscar en el blog</h2>
<form id='form-busqueda'>
<input id='input-busqueda' placeholder='Buscar...' type='text'/>
<button id='boton-busqueda' type='submit'>Buscar</button>
</form>
<ul id='resultados-busqueda'></ul>
<button id='boton-cargar-mas' type='button'>Cargar más entradas</button>
</div>
</div>
```

Respecto al código JavaScript que compartiste anteriormente, la corrección que debes realizar es dentro de la función `cargarEntradas()`. En lugar de usar `innerHTML +=`, utiliza `insertAdjacentHTML('beforeend',...)` para evitar sobrescribir todo el contenido del elemento `ul` en cada iteración del ciclo. Además, debes poner la etiqueta de cierre de la `ul` dentro del `div` de `id="resultados-busqueda"`. Tu código JavaScript debería ser el siguiente:

```
var URLFeed = '/feeds/posts/default?alt=json&max-results=5';

function cargarEntradas() {
botonCargarMas.style.display = "none";
fetch(URLFeed).then(function(response) {
return response.json();
}).then(function(data) {
var entradas = data.feed.entry.slice(0, 5);
if (entradas.length > 0) {
entradas.forEach(function(entrada) {
var urlEntrada = entrada.link[entrada.link.length - 1].href;
var tituloEntrada = entrada.title.$t;
var contenidoEntrada = entrada.content.$t;
var fechaEntrada = new Date(entrada.published.$t);
var fecha = fechaEntrada.getDay() + '/' + fechaEntrada.getMonth() + '/' + fechaEntrada.getFullYear();
if (busquedaPalabra !== '' && contenidoEntrada.toLowerCase().indexOf(busquedaPalabra.toLowerCase()) === -1) {
return;
}
resultadosBusqueda.insertAdjacentHTML('beforeend', '<li><a href="'+ urlEntrada +'" target="_blank">' + tituloEntrada + '</a></li>');
});
if (data.feed.entry.length > 5) {
botonCargarMas.style.display = "block";
}
} else {
resultadosBusqueda.innerHTML = '<li>No hay resultados para la búsqueda.</li>';
}
});
}

var formularioBusqueda = document.querySelector('#form-busqueda');
var entradaBusqueda = document.querySelector('#input-busqueda');
var botónBusqueda = document.querySelector('#boton-busqueda');
var resultadosBusqueda = document.querySelector('#resultados-busqueda');
var busquedaPalabra = '';

formularioBusqueda.addEventListener('submit', function(evento) {
evento.preventDefault();
resultadosBusqueda.innerHTML = '';
busquedaPalabra = entradaBusqueda.value.trim();
var URLBusqueda = '/feeds/posts/default/-/' + encodeURIComponent(busquedaPalabra) + '?alt=json&max-results=5';
URLFeed = URLBusqueda;
cargarEntradas();
});

botónBusqueda.addEventListener('click', function() {
formularioBusqueda.submit();
});
```

Espero que eso solucione tu problema. ¡Buena suerte!
Hacer clic para expandir...

Cual es tu función en forobeta?
 
BotBeta dijo:
¡Claro! Revisando el código HTML que me compartiste, parece que la única corrección que necesitas hacer es agregar un elemento `ul` al elemento `div` con `id="resultados-busqueda"`. Tu código HTML debería ser el siguiente:

```
<div id='searchx'>
<span class='icono-busqueda'>🔍</span>
</div>

<div class='modal' id='modal-busqueda'>
<div class='modal-contenido'>
<span class='cerrar-modal'> x </span>
<h2>Buscar en el blog</h2>
<form id='form-busqueda'>
<input id='input-busqueda' placeholder='Buscar...' type='text'/>
<button id='boton-busqueda' type='submit'>Buscar</button>
</form>
<ul id='resultados-busqueda'></ul>
<button id='boton-cargar-mas' type='button'>Cargar más entradas</button>
</div>
</div>
```

Respecto al código JavaScript que compartiste anteriormente, la corrección que debes realizar es dentro de la función `cargarEntradas()`. En lugar de usar `innerHTML +=`, utiliza `insertAdjacentHTML('beforeend',...)` para evitar sobrescribir todo el contenido del elemento `ul` en cada iteración del ciclo. Además, debes poner la etiqueta de cierre de la `ul` dentro del `div` de `id="resultados-busqueda"`. Tu código JavaScript debería ser el siguiente:

```
var URLFeed = '/feeds/posts/default?alt=json&max-results=5';

function cargarEntradas() {
botonCargarMas.style.display = "none";
fetch(URLFeed).then(function(response) {
return response.json();
}).then(function(data) {
var entradas = data.feed.entry.slice(0, 5);
if (entradas.length > 0) {
entradas.forEach(function(entrada) {
var urlEntrada = entrada.link[entrada.link.length - 1].href;
var tituloEntrada = entrada.title.$t;
var contenidoEntrada = entrada.content.$t;
var fechaEntrada = new Date(entrada.published.$t);
var fecha = fechaEntrada.getDay() + '/' + fechaEntrada.getMonth() + '/' + fechaEntrada.getFullYear();
if (busquedaPalabra !== '' && contenidoEntrada.toLowerCase().indexOf(busquedaPalabra.toLowerCase()) === -1) {
return;
}
resultadosBusqueda.insertAdjacentHTML('beforeend', '<li><a href="'+ urlEntrada +'" target="_blank">' + tituloEntrada + '</a></li>');
});
if (data.feed.entry.length > 5) {
botonCargarMas.style.display = "block";
}
} else {
resultadosBusqueda.innerHTML = '<li>No hay resultados para la búsqueda.</li>';
}
});
}

var formularioBusqueda = document.querySelector('#form-busqueda');
var entradaBusqueda = document.querySelector('#input-busqueda');
var botónBusqueda = document.querySelector('#boton-busqueda');
var resultadosBusqueda = document.querySelector('#resultados-busqueda');
var busquedaPalabra = '';

formularioBusqueda.addEventListener('submit', function(evento) {
evento.preventDefault();
resultadosBusqueda.innerHTML = '';
busquedaPalabra = entradaBusqueda.value.trim();
var URLBusqueda = '/feeds/posts/default/-/' + encodeURIComponent(busquedaPalabra) + '?alt=json&max-results=5';
URLFeed = URLBusqueda;
cargarEntradas();
});

botónBusqueda.addEventListener('click', function() {
formularioBusqueda.submit();
});
```

Espero que eso solucione tu problema. ¡Buena suerte!
Hacer clic para expandir...
Ese fue tu script, no funciona
Este es mi script, ¿puedes corregirlo?
JavaScript: 
var botonBusqueda = document.getElementById('boton-busqueda');
var inputBusqueda = document.getElementById('input-busqueda');
var resultadosBusqueda = document.getElementById('resultados-busqueda');
var botonCargarMas = document.getElementById('boton-cargar-mas');
var URLFeed = '/feeds/posts/default?alt=json&max-results=5';
function mostrarModal() {
document.getElementById('modal-busqueda').style.display = "block";
}
function cerrarModal() {
document.getElementById('modal-busqueda').style.display = "none";
}
function cargarEntradas() {
botonCargarMas.style.display = "none";
fetch(URLFeed).then(function(response) {
return response.json();
}).then(function(data) {
var entradas = data.feed.entry.slice(0, 5);
if (entradas.length > 0) {
entradas.forEach(function(entrada) {
var urlEntrada = entrada.link[entrada.link.length - 1].href;
var tituloEntrada = entrada.title.$t;
var contenidoEntrada = entrada.content.$t;
var imagen = '';
if (entrada.media$thumbnail !== undefined) {
imagen = '<img src="' + entrada.media$thumbnail.url + '">';
} else {
imagen = '<img src=" ">';
}
var fechaEntrada = new Date(entrada.published.$t);
var fecha = fechaEntrada.getDay() + '/' + fechaEntrada.getMonth() + '/' + fechaEntrada.getFullYear();
if (busquedaPalabra !== '' && contenidoEntrada.toLowerCase().indexOf(busquedaPalabra.toLowerCase()) === -1) { // el segundo término revisa que la palabra clave esté presente en el contenido de entrada
return; // si no hay coincidencia, salta a la siguiente iteración del ciclo for each
}
resultadosBusqueda.innerHTML += '<li><a href="'+ urlEntrada +'" target="_blank">' + imagen + entrada.title.$t + '</a> (' + fecha + ')</li>';
});
if (data.feed.entry.length > 5) {
botonCargarMas.style.display = "block";
}
} else {
resultadosBusqueda.innerHTML = '<li>No hay resultados para la búsqueda.</li>';
}
});
}
botonBusqueda.addEventListener('click', function(event) {
event.preventDefault();
resultadosBusqueda.innerHTML = '';
busquedaPalabra = entradaBusqueda.value.trim(); // elimina los espacios extra al inicio y fin de la palabra clave
var URLBusqueda = '/feeds/posts/default/-/' + encodeURIComponent(busquedaPalabra) + '?alt=json&max-results=5';
URLFeed = URLBusqueda; // actualiza el feed de la URL para buscar la palabra clave
cargarEntradas();
});
botonCargarMas.addEventListener('click', function() {
URLFeed += '&start-index=5';
cargarEntradas();
});
document.getElementById('searchx').addEventListener('click', mostrarModal);
document.querySelector('.cerrar-modal').addEventListener('click', cerrarModal);
 
Puko dijo:
Ese fue tu script, no funciona
Este es mi script, ¿puedes corregirlo?
JavaScript: 
var botonBusqueda = document.getElementById('boton-busqueda');
var inputBusqueda = document.getElementById('input-busqueda');
var resultadosBusqueda = document.getElementById('resultados-busqueda');
var botonCargarMas = document.getElementById('boton-cargar-mas');
var URLFeed = '/feeds/posts/default?alt=json&max-results=5';
function mostrarModal() {
document.getElementById('modal-busqueda').style.display = "block";
}
function cerrarModal() {
document.getElementById('modal-busqueda').style.display = "none";
}
function cargarEntradas() {
botonCargarMas.style.display = "none";
fetch(URLFeed).then(function(response) {
return response.json();
}).then(function(data) {
var entradas = data.feed.entry.slice(0, 5);
if (entradas.length > 0) {
entradas.forEach(function(entrada) {
var urlEntrada = entrada.link[entrada.link.length - 1].href;
var tituloEntrada = entrada.title.$t;
var contenidoEntrada = entrada.content.$t;
var imagen = '';
if (entrada.media$thumbnail !== undefined) {
imagen = '<img src="' + entrada.media$thumbnail.url + '">';
} else {
imagen = '<img src=" ">';
}
var fechaEntrada = new Date(entrada.published.$t);
var fecha = fechaEntrada.getDay() + '/' + fechaEntrada.getMonth() + '/' + fechaEntrada.getFullYear();
if (busquedaPalabra !== '' && contenidoEntrada.toLowerCase().indexOf(busquedaPalabra.toLowerCase()) === -1) { // el segundo término revisa que la palabra clave esté presente en el contenido de entrada
return; // si no hay coincidencia, salta a la siguiente iteración del ciclo for each
}
resultadosBusqueda.innerHTML += '<li><a href="'+ urlEntrada +'" target="_blank">' + imagen + entrada.title.$t + '</a> (' + fecha + ')</li>';
});
if (data.feed.entry.length > 5) {
botonCargarMas.style.display = "block";
}
} else {
resultadosBusqueda.innerHTML = '<li>No hay resultados para la búsqueda.</li>';
}
});
}
botonBusqueda.addEventListener('click', function(event) {
event.preventDefault();
resultadosBusqueda.innerHTML = '';
busquedaPalabra = entradaBusqueda.value.trim(); // elimina los espacios extra al inicio y fin de la palabra clave
var URLBusqueda = '/feeds/posts/default/-/' + encodeURIComponent(busquedaPalabra) + '?alt=json&max-results=5';
URLFeed = URLBusqueda; // actualiza el feed de la URL para buscar la palabra clave
cargarEntradas();
});
botonCargarMas.addEventListener('click', function() {
URLFeed += '&start-index=5';
cargarEntradas();
});
document.getElementById('searchx').addEventListener('click', mostrarModal);
document.querySelector('.cerrar-modal').addEventListener('click', cerrarModal);
Hacer clic para expandir...
Sorry I couldn't contact the ChatGPT think tank 🙁
 
BotBeta dijo:
¡Hola! Estoy disponible para responder a cualquier pregunta que tengas. Recuerda citarme en tu mensaje para que pueda ayudarte de la mejor manera posible.
Hacer clic para expandir...

Escríbeme un poema de amor
 
Daniel Muñoz dijo:
Realiza un código php para conectar una base de datos
Hacer clic para expandir...
¡Claro! Aquí te escribo un ejemplo básico de cómo conectar una base de datos MySQL utilizando PHP:

```php
<?php

// Datos de la base de datos
$host = "localhost";
$username = "tu-usuario";
$password = "tu-contraseña";
$database = "nombre-de-tu-base-de-datos";

// Conexión a la base de datos
$conn = new mysqli($host, $username, $password, $database);

// Verificar la conexión
if ($conn->connect_error) {
die("Falló la conexión a la base de datos: " . $conn->connect_error);
}
echo "Conexión exitosa a la base de datos";

// Cerrar la conexión
$conn->close();

?>
```

Recuerda cambiar las variables "tu-usuario", "tu-contraseña" y "nombre-de-tu-base-de-datos" por los datos correspondientes a tu propio servidor de MySQL. Este es solo un ejemplo básico, pero hay muchas maneras de conectar a una base de datos y hacer consultas utilizando PHP. ¡Espero que te haya sido útil!
 
BotBeta dijo:
¡Claro! Aquí te escribo un ejemplo básico de cómo conectar una base de datos MySQL utilizando PHP:

```php
<?php

// Datos de la base de datos
$host = "localhost";
$username = "tu-usuario";
$password = "tu-contraseña";
$database = "nombre-de-tu-base-de-datos";

// Conexión a la base de datos
$conn = new mysqli($host, $username, $password, $database);

// Verificar la conexión
if ($conn->connect_error) {
die("Falló la conexión a la base de datos: " . $conn->connect_error);
}
echo "Conexión exitosa a la base de datos";

// Cerrar la conexión
$conn->close();

?>
```

Recuerda cambiar las variables "tu-usuario", "tu-contraseña" y "nombre-de-tu-base-de-datos" por los datos correspondientes a tu propio servidor de MySQL. Este es solo un ejemplo básico, pero hay muchas maneras de conectar a una base de datos y hacer consultas utilizando PHP. ¡Espero que te haya sido útil!
Hacer clic para expandir...

Quiero un poema de amor
 
en blogger ¿como hago un buscador usando el json feed? Que tenga lo siguiente:
un icono Unicode search, que al hacer click abra una ventana modal responsive con el input y boton buscar, un icono unicode arriba de cerrar, que muestre solamente 5 resultados/entradas y abajo un boton 'mostrar mas' para otras 5 entradas, con url de la entrada, imagen (entrada.media$thumbnail.url), con imagen alternativa si no tiene la entrada, autor, fecha, que use una busqueda precisa al buscar una palabra; y que al cerrar la ventana modal se 'borre' la busqueda/palabra anterior del input
 
Puko dijo:
en blogger ¿como hago un buscador usando el json feed? Que tenga lo siguiente:
un icono Unicode search, que al hacer click abra una ventana modal responsive con el input y boton buscar, un icono unicode arriba de cerrar, que muestre solamente 5 resultados/entradas y abajo un boton 'mostrar mas' para otras 5 entradas, con url de la entrada, imagen (entrada.media$thumbnail.url), con imagen alternativa si no tiene la entrada, autor, fecha, que use una busqueda precisa al buscar una palabra; y que al cerrar la ventana modal se 'borre' la busqueda/palabra anterior del input
Hacer clic para expandir...
¡Claro! Aquí te presento un ejemplo básico de cómo crear un buscador en Blogger utilizando la API de JSON Feed. Este buscador muestra los 5 resultados más recientes de un blog por defecto, y al hacer una búsqueda precisa utilizando palabras clave, mostrará los 5 resultados más relevantes correspondientes a la búsqueda.

Hay que seguir los siguientes pasos:

1. Agregar el código HTML:

```
<div id='searchx'>
<span class='icono-busqueda'>🔍</span>
</div>

<div class='modal' id='modal-busqueda'>
<div class='modal-contenido'>
<span class='cerrar-modal'> x </span>
<h2>Buscar en el blog</h2>
<form id='form-busqueda'>
<input id='input-busqueda' placeholder='Buscar...' type='text'/>
<button id='boton-busqueda' type='submit'>Buscar</button>
</form>
<ul id='resultados-busqueda'></ul>
<button id='boton-cargar-mas' type='button'>Cargar más entradas</button>
</div>
</div>
```

2. Agregar el código JavaScript:

```
// Declarar variables
var URLFeed = '/feeds/posts/default?alt=json&max-results=5';

var formularioBusqueda = document.querySelector('#form-busqueda');
var entradaBusqueda = document.querySelector('#input-busqueda');
var botonCargarMas = document.querySelector('#boton-cargar-mas');
var resultadosBusqueda = document.querySelector('#resultados-busqueda');
var busquedaPalabra = '';

// Función para cargar las entradas del blog
function cargarEntradas() {
botonCargarMas.style.display = "none";
fetch(URLFeed).then(function(response) {
return response.json();
}).then(function(data) {
var entradas = data.feed.entry.slice(0, 5);
if (entradas.length > 0) {
entradas.forEach(function(entrada) {
var urlEntrada = entrada.link[entrada.link.length - 1].href;
var tituloEntrada = entrada.title.$t;
var contenidoEntrada = entrada.content.$t;
var imagen = '';
if (entrada.media$thumbnail !== undefined) {
imagen = '<img src="' + entrada.media$thumbnail.url + '">';
} else {
imagen = '<img src=".../imagen-alternativa.jpg">';
}
var autorEntrada = entrada.author[0].name.$t;
var fechaEntrada = new Date(entrada.published.$t);
var fecha = fechaEntrada.getDay() + '/' + fechaEntrada.getMonth() + '/' + fechaEntrada.getFullYear();
if (busquedaPalabra !== '' && contenidoEntrada.toLowerCase().indexOf(busquedaPalabra.toLowerCase()) === -1) { // el segundo término revisa que la palabra clave esté presente en el contenido de entrada
return; // si no hay coincidencia, salta a la siguiente iteración del ciclo for each
}
resultadosBusqueda.innerHTML += '<li><a href="'+ urlEntrada +'" target="_blank">' + imagen + tituloEntrada + '</a> por ' + autorEntrada + ' el ' + fecha + '</li>';
});
if (data.feed.entry.length > 5) {
botonCargarMas.style.display = "block";
}
} else {
resultadosBusqueda.innerHTML = '<li>No hay entradas en el blog.</li>';
}
});
}

// Función para manejar la búsqueda del usuario
formularioBusqueda.addEventListener('submit', function(evento) {
evento.preventDefault();
resultadosBusqueda.innerHTML = '';
 
BotBeta dijo:
¡Claro! Aquí te presento un ejemplo básico de cómo crear un buscador en Blogger utilizando la API de JSON Feed. Este buscador muestra los 5 resultados más recientes de un blog por defecto, y al hacer una búsqueda precisa utilizando palabras clave, mostrará los 5 resultados más relevantes correspondientes a la búsqueda.

Hay que seguir los siguientes pasos:

1. Agregar el código HTML:

```
<div id='searchx'>
<span class='icono-busqueda'>🔍</span>
</div>

<div class='modal' id='modal-busqueda'>
<div class='modal-contenido'>
<span class='cerrar-modal'> x </span>
<h2>Buscar en el blog</h2>
<form id='form-busqueda'>
<input id='input-busqueda' placeholder='Buscar...' type='text'/>
<button id='boton-busqueda' type='submit'>Buscar</button>
</form>
<ul id='resultados-busqueda'></ul>
<button id='boton-cargar-mas' type='button'>Cargar más entradas</button>
</div>
</div>
```

2. Agregar el código JavaScript:

```
// Declarar variables
var URLFeed = '/feeds/posts/default?alt=json&max-results=5';

var formularioBusqueda = document.querySelector('#form-busqueda');
var entradaBusqueda = document.querySelector('#input-busqueda');
var botonCargarMas = document.querySelector('#boton-cargar-mas');
var resultadosBusqueda = document.querySelector('#resultados-busqueda');
var busquedaPalabra = '';

// Función para cargar las entradas del blog
function cargarEntradas() {
botonCargarMas.style.display = "none";
fetch(URLFeed).then(function(response) {
return response.json();
}).then(function(data) {
var entradas = data.feed.entry.slice(0, 5);
if (entradas.length > 0) {
entradas.forEach(function(entrada) {
var urlEntrada = entrada.link[entrada.link.length - 1].href;
var tituloEntrada = entrada.title.$t;
var contenidoEntrada = entrada.content.$t;
var imagen = '';
if (entrada.media$thumbnail !== undefined) {
imagen = '<img src="' + entrada.media$thumbnail.url + '">';
} else {
imagen = '<img src=".../imagen-alternativa.jpg">';
}
var autorEntrada = entrada.author[0].name.$t;
var fechaEntrada = new Date(entrada.published.$t);
var fecha = fechaEntrada.getDay() + '/' + fechaEntrada.getMonth() + '/' + fechaEntrada.getFullYear();
if (busquedaPalabra !== '' && contenidoEntrada.toLowerCase().indexOf(busquedaPalabra.toLowerCase()) === -1) { // el segundo término revisa que la palabra clave esté presente en el contenido de entrada
return; // si no hay coincidencia, salta a la siguiente iteración del ciclo for each
}
resultadosBusqueda.innerHTML += '<li><a href="'+ urlEntrada +'" target="_blank">' + imagen + tituloEntrada + '</a> por ' + autorEntrada + ' el ' + fecha + '</li>';
});
if (data.feed.entry.length > 5) {
botonCargarMas.style.display = "block";
}
} else {
resultadosBusqueda.innerHTML = '<li>No hay entradas en el blog.</li>';
}
});
}

// Función para manejar la búsqueda del usuario
formularioBusqueda.addEventListener('submit', function(evento) {
evento.preventDefault();
resultadosBusqueda.innerHTML = '';
Hacer clic para expandir...
continuar
 
BotBeta dijo:
¡Claro! Aquí te presento un ejemplo básico de cómo crear un buscador en Blogger utilizando la API de JSON Feed. Este buscador muestra los 5 resultados más recientes de un blog por defecto, y al hacer una búsqueda precisa utilizando palabras clave, mostrará los 5 resultados más relevantes correspondientes a la búsqueda.

Hay que seguir los siguientes pasos:

1. Agregar el código HTML:

```
<div id='searchx'>
<span class='icono-busqueda'>🔍</span>
</div>

<div class='modal' id='modal-busqueda'>
<div class='modal-contenido'>
<span class='cerrar-modal'> x </span>
<h2>Buscar en el blog</h2>
<form id='form-busqueda'>
<input id='input-busqueda' placeholder='Buscar...' type='text'/>
<button id='boton-busqueda' type='submit'>Buscar</button>
</form>
<ul id='resultados-busqueda'></ul>
<button id='boton-cargar-mas' type='button'>Cargar más entradas</button>
</div>
</div>
```

2. Agregar el código JavaScript:

```
// Declarar variables
var URLFeed = '/feeds/posts/default?alt=json&max-results=5';

var formularioBusqueda = document.querySelector('#form-busqueda');
var entradaBusqueda = document.querySelector('#input-busqueda');
var botonCargarMas = document.querySelector('#boton-cargar-mas');
var resultadosBusqueda = document.querySelector('#resultados-busqueda');
var busquedaPalabra = '';

// Función para cargar las entradas del blog
function cargarEntradas() {
botonCargarMas.style.display = "none";
fetch(URLFeed).then(function(response) {
return response.json();
}).then(function(data) {
var entradas = data.feed.entry.slice(0, 5);
if (entradas.length > 0) {
entradas.forEach(function(entrada) {
var urlEntrada = entrada.link[entrada.link.length - 1].href;
var tituloEntrada = entrada.title.$t;
var contenidoEntrada = entrada.content.$t;
var imagen = '';
if (entrada.media$thumbnail !== undefined) {
imagen = '<img src="' + entrada.media$thumbnail.url + '">';
} else {
imagen = '<img src=".../imagen-alternativa.jpg">';
}
var autorEntrada = entrada.author[0].name.$t;
var fechaEntrada = new Date(entrada.published.$t);
var fecha = fechaEntrada.getDay() + '/' + fechaEntrada.getMonth() + '/' + fechaEntrada.getFullYear();
if (busquedaPalabra !== '' && contenidoEntrada.toLowerCase().indexOf(busquedaPalabra.toLowerCase()) === -1) { // el segundo término revisa que la palabra clave esté presente en el contenido de entrada
return; // si no hay coincidencia, salta a la siguiente iteración del ciclo for each
}
resultadosBusqueda.innerHTML += '<li><a href="'+ urlEntrada +'" target="_blank">' + imagen + tituloEntrada + '</a> por ' + autorEntrada + ' el ' + fecha + '</li>';
});
if (data.feed.entry.length > 5) {
botonCargarMas.style.display = "block";
}
} else {
resultadosBusqueda.innerHTML = '<li>No hay entradas en el blog.</li>';
}
});
}

// Función para manejar la búsqueda del usuario
formularioBusqueda.addEventListener('submit', function(evento) {
evento.preventDefault();
resultadosBusqueda.innerHTML = '';
Hacer clic para expandir...
continuar
 
Puko dijo:
continuar
Hacer clic para expandir...
¡Claro! Aquí te presento un ejemplo básico de cómo crear un buscador en Blogger utilizando la API de JSON Feed. Este buscador muestra los 5 resultados más recientes
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba