Procvičování cyklů, jednoduché komponenty

Procvičování cyklů, jednoduché komponenty

  • Úvod
  • Procvičování cyklů, jednoduché komponenty

Procvičování cyklů, jednoduché komponenty

1. Nákupní seznam

Mějme pole řetězců představující nákupní seznam

const list = ['mouka', 'máslo', 'cukr', 'jablka', 'skořice'];

  1. Napište cyklus, který projde celé toto pole a všechny položky spojí dohromady do jednoho velkého řetězce jako níže.

    'moukamáslocukrjablkaskořice'

  2. Upravte váš program tak, že výsledný řetězec bude vypadat takto:

    'mouka,máslo,cukr,jablka,skořice'

  3. Upravte váš program tak, aby výsledný řětězec obsahoval HTML značky.

    '<li>mouka</li><li>máslo</li><li>cukr</li><li>jablka</li><li>skořice</li>'

Řešení

'use strict';

const list = ['mouka', 'máslo', 'cukr', 'jablka', 'skořice'];

let vysledek = '';
for (let i = 0; i < list.length; i++) {
  vysledek += list[i];
}

console.log(vysledek);

let vysledek2 = '';
for (let i = 0; i < list.length; i++) {
  vysledek2 += list[i];

  if (i !== list.length - 1) {
    vysledek2 += ',';
  }
}

console.log(vysledek2);

let vysledek3 = '';
for (let i = 0; i < list.length; i++) {
  vysledek3 += `<li>${list[i]}</li>`;
}

console.log(vysledek3);

2. Nákupní seznam jako funkce

Vytvořte funkci s názvem shoppingList, která na vstupu obdrží pole řetězců, představující nákupní seznam. Funkce vrátí řetězec obsahující prvky tohoto seznamu zabalené do HTML značek li.

Příklad použití:

> shoppingList(['špagety', 'kečup', 'sýr']);
'<li>špagety</li><li>kečup</li><li>sýr</li>'

Řešení

'use strict';

const shoppingList = (items) => {
  let vysledek = '';
  for (let i = 0; i < items.length; i++) {
    vysledek += `<li>${items[i]}</li>`;
  }

  return vysledek;
};

console.log(shoppingList(['špagety', 'kečup', 'sýr']));

3. Nadpis stránky

Vytvořte si HTML stránku s následující strukturu

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

Na začátku vašeho programu vytvořte proměnnou heading.

const heading = 'Čau lidi';

Vyberte ze stránky element app a pomocí vlastnosti innerHTML do něj vložte prvek h1, ve kterém bude obsah proměnné heading.

Řešení

'use strict';

const heading = 'Čau lidi';

const appElm = document.querySelector('#app');

appElm.innerHTML = `<h1>${heading}</h1>`;
<!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>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>

4. Nadpis stránky jako komponenta

Vytvořte si HTML stránku s následující strukturu

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

Vytvořte funkci Heading, s jedním parametrem text. Tato funkce vytvoří řetězec obashující HTML značku h1 s obsahem zadným v parametru.

Ukázka použití:

> Heading('ahoj')
'<h1>ahoj</h1>'
> Heading('Zítra ráno v pět')
'<h1>Zítra ráno v pět</h1>'

Vyberte ze stránky element app a pomocí vlastnosti innerHTML do něj zapojte výsledek volání funkce Heading. Vyzkoušejte si tento postup s různými vstupy pro tuto funkci.

Řešení

'use strict';

const Heading = (text) => {
  return `<h1>${text}</h1>`;
};

const appElm = document.querySelector('#app');

appElm.innerHTML = Heading('Ahoj');
<!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>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>

5. Hodiny

Stáhněte si základ stránky zobrazující digitální hodiny. Následujte instrukce níže.

  1. HTML kód hodin ze stránky vyjměte a nechte v ní pouze element app.
  2. Vytvořte komponentu Clock se dvěma parametry hours a minutes, která vytvoří HTML kód hodin dle zadaných parametrů.
  3. V konzoli prohlížeče vyberte element app a pomocí funkce Clock do něj zapojte hodiny zaborazující nějaký čas.
  4. Zkuste pomocí funkce Clock vložit do stránky několik různých hodin pod sebe.

Řešení

'use strict';

const Clock = (hours, minutes) => {
  return `<div class="clock">
  <span class="clock__hours">${hours.padStart(2, '0',)}</span>:<span class="clock__minutes">${minutes.padStart(2, '0')}</span>
</div>`;
};

const appElm = document.querySelector('#app');

appElm.innerHTML = Clock('2', '28');
appElm.innerHTML += Clock('9', '3');
appElm.innerHTML += Clock('19', '56');
<!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>Hodiny</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="index.js"></script>
  </body>
</html>

6. Na doma | Podcasty

Stáhněte si základ stránky zobrazující seznam epizod nějakého podcastu. Prohlédněte si HTML stránku a všimněte si, že jedna epizoda podcastu se zobrazí pomocí tohoto HTML.

<div class="episode">
  <div class="episode__num">127</div>
  <div class="episode__body">
    <div class="episode__title">Hledání plyšového Yettiho</div>
    <div class="episode__guest">host: Vojtěch Ryba</div>
  </div>
</div>

  1. Vytvořte komponentu Podcast se třemi parametry num, title a host představující číslo podcastu, název podcastu a hosta podcastu. Vaše komponenta nechť z těchto dat vyrobí HTML sturkturu pro jeden podcast.

  2. V souboru index.html smažte obsah elementu episode-list. V JavaScriptu vyberte tento element a s použitím komponenty Podcast a vlastnosti innerHTML v něm vytvořte jednu epizodu podcastu dle nějakých vymyšlených dat.

  3. Mějme následující pole obsahující několik epizod našeho podcastu.

    const episodes = [
 [127, 'Hledání plyšového Yettiho', 'Vojtěch Ryba'],
 [128, 'Moderní hrachová polévka', 'Kamila Štancová'],
 [129, 'Poloautomatické zrcadlo', 'Janka Janovská'],
 [130, 'Máčené hlavy parlamentu', 'Jonáš Daněk'],
 [131, 'Služby na hraně přívěsu', 'Tereza Křivánková'],
 [132, 'Klasifikace sněžných klokanů', 'Josef Stix'],
 [133, 'Rybolov v Oceánu bouří', 'Ludmila Gajová'],
];

    Napište cyklus, který projde toto pole a pro každou položku vytvoří novou epizodu uvnitř elementu episodes-list.

Řešení

'use strict';

// 1
const Podcast = (num, title, host) => {
  return `
  <div class="episode">
    <div class="episode__num">${num}</div>
    <div class="episode__body">
      <div class="episode__title">${title}</div>
      <div class="episode__guest">host: ${host}</div>
    </div>
  </div>
  `;
};

// 2
const num = '126';
const title = 'Robot, který snědl koblihu';
const guest = 'Radovan Siwek';

const episodesListElm = document.querySelector('.episodes-list');
episodesListElm.innerHTML = Podcast(num, title, guest);

// 3
const episodes = [
  [127, 'Hledání plyšového Yettiho', 'Vojtěch Ryba'],
  [128, 'Moderní hrachová polévka', 'Kamila Štancová'],
  [129, 'Poloautomatické zrcadlo', 'Janka Janovská'],
  [130, 'Máčené hlavy parlamentu', 'Jonáš Daněk'],
  [131, 'Služby na hraně přívěsu', 'Tereza Křivánková'],
  [132, 'Klasifikace sněžných klokanů', 'Josef Stix'],
  [133, 'Rybolov v Oceánu bouří', 'Ludmila Gajová'],
];
episodes.forEach((episode) => {
  const episodesListElm = document.querySelector('.episodes-list');
  episodesListElm.innerHTML += Podcast(episode[0], episode[1], episode[2]);
});
<!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>Podcasty</title>
  </head>
  <body>
    <div class="episodes-list"></div>
    <script src="index.js"></script>
  </body>
</html>

7. Na doma | Úkolníček

Stáhněte si základ stránky zobrazující jednoduchý úkolníček.

  1. Podívejte se, jak stránka vypadá. Smažte obsah elementu todo__tasks uvnitř souboru index.html, ale zapamtutje si, jak se v HTML vytvoří jeden úkol.
  2. V JavaScriptu vytvořte pole řetězců tasks, které bude reprezentovat seznam úkolů.
  3. Vytvořte komponentu TasksList s jedním parametrem, která na vstupu očekává pole úkolů. Funkce TasksList pak pomocí cyklu sestaví HTML pro seznam úkolů tak, aby šel zobrazit na stránce.
  4. Zavolejte funkci TasksList, předejte jí pole úkolů tasks a zapojte výsledek funkce do vaší stránky.

Řešení

'use strict';

// 2
const tasks = [
  { name: 'Vyprat ponožky' },
  { name: 'Naučit se funkce vyššího řádu' },
  { name: 'Nakoupit na víkend' },
];

// 3
const Task = (task) => {
  return `
    <div class="task">
      ${task.name}
    </div>
  `;
};

// 4
/*
Zakomentováno, jelikož to splnění
úkolu č. 6 (smazání elementu .todo__tasks z HTML) již nefunguje

tasks.forEach((task) => {
  const todoTasksElm = document.querySelector('.todo__tasks');
  todoTasksElm.innerHTML += Task(task);
});

*/

// 5
const TaskList = (props) => {
  let result = '<div class="todo__tasks">';

  props.tasks.forEach((task) => {
    result += Task(task);
  });

  result += '</div>';

  return result;
};

// 7
const todoElm = document.querySelector('.todo');
todoElm.innerHTML += TaskList({
  tasks: tasks,
});
<!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>Úkolníček</title>
  </head>
  <body>
    <div class="todo">
      <div class="todo__header">
        <div class="date">
          <div class="date__daynum">12</div>
          <div class="date__monthyear">
            <div class="date__month">dub</div>
            <div class="date__year">2020</div>
          </div>
          <div class="date__day">čtvrtek</div>
        </div>
      </div>
      <div class="todo__new">
        <button class="btn-add">+</button>
        <input id="new-task" class="new-task" type="text" />
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>