Projektowanie serwisów WWW

• strona z listem (odpowiednio sformatowany tekst, przypominający list),
• strona z podręcznika, np. do informatyki (rysunki, tabele, wzory itp.),
• strona z formularzem (inputy, pola tekstowe, checkboxy itp.), na początku bez walidacji wartości pól.
• na stronie startowej należy umieścić informację o autorze oraz opcjonalnie np. logo, informacje o użytych technologiach itp.

                                                    <button type="button" class="btn btn-primary">
                                                            Notifications <span class="badge badge-light"></span>
                                                    </button>
                                                

                                                    <script>
                                                        let x = document.getElementsByClassName("badge-light");
                                                        x[0].innerHTML = 6; // x[0] to pierwszy znaleziony element
                                                    </script>
                                                

                                                    var node = document.createElement("LI");                 // Create a <li> node
                                                    var textnode = document.createTextNode("Water");         // Create a text node
                                                    node.appendChild(textnode);                              // Append the text to <li>
                                                    document.getElementById("myList").appendChild(node);     // Append <li> to <ul> with id="myList"
                                                

                                                $.getJSON( "https://jsonplaceholder.typicode.com/users/10", function( data ) {
                                                  let name = data.name;
                                                  let id = data.id;
                                                  console.log( "User " + name + " has id=" + id); // User Clementina DuBuque has id=10
                                                 });
                                                

1. funkcja zwrotna (callback):
   - przykłady tworzenia funkcji zwrotnych: tutaj i tutaj
   - utwórz obiekt JSON, zawierający w środku co najmniej podwójnie zagnieżdżone obiekty JSON,
   - ww. obiekty powinny zawierać w tablicach i wartościach obiektów liczby i łańcuch znakowe,
   - task1: wykorzystaj funkcję zwrotną do pobrania dwóch różnych wartości liczbowych (z różnych poziomów zagnieżdżenia) z ww. obiektu JSON i wykonaj wybrane działanie na tych liczbach,
   - task 2: wykorzystaj funkcję zwrotną do pobrania dwóch różnych łańcuchów znakowych (z różnych poziomów zagnieżdżenia) z ww. obiektu JSON i za pomocą template strings stwórz łańcuch znakowy z użyciem obu wcześniej wyekstrahowanych łańcuchów znakowych.
   


2. obiekt Promise (resolve, reject) z metodami then(), catch() i finally() + axios (lub fetch):
   - task 1: wykorzystaj obiekt Promise do pobrania dwóch różnych zasobów liczbowych i napisz funkcję wykonującą wybrane działanie na tych liczbach,
   - task 2: wykorzystaj obiekt Promise do pobrania dwóch różnych dowolnych zasobów i napisz funkcję tworzącą z nich nowy obiekt,
   - należy pamiętać o obsłudze wszystkich pięciu metod obiektu Promise,
   - do pobierania zasobów należy wykorzystać metodę fetch lub bibliotekę axios.
   


3. async/await + fetch (lub axios):
   - task 1: jak wyżej,
   - task 2: jak wyżej,
   - należy stworzyć funkcje wykorzystujące składnię async/await,
   - do pobierania zasobów należy wykorzystać metodę fetch lub bibliotekę axios.
   


4. Zapytania AJAX:
   - task 1: jak w pkt. 2 i 3,
   - task 2: jak w pkt. 2 i 3,
   - należy obsłużyć sukces zapytania (właściwość 'onload' obiektu XHR),
   - należy obsłużyć błąd zapytania (właściwość 'onerror' obiektu XHR).
   


5. metoda fetch:
   - task 1: jak w pkt. 2 i 3,
   - task 2: jak w pkt. 2 i 3,
   - nie używamy async/await.
   


6. bibliotexa axios:
   - task 1: jak w pkt. 2 i 3,
   - task 2: jak w pkt. 2 i 3,
   - obiekt axios dostępny będzie jako response.data (patrz przykłady),
   - nie używamy async/await,
   - wystarczy użyć plików z CDN, opisanych w linku do biblioteki i umieścić je przed końcem sekcji 'body'.

• - należy zapoznać się z tutorialem,
• - tworzenie aplikacji bezpośrednio w pliku .html (Vue.js dołączone za pomocą CDN i tworzenie nowego obiektu Vue) oraz za pomocą modułu 'vue-cli',
• - użycie dyrektyw `v-if`, `v-on`, `v-for`, `v-bind`, `v-model`,
• - użycie właściwości `data`, `methods`, `computed`,
• - obsługa zdarzeń (ww. dyrektywa `v-on`),
• - tworzenie projektów "od zera" z użyciem `vue-cli`,
• - tworzenie komponentów - zarówno `Vue.component()` oraz Single File Component (pliki z rozszerzeniem .vue),
• - dodawanie plików .css do wybranych komponentów,
• - należy zapoznać się (i najlepiej wykorzystać u siebie) z ideą stanu i biblioteką Vuex, służącą do zarządzania stanem,
• - należy zrealizować przekazywanie props'ów,
• - plusy za wykorzystanie Bootstrap'a w aplikacji.

• - tworzenie aplikacji za pomocą modułu 'create-react-app',
• - tworzenie komponentów funkcyjnych i klasowych,
• - należy utworzyć komponent nadrzędny i dwa komponenty potomne, mogą to być np. tabele, listy 'ol' lub 'ul', obrazki itp. Dowolność wyboru, aby nie były to przykłady zbyt zbliżone do tych z repo,
• - należy wykorzystać props (atrybuty, właściwosci) przy przekazywaniu danych do komponentu potomnego,
• - należy wykorzystać state (stan) przy tworzeniu komponentu klasowego,
• - należy dodać plik .css do wybranych komponentów,
• - należy zastosować funkcję map() przy generowaniu komponentów i należy pamiętać o atrybucie key,
• - należy zrealizowac wysyłanie funkcji za pomocą 'props',
• - plusy za wykorzystanie Bootstrap'alub react-bootstrap'a w aplikacji.

• należy stworzyć trzy "podstrony" (komponenty Link, Switch i Route,
• na każdej z ww. podstron powinny znaleźć się trzy różne komponenty z Material UI,
• plusy ➕➕➕ za wykorzystanie 'state', 'props', innych bibliotek (np. bootstrap).