angularjs

App web para memorizar cosas hecha con AngularJS y Bootstrap 4

Introducción

Retomando la sección de cosas que hago para usos personales, recuerdo que una vez hice una app para memorizar un texto. Es muy simple, pegas un texto que tienes que memorizar y el software se encarga de eliminar algunas partes de éste y dejarlas en blanco.

Luego, tienes que completar estos campos. Y la app te indica si lo hiciste bien o mal. Si no te gusta la forma en la que se mezclaron las palabras, puedes mezclarlas de nuevo.

Tecnologías utilizadas

  • Para su funcionamiento utiliza AngularJS en su versión 1.6.5.
  • Para el diseño, aprovecha el bonito estilo de Bootstrap 4.
  • Finalmente, los iconos son gracias a Fontawesome.

Explicación y funcionamiento

Trataré de dar una explicación del funcionamiento. Tenemos la interfaz principal compuesta por un textarea y un botón.

Al botón le añadimos el atributo ng-click para que AngularJS se encargue de llamar a la función comenzar, que recibe el texto como argumento.

$scope.comenzar = textoOriginal => {
 if (!textoOriginal) return;
 $scope.haComenzado = true;
 let textoComoArreglo = textoOriginal
   .replace(/[áéíóúñ]/g, coincidencia => {
    return {
     á: "a",
     é: "e",
     í: "i",
     ó: "o",
     ú: "u",
     ñ: "n"
    }[coincidencia];
   })
   .replace(/\W+/g, " ")
   .toLowerCase()
   .split(" "),
  contador = 0,
  textoModificado = [];
 textoComoArreglo.forEach(palabra => {
  if (
   $scope.deberiaBorrarEstaPalabra() &&
   contador < $scope.minimaSeparacionEntreInputs
  ) {
   contador++;
   textoModificado.push({
    palabraOriginal: palabra,
    palabraIntroducida: ""
   });
  } else {
   textoModificado.push({
    palabra: palabra
   });
   if (contador > 0) contador--;
  }
 });
 $scope.textoModificado = textoModificado;
};

Primeramente detenemos la ejecución si no hay texto, es decir, si lo dejaron en blanco. Luego, quitamos todos los acentos y letras ñ, para que los usuarios no se quejen de que pusieron bien la palabra pero “olvidaron la tilde”.

Luego, separamos todo el texto en cada espacio que encontremos, y lo convertimos en un arreglo. Lo recorremos completamente y en cada iteración hacemos una comparación.

Si el azar nos dice que borremos la palabra, entonces la borramos. Y ponemos en un nuevo arreglo (no el original, sino uno nuevo) un objeto con la palabra original y una cadena vacía, que será la que introducirá el usuario.

En caso de que no se deba borrar la palabra, la ponemos tal y como está.

La variable del contador es para que no queden muchos inputs cercanos o pegados.

¿Debería quitar esta palabra?

Este método se encarga de regresar, de acuerdo a una elección aleatoria, un booleano. Simplemente elige un valor de un arreglo. En el arreglo hay más falsos que verdaderos, pero esto ayuda a que no elimine muchas palabras. El código es este:

$scope.deberiaBorrarEstaPalabra = () => {
 let arreglo = [false, false, false, true, false, false, true];
 return arreglo[Math.floor(Math.random() * arreglo.length)];
};

Verificar si coinciden

Finalmente, para verificar si el usuario introdujo la palabra correcta, en la vista agregamos algunas clases dependiendo de ello. Si está bien, agregamos la clase is-valid y si no, la clase is-invalid. Esto hace que se coloree de verde o rojo.

<div class="container-fluid" ng-app="app">
    <div class="row" ng-controller="MainController">
        <div class="col-12" ng-if="!haComenzado">
            <div class="form-group">
                <label for="texto">Pega el texto aquí: </label>
                <textarea class="form-control" ng-model="texto.texto" name="texto" id="texto" cols="30" rows="10"></textarea>
            </div>
            <button ng-click="comenzar(texto.texto)" class="btn btn-success">Comenzar <i class="fa fa-arrow-right"></i></button>
        </div>
        <div class="col-12" ng-if="haComenzado">
            <br><button ng-click="volver()" class="btn btn-warning"><i class="fa fa-arrow-left"></i> Volver</button>&nbsp;<button ng-click="comenzar(texto.texto)" class="btn btn-primary">Mezclar <i class="fa fa-refresh"></i></button>
            <form class="form-inline">
                <span ng-repeat="palabra in textoModificado">
  <span ng-if="palabra.palabra">{{palabra.palabra}}&nbsp;</span>
                <div ng-if="palabra.palabraOriginal">
                    <input enfocar-siguiente-al-presionar-enter ng-style="{'width': ( (palabra.palabraOriginal.length === 1 ? 44 :  palabra.palabraOriginal.length <= 7 ? palabra.palabraOriginal.length * 25 : palabra.palabraOriginal.length * 9)) + 'px'}" ng-model="palabra.palabraIntroducida"
                        class="form-control" ng-class="{'is-valid': palabra.palabraOriginal === palabra.palabraIntroducida , 'is-invalid': palabra.palabraOriginal !== palabra.palabraIntroducida}" type="text">
                </div>
                </span>
            </form>
        </div>
    </div>
</div>

También es importante notar que la anchura del input viene dada de acuerdo a la longitud de la palabra. Dicha anchura o longitud es calculada con una fórmula medio rara pero que al final de todo funciona y cambia de acuerdo a qué tan larga esté la palabra.

Tal vez sería mejor calcular el ancho en una función interna, pero hoy no cambiaré el código.

App final

Así se ve al hacer click en comenzar:

Probar

Aquí dejo un pen para probar la app en vivo. Espero que les guste: https://codepen.io/parzibyte/pen/VMRggY/

Por cierto, dentro del código hay una directiva que me robé de por ahí, la cual se encarga de, como su nombre lo dice, enfocar el siguiente input cuando se presione la tecla Enter.

Conclusión

Recuerdo que hice esa cosa para memorizar algunas cosas en un examen. Soy muy malo con mi memoria, y creo que no sirvió para mucho.

Si hay algo que me molesta son los exámenes en donde tienes que utilizar la memoria para responderlos. Qué pereza y qué pérdida de tiempo, prefiero las cosas prácticas. Pero en fin, ojalá a alguien le sirva el software.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.