Webpack a větší aplikace

1. Citát

Vyzkoušejte si založení vlastního Webpack projektu s jednoduchou stránkou.

Podle návodu z této lekce si založte nový webpack projekt. Pojmenujte si jej quotes.
Uvnitř elementu #app vytvořte HTML a CSS pro stránku zobrazující nějaký známý citát. Co se týče vzhledu stránky, můžete se inspirovat třeba zde.
Převeďte zobrazování citátu na JavaScriptovou komponentu jménem Quote. Ve složce src si vytvořte složku Quote se soubory index.js a style.css. Do souboru Quote/index.js vložte kód komponenty a do souboru Quote/style.css její CSS styly.
V souboru Quote/index.js správně importujte soubor se styly a správně exportujte funkci komponenty.
V hlavním souboru src/index.js správně importujte komponentu Quote a použijte ji k vytvoření obsahu stránky.

Řešení

import { Quote } from './Quote/index.js';
import './index.html';

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

const quoteObj = {
  text:
    'It’s amazing how the world begins to change through the eyes of a cup of coffee.',
  author: 'Donna A. Favors',
};

appElm.innerHTML = Quote(quoteObj);

import './style.css';

export const Quote = (props) => {
  return `
    <div class="quotes">
      <p class="quotes__text">${props.text}</p>
      <p class="quotes__separator">|</p>
      <p class="quotes__author">${props.author}</p>
    </div>
  `;
};

.quotes {
  max-width: 600px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px;
  text-align: center;
  font-size: 4rem;
  font-family: sans-serif;
  font-weight: bold;
  background-color: rgb(255, 217, 0);
}

.quotes > p {
  margin: 0.5rem 1rem;
}

.quotes__separator {
  font-weight: normal;
  color: #f26b75;
}

.quotes__author {
  font-weight: 300;
  font-size: 2.5rem;
}

2. Na doma | Světový čas pomocí Webpacku

Stáhněte si řešení aplikace pro zobrazování světového času. Následujte postup pro založení nového Webpack projektu a předělejte toto řešení tak, aby využívalo Webpack.

Dle šablony a návodu z této lekce si založte nový Webpackový projekt.
Do složky src zkopírujte zdrojový kód stažený výše.
V souboru index.js správně importujte soubory HTML a CSS. V tutu chvíli by měla vaše aplikace fungovat.
Rozdělte komponenty Time a Timezone do svých vlastních složek. Dejte si pozor na správné importy a exporty. Vyzkoušejte, že aplikace funguje.
Zkuste si malinko pohrát se styly a dát aplikaci o trochu hezčí vzhled. Nezapomeňte vždy v příslušných komponentách správne importovat vaše CSS soubory.

Řešení

import { Timezones } from './Timezones/index';
import { Time } from './Time/index';

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

fetch('http://worldtimeapi.org/api/timezone')
  .then((resp) => resp.json())
  .then((json) => {
    const zoneSelectElm = document.querySelector('#zone-select');
    zoneSelectElm.innerHTML = Timezones({ zones: json });
  });

const btnShow = document.querySelector('#btn-show');
btnShow.addEventListener('click', () => {
  const zonesSelect = document.querySelector('#zones');
  const mainElm = document.querySelector('main');

  fetch(`http://worldtimeapi.org/api/timezone/${zonesSelect.value}`)
    .then((resp) => resp.json())
    .then((json) => {
      mainElm.innerHTML = Time({
        zone: zonesSelect.value,
        datetime: json.datetime,
      });
    });
});

export const Time = (props) => {
  return `
    <div class="time">
      <span class="zone">${props.zone}</span>
      :
      <span class="datetime">${props.datetime}</span>
    </div>
  `;
};

export const Timezones = (props) => {
  let result = '<label for="zones">Časová zóna:</label>';
  result += '<select id="zones">';

  for (let i = 0; i < props.zones.length; i++) {
    result += `<option value="${props.zones[i]}">${props.zones[i]}</option>`;
  }

  result += '</select>';
  return result;
};

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Světový čas</title>
  </head>
  <body>
    <h1>Světový čas</h1>

    <main></main>

    <div id="zone-select"></div>

    <button id="btn-show">Zobrazit</button>
    <script src="bundle.js"></script>
  </body>
</html>