Add the CodeInput and Output components

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sandkasten-web.iml" filepath="$PROJECT_DIR$/.idea/sandkasten-web.iml" />
+    </modules>
+  </component>
+</project>

.idea/sandkasten-web.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

sandkasten/angular.json

@@ -94,5 +94,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

sandkasten/src/app/app.component.css

@@ -0,0 +1,14 @@
+.code_container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  color: white;
+}
+
+.code_container .code_input {
+  background: red;
+}
+
+.code_container .code_output {
+  background: blue;
+}

sandkasten/src/app/app.component.html

@@ -1 +1,6 @@
-<app-header></app-header>
+<app-header></app-header>
+<div class="code_container">
+  <app-code-input class="code_input"></app-code-input>
+  <app-code-output class="code_output"></app-code-output>
+</div>
+<app-footer></app-footer>

sandkasten/src/app/app.component.spec.ts

@@ -5,7 +5,7 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(() => TestBed.configureTestingModule({
     imports: [RouterTestingModule],
-    declarations: [AppComponent]Ensuite, dans le texte du cours, je vous explique les concepts du chap
+    declarations: [AppComponent]
   }));
 
   it('should create the app', () => {

sandkasten/src/app/app.module.ts

@@ -4,11 +4,17 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
+import { CodeInputComponent } from './code-input/code-input.component';
+import { CodeOutputComponent } from './code-output/code-output.component';
+import { FooterComponent } from './footer/footer.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HeaderComponent
+    HeaderComponent,
+    CodeInputComponent,
+    CodeOutputComponent,
+    FooterComponent
   ],
   imports: [
     BrowserModule,

sandkasten/src/app/code-input/code-input.component.css

@@ -0,0 +1,5 @@
+.code_input .code_input_textarea {
+  background-color: #cccccc;
+  min-height: 80vh;
+  width: 100%;
+}

sandkasten/src/app/code-input/code-input.component.html

@@ -0,0 +1,3 @@
+<div class="code_input">
+  <textarea class="code_input_textarea" id="code_input" name="code_input" placeholder="Enter your code here..."></textarea>
+</div>

sandkasten/src/app/code-input/code-input.component.spec.ts

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

sandkasten/src/app/code-input/code-input.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-code-input',
+  templateUrl: './code-input.component.html',
+  styleUrls: ['./code-input.component.css']
+})
+export class CodeInputComponent {
+
+}

sandkasten/src/app/code-output/code-output.component.html

@@ -0,0 +1 @@
+<p>code-output works!</p>

sandkasten/src/app/code-output/code-output.component.spec.ts

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

sandkasten/src/app/code-output/code-output.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-code-output',
+  templateUrl: './code-output.component.html',
+  styleUrls: ['./code-output.component.css']
+})
+export class CodeOutputComponent {
+
+}

sandkasten/src/app/footer/footer.component.html

@@ -0,0 +1 @@
+<p>footer works!</p>

sandkasten/src/app/footer/footer.component.spec.ts

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

sandkasten/src/app/footer/footer.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent {
+
+}