feat(00_alert-message):Ejercicio con un simple uso de TypeScript

andru255 · andru255 · commit bcf18425d048 · 2017-01-22T12:05:42.000-05:00
diff --git a/00_alert-message/README.md b/00_alert-message/README.md
@@ -0,0 +1,24 @@
+# Alert message
+
+Interface que muestra una cajita de texto con un boton, los escenarios son:
+
+- El campo de texto te debe permitir cualquier tipo de texto, luego, al clickear
+  debe mostrar un alert con el texto ingresado en ese campo de texto.
+
+- Al Ingresar un texto en el campo de texto, al presionar enter debe mostrar
+  un alert con el texto ingresado en ese campo.
+
+Ejercicio para comprender lo siguiente:
+
+- Simple uso de TypeScript, compilar vía comando.
+- Casting, Transformar un tipo de dato y almacenarlo en una variable.
+- Asociacion de eventos, tanto al hacer el submit como al presionar enter.
+
+## Qué se necesita
+
+- Tener la última versión de nodejs instalado
+- Tener instalado globalmente el paquete de TypeScript
+
+## Cómo visualizarlo?
+
+- Abrir el index.html en el navegador.
diff --git a/00_alert-message/index.html b/00_alert-message/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Alert message!</title>
+    </head>
+    <body>
+        <h1>Ingresa tu texto aqui:</h1>
+        <input type="text" name="txtMessage" id="txtMessage"/>
+        <input type="submit" value="Get Alert!" id="btnGetAlert" />
+        <script src="./index.js" type="text/javascript"></script>
+    </body>
+</html>
diff --git a/00_alert-message/index.js b/00_alert-message/index.js
@@ -0,0 +1,16 @@
+window.onload = function () {
+    var txtMessage = document.getElementById("txtMessage");
+    var btnGetAlert = document.getElementById("btnGetAlert");
+    btnGetAlert.addEventListener("click", function (evt) {
+        var myMessage = txtMessage.value;
+        alert(myMessage);
+        evt.preventDefault();
+    });
+    document.addEventListener("keydown", function (evt) {
+        var myMessage = txtMessage.value;
+        var enterKeyCode = evt.keyCode;
+        if (enterKeyCode == 13) {
+            alert(myMessage);
+        }
+    });
+};
diff --git a/00_alert-message/index.ts b/00_alert-message/index.ts
@@ -0,0 +1,20 @@
+window.onload = ()=>{
+    //parsing
+    var txtMessage:HTMLInputElement = <HTMLInputElement>document.getElementById("txtMessage");
+    var btnGetAlert:HTMLInputElement = <HTMLInputElement>document.getElementById("btnGetAlert");
+
+    //binding events
+    btnGetAlert.addEventListener("click", (evt)=> {
+        var myMessage:string = txtMessage.value;
+        alert(myMessage);
+        evt.preventDefault();
+    });
+    
+    document.addEventListener("keydown", (evt)=> {
+        var myMessage:string = txtMessage.value;
+        var enterKeyCode:number = evt.keyCode; 
+        if(enterKeyCode == 13){
+            alert(myMessage);
+        }
+    });
+};
