LIDR-academy · ClaudioReevas · Mar 2, 2025 · Mar 2, 2025
diff --git a/reverse-string/rev3erse-string-CSRA/PROMPTS.md b/reverse-string/rev3erse-string-CSRA/PROMPTS.md
@@ -0,0 +1,40 @@
+# AI4Devs - reverse-string
+Developer: Claudio Rivas
+Proposito: Ejercicio de práctica
+
+Este es la entrega de mi ejercicio para AI4Devs. En resumen el ejercicio debe generar un sitio web simple que regrese la cadena en reversa conforme sea ingresada.
+
+
+## Prompt Inicial
+Utiliza código HTML, CSS y Javascript para generar un programa que realice lo siguiente:
+
+1.- Solicite un texto o palabra en un campo de texto
+2.- Cuando el usuario presione el botón "invertir texto" realice una inversión de texto
+3.- De como salida el texto o palabra en el orden invertido en un formato de etiqueta
+
+## Prompt 2 - Segmentación en archivos
+Genera una propuesta con los archivos separados para cada caso, html, css, javascript, generando las referencias para que el html funcione correctamente.
+
+## Prompt 3 - Solicitud de modificación de funcionamiento
+Excelente, ahora modifica el funcionamiento para que inviertas el texto en tiempo real cuando se está escribiendo el texto en el campo de texto y sin necesidad de utilizar el botón de "Invertir texto"
+
+## Prompt 4 - Solicitud de generación de Markdown de su última respuesta
+Genera tu última respuesta en formato Markdown
+
+## Resultado final (Markdown de respuesta)
+Al solicitar el archivo markdown solo regresó el contenido de los archivos index.html style.css y script.js además de la siguiente respuesta:
+
+
+# Ejemplo de Código: Invertir Texto en Tiempo Real
+
+A continuación, se muestra una propuesta de cómo se puede lograr **invertir el texto en tiempo real** mientras el usuario escribe, con los archivos separados: **HTML**, **CSS** y **JavaScript**. De esta forma, no habrá necesidad de un botón; el texto se invertirá de inmediato cada vez que se modifique el campo de texto.
+
+---
+
+## Estructura de Archivos
+
+```bash
+.
+├── index.html
+├── style.css
+└── script.js
diff --git a/reverse-string/rev3erse-string-CSRA/index.html b/reverse-string/rev3erse-string-CSRA/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <title>Invertir Texto en Tiempo Real</title>
+  <!-- Referencia al archivo CSS -->
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <!-- Contenido HTML -->
+  <div class="container">
+    <label for="texto">Ingresa un texto o palabra:</label>
+    <input type="text" id="texto" placeholder="Escribe aquí...">
+
+    <!-- Etiqueta donde se mostrará el texto invertido -->
+    <label id="resultado" class="resultado-label"></label>
+  </div>
+
+  <!-- Referencia al archivo JavaScript -->
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/reverse-string/rev3erse-string-CSRA/script.js b/reverse-string/rev3erse-string-CSRA/script.js
@@ -0,0 +1,16 @@
+// Obtén referencia al campo de texto
+const inputTexto = document.getElementById('texto');
+// Obtén referencia a la etiqueta donde mostrar el resultado
+const resultadoLabel = document.getElementById('resultado');
+
+// Evento 'input' que se dispara en tiempo real conforme se escribe
+inputTexto.addEventListener('input', function() {
+  // Se obtiene el valor actual del input
+  const texto = inputTexto.value;
+
+  // Se invierte el texto
+  const textoInvertido = texto.split('').reverse().join('');
+
+  // Se muestra el texto invertido en el label con id "resultado"
+  resultadoLabel.textContent = textoInvertido;
+});
diff --git a/reverse-string/rev3erse-string-CSRA/style.css b/reverse-string/rev3erse-string-CSRA/style.css
@@ -0,0 +1,32 @@
+/* Estilos generales */
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+  }
+
+  /* Contenedor principal */
+  .container {
+    max-width: 300px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Etiquetas */
+  label {
+    font-weight: bold;
+    margin-top: 10px;
+  }
+
+  /* Input */
+  input {
+    margin-top: 5px;
+    padding: 8px;
+    font-size: 16px;
+  }
+
+  /* Resultado invertido */
+  .resultado-label {
+    margin-top: 10px;
+    font-weight: bold;
+    color: #007ACC;
+  }