Tema para preguntas random a Chatgpt 🤖

  • Autor Autor Carlos Arreola
  • Fecha de inicio Fecha de inicio
¿Cómo lo modifico para que muestre los resultados mientras escribo, solo aparecen cuando encuentra una palabra completa?
¿Cómo le agrego: autor y fecha de publicación?
JavaScript: 
<script>
$("#search").on("keyup", function(){
var query = $(this).val();
var url = "/feeds/posts/default?alt=json-in-script&callback=?";
$.ajax({
url: url,
dataType: "jsonp",
data: {"q": query,"orderBy": "updated"},
success: function(data) {
$("#results").empty();
var entries = data.feed.entry || [];
for(var i=0; i<entries.length; i++){
var entry = entries[i];
var title = entry.title.$t;
var img = entry.media$thumbnail ? entry.media$thumbnail.url : '';
$("#results").append('<div><img src="'+img+'"/><h2>'+title+'</h2></div>');
}}});});
</script>
 
Para mostrar los resultados mientras escribes, ya lo estás haciendo con el evento "keyup". El problema es que estás buscando una coincidencia exacta al verificar "title === query", por lo que solo se mostrarán los resultados cuando se escriba el título completo. Para que aparezcan resultados de manera incremental, puedes buscar si el título contiene la query usando "title.includes(query)".

Además, puedes agregar el autor y la fecha de publicación de esta manera:

JavaScript: 
<script>
 $("#search").on("keyup", function(){
    var query = $(this).val();
    var url = "/feeds/posts/default?alt=json-in-script&callback=?";

    $.ajax({
       url: url,
       dataType: "jsonp",
       data: {
          "q": query,
          "orderBy": "updated"
       },
       success: function(data) {
          $("#results").empty();
          var entries = data.feed.entry || [];
          for(var i=0; i<entries.length; i++){
             var entry = entries[i];
             var title = entry.title.$t;
             var author = entry.author[0].name.$t;
             var publishedDate = entry.published.$t;
             if (title.includes(query)) {
                var img = entry.media$thumbnail ? entry.media$thumbnail.url : '';
                $("#results").append('<div><img src="'+ img +'"/><h2>'+ title +'</h2><p>'+ author +'</p><p>'+ publishedDate +'</p></div>');
             }
          }
       }
    });
 });
</script>
Recuerda que la fecha de publicación estará en formato ISO 8601 y es posible que quieras formatearla para que sea más legible.
 
¿cómo le agrego a la imagen el enlace de la entrada?
 
Puko dijo:
¿cómo le agrego a la imagen el enlace de la entrada?
Hacer clic para expandir...
Para agregar el enlace de la entrada a la imagen, primero necesitas conseguir el enlace de la entrada, que normalmente se encuentra en el objeto del feed. Aquí se muestra cómo puedes hacerlo:

JavaScript: 
<script>
 $("#search").on("keyup", function(){
    var query = $(this).val();
    var url = "/feeds/posts/default?alt=json-in-script&callback=?";

    $.ajax({
       url: url,
       dataType: "jsonp",
       data: {
          "q": query,
          "orderBy": "updated"
       },
       success: function(data) {
          $("#results").empty();
          var entries = data.feed.entry || [];
          for(var i=0; i<entries.length; i++){
             var entry = entries[i];
             var title = entry.title.$t;
             var author = entry.author[0].name.$t;
             var publishedDate = entry.published.$t;
             var link = entry.link[0].href;
             if (title.includes(query)) {
                var img = entry.media$thumbnail ? entry.media$thumbnail.url : '';
                $("#results").append('<div><a href="' + link + '"><img src="'+ img +'"/></a><h2>'+ title +'</h2><p>'+ author +'</p><p>'+ publishedDate +'</p></div>');
            }
          }
       }
    });
 });
</script>

En este código, 'entry.link[0].href' devuelve el enlace de la entrada. Luego, puedes utilizar el elemento "a" para hacer que la imagen sea un enlace a esa URL.
 
me sale algo asi : https:// .blogspot.com/feeds/…4993741050/comments/default
¿esta mal?
 
Puko dijo:
me sale algo asi : https:// .blogspot.com/feeds/…4993741050/comments/default
¿esta mal?
Hacer clic para expandir...
Sí, parece que el enlace no está correcto. Parece un enlace a los comentarios de una entrada dado el "/comments/default" al final.

Para obtener el enlace de la entrada, deberías buscar en el array entry.link el objeto cuyo atributo rel sea igual a alternate, que es típicamente el que tiene la URL de la entrada. Aquí te dejo un ejemplo de cómo hacerlo:

JavaScript: 
var link = '';
for (var j = 0; j < entry.link.length; j++) {
  if (entry.link[j].rel === 'alternate') {
    link = entry.link[j].href;
    break;
  }
}
Entonces puedes usar link en lugar de entry.link[0].href en tu código. Esto debería darte la URL correcta de la entrada del blog.
 
icono animado con keyframe y css de "load more", es como un spin que gira medio lento
 
Puko dijo:
icono animado con keyframe y css de "load more", es como un spin que gira medio lento
Hacer clic para expandir...
A continuación, te muestro un ejemplo de cómo podrías hacer un icono de carga animado (spin) con CSS y keyframes:

CSS: 
<style>
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .load-more {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 6px solid #ccc;
    border-top-color: #333;
    animation: spin 2s linear infinite; /* Aquí, "2s" se refiere a la velocidad de la animación. Si deseas que gire más lentamente, puedes incrementar este valor. */
  }
</style>

Para usar este spinner, simplemente agrega el siguiente HTML donde necesites el icono de carga:

HTML: 
<div class="load-more"></div>

Este spinner es un círculo con un borde de color gris que gira infinitamente, con el borde superior resaltado en un color más oscuro. Puedes personalizarlo para que se adapte a tus necesidades.
 
¿Cómo alneo verticalmente el "load-more", queda mas arriba que las letras de Load More, cambie el div por span en <div class='more-result'><span class="load-more"></span> <span>Load More</span></div>
 
Puko dijo:
¿Cómo alneo verticalmente el "load-more", queda mas arriba que las letras de Load More, cambie el div por span en <div class='more-result'><span class="load-more"></span> <span>Load More</span></div>
Hacer clic para expandir...
Para alinear verticalmente el icono "load-more" con el texto "Load More", necesitarás utilizar las propiedades CSS 'display' y 'align-items'. Podrías probar con el siguiente código CSS:

CSS: 
<style>
.more-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* separación entre el elemento Load More y el spinner */
}
</style>

Este CSS convierte a ".more-result" en un contenedor flex, centrando todos sus hijos horizontal y verticalmente.
 
¿qué le pongo a
<input class="searchbari" placeholder="Type and hit enter" type="search">
para que al cargarse la pagina no quede en el <input> lo escrito anteriormente ?
 
Puko dijo:
¿qué le pongo a
<input class="searchbari" placeholder="Type and hit enter" type="search">
para que al cargarse la pagina no quede en el <input> lo escrito anteriormente ?
Hacer clic para expandir...
Para borrar cualquier valor que se haya introducido previamente en el campo de búsqueda cuando la página se carga, puedes usar el atributo 'autocomplete' con el valor 'off' en la etiqueta 'input'. Aquí tienes el código:

HTML: 
<input class="searchbari" placeholder="Type and hit enter" type="search" autocomplete="off">

De esta manera, los navegadores no recordarán ni autocompletarán el valor introducido anteriormente en el campo de búsqueda.
 
¿cómo centro .loader de otra forma y asi con position: absolute; ?

.loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -27.5px;
margin-top: -27.5px;
…
 
Puko dijo:
¿cómo centro .loader de otra forma y asi con position: absolute; ?

.loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -27.5px;
margin-top: -27.5px;
…
Hacer clic para expandir...
Tu método actual debería centrar el ".loader", aunque en lugar de usar márgenes negativos, puedes usar la propiedad "transform" para mover el ".loader" hacia arriba y hacia la izquierda en un 50%. Aquí está tu código modificado:

CSS: 
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Esto tiene la ventaja de no necesitar conocer las dimensiones exactas del ".loader". La propiedad "transform" moverá el elemento basado en su propio tamaño.
 
¿cómo le pongo a ".search-content" en height para que llegue hasta casi abajo de la pagina y con cierto espacio ?
.search-content {
height: 542px;
overflow: auto;
 
Puko dijo:
¿cómo le pongo a ".search-content" en height para que llegue hasta casi abajo de la pagina y con cierto espacio ?
.search-content {
height: 542px;
overflow: auto;
Hacer clic para expandir...
Podrías usar la función 'calc' de CSS para restar un valor fijo al 100% de la altura del viewport. Esto debería hacer que ".search-content" tenga una altura que llegue casi hasta el final de la página, con algo de espacio en la parte inferior. El código sería algo como esto:

CSS: 
.search-content {
  height: calc(100vh - 50px);  /* Ajusta el "50px" al espacio que desees en la parte inferior*/
  overflow: auto;
}

Esto funcionará siempre y cuando ".search-content" no esté contenida en ningún otro elemento que restrinja su altura. En caso contrario, tendrías que ajustar la altura de los elementos contenedores también.
 
script para greasemonkey que cambie la url de una imagen por ejemplo cualquier de los dos pares de números /60/60/fit/ce por /999999/999999/fit/ce
 
Puko dijo:
script para greasemonkey que cambie la url de una imagen por ejemplo cualquier de los dos pares de números /60/60/fit/ce por /999999/999999/fit/ce
Hacer clic para expandir...
Puedes usar el siguiente script de Greasemonkey para reemplazar /60/60/fit/ce por /999999/999999/fit/ce en las URLs de las imágenes:

JavaScript: 
// ==UserScript==
// @name         Replace Image URL
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  replace certain part of image URL
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    document.querySelectorAll('img').forEach(img => {
        img.src = img.src.replace("/60/60/fit/ce", "/999999/999999/fit/ce");
    });

})();

Este script selecciona todas las imágenes en la página y reemplaza la parte "/60/60/fit/ce" de su URL por "/999999/999999/fit/ce". Recuerda cambiar @match con la URL del sitio web donde quieras que este script se ejecute.
 
pero no todas las urls tienen 60/60 tienen diferentes pares de números
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro