LIDR-academy · felipemarin · Feb 24, 2025 · Feb 24, 2025 · Feb 25, 2025
diff --git a/reverse-string/reversestring-AFM/index.html b/reverse-string/reversestring-AFM/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reverse String</title>    
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            text-align: center;
+        }
+
+        h1 {
+            font-size: 24px;
+            color: #333;
+        }
+
+        p.instruction {
+            font-size: 16px;
+            color: #555;
+            margin-bottom: 15px;
+        }
+
+        input {
+            padding: 10px;
+            font-size: 16px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            width: 250px;
+        }
+
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            background-color: #007BFF;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            margin-top: 10px;
+        }
+
+        button:hover {
+            background-color: #0056b3;
+        }
+
+        p#result {
+            font-size: 18px;
+            font-weight: bold;
+            margin-top: 15px;
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <h1>Invertir Texto</h1>
+    <p class="instruction">¿Dudas de que <strong>América campeón</strong> sigue siendo lo mismo al revés? ¡Prueba con cualquier frase y descúbrelo!</p>
+    <input type="text" id="textInput" placeholder="Ingresa una cadena">
+    <p id="result"></p>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/reverse-string/reversestring-AFM/prompts.md b/reverse-string/reversestring-AFM/prompts.md
@@ -0,0 +1,40 @@
+# Documentación de Prompts Utilizados con ChatGPT
+
+Este documento recopila los prompts utilizados con ChatGPT para desarrollar la funcionalidad de inversión de texto en tiempo real, así como mejoras en la UI y la experiencia del usuario.
+
+## Herramienta utilizada
+- **Chatbot:** ChatGPT
+
+## Prompts utilizados
+
+1. **Creación de una página web básica para invertir texto**
+   - *"Puedes ayudarme a crear una página web con lógica en JavaScript que invierta el orden de una cadena de texto?"*
+   - Se proporcionaron los archivos `index.html` y `script.js`.
+
+2. **Agregar input y botón al HTML en lugar de hacerlo en JavaScript**
+   - *"No hay necesidad de crearlo todo en el script.js, se podría modificar el index.html para que ya tuviera los inputs y botones?"*
+
+3. **Mejorar el diseño de la página**
+   - *"Podemos agregarle estilos al index.html para que se vea más amigable? Por ejemplo, centrar el input y el botón? Y darle un color al botón?"*
+
+4. **Agregar título e instrucciones**
+   - *"Puedes agregar un título al index.html y una pequeña instrucción?"*
+
+5. **Personalización de la instrucción con 'América campeón'**
+   - *"Tu frase de ejemplo está muy bien, pero quiero personalizarla y darle algo de juego, quiero que uses de alguna forma 'América campeón' dentro de la frase."*
+
+6. **Agregar interactividad al botón**
+   - *"Vamos a agregarle un poco más de juego con estos dos retos: El botón debe aparecer cuando haya texto suficiente, más de 3 letras. Que te dé la cadena en tiempo real, que no dependa del botón."*
+
+7. **Reemplazo del botón 'Invertir' por uno de 'Copiar'**
+   - *"Vale, pero ya no veo la funcionalidad de ese botón si el texto aparece automáticamente, lo que haría es que cambiaría el botón por uno de copiar el texto, lo ubicaría abajo del resultado."*
+
+8. **Eliminación del botón 'Invertir' ya que no es necesario**
+   - *"Vale, pero entonces el botón de 'Invertir' ya no es necesario."*
+
+9. **Sugerencia de commit message**
+   - *"Me puedes sugerir un commit message para estos cambios?"*
+
+10. **Documentación de los prompts utilizados**
+    - *"Me puedes ayudar a documentar los prompts que utilicé contigo en un archivo prompts.md y que también indique que te utilicé como chatbot?"*
+
diff --git a/reverse-string/reversestring-AFM/script.js b/reverse-string/reversestring-AFM/script.js
@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const input = document.getElementById("textInput");
+    const copyButton = document.createElement("button");
+    copyButton.textContent = "Copiar texto";
+    copyButton.style.display = "none"; // Ocultar botón inicialmente
+    document.body.appendChild(copyButton);
+
+    const result = document.getElementById("result");
+
+    input.addEventListener("input", function () {
+        const text = input.value;
+        result.textContent = text.split("").reverse().join(""); // Actualizar resultado en tiempo real
+
+        if (text.length > 3) {
+            copyButton.style.display = "block"; // Mostrar botón si hay más de 3 letras
+        } else {
+            copyButton.style.display = "none"; // Ocultar botón si hay 3 o menos letras
+        }
+    });
+
+    copyButton.addEventListener("click", function () {
+        navigator.clipboard.writeText(result.textContent)
+            .then(() => {
+                alert("Texto copiado al portapapeles");
+            })
+            .catch(err => {
+                console.error("Error al copiar", err);
+            });
+    });
+});
diff --git a/reverse-string/template/index.html b/reverse-string/template/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Reverse String</title>    
+    <title>Reverse String</title>
 </head>
 <body>
 <script src="script.js"></script>