LIDR-academy · rogergithub3 · Feb 23, 2025 · Feb 23, 2025
diff --git a/reverse-string/template/prompts.md b/reverse-string/template/prompts.md
@@ -1 +0,0 @@
-

diff --git a/reversestring-RMB/index.html b/reversestring-RMB/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Invertir Cadena de Texto</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>
+        <!-- Ícono SVG de título -->
+        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" stroke="#007BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="20 6 22 8 20 10"></polyline>
+          <path d="M4 12h16"></path>
+          <polyline points="12 18 14 20 12 22"></polyline>
+          <path d="M4 12a8 8 0 0 0 8 8"></path>
+        </svg>
+        Invertir Cadena de Texto
+      </h1>
+    </header>
+
+    <!-- Bloque 1: Resultado al pulsar el botón -->
+    <section class="block">
+      <h2>
+        <!-- Ícono SVG para Bloque 1 -->
+        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#007BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="17 1 21 5 17 9"></polyline>
+          <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
+        </svg>
+        Bloque 1: Con Botón
+      </h2>
+      <p>Introduce una cadena y pulsa el botón para invertirla.</p>
+      <input type="text" id="inputBlock1" placeholder="Ej: AI4Devs">
+      <button id="buttonBlock1">Invertir</button>
+      <p>Resultado: <span id="resultBlock1"></span></p>
+    </section>
+
+    <!-- Bloque 2: Resultado al introducir 3 o más caracteres -->
+    <section class="block">
+      <h2>
+        <!-- Ícono SVG para Bloque 2 -->
+        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#007BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 20h9"></path>
+          <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+        </svg>
+        Bloque 2: Con 3 o Más Caracteres
+      </h2>
+      <p>Introduce una cadena. El resultado se mostrará cuando escribas 3 o más caracteres.</p>
+      <input type="text" id="inputBlock2" placeholder="Ej: AI4Devs">
+      <p>Resultado: <span id="resultBlock2"></span></p>
+    </section>
+
+    <!-- Bloque 3: Resultado automático -->
+    <section class="block">
+      <h2>
+        <!-- Ícono SVG para Bloque 3 -->
+        <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#007BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M23 4v6h-6"></path>
+          <path d="M1 20v-6h6"></path>
+          <path d="M3.51 9a9 9 0 0 1 14.13-3.36L23 10"></path>
+          <path d="M20.49 15a9 9 0 0 1-14.13 3.36L1 14"></path>
+        </svg>
+        Bloque 3: Automático
+      </h2>
+      <p>Introduce una cadena. El resultado se actualizará automáticamente conforme escribes.</p>
+      <input type="text" id="inputBlock3" placeholder="Ej: AI4Devs">
+      <p>Resultado: <span id="resultBlock3"></span></p>
+    </section>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/reversestring-RMB/prompts.md b/reversestring-RMB/prompts.md
@@ -0,0 +1,69 @@
+# Prompts
+
+## Chatbot utilizado:
+ChatGPT
+
+## Prompt 1
+Crea una página web con lógica en javascript que invierta el orden de una cadena de texto. Ejemplo: si introduzco AI4Devs devuelve sveD4IA.
+
+Crea tres ficheros: index.html, script.js y style.css.
+
+El diseño fresco, actual y moderno. Tiene que ser responsive.
+
+
+## Prompt 2
+Crea una página web con lógica en javascript que invierta el orden de una cadena de texto. Ejemplo: si introduzco AI4Devs devuelve sveD4IA.
+
+Crea tres ficheros: index.html, script.js y style.css.
+
+El diseño fresco, actual y moderno. Tiene que ser responsive.
+
+Tiene que contener tres bloques:
+1. El primer bloque tiene que contener las instrucciones, un input de texto, un botón de invertir y un espacio para el resultado. El resultado aparece cuando se clica el botón.
+
+2. El segundo bloque tiene que contener las instrucciones, un input de texto y un espacio para el resultado. El resultado aparece cuando se introduce 3 o más carácteres.
+
+3. El tercedr bloque tiene que contener las instrucciones, un input de texto y un espacio para el resultado. El resultado aparece automáticamente al introducir cualquier carácter.
+
+Genera código limpio y si puedes reutiliza funciones.
+
+## Prompt 3
+Crea una página web con lógica en javascript que invierta el orden de una cadena de texto. Ejemplo: si introduzco AI4Devs devuelve sveD4IA.
+
+Crea tres ficheros: index.html, script.js y style.css.
+
+El diseño fresco, actual y moderno. Puedes utilizar imagenes SVG para hacerlo más atractivo. O si quieres tambien utiliza iconos. Tiene que ser responsive.
+
+Tiene que contener tres bloques:
+1. El primer bloque tiene que contener las instrucciones, un input de texto, un botón de invertir y un espacio para el resultado. El resultado aparece cuando se clica el botón.
+
+2. El segundo bloque tiene que contener las instrucciones, un input de texto y un espacio para el resultado. El resultado aparece cuando se introduce 3 o más carácteres.
+
+3. El tercedr bloque tiene que contener las instrucciones, un input de texto y un espacio para el resultado. El resultado aparece automáticamente al introducir cualquier carácter.
+
+Genera código limpio y si puedes reutiliza funciones.
+
+
+## Prompt 4
+Crea una página web con lógica en javascript que invierta el orden de una cadena de texto. Ejemplo: si introduzco AI4Devs devuelve sveD4IA.
+
+Crea tres ficheros: index.html, script.js y style.css.
+
+El diseño tiene que ser muy atractivo para el usuario, fácil de entender, fresco, actual y moderno. Puedes utilizar imagenes SVG para hacerlo más atractivo. O si quieres tambien utiliza iconos. Tiene que ser responsive.
+
+Tiene que contener tres bloques:
+1. El primer bloque tiene que contener las instrucciones, un input de texto, un botón de invertir y un espacio para el resultado. El resultado aparece cuando se clica el botón.
+
+2. El segundo bloque tiene que contener las instrucciones, un input de texto y un espacio para el resultado. El resultado aparece cuando se introduce 3 o más carácteres.
+
+3. El tercedr bloque tiene que contener las instrucciones, un input de texto y un espacio para el resultado. El resultado aparece automáticamente al introducir cualquier carácter.
+
+Genera código limpio y si puedes reutiliza funciones.
+
+
+
+
+
+
+
+
diff --git a/reversestring-RMB/script.js b/reversestring-RMB/script.js
@@ -0,0 +1,28 @@
+// Función reutilizable para invertir una cadena de texto
+function reverseString(str) {
+    return str.split('').reverse().join('');
+  }
+
+  // Bloque 1: Resultado al pulsar el botón
+  const inputBlock1 = document.getElementById('inputBlock1');
+  const buttonBlock1 = document.getElementById('buttonBlock1');
+  const resultBlock1 = document.getElementById('resultBlock1');
+  buttonBlock1.addEventListener('click', () => {
+    resultBlock1.textContent = reverseString(inputBlock1.value);
+  });
+
+  // Bloque 2: Resultado al introducir 3 o más caracteres
+  const inputBlock2 = document.getElementById('inputBlock2');
+  const resultBlock2 = document.getElementById('resultBlock2');
+  inputBlock2.addEventListener('input', () => {
+    const text = inputBlock2.value;
+    resultBlock2.textContent = text.length >= 3 ? reverseString(text) : '';
+  });
+
+  // Bloque 3: Resultado automático en tiempo real
+  const inputBlock3 = document.getElementById('inputBlock3');
+  const resultBlock3 = document.getElementById('resultBlock3');
+  inputBlock3.addEventListener('input', () => {
+    resultBlock3.textContent = reverseString(inputBlock3.value);
+  });
+
diff --git a/reversestring-RMB/style.css b/reversestring-RMB/style.css
@@ -0,0 +1,105 @@
+/* Reset básico */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  /* Fuente y colores modernos */
+  body {
+    font-family: 'Roboto', sans-serif;
+    background: #f0f4f8;
+    color: #333;
+    padding: 20px;
+  }
+
+  /* Contenedor principal */
+  .container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  /* Encabezado */
+  header {
+    text-align: center;
+    margin-bottom: 40px;
+  }
+
+  h1 {
+    font-size: 2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  /* Estilo para los íconos SVG */
+  .icon {
+    vertical-align: middle;
+  }
+
+  /* Bloques */
+  .block {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    padding: 20px;
+    margin-bottom: 30px;
+  }
+
+  .block h2 {
+    font-size: 1.5em;
+    color: #007BFF;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .block p {
+    margin-bottom: 15px;
+    line-height: 1.5;
+  }
+
+  /* Inputs y botón */
+  input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border: 2px solid #ddd;
+    border-radius: 4px;
+    transition: border-color 0.3s;
+    margin-bottom: 10px;
+  }
+
+  input[type="text"]:focus {
+    border-color: #007BFF;
+    outline: none;
+  }
+
+  button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+    background: #007BFF;
+    color: #fff;
+    cursor: pointer;
+    transition: background 0.3s;
+  }
+
+  button:hover {
+    background: #0056b3;
+  }
+
+  /* Diseño responsive */
+  @media (min-width: 768px) {
+    .block {
+      padding: 30px;
+    }
+    input[type="text"], button {
+      font-size: 18px;
+    }
+  }
+