Implementado formulario operativo

src/app/app.component.html

@@ -1,5 +1 @@
-<div class="container">
-  <h2>Handbreak Calculator BS</h2>
-  <hr/>
-  <app-layout></app-layout>
-</div>
+<app-layout></app-layout>

src/app/app.module.ts

@@ -4,11 +4,13 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { LayoutComponent } from './layout/layout.component';
+import { CalculatorComponent } from './calculator/calculator.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    LayoutComponent
+    LayoutComponent,
+    CalculatorComponent
   ],
   imports: [
     BrowserModule,

src/app/calculator/calculator.component.html

@@ -0,0 +1,40 @@
+<form [formGroup]="bitrateForm" (submit)="calculateBitrate()">
+  <div class="form-group mb-2">
+    <label for="size">Peso deseado (en MB)</label>
+    <div class="input-group">
+      <input type="number" class="form-control" id="size" name="size" formControlName="size"/>
+      <span class="input-group-text">MB</span>
+    </div>
+    <small class="text-danger" *ngIf="checkValidityField('size')">Este campo es obligatorio</small>
+  </div>
+  <div class="form-group mb-2">
+    <label for="runtime">Duración del video (en segundos)</label>
+    <div class="input-group">
+      <input type="number" class="form-control" id="runtime" name="runtime" formControlName="runtime" />
+      <span class="input-group-text">s</span>
+    </div>
+    <small class="text-danger" *ngIf="checkValidityField('runtime')">Este campo es obligatorio</small>
+  </div>
+  <div class="form-group mb-4">
+    <label for="audioBitrate">Bitrate del audio (en kbps)</label>
+    <div class="input-group">
+      <input type="number" class="form-control" id="audioBitrate" name="audioBitrate" formControlName="audioBitrate" />
+      <span class="input-group-text">kbps</span>
+    </div>
+    <small class="text-danger" *ngIf="checkValidityField('audioBitrate')">Este campo es obligatorio</small>
+  </div>
+  <div class="form-group">
+    <div class="d-flex justify-content-between">
+      <button type="submit" class="btn btn-primary" [disabled]="bitrateForm.invalid">
+        Calcular
+      </button>
+      <button type="button" class="btn btn-danger" (click)="resetForm()">
+        Resetear formulario
+      </button>
+    </div>
+  </div>
+</form>
+<div class="text-center" *ngIf="videoBitrate">
+  <hr/>
+  <p>Bitrate de video a introducir en Handbreak: <strong>{{videoBitrate}}</strong> kbps</p>
+</div>

src/app/calculator/calculator.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CalculatorComponent } from './calculator.component';
+
+describe('CalculatorComponent', () => {
+  let component: CalculatorComponent;
+  let fixture: ComponentFixture<CalculatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CalculatorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CalculatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/calculator/calculator.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-calculator',
+  templateUrl: './calculator.component.html',
+  styleUrls: ['./calculator.component.scss']
+})
+export class CalculatorComponent implements OnInit {
+
+  videoBitrate: number;
+
+  bitrateForm: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+  ) { }
+
+  ngOnInit(): void {
+    this.bitrateForm = this.fb.group({
+      size: ['', Validators.required],
+      runtime: ['', Validators.required],
+      audioBitrate: ['', Validators.required]
+    });
+  }
+
+  checkValidityField(field: string): boolean {
+    const control = this.bitrateForm.controls[field];
+    return control.touched && control.invalid;
+  }
+
+  calculateBitrate(): void {
+    const formsValue = this.bitrateForm.value;
+    this.videoBitrate = Math.ceil((formsValue.size * 1024 * 8) / formsValue.runtime) - formsValue.audioBitrate;
+  }
+
+  resetForm(): void {
+    this.bitrateForm.reset();
+    this.videoBitrate = null;
+  }
+}

src/app/layout/layout.component.html

@@ -1 +1,13 @@
-<p>layout works!</p>
+<div class="container my-2">
+  <header>
+    Header
+  </header>
+  <main>
+    <app-calculator></app-calculator>
+  </main>
+  <hr/>
+  <footer>
+    Footer
+  </footer>
+</div>
+

tsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,