- Crear una aplicación web con weg_ui llamada 'letras' y cambiar el código por el de abajo.
- En .dart defino dos listas y dos funciones:
- lista_abc : con cada una de las letras del abecedario
- guiones: con tantos guiones como letras tiene el abecedario
- comprueba_letra() : mira si letra_nueva esta en letras_abc
- muestra_letra(): cambia un guión por letra_nueva
- En .html defino tres templates
- <template iterate="letra in guiones"> {{letra}} : la variable letra itera sobre la lista de guiones
- <template if="!completado"> : Si completado = false, añade un mensaje Teclea las letras... y un input al DOM.
- <template if="completado"> : Si completado = true, añade el mensaje ¡Lo has completado! al DOM.
letra.dart
//Define la cadena con todo el abecedario
String letras_cadena = 'abcdefghijklmnñopqrstuvwxyz';
//Crea una lista con cada letra como elemento
List<String> letras_abc = letras_cadena.splitChars();
//Crea lista remplazando la lista de letras por guiones
List<String> guiones = letras_cadena.replaceAll(new RegExp('.'), '-').splitChars();
String letra_nueva = ''; //Define la letra a ingresar
bool completado = false; //Define si/no esta completado
void main() { //No necesita nada el main, solo dos funciones llamadas desde html
}
//Funcion para comprobar si letra_nueva esta en la lista de letras
void comprueba_letra() {
if (letras_abc.contains(letra_nueva)) { //Comprueba si esta en la lista
muestra_letra(); //Si esta muestra la lista de guiones con la letra nueva
if (!guiones.contains('-')) { //Si la lista de guiones no tiene ningún guión, completado = si
completado = true;
}
}
letra_nueva = ''; //Vacia letra_nueva a la espera del input
}
//Funcion para poner letra_nueva en la lista de guiones
void muestra_letra() {
for (int i = 0; i < letras_abc.length; i++) { //Bucle que recorre toda la lista de letras
if (letras_abc[i] == letra_nueva) { //Si el elelmento de lista_letras es igual letra_nueva
guiones[i] = letra_nueva; //Cambia el elemento i de guiones por letra_nueva.
}
}
}
letras.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Abecedario</title>
<link rel="stylesheet" href="letras.css">
</head>
<body>
<h1>Abecedario</h1>
<div id="abc">
<!-- Bucle iterativo sobre la lista 'guiones' recorrida por la variable 'letra' -->
<template iterate="letra in guiones"> {{letra}} </template>
</div>
<div>
<!-- Si no se ha completado añade un input al DOM para pedir una letra -->
<template if="!completado">
Teclea las letras una a una
<!-- Al levantar la tecla lanza la funcion 'comprueba_letra()' mete el input en 'letra_nueva' -->
<input on-key-up="comprueba_letra()" bind-value="letra_nueva">
</template>
<!-- Si se ha completado muestra el mensaje en el DOM -->
<template if="completado"> ¡Lo has completado! </template>
</div>
<script type="application/dart" src="letras.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
No hay comentarios:
Publicar un comentario