58.listado_de_personajes

verdizone · Feb 23, 2021 · a123c77 · a123c77
1 parent bb4a853
commit a123c77
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 533 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { DbzModule } from './dbz/dbz.module';
 
 import { AppComponent } from './app.component';
 
@@ -8,7 +9,9 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    DbzModule,
+
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/src/app/dbz/dbz.module.ts b/src/app/dbz/dbz.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { MainPageComponent } from './main-page/main-page.component';
+
+
+@NgModule({
+  declarations: [MainPageComponent],
+  exports:[
+    MainPageComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+  ]
+})
+export class DbzModule { }
diff --git a/src/app/dbz/interfaces/dbz.interface.ts b/src/app/dbz/interfaces/dbz.interface.ts
@@ -0,0 +1,10 @@
+/*
+Esta interface es para que generemos
+un objeto para los personajes de la app
+*/
+
+interface Personajes{
+  nombre: string,
+  poder: number,
+
+}
diff --git a/src/app/dbz/main-page/main-page.component.html b/src/app/dbz/main-page/main-page.component.html
@@ -0,0 +1,45 @@
+<div class="container main-container">
+
+  <h1>Dragon Ball Z</h1>
+  <hr>
+
+  <div class="row">
+    <div class="col">
+      <h3>Personajes</h3>
+      <hr>
+      <ul *ngFor="let personaje of personajes">
+
+        <li>{{ personaje.nombre }} - {{personaje.poder|number}}</li>
+      </ul>
+    </div>
+    <div class="col">
+      <h3>Agregar</h3>
+      <hr>
+      <form (ngSubmit)="agregar()">
+        <input
+        type="text"
+        placeholder="Nombre"
+        class="form-control"
+        name="nombre"
+        [(ngModel)]=" nuevo.nombre"
+        >
+
+        <input
+        type="number"
+        placeholder="Poder"
+        class="form-control"
+        name="poder"
+        [(ngModel)]=" nuevo.poder"
+        >
+
+        <br>
+        <button  type="submit"
+        class="btn btn-outline-primary w-100">
+          Agregar...
+        </button>
+      </form>
+
+    </div>
+  </div>
+
+</div>
diff --git a/src/app/dbz/main-page/main-page.component.ts b/src/app/dbz/main-page/main-page.component.ts
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import '../interfaces/dbz.interface'
+
+
+@Component({
+  selector: 'app-main-page',
+  templateUrl: './main-page.component.html'
+})
+export class MainPageComponent  {
+
+  personajes:Personajes[] = [
+  {
+    nombre:'Krilin',
+    poder: 800,
+  },
+  {
+    nombre:'Goku',
+    poder: 14500,
+  }
+];
+
+  nuevo:Personajes = {
+    nombre: '',
+    poder: 0,
+  }
+
+  agregar(){
+
+    if(this.nuevo.nombre.trim().length===0){ return;   }
+
+    console.log(this.nuevo);
+    // this.peronajes.push(this.nuevo);
+    this.personajes.push(this.nuevo);
+    this.nuevo = {
+      nombre:'',
+      poder:0,
+    }
+
+
+
+  }
+
+
+}
diff --git a/src/index.html b/src/index.html
@@ -6,8 +6,12 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <!-- CSS only -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>
+  <!-- JavaScript Bundle with Popper -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/src/styles.css b/src/styles.css
@@ -1 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
+
+
+.main-container{
+  margin-top: 30px;
+}