elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  adaptar codigo html a angular
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: adaptar codigo html a angular  (Leído 2,778 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
adaptar codigo html a angular
« en: 21 Mayo 2020, 08:36 am »

como puedo adaptar este fragmento de codigo para ser usado en angular??

Código
  1. <div id="div_palabra"></div>
  2.  
  3.  let activo
  4.  dibujarPalabra('RAT')
  5.  capturaTeclado()
  6.  
  7.  function dibujarPalabra(palabra) {
  8.    const div = document.getElementById('div_palabra')
  9.    for (let i = 0; i < palabra.length; i++) {
  10.      const btn = document.createElement('button')
  11.      btn.addEventListener('click', (e) => activo = e.target)
  12.      const txt = document.createTextNode('_')
  13.      btn.appendChild(txt)
  14.      div.appendChild(btn)
  15.    }
  16.  }
  17.  
  18.  function capturaTeclado() {
  19.    document.addEventListener('keyup', (e) => {
  20.      if (activo && e.keyCode > 64 && e.keyCode < 90) {
  21.        activo.innerText = e.key
  22.      }
  23.    })
  24.  }
  25. </script>


En línea

7w7
EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 2.041



Ver Perfil
Re: adaptar codigo html a angular
« Respuesta #1 en: 22 Mayo 2020, 01:47 am »

- Copiando y pegando el código en el src/index.html debería de funcionar correctamente XD. Pero si quieres integrarlo como un componente tienes que agregar uno como tal y/o editar uno ya existente.

- En otro Post leí que estabas mencionando algo de Routing, entonces supongo que quieres agregar un Componente para registrarlo en el Módulo routing.module.ts.

- Primero agrega el Componente que en mi caso llamaré juego,

Código
  1. ng generate component juego

- Luego ve a tu Módulo routing.module.ts que en mi caso es app-routing.module.ts y agrega la ruta, que en mi caso terminaría todo así:

Código
  1. import { NgModule } from '@angular/core';
  2. import { Routes, RouterModule } from '@angular/router';
  3. import { JuegoComponent } from './juego/juego.component';
  4.  
  5. const routes: Routes = [
  6.  {
  7.    path: 'app-juego',
  8.    component: JuegoComponent
  9.  }
  10. ];
  11.  
  12. @NgModule({
  13.  imports: [RouterModule.forRoot(routes)],
  14.  exports: [RouterModule]
  15. })
  16. export class AppRoutingModule { }
  17.  

- El juego.component.html terminaría así:

Código
  1. <div id="div_palabra"></div>

- Y el juego.component.ts así:

Código
  1. import { Component, OnInit } from '@angular/core';
  2.  
  3. @Component({
  4.  selector: 'app-juego',
  5.  templateUrl: './juego.component.html',
  6.  styleUrls: ['./juego.component.css']
  7. })
  8. export class JuegoComponent implements OnInit {
  9.  
  10.  activo: any
  11.  
  12.  constructor() { }
  13.  
  14.  ngOnInit(): void {
  15.    this.dibujarPalabra('RAT')
  16.    this.capturaTeclado()
  17.  }
  18.  
  19.  dibujarPalabra(palabra: string): void {
  20.    const div = document.getElementById('div_palabra')
  21.    for (let i = 0; i < palabra.length; i++) {
  22.      const btn = document.createElement('button')
  23.      btn.addEventListener('click', (e) => this.activo = e.target)
  24.      const txt = document.createTextNode('_')
  25.      btn.appendChild(txt)
  26.      div.appendChild(btn)
  27.    }
  28.  }
  29.  
  30.  capturaTeclado(): void {
  31.    document.addEventListener('keyup', (e) => {
  32.      if (this.activo && e.keyCode > 64 && e.keyCode < 90) {
  33.        this.activo.innerText = e.key
  34.      }
  35.    })
  36.  }
  37.  
  38. }
  39.  

- Para finalizar ejecutas lo siguiente:

Código
  1. ng serve -o

-- Entonces agregas a la URL /app-juego y al final debería mostrar los botones y funcionar los eventos, en mi caso la URL sería: http://localhost:4200/app-juego


- Esa es una manera poco elaborada, luego se puede adaptar mejor para usar funcionalidades más puras de Angular, primero que funcione lo anterior y luego se corrige lo demás.


En línea

Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
Re: adaptar codigo html a angular
« Respuesta #2 en: 22 Mayo 2020, 04:45 am »

me faltan dos cositas,
1) que al ingresar una letra que sea incorrecta el jugador se le descuento 1 vida
2) y que al acertar la palabra completa pase a la siguiente palabra y gane una cantidad de puntos :D
« Última modificación: 22 Mayo 2020, 05:48 am por Beginner Web » En línea

7w7
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Adaptar codigo
Programación Visual Basic
Jorgenew 0 1,378 Último mensaje 1 Agosto 2013, 20:44 pm
por Jorgenew
mejor solucion para adaptar html a varias resoluciones « 1 2 »
Desarrollo Web
gAb1 11 5,127 Último mensaje 26 Abril 2014, 18:13 pm
por gAb1
Adaptar código Visual C++ .net a C++ MFC.
Programación C/C++
Meta 0 1,291 Último mensaje 6 Diciembre 2015, 09:52 am
por Meta
Adaptar código de C++ deLinux a C# de Windows
.NET (C#, VB.NET, ASP)
Meta 5 3,337 Último mensaje 5 Diciembre 2016, 16:03 pm
por Meta
Mi primer controlador en Angular 1 (Problema con los inputs en HTML)
Desarrollo Web
Ali Baba 2 3,519 Último mensaje 10 Junio 2017, 17:05 pm
por Razzari
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines