Kod startowy aplikacji "Easy Words"

angular.json

            "styles": [
              "src/styles.css",
              "./node_modules/materialize-css/dist/css/materialize.css"
            ],
            "scripts": [
              "./node_modules/materialize-css/dist/js/materialize.js"
            ]

answers.component.css

.incorrect {
  background-color: brown;
}

answers.component.html

<ul class="collection with-header">
  <li class="collection-header">
    <h4>Verbs/Nouns</h4>
  </li>
  <li
    class="collection-item"
  >
    Example Verb/Noun
  </li>
  <li
    class="collection-item incorrect"
  >
    Example Verb/Noun
  </li>
</ul>

app.component.html

<div class="row">
  <div class="col s12">
    <app-question></app-question>
  </div>
  <div class="col s6">
    <app-answers></app-answers>
  </div>
  <div class="col s6">
    <app-answers></app-answers>
  </div>
</div>

data-base.ts

import { Type, WordType } from './models';

export const WORDS: WordType[] = [
  {
    word: 'accept',
    type: Type.VERB,
  },
  {
    word: 'advice',
    type: Type.NOUN,
  },
  {
    word: 'blood',
    type: Type.NOUN,
  },
  {
    word: 'clear',
    type: Type.VERB,
  },
  {
    word: 'damage',
    type: Type.VERB,
  },
  {
    word: 'choice',
    type: Type.NOUN,
  },
  {
    word: 'educate',
    type: Type.VERB,
  },
];

models.ts

export interface WordType {
  word: string;
  type: Type;
  correct?: boolean;
}

export enum Type {
  NOUN, VERB
}

package.json

    "materialize-css": "1.0.0"

question.component.css

.m5 {
  margin-right: 10px;
}

question.component.html

<div class="row center">
  <div class="col s12">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <h2>Spoon</h2>
      </div>
      <div class="card-action">
        <button class="btn-large blue m5">
          Noun
        </button>
        <button class="btn-large blue">
          Verb
        </button>
        <button class="btn-large black">
          Sprawdź
        </button>
      </div>
    </div>
  </div>
</div>