JSON a voláni API

1. Práce s objekty - základy

Zkopírujte si do konzole následující datovou strukturu.

const person = {
  name: 'Karel',
  age: 27,
  'favorite color': 'yellow',
};

Vypište do konzole jméno osoby z objektu.
Změňte věk dané osoby na 28 a pak ho vypište do konzole.
Vypište do konzole oblíbenou barvu osoby popsané objektem.

Řešení

index.js

'use strict';

const person = {
  name: 'Karel',
  age: 27,
  'favorite color': 'yellow',
};

// 1
console.log(person.name);

// 2
person.vek = 28;
console.log(person.vek);

// 3
console.log(person['favorite color']);

2. Kurz

Založte si JavaScriptový program a zkopírujte si do něj datovou strukturu kurzu Úvod do programování z textu výše.

const course = {
  nazev: 'Úvod do programování',
  lektor: 'Martin Podloucký',
  konani: [
    {
      misto: 'T-Mobile',
      koucove: ['Dan Vrátil', 'Filip Kopecký', 'Martina Nemčoková'],
      ucastnic: 30,
    },
    {
      misto: 'MSD IT',
      koucove: ['Dan Vrátil', 'Zuzana Tučková', 'Martina Nemčoková'],
      ucastnic: 25,
    },
    {
      misto: 'Škoda DigiLab',
      koucove: ['Dan Vrátil', 'Filip Kopecký', 'Kateřina Kalášková'],
      ucastnic: 41,
    },
  ],
};

Vypište do konzole počet účastnic na posledním konání kurzu.
Vypište do konzole jméno posledního kouče na prvním konání kurzu.
Vypište do konzole celkový počet konání kurzu.
Pomocí cyklu vypište na výstup všechna místa, na kterých se kurz konal.

Řešení

index.js

const course = {
  nazev: 'Úvod do programování',
  lektor: 'Martin Podloucký',
  konani: [
    {
      misto: 'T-Mobile',
      koucove: ['Dan Vrátil', 'Filip Kopecký', 'Martina Nemčoková'],
      ucastnic: 30,
    },
    {
      misto: 'MSD IT',
      koucove: ['Dan Vrátil', 'Zuzana Tučková', 'Martina Nemčoková'],
      ucastnic: 25,
    },
    {
      misto: 'Škoda DigiLab',
      koucove: ['Dan Vrátil', 'Filip Kopecký', 'Kateřina Kalášková'],
      ucastnic: 41,
    },
  ],
};

// 1
console.log(course.konani[2].ucastnic);

// 2
console.log(course.konani[0].koucove[2]);

// 3
console.log(course.konani.length);

// 4
course.konani.forEach((konani) => {
  console.log(konani.misto);
});

3. Knihovna

Uvažte, jak byste pomocí objektu reprezentovali údaje o knize v knihovně. Jaké klíče a hodnoty bude objekt obsahovat? Zcela jistě bude každá kniha obsahovat například název. Chtěli bychom však také, aby kniha umožňovala mít vícero autorů a vícero vydání.

Ve JavaScriptovém programu vytvořte proměnnou obsahující pole, které bude obsahovat několik vašich oblíbených knih.
Vytvořte jednoduchou HTML stránku se ol seznamem. Použijte vlastnost innerHTML a pomocí cyklu naplňte tento seznam názvy vašech knih.

'use strict';

const knihovna = [
  {
    nazev: 'JavaScript',
    autor: 'Ondřej Žára',
    pocetStran: 256,
    vydani: {
      nakladatel: 'Computer Press',
      rok: 2015,
    },
  },
  {
    nazev: 'Node.js Okamžitě',
    autor: 'Don Nguyen',
    pocetStran: 152,
    vydani: {
      nakladatel: 'Computer Press',
      rok: 2016,
    },
  },
];

let htmlList = '';
knihovna.forEach((kniha) => {
  htmlList += `<li>${kniha.nazev}</li>`;
});

const knihovnaElm = document.querySelector('#knihovna');
knihovnaElm.innerHTML = htmlList;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ol id="knihovna"></ol>
    <script src="index.js"></script>
  </body>
</html>

4. Kontakt

Prohlédněte si kód následující komponenty vytvářející HTML pro kontakt na nějakou osobu. Každý kontakt obsahuje jméno, e-mail a telefon.

const Contact = (name, email, phone) => {
  return `
    <div class="contact">
      <div class="contact__name">${name}</div>
      <div class="contact__email">${email}</div>
      <div class="contact__phone">${phone}</div>
    </div>
  `;
};

Přepište tuto komponentu tak, aby místo tří parametrů používala parametr props.
Zavolejte tuto komponentu v konzoli s alespoň dvěma různými objekty a sledujte výsledek.

Řešení

index.js

'use strict';

// 1
const Contact = (props) => {
  return `
    <div class="contact">
      <div class="contact__name">${props.name}</div>
      <div class="contact__email">${props.email}</div>
      <div class="contact__phone">${props.phone}</div>
    </div>
  `;
};

// 2
console.log(
  Contact({ name: 'Standa', email: 'standa@test.cz', phone: '777 333 222' }),
);

5. E-maily

Stáhněte si zadání aplikace pro práci s e-maily.
Podívejte se, jak se v HTML vytváří jeden e-mail.
Smažte v HTML obsah elementu #inbox a vytvořte komponentu s názvem Email, která vytvoří HTML pro jeden e-mail. Objekt props pro tuto komponenty bude vždy obsahovat položky sender, subject a time.
Pomocí vaší komponenty vložte na stránku jeden e-mail.

Řešení

index.js
index.html

'use strict';

const Email = (props) => {
  return `
    <div class="email">
      <div class="email__icon email__icon--closed"></div>
      <div class="email__fill">
        <div class="email__sender">${props.sender}</div>
        <div class="email__subject">${props.subject}</div>
      </div>
      <div class="email__end">
        <div class="email__time">${props.time}</div>
      </div>
    </div>
  `;
};

const inboxElm = document.querySelector('#inbox');

inboxElm.innerHTML = Email({
  sender: 'Pavel Chocholouš',
  subject: 'Jak to jde?',
  time: '12:35',
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>E-maily</title>
  </head>
  <body>
    <div id="app" class="container">
      <h1>Příchozí pošta</h1>
      <div id="inbox" class="inbox"></div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

6. E-maily 2

Pokračujte v předchozím příkladu.

Vytvořte pole emailInbox, které bude obsahovat objekty představujicí emaily. Každý objekt bude mít vlastnosti sender, subject a time. Vytvořte v poli alespoň čtyři různé e-maily.
Projděte cyklem pole emailInbox a vložte všechny emaily na stránku pomocí komponenty Email.

Řešení

index.js

'use strict';

const Email = (props) => {
  return `
    <div class="email">
      <div class="email__icon email__icon--closed"></div>
      <div class="email__fill">
        <div class="email__sender">${props.sender}</div>
        <div class="email__subject">${props.subject}</div>
      </div>
      <div class="email__end">
        <div class="email__time">${props.time}</div>
      </div>
    </div>
  `;
};

const emailInbox = [
  {
    sender: 'Pavel Chocholouš',
    subject: 'Jak to jde?',
    time: '12:35',
  },
  {
    sender: 'Finanční úřed',
    subject: 'Daňové přiznání',
    time: '9:05',
  },
  {
    sender: 'Czechitas',
    subject: 'DA Web',
    time: '18:35',
  },
];

const inboxElm = document.querySelector('#inbox');

let emailsHtml = '';
emailInbox.forEach((email) => {
  emailsHtml += Email(email);
});

inboxElm.innerHTML = emailsHtml;

7. Na Doma | Jogíni

Stáhněte si základ stránky pro začínající jóga studio. Přepracujte stránku tak, aby se byla vytvořena celá v JavaScriptu pomocí komponent.

Vytvořte komponentu Header, která vytvoří hlavičku stránky. Bude očekávat svoje props v následujícím formátu.
```
{
 title: 'Jogíni',
 links: ['domů', 'lekce', 'náš tým', 'události', 'kontakt'],
}
```

Vytvořte komponentu Intro vytvářející úvodní text podle následujích props.

{
 heading: 'Vítejte mezi Jogíny',
 text: `Naše lekce jsou zaměřeny na potřeby klientů, kteří mají odvahu zkusit
        něco nového. Cvičíme v pomalém tempu s podrobným slovním doprovodem.
        Postupně se seznámíte se základními principy jógy, jak přístupovat k
        sobě i ostatním. Krok za krokem objevíte a dostanete pod kontrolu
        svoje tělo, pocity a emoce.`,
}

Vytvořte komponentu Pose, která vytváří HTML pro úvodní obrázek. Komponenta očekává takovéto props.
```
{
 src: 'img/yoga-pose.jpg',
}
```

Na konci toho úkoly by měl element body v souboru index.html vypadat takto.

<body>
  <div id="app" class="app container"></div>
  <script src="index.js"></script>
</body>

Řešení

index.js
index.html

'use strict';

const Nav = (props) => {
  let result = '<nav>';
  props.links.forEach((link) => {
    result += `<a href="#">${link}</a>`;
  });
  result += '</nav>';

  return result;
};

const Header = (props) => {
  return `
  <header>
    <h1 class="site-title">Jogíni</h1>
    ${Nav({ links: props.links })}
  </header>
  `;
};

const Intro = (props) => {
  return `
    <div class="intro">
      <h2>${props.heading}</h2>
      <p>${props.text}</p>
    </div>
  `;
};

const Pose = (props) => {
  return `<img class="pose" src="${props.src}" />`;
};

const appElm = document.querySelector('#app');
appElm.innerHTML += Header({
  title: 'Jogíni',
  links: ['domů', 'lekce', 'náš tým', 'události', 'kontakt'],
});
appElm.innerHTML += Intro({
  heading: 'Vítejte mezi Jogíny',
  text: `Naše lekce jsou zaměřeny na potřeby klientů, kteří mají odvahu zkusit něco nového. Cvičíme v pomalém tempu s podrobným slovním doprovodem. Postupně se seznámíte se základními principy jógy, jak přístupovat k sobě i ostatním. Krok za krokem objevíte a dostanete pod kontrolu svoje tělo, pocity a emoce.`,
});

appElm.innerHTML += Pose({
  src: 'img/yoga-pose.jpg',
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Jogíni</title>
  </head>
  <body>
    <div id="app" class="app container"></div>
    <script src="index.js"></script>
  </body>
</html>

8. Na Doma | Odjezdy

Prohlédněte si kód následujici stránky zobrazující tabulku vlakových odjezdů. Prohlédněte si datovou strukturu v souboru index.js.

Vytvořte komponentu Departure, která jako svůj vstup dostane objekt představující odjezd vlaku, a vrátí HTML jednoho řádku odjezdové tabulky.
Smažte obsah elementu tbody v index.html. Pomocí cyklu projděte pole departures a pomocí vaší komponenty vytvořte na stránce řádek tabulky pro každý objekt odjezdu. Výsledná stránka tak bude přehledně zobrazovat tabulku všech odjezdů.

Řešení

index.js
index.html

'use strict';

const departures = [
  {
    time: { hrs: 8, mins: 14 },
    train: 'Acela Express',
    no: 2153,
    to: 'Washington, DC',
    status: '',
    track: 2,
  },
  {
    time: { hrs: 8, mins: 19 },
    train: 'New Haven Line',
    no: 1541,
    to: 'Grand Central Terminal',
    status: 'On Time',
    track: 14,
  },
  {
    time: { hrs: 8, mins: 20 },
    train: 'Shore Line East',
    no: 1606,
    to: 'Old Saybrook',
    status: 'On Time',
    track: 12,
  },
  {
    time: { hrs: 8, mins: 37 },
    train: 'N.E. Regional',
    no: 190,
    to: 'Boston South Station',
    status: 'On Time',
    track: 1,
  },
  {
    time: { hrs: 8, mins: 40 },
    train: 'Shuttle',
    no: 490,
    to: 'Springfield',
    status: 'On Time',
    track: 3,
  },
  {
    time: { hrs: 8, mins: 43 },
    train: 'N.E. Regional',
    no: 96,
    to: 'Newport News',
    status: 'On Time',
    track: 2,
  },
  {
    time: { hrs: 8, mins: 50 },
    train: 'New Haven Line',
    no: 1545,
    to: 'Grand Central Terminal',
    status: 'On Time',
    track: 8,
  },
  {
    time: { hrs: 9, mins: 16 },
    train: 'Shore Line East',
    no: 1610,
    to: 'Old Saybrook',
    status: 'On Time',
    track: 10,
  },
  {
    time: { hrs: 9, mins: 23 },
    train: 'New Haven Line',
    no: 1549,
    to: 'Grand Central Terminal',
    status: 'On Time',
    track: 14,
  },
  {
    time: { hrs: 9, mins: 36 },
    train: 'Acela Express',
    no: 2150,
    to: 'Boston-South Sta.',
    status: '',
    track: 1,
  },
  {
    time: { hrs: 9, mins: 46 },
    train: 'New Haven Line',
    no: 1551,
    to: 'Grand Central Terminal',
    status: 'On Time',
    track: 8,
  },
  {
    time: { hrs: 10, mins: 13 },
    train: 'N.E. Regional',
    no: 170,
    to: 'Boston South Station',
    status: 'On Time',
    track: 2,
  },
  {
    time: { hrs: 10, mins: 25 },
    train: 'New Haven Line',
    no: 1553,
    to: 'Grand Central Terminal',
    status: 'On Time',
    track: 14,
  },
];

const Departure = (props) => {
  return `
  <tr>
    <td class="board__time">${props.time.hrs}:${props.time.mins}</td>
    <td class="board__train">${props.train}</td>
    <td class="board__no">${props.no}</td>
    <td class="board__to">${props.to}</td>
    <td class="board__status">${props.status}</td>
    <td class="board__track">${props.track}</td>
  </tr>
  `;
};

let departuresHtml = '';

departures.forEach((departure) => {
  departuresHtml += Departure(departure);
});

const tbodyElm = document.querySelector('tbody');
tbodyElm.innerHTML = departuresHtml;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <title>Departure Board</title>
</head>
<body>
  <div class="board">
    <div class="board__header">
      <div class="board__header-left">
        TRAIN DEPARTURES
      </div>
      <div class="board__header-right">
        8:12am
      </div>
    </div>
    <table class="board__table">
      <thead>
        <th>Time</th>
        <th>Train</th>
        <th>No.</th>
        <th>To</th>
        <th>Status</th>
        <th>Track</th>
      </thead>
      <tbody></tbody>
    </div>
  </div>
  <script src="index.js"></script>
</body>
</html>