Avancée composant header

2 years ago · 781568ccdf
parent e52bd70f11
commit 781568ccdf
9 changed files with 49 additions and 17 deletions
--- a/sandkasten/.gitignore
+++ b/sandkasten/.gitignore
@ -28,6 +28,7 @@ yarn-error.log
 !.vscode/extensions.json
 .history/*

+
 # Miscellaneous
 /.angular/cache
 .sass-cache/
--- a/sandkasten/src/app/code-input/code-input.component.html
+++ b/sandkasten/src/app/code-input/code-input.component.html
@ -1,3 +1,10 @@
 <div class="code_input">
-  <textarea class="code_input_textarea" id="code_input" name="code_input" placeholder="Enter your code here..."></textarea>
+  <textarea
+    class="code_input_textarea"
+    id="code_input"
+    name="code_input"
+    placeholder="Enter your code here..."
+  ></textarea>
+  <button (click)="onRunButtonClicked()">Run</button>
+  <p>{{ reponse }}</p>
 </div>
--- a/sandkasten/src/app/code-input/code-input.component.ts
+++ b/sandkasten/src/app/code-input/code-input.component.ts
@ -6,5 +6,9 @@ import { Component } from '@angular/core';
  styleUrls: ['./code-input.component.css']
 })
 export class CodeInputComponent {
-
+  reponse!: string;
+  onRunButtonClicked() {
+    this.reponse = 'Run button clicked';
+    console.log('Run button clicked');
+  }
 }
--- a/sandkasten/src/app/header/header.component.css
+++ b/sandkasten/src/app/header/header.component.css
@ -0,0 +1,7 @@
+.header-card {
+    width: 35%;
+
+    img {
+        width: 10%;
+    }
+}
--- a/sandkasten/src/app/header/header.component.html
+++ b/sandkasten/src/app/header/header.component.html
@ -1 +1,6 @@
-<p>header works!</p>
+<div class="header-card">
+  <h2>{{ title }}</h2>
+  <p>{{ description }}</p>
+  <p>Version : {{ version }}</p>
+  <img [src]="imgSrc" alt="imgSrc" />
+</div>
--- a/sandkasten/src/app/header/header.component.ts
+++ b/sandkasten/src/app/header/header.component.ts
@ -9,13 +9,13 @@ export class HeaderComponent implements OnInit {
  title!: string;
  description!: string;
  version!: number;
-  logo!: string;
+  imgSrc!: string;

  ngOnInit(): void {
    this.title = 'Sandkasten';
    this.description = 'Ein Angular-Sandkasten';
    this.version = 1.0;
-    this.logo = 'logo.svg';
+    this.imgSrc = 'assets/img/logo.png';
  }

 }
--- a/sandkasten/src/assets/img/logo.png
+++ b/sandkasten/src/assets/img/logo.png
--- a/sandkasten/src/index.html
+++ b/sandkasten/src/index.html
@ -1,13 +1,19 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Sandkasten</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Sandkasten</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="assets/img/logo.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
--- a/sandkasten/src/styles.css
+++ b/sandkasten/src/styles.css
@ -1 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
+* {
+    font-family: Roboto, Helvetica, sans-serif;
+}