Cómo Consumir APIs con JavaScript: 4 Ejemplos Reales Paso a Paso

Imagen
Cómo Consumir APIs con JavaScript: 4 Ejemplos Reales Paso a Paso Consumir APIs es una de las habilidades más importantes para cualquier desarrollador moderno. En esta guía central encontrarás 4 ejemplos reales donde utilizamos JavaScript para conectarnos a APIs públicas y obtener datos dinámicos. Verás ejemplos desde proyectos divertidos hasta integraciones financieras reales. 🌌 1️⃣ Rick and Morty API – Mini Proyecto Web En este proyecto construimos un buscador interactivo de personajes utilizando fetch() , paginación y filtros dinámicos. Consumo de API REST Paginación Renderizado dinámico en el DOM Ver demo completa Rick and Morty API → 🏎️ 2️⃣ API de Fórmula 1 – Datos Deportivos en Tiempo Real En este ejemplo consultamos información de pilotos, carreras y estadísticas de la Fórmula 1 usando una API pública. Request HTTP con JavaScript Manejo de respuesta JSON Visualización de datos deportivos Ver ejemplo API Fórmula 1 → 🐉...

Google Sheets: Crea una Sopa de Letras Interactiva con Script

Creación de la cuadrícula:

  • Define el tamaño , en mi caso utilice una cuadricula de 10x10



  • Utiliza la función "ALEATORIOENTRE" para generar letras aleatorias en cada celda. Por ejemplo, en la celda A1 puedes escribir: =CHAR(INT(RAND()*26)+65) para generar una letra aleatoria mayúscula.
  • Copia esta fórmula a todas las celdas de la cuadrícula.
  • Inserta las palabras que definiste anteriormente. Puedes hacerlo manualmente o utilizando la función BUSCARV si quieres que las palabras aparezcan en un orden específico
  • Otra forma de hacerlo fue con un script o macro
    • Abrir el Editor de Scripts:

      • Ve al menú Extensiones > Apps Script.
    • Crear un Script:

      • Borra cualquier código que aparezca y reemplázalo con el siguiente script:
      javascript
      function fillEmptyCellsWithRandomLetters() {
        var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
        var range = sheet.getDataRange(); // Selecciona todo el rango de datos
        var values = range.getValues(); // Obtén los valores en la cuadrícula
       
        for (var i = 0; i < values.length; i++) {
          for (var j = 0; j < values[i].length; j++) {
            if (values[i][j] === "") { // Si la celda está vacía
              values[i][j] = String.fromCharCode(Math.floor(Math.random() * 26) + 65); // Letra aleatoria de A-Z
            }
          }
        }
       
        range.setValues(values); // Escribe los nuevos valores de vuelta en la hoja
      }


 3. Validación de respuestas:

  • Vamos agregar otro script, 

function validateHighlightedWords() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var words = ["SOL", "TIERRA", "MACETA", "SEMILLA","AGUA"]; // Lista de palabras a validar
  var correct = true;

  for (var i = 0; i < words.length; i++) {
    if (!isWordHighlighted(sheet, words[i])) {
      correct = false;
      break;
    }
  }

  if (correct) {
    SpreadsheetApp.getUi().alert("¡Todas las palabras están correctamente resaltadas!");
  } else {
    SpreadsheetApp.getUi().alert("Revisa las palabras resaltadas.Aun te falta mas");
  }
}

function isWordHighlighted(sheet, word) {
  var dataRange = sheet.getDataRange();
  var data = dataRange.getValues();
  var backgroundColors = dataRange.getBackgrounds();

  // Buscar la palabra en la cuadrícula
  for (var i = 0; i < data.length; i++) {
    for (var j = 0; j < data[i].length; j++) {
      if (checkWordInDirection(data, backgroundColors, word, i, j, 0, 1) || // Horizontal derecha
          checkWordInDirection(data, backgroundColors, word, i, j, 1, 0) || // Vertical hacia abajo
          checkWordInDirection(data, backgroundColors, word, i, j, 1, 1) || // Diagonal hacia abajo a la derecha
          checkWordInDirection(data, backgroundColors, word, i, j, 1, -1))  // Diagonal hacia abajo a la izquierda
      {
        return true;
      }
    }
  }
  return false;
}

function checkWordInDirection(data, backgroundColors, word, row, col, rowDir, colDir) {
  for (var k = 0; k < word.length; k++) {
    if (row + k * rowDir >= data.length || col + k * colDir >= data[0].length ||
        col + k * colDir < 0 ||
        data[row + k * rowDir][col + k * colDir] != word[k] ||
        backgroundColors[row + k * rowDir][col + k * colDir] != "#ffff00") { // "#ffff00" es el código de color para amarillo
      return false;
    }
  }
  return true;
}

Crear un Botón en la Hoja

Insertar un Dibujo:


En la hoja de cálculo, ve al menú Insertar > Dibujo > + Nuevo.

Dentro del editor de dibujo, selecciona la herramienta de formas (Shape) y dibuja un rectángulo o cualquier forma que te guste.

Puedes agregar texto a la forma, como "Validar Sopa de Letras".

Una vez que hayas terminado, haz clic en "Guardar y cerrar".

Asignar el Script al Botón:


Haz clic derecho en el botón que acabas de crear y selecciona "Asignar script".

En el cuadro de diálogo que aparece, escribe el nombre de la función que deseas asignar. En este caso, escribe validateHighlightedWords (que es la función que valida las palabras resaltadas en amarillo).

Haz clic en "Aceptar".

2. Probar el Botón

Haz clic en el botón que acabas de crear en tu hoja de cálculo. Esto debería ejecutar el script validateHighlightedWords y mostrarte una alerta si todas las palabras están resaltadas correctamente.




Consideraciones adicionales:

  • Orientación de las palabras: Puedes hacer que las palabras aparezcan en horizontal, vertical, diagonal o incluso en zigzag.
  • Dificultad: Ajusta el tamaño de la cuadrícula y la cantidad de palabras para adaptar la sopa de letras a diferentes niveles de dificultad.
  • Temática: Crea sopas de letras relacionadas con diferentes temas (animales, países, matemáticas, etc.) para hacerlas más educativas.

Les comparto un video para que vean funcionando la sopa de Letras

                                                         https://youtu.be/kCWgJGpJouc

Si te interesa que te ayudemos creando tus sopas de letras contáctanos por medio del formulario 

Comentarios

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!

Entradas más populares de este blog

Guía Práctica: Ejemplo Completo de ASPX para Desarrolladores Web

📊 Automatiza tu trabajo: Convierte tablas de Word a Excel con una macro

Macro en Word para automatizar documentos: genera diplomas en segundos (con código VBA)