Skip to content

Angular bootcamp

Jump to bottom
Vojtech Mašek edited this page Aug 19, 2019 · 2 revisions

1. část

2. část

Slidy: Google Slides

Zdroje:

<html lang="en">
  <head>
    ...
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
  </head>
  ...
</html>

3. část

Zdroje:

4. část

5. část

Zdroje:

6. část

const replacements = [
  { pattern: /:-?\)/g, emoji: '\uD83D\uDE42' },
  { pattern: /:-?D/g, emoji: '\uD83D\uDE04' },
  { pattern: /;-?\)/g, emoji: '\uD83D\uDE09' },
  { pattern: /XD/g, emoji: '\uD83D\uDE06' },
  { pattern: /:-?\*/g, emoji: '\uD83D\uDE18' },
  { pattern: /\^\^/g, emoji: '\uD83D\uDE0A' },
  { pattern: /:-?P/g, emoji: '\uD83D\uDE1B' },
  { pattern: /;-?P/g, emoji: '\uD83D\uDE1C' },
  { pattern: /:-?\|/g, emoji: '\uD83D\uDE10' },
  { pattern: /8-?\)/g, emoji: '\uD83D\uDE0E' },
  { pattern: /:-?\(/g, emoji: '\uD83D\uDE1E' },
  { pattern: /:-?[oO]/g, emoji: '\uD83D\uDE2E' },
  { pattern: /:'-?\(/g, emoji: '\uD83D\uDE22' },
  { pattern: /></g, emoji: '\uD83D\uDE16' },
  { pattern: /\+1/g, emoji: '\uD83D\uDC4D' },
  { pattern: /-1/g, emoji: '\uD83D\uDC4E' },
  { pattern: /<3/g, emoji: '\uD83D\uDC93' },
];

7. část

Zdroje:

<html lang="en">
  <head>
    ...
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  </head>
  ...
</html>
  • úprava message.component.html:
<div class="message">
  ...
  <div class="text-wrapper">
    <div class="text">{{ message.text | emoji }}</div>
    <div class="likes">
      <i class="material-icons like-icon">thumb_up</i>
      <span class="likes-count">LIKES</span>
    </div>
  </div>
</div>

8. část

Zdroje:

  • úprava message.component.css:
@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.message {
  padding: 20px 25px;
  animation: fade-in 1s ease-in;
}

...
Clone this wiki locally