Kod startowy do aplikacji "Najlepsze Cytaty"

angular.json

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

app.component.html

<!-- Nagłówek -->
<nav>
  <div class="nav-wrapper teal darken-3">
    <span class="brand-logo center">Najlepsze cytaty</span>
  </div>
</nav>
<!-- koniec nagłówka -->

<div class="container q-container">
  <!--Dodawanie cytatu-->
  <button class="btn-floating teal add-button">
    <i class="material-icons">add</i>
  </button>
  <div class="row">
    <div class="input-field col s4">
      <input type="text" placeholder="Autor" />
    </div>
    <div class="input-field col s6">
      <input type="text" placeholder="Cytat" />
    </div>
    <div class="input-field col s2">
      <button class="btn small">Dodaj</button>
    </div>
  </div>
  <!-- Koniec dodawania cytatu -->

  <div class="row">
    <!-- Lista cytatów -->
    <div class="col s8">
      <div class="row">
        <div class="col s12">
          <div class="card teal accent-4 hoverable">
            <div class="card-content white-text">
              <span class="card-title">
                Jeśli nie chcesz mojej zguby, krrrokodyla daj mi luby.
              </span>
              Aleksander Fredro
            </div>
            <div class="card-action right-align">
              <span class="badge grey darken-2 left white-text">7</span>
              <button class="btn blue mr-5">
                <i class="material-icons">exposure_plus_1</i>
              </button>
              <button class="btn brown">
                <i class="material-icons">exposure_neg_1</i>
              </button>
            </div>
          </div>
          <div class="card teal accent-5 hoverable">
            <div class="card-content white-text">
              <span class="card-title">
                Jeśli nie chcesz mojej zguby, krrrokodyla daj mi luby.
              </span>
              Aleksander Fredro
            </div>
            <div class="card-action right-align">
              <span class="badge grey darken-2 left white-text">7</span>
              <button class="btn blue mr-5">
                <i class="material-icons">exposure_plus_1</i>
              </button>
              <button class="btn red">
                <i class="material-icons">exposure_neg_1</i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Koniec lista cytatów -->

    <!-- Sekcja rankigów -->
    <div class="col s4">
      <div class="col s12">
        <h5>Najlepsze</h5>
        <div class="collection">
          <p class="collection-item">
            <span class="blue lighten-4 badge">7</span>
            Jeśli nie chcesz mojej zguby, krrrokodyla daj mi luby.<br />
            <span class="blue-text">Aleksander Fredro</span>
          </p>
        </div>
      </div>
      <div class="col s12">
        <h5>Najgorsze</h5>
        <div class="collection">
          <p class="collection-item">
            <span class="blue lighten-4 badge">-2</span>
            Bądź dobrej myśli, bo po co być złej.<br />
            <span class="blue-text">Stanisław Lem</span>
          </p>
        </div>
      </div>
    </div>
    <!-- Sekcja rankigów -->
  </div>
</div>

database.ts

import { Quotation } from './quotation';

export const QUOTES: Quotation[] = [
  {
    author: 'Jonathan Carroll',
    sentence: 'To, że milczę, nie znaczy, że nie mam nic do powiedzenia.',
    votes: -4,
  },
  {
    author: 'Suzanne Collins',
    sentence: 'Masz w sobie tyle uroku co zdechła dżdżownica.',
    votes: 2,
  },
  {
    author: 'George Eliot',
    sentence: 'Nigdy nie jest za późno, by stać się tym, kim chcemy być.',
    votes: 1,
  },
  {
    author: 'Stanisław Lem',
    sentence: 'Bądź dobrej myśli, bo po co być złej.',
    votes: null,
  },
  {
    author: 'Tove Jansson',
    sentence: 'Mówienie tak bardzo przeszkadza w myśleniu.',
    votes: -8,
  },
  {
    author: 'Peter Lippert',
    sentence: 'Życia nie można wybrać, ale można z niego coś zrobić.',
    votes: 0,
  },
];

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

quotation.ts

export interface Quotation {
  author: string;
  sentence: string;
  votes: number;
}

style.css

.mr-5 {
  margin-right: 5px;
}

.edit-row {
  transition: 0.5s ease-in-out;
  transform: translateX(-200%);
}

.drawer {
  transform: translateX(0) !important;
}

.q-container {
  position: relative;
}

.add-button {
  position: absolute !important;
  right: 0;
  top: -22px;
}