Vlastní DOM elementy

1. Tlačítko

Vytvořte si jednoduchou stránku obsahující nám tak dobře známy element #app.
```
<body>
 <div id="app"></div>
</body>
```
Otevřete si konzoli prohlížeče a pomocí funkce document.createElement si do nějaké proměnné vytvořte tlačítko button.
Nastavte tomuto tlačítku textContent na 'Mačkej'.
Přidejte na tlačítko CSS třídu btn.
Vyberte ze stránky element #app a vložte tlačítko na stránku pomocí metody appendChild.
Stejným postupem přidejte na stránku ještě další dvě tlačítka s různými nápisy a sleduje, kam do stránky se vložily.

Řešení

index.js

'use strict';

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

const button = document.createElement('button');
button.textContent = 'Mačkej';
button.className = 'btn';
appElm.appendChild(button);

const button2 = document.createElement('button');
button2.textContent = 'Túú';
button2.className = 'btn';
appElm.appendChild(button2);

const button3 = document.createElement('button');
button3.textContent = 'Táá';
button3.className = 'btn';
appElm.appendChild(button3);

2. Kontakty

Vytvořte jednoduchou webovou stránku, která zobrazuje seznam kontaktů. U každého kontaktu bychom chtěli evidovat jméno, email a telefonní číslo.

Založte webovou aplikaci se soubory index.html, style.css a index.js.
V souboru index.html vytvořte element #app.
Uvnitř index.js pomocí document.createElement vytvořte element div a uložte jej do proměnné contact1.
Na váš element přidejte CSS třídu contact.

Nastavte innerHTML vašho elementu na následujicí obsah

<span class="name">Jaromír Bystřina</span>
<span class="phone">+420 777 666 323</span>
<span class="email">lesni.bystrina@gmail.com</span>

Vyberte ze stránky element #app a vložte do něj element s kontaktem.
Stejným postupem přidejte na stránku ještě další dva kontakty contact2 a contact3.
Nepovinně si můžete pohrát se stylováním. U každého kontaktu se vám například může hodit takováto hezká ikonka.

Řešení

index.js

'use strict';

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

const contact1 = document.createElement('div');
contact1.classList.add('contact');
contact1.innerHTML = `
<span class="name">Jaromír Bystřina</span>
<span class="phone">+420 777 666 323</span>
<span class="email">lesni.bystrina@gmail.com</span>
`;

appElm.appendChild(contact1);

const contact2 = document.createElement('div');
contact2.classList.add('contact');
contact2.innerHTML = `
<span class="name">Jára</span>
<span class="phone">+420 777 666 324</span>
<span class="email">jara@gmail.com</span>
`;

appElm.appendChild(contact2);

const contact3 = document.createElement('div');
contact3.classList.add('contact');
contact3.innerHTML = `
<span class="name">Béďa</span>
<span class="phone">+420 777 666 325</span>
<span class="email">beda@gmail.com</span>
`;

appElm.appendChild(contact3);

3. Žárovky

Stáhněte si základ stránky, která zobrazuje obyčejnou žárovku.

Vytvořte komponentu Bulb, která vytvoří DOM element pro žárovku.
Na tento element uvnitř komponenty připojte posluchač událost click. Tento žárovku při kliknutí rozsvítí přidáním třídy bulb-on.
Do stránky přidejte element #app. V JavaScriptu jej vyberte a pomocí appendChild do něj vložte tři žárovky. Vyzkoušejte, že je dokážete na stránce nezávisle rozsvítit.

'use strict';

const Bulb = () => {
  const bulb = document.createElement('div');
  bulb.classList.add('bulb');

  bulb.addEventListener('click', () => {
    bulb.classList.toggle('bulb--on');
  });

  return bulb;
};

const appElem = document.querySelector('#app');
appElem.appendChild(Bulb());
appElem.appendChild(Bulb());
appElem.appendChild(Bulb());

// Existuje tu trosku problem se zobrazovanim, protoze body je flex a je to cele zvlastne nastylovane

<!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>Žárovka</title>
</head>

<body>
  <div id="app"></div>

  <script src="index.js"></script>
</body>

</html>

4. Kostky 1

Stáhněte si webpack projekt obsahující několik hracích kostek.

Podle vzoru uvedeného v souboru index.html vytvořte komponentu Dice. Zatím pro ni nemusíte vytvářet speciální složku. Pro tuto chvíli její kód vytvořte v hlavním index.js. Tato komponenta bude ve svých props očekávat vlastnost side, která udává číslo zobrazené na kostce. Napište komponentu tak, aby používala DOM elementy.
Vložte na stránku několik kostek s různými hodnotami.
Zařiďte, že když uživatel klikne na tlačítko hodit některé kostky, tato kostka zobrazí náhodné číslo mezi 1 a 6. K vygenerování náhodného čísla využijte již připravenou funkci roll.

Řešení

index.js
index.html

import './style.css';
import './index.html';

const roll = () => {
  return Math.floor(Math.random() * 6) + 1;
};

const Dice = (props) => {
  const root = document.createElement('div');
  root.className = 'dice';

  const diceDisplay = document.createElement('div');
  diceDisplay.className = `dice__side dice__side--${props.side}`;

  const button = document.createElement('button');
  button.className = 'btn btn--small roll-btn';
  button.textContent = 'hodit';

  button.addEventListener('click', () => {
    diceDisplay.className = `dice__side dice__side--${roll()}`;
  });

  root.appendChild(diceDisplay);
  root.appendChild(button);

  return root;
};

const diceRow = document.querySelector('#dice-row');

diceRow.appendChild(Dice({ side: 1 }));
diceRow.appendChild(Dice({ side: 2 }));
diceRow.appendChild(Dice({ side: 4 }));
diceRow.appendChild(Dice({ side: 5 }));


// aleternativní řešení
const Dice2 = (props) => {
  const element = document.createElement('div');
  element.className = 'dice';
  element.innerHTML = `
  <div class="dice__side dice__side--${props.side}"></div>
  <button class="btn btn--small roll-btn">hodit</button>
`;

  const diceDisplay = element.querySelector('.dice__side');

  const button = element.querySelector('button');
  button.addEventListener('click', () => {
    diceDisplay.className = `dice__side dice__side--${roll()}`;
  });

  return element;
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kostky</title>
</head>

<body>
  <div id="dice-row" class="dice-row">

  </div>
  <div class="controls">
    <button id="btn-add" class="btn">Přidat</button>
    <button id="btn-shuffle" class="btn">Zamíchat</button>
  </div>
  <script src="/bundle.js"></script>
</body>

</html>