├── .gitignore ├── LH-Academy.png ├── Przemocny.png ├── README.md ├── Zbiór React ├── ComplexLogic │ ├── AuthTokenReactRouter.md │ ├── ContextAsRedux.md │ └── hocProtectedView.md ├── Components │ ├── InfiniteHumanList.md │ ├── Modal.md │ ├── SearchWithDropdown.md │ └── search.png └── SimpleLogic │ ├── CompountSideBar.md │ ├── TableWithPagination.md │ └── useGeo.md ├── Zbiór backend └── express_or_next │ ├── bearerMiddleware.md │ └── googleSheetIntegration.md ├── Zbiór frontend ├── html_and_css │ ├── ChatUI.jpg │ ├── ChatUI.md │ ├── clockwisePresentation.md │ └── starWarsIntro.md ├── html_and_js │ ├── ScrollingList.md │ ├── data.js │ ├── searchDeep.md │ └── typingEffect.md └── html_css_and_js │ ├── DatePicker.md │ ├── FlipCard.md │ ├── SmartLogo.md │ ├── date-picker-ui-element.gif │ ├── flipCardGrid.gif │ └── task.gif ├── Zbiór fullstack ├── chatwidget.md └── googleFormsLike.md ├── Zbiór fundamentals ├── js_functional │ ├── arrayMethods.md │ ├── includes.md │ ├── recursivePromise.md │ └── regExpSearch.md └── js_oop │ ├── MouseRecorder.md │ ├── envDetector.md │ ├── promiseMethods.md │ └── resizeObserver.md ├── jsgladiator.png ├── pitagoras.jpg └── tests ├── lodash.md └── request.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | /TODO -------------------------------------------------------------------------------- /LH-Academy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Przemocny/zbior-zadan-html-css-js-react/cc6652b761b73d71a23eb0dfdea28bed2c1f9dc9/LH-Academy.png -------------------------------------------------------------------------------- /Przemocny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Przemocny/zbior-zadan-html-css-js-react/cc6652b761b73d71a23eb0dfdea28bed2c1f9dc9/Przemocny.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Intro do zbiorów 2 | i Ty możesz zostać Gladiatorem Javascriptu 3 | 4 | ## Jest to próbka zadań ze zbiorów zadań z serii "Gladiator Javascriptu" 5 | 6 | Każdy zbiór, zawiera w sobie jedno lub dwa zadania próbne, które prezentują styl zadań w zbiorach. Jest to tylko demonstracja, więc w zbiorze który przeglądasz znajdziesz jedynie przedsmak wyzwań jakie stawiają przed programistą moje zbiory. 7 | 8 | ### Wersja demonstracyjna zbiorów zadań z serii "Gladiator Javascriptu" 9 | 10 | Pełna wersja zbioru, zawiera aż 118 zadań, podzielonych na specjalizacje i stopień zaawansowania. 11 | 12 | #### Starałem się wszystkie zadania opisać w sposób łatwo zrozumiały, ale jeśli czegoś nie rozumiesz - napisz wiadomość na fanpage, a postaram się wyjaśnić 13 | Ale to, że coś nie jest zrozumiałe dla Ciebie, nie zawsze oznacza, że to jest źle napisane. Czasem to Ty czegoś nie wiesz i powinieneś się douczyć 14 | 15 | # Powodzenia :) 16 | 17 | Przemocny 18 | 19 | Jeśli po skończeniu zadać, będziesz chciał dowiedzieć się jak Ci poszło i umówić się na omówienie z mentorem - napisz wiadomość na fanpage 20 | ##### stronka Gladiatorów: https://gladiators-of-javascript.com/ 21 | ##### stronka Akademii: https://academy.localhost-group.com/ 22 | ##### fb: https://www.facebook.com/localhost40310 23 | ##### email: contact@localhost-group.com 24 | 25 | 130 | -------------------------------------------------------------------------------- /Zbiór React/ComplexLogic/AuthTokenReactRouter.md: -------------------------------------------------------------------------------- 1 |

AuthTokenReactRouter

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | 7 | - JavaScript, React 8 | 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - JavaScript, React, ReactRouter 13 | 14 | ## Cele główne 15 | * [ ] Stwórz logikę React Router, która: 16 | - posiada 3 routy: `/`, `/login`, `/secure-link` 17 | - jeśli w GET lub podczas routingu w urlu jest przekazywane query `?token=f3823903b2dd6e35243b1bbe5a14f651`, to użytkownik może wejść na wszystkie routy, 18 | - jeśli w GET lub podczas routingu w urlu jest przekazywane query `?token=1c9de95d445fd0824b3bcf1def5f7bfb`, lub nie ma argumentów to użytkownik zostaje przekierowany na /login 19 | 20 | ## Cele dodatkowe 21 | * [ ] Brak 22 | 23 | ## Przydatne linki 24 | - ReactRouter doku - https://reactrouter.com/ 25 | 26 | ## Początek kodu 27 | 28 | ```javascript 29 | // tokeny do autoryzacji 30 | const goodBearerToken = "f3823903b2dd6e35243b1bbe5a14f651" 31 | const badBearerToken = "1c9de95d445fd0824b3bcf1def5f7bfb" 32 | ``` 33 | 34 | -------------------------------------------------------------------------------- /Zbiór React/ComplexLogic/ContextAsRedux.md: -------------------------------------------------------------------------------- 1 |

Context As Redux

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | - Znajomośc JavaScript 7 | - Znajomość React 8 | - Znajomośc react hooks 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - JS 13 | - React 14 | 15 | ## Cele główne 16 | 17 | * [ ] Logika Reduxa w React składa się z 5 prostych elementów: 18 | - struktury danych - tzn store/state - komórka pamięci z aktualnym stanem wszystkich danych 19 | - reducera, który agreguje akcje i zmienia wg nich aktualny stan store 20 | - akcji z dodatkowymi danymi wykonywanych na reducerze do modyfikacji store 21 | - Providera - który określa zakres działania Reduxa 22 | - HOCa connect - High Order Component, który tworzy Consumera stanu z danego komponentu 23 | 24 | * [ ] Twoim zadaniem jest za pomocą: 25 | - React ContextApi 26 | - useContext hook 27 | - useReducer hook 28 | - oraz odrobiny znajomości JS 29 | 30 | * [ ] Oraz na podstawie poniższego kodu, odtworzyć Reduxa w React ContextApi 31 | 32 | ## Kawałek kodu dla lepszego początku! 33 | 34 | ```javascript 35 | const initialState = { 36 | text:'treść' 37 | } 38 | 39 | const ctx = React.createContext({ 40 | state: initialState, 41 | actions:{ 42 | changeText:(state, action)=>{} 43 | } 44 | }) 45 | 46 | const actions = { 47 | changeText:(state, action)=>{ 48 | // return ... 49 | } 50 | } 51 | 52 | function reducer(state=initialState, action){ 53 | // zwykły reducer 54 | // return ... 55 | } 56 | 57 | const Provider = ({children, onLoad, onChange}) => { 58 | // tutaj łączymy context i actions i wrzucamy je do providera 59 | // prop onLoad powinien wywołać się na wczytaniu komponentu 60 | // prop onChange powinien wywołać się na zmianie stanu 61 | // return ... 62 | } 63 | 64 | const useContextState = ({stateNames=['text']})=>{ 65 | // jeśli stateNames jest pusty to zwraca cały state 66 | // jeśli stateNames nie jest pusty to zwraca podane w arrayu klucze i wartości w formie nowego obiektu 67 | // return ... 68 | } 69 | 70 | const useContextActions = ({actions=["changeText"]})=>{ 71 | // jeśli actions jest pusty to zwraca wszystkie akcje 72 | // jeśli actions nie jest pusty to zwraca akcje wskazane po nazwie w arryu actions 73 | // return ... 74 | } 75 | 76 | const useContextActionsAndStore = ({actions=["changeText"], stateNames=['text']})=>{ 77 | // suma logiki powyżej 78 | // return ... 79 | } 80 | ``` 81 | -------------------------------------------------------------------------------- /Zbiór React/ComplexLogic/hocProtectedView.md: -------------------------------------------------------------------------------- 1 |

Hoc Protected View

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | 7 | - JavaScript, React, 8 | - Redux, useReducer - opcjonalnie 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - JavaScript, React, 13 | 14 | ## Cele główne 15 | * [ ] Twoim zadaniem jest stworzyć `userCtx` który w store przechowuje key `auth` domyślnie ustawiony na `false` 16 | * [ ] Następnie, stwórz HOCa który zależnie od tego czy w store pojawi się `user.auth` = `true` zwraca null, jeśli false 17 | to zwraca komponent przekierowujący na komponent logowania 18 | ## Cele dodatkowe 19 | * [ ] Brak 20 | 21 | ## Przydatne linki 22 | - context - https://pl.reactjs.org/docs/context.html 23 | 24 | ## Początek kodu 25 | ```javascript 26 | // kontektst 27 | const userCtx = React.createContext({auth:false}) 28 | 29 | //HOC 30 | const Protected = (Component)=>{ 31 | // return null 32 | } 33 | // - jeśli w kontekście auth jest false, Protected wyświetla komunikat "Musisz pierwsze się zalogować" 34 | // - jeśli w kontekście auth jest true to Protected wyświetla komponent 35 | ``` 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Zbiór React/Components/InfiniteHumanList.md: -------------------------------------------------------------------------------- 1 |

Infinite Human List

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | 7 | - React, JavaScript 8 | 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - React, JavaScript 13 | 14 | ## Cele główne 15 | * [ ] Twoim pierwszym zadaniem jest stworzyć na potrzeby zadania zbiory (tablice) losowych imion, nazwisk, wieków, i płci - około 15 dla każdego zbioru, z wyjątkiem płci. Zbiory te posłużą jako dane do generowania w dalszej częsci zadania. 16 | 17 | * [ ] Na podstawie przygotowanych zbiorów, stwórz funkcję `generatePerson`, która generuje człowieka jako obiekt o losowych parametrach. Jedna osoba to: 18 | - imię, nazwisko, wiek, płeć (losowe) 19 | - twarz, która będzie losowo wygenerowana przez AI - sprawdź: https://www.thispersondoesnotexist.com 20 | 21 | * [ ] Stwórz listę 100 losowych osób 22 | * [ ] Stwórz komponent `SinglePerson`, który prezentuje wszystkie informacje o człowieku 23 | * [ ] Stwórz komponent `MoreAndMorePeople`, który zaprezentuje pierwsze 10 osób, oraz: 24 | - po doscrollowaniu do końca listy, załaduje kolejne 10 osób do już prezentowanych 25 | - jeśli pierwsza 100 osób z domyślnej listy którą stworzyłeś i przekazałeś w propsach się skończy, lista ma wygenerować kolejne 10 osób i je wyświetlić 26 | 27 | ## Cele dodatkowe 28 | 29 | * [ ] Dodać stylowanie wg. metodologi BEM, w celu lepszego użytkowania. 30 | 31 | ## Kawałek kodu dla lepszego początku! 32 | 33 | ```javascript 34 | const generatePerson = () => {} 35 | // stwórz funkcję generuje człowieka (jako obiekt) o losowych parametrach 36 | 37 | const people = [] // stwórz listę 100 ludzi 38 | 39 | // stwórz komponent, który prezentuje wszystkie informacje o człowieku 40 | const SinglePerson = (props)=>{ 41 | return null 42 | } 43 | 44 | // stwórz listę, która zaprezentuje pierwszych 10 ludzi 45 | const MoreAndMorePeople = ({ 46 | items 47 | }) => { 48 | // po doscrolowaniu do końca listy, lista ma załadować 49 | // kolejną dziesiątkę ludzi do pokazywanych 50 | // jeśli pierwszych 100 ludzi (podstawowa wartość propa 'items') się skończy 51 | // lista ma wygenerować świeżych 10 ludzi i ich pokazać 52 | return null 53 | } 54 | ``` 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Zbiór React/Components/Modal.md: -------------------------------------------------------------------------------- 1 |

Modal

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | 7 | - React, JavaScript 8 | 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - React, JavaScript 13 | 14 | ## Cele główne 15 | * [ ] Twoim zadaniem jest stworzyć komponent klasowy `Modal`, który: 16 | - zawiera podkomponenty ``, ``, `` 17 | - możesz wykorzystać do tego ContextApi, ale nie musisz 18 | 19 | * [ ] `Modal` ma mieć: 20 | - metodę `toggle()`, która włącza lub wyłącza modal, 21 | - prop `isOpen`, który jest `true/false` zależnie od tego czy modal jest włączony/wyłączony, 22 | - szare, półprzeźroczyste tło o kolorze `rgba(0,0,0,0.5)`, w które jeśli kliknie użytkownik to modal się wyłączy 23 | 24 | * [ ] `Modal.Header` ma mieć: 25 | - nieklikalne białe tło, 26 | - prop `title`, który renderuke się po lewej stronie, 27 | - ma zawierać po prawej stronie, przycisk do zamykania modalu metodą `toggle()` 28 | 29 | * [ ] `Modal.Content` ma mieć: 30 | - nieklikalne białe tło, 31 | - prop `children`, który jest renderowany wewnątrz tego białego tła, 32 | 33 | * [ ] `Modal.Footer` ma mieć: 34 | - nieklikalne białe tło, 35 | - prop `callToActionLabel` 36 | - dwa przyciski po prawej stronie, z ktorego jeden to `cancel` a drugi to `{callToActionLabel}` 37 | - oba przyciski mają zamykać modal, 38 | - podczas kliknięcia w przycisk z tekstem callToActionLabel, dodatkowo ma wyskakiwać alert z tekstem "OK" 39 | 40 | * [ ] Przykładowe wywołanie: 41 | ```javascript 42 | return ( 43 | 44 | 45 | 46 |

to powinno tak działać

47 | 48 | 49 | 50 | ) 51 | ``` 52 | 53 | * [ ] Przetestuj: 54 | - metodę togglę dostępną z każdego komponentu, który może z niej skorzystać 55 | - że wyrenderuje się jako null poza kontekstem 56 | - że będzie mieć przycisk oraz element h3 57 | - że będzie mieć 2 przyciski i oba będą zamykać modal 58 | 59 | ## Przydatne linki 60 | - podkomponenty - https://blog.bitsrc.io/understanding-compound-components-in-react-23c4b84535b5 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /Zbiór React/Components/SearchWithDropdown.md: -------------------------------------------------------------------------------- 1 |

Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

2 |
https://gladiators-of-javascript.com/#gladiators
3 | 4 |

Search With Dropdown

5 | 6 |
7 | 8 | ## Wymagana wiedza 9 | 10 | - React, HTML, CSS, JavaScript 11 | 12 | 13 | ## Technologie potrzebne do zadania 14 | 15 | - React, HTML, CSS, JavaScript 16 | 17 | ## Cele główne 18 | * [ ] Twoim zadaniem jest odtworzyć komponent wyszukiwania ze zdjęcia poniżej 19 | * [ ] Zasady działania komponentu: 20 | - komponent `SearchWithDropdown` ma posiadać input na wyszukiwaną frazę. Po wpisaniu frazy `word` pojawia się lista `DropdownList` która renderuje pojedyńcze zgodności z wyszukiwaną frazą jako komponenty `DropdownItem` 21 | - Jeżeli długość podanej frazy jest krótsza, lub równa 3 znaki komponent `DropdownList` nie jest wyświetlany - fraza musi być większa lub równa niż 4 znaki. 22 | - Komponent `DropdownList` zwraca "trafienia" w kolejności alfabetycznej, z wizualnym podkreśleniem wyszukiwanego słowa 23 | - Wyszukiwanie ma nie być case sensitive, fraza `word` zostanie wyszukana również jako `Word`. 24 | * [ ] Postaraj się odwzorować wygląd komponentu. 25 | * [ ] Jako pozycje do wyszukiwania użyj danych `searchData` . 26 | 27 | ## Kawałek kodu dla lepszego początku! 28 | 29 | ```javascript 30 | const searchData = [ 31 | { 32 | name:"Fixed TOC - table of contents for WordPress plugin", 33 | regularPrice: 20, 34 | salePrice: 3.99 35 | }, 36 | { 37 | name:"Jobify - The Most Popular WordpPress Job Board Theme". 38 | regularPrice: 59, 39 | salePrice: 3.99 40 | }, 41 | { 42 | name:"Lorem ipsum". 43 | regularPrice: 99, 44 | salePrice: 21, 45 | } 46 | ] 47 | 48 | const DropdownItem = ()=>{} 49 | const DropdownList = ()=>{} 50 | const SearchWithDropdown = ()=>{} 51 | ``` 52 | 53 | ![](search.png) 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /Zbiór React/Components/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Przemocny/zbior-zadan-html-css-js-react/cc6652b761b73d71a23eb0dfdea28bed2c1f9dc9/Zbiór React/Components/search.png -------------------------------------------------------------------------------- /Zbiór React/SimpleLogic/CompountSideBar.md: -------------------------------------------------------------------------------- 1 |

Tap Bar

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | 7 | - JavaScript, HTML, React 8 | 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - JavaScript, HTML, React 13 | 14 | ## Cele główne 15 | * [ ] Korzystając z `React.Context` stwórz grupę koponentów typu compound. Możesz korzystać z hooka `useContext` ale nie musisz 16 | * [ ] Stwórz komponent `Toggler` który jest przyciskiem. Kliknięcie w ten przycisk powoduje pokazanie/schowanie sidebara. 17 | * [ ] Stwórz komponent `Sidebar` który: 18 | - zawiera jakieś menu, 19 | - ma pozycję fixed z lewej strony ekranu, 20 | - ma animację wejścia na ekran i wyjścia poza ekran, 21 | - zajmuje 100% wysokości ekranu i 50% szerokości ekranu 22 | 23 | ## Zadania dodatkowe 24 | * [ ] Brak 25 | 26 | ## Przydatne linki 27 | 28 | React Compound Components - https://blog.logrocket.com/guide-to-react-compound-components-9c4b3eb482e9/ 29 | 30 | ## Kawałek kodu dla lepszego początku! 31 | ```javascript 32 | const Toggler = ()=>{ 33 | // jest to przycisk, który włacza i wyłącza sidebar 34 | return null 35 | } 36 | 37 | const Sidebar = ()=>{ 38 | // to jest sidebar, którzy zawiera jakieś menu 39 | // jest przyczepiony do lewej strony ekranu 40 | // ma animację wejścia na ekran i wyjścia poza ekran 41 | // zajmuje 100% wysokości ekranu i 50% szerokości ekranu 42 | } 43 | ``` 44 | 45 | 46 | -------------------------------------------------------------------------------- /Zbiór React/SimpleLogic/TableWithPagination.md: -------------------------------------------------------------------------------- 1 |

Table With Pagination

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | 7 | - JavaScript, React 8 | 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - JavaScript, React 13 | 14 | ## Cele główne 15 | * [ ] Stwórz komponent `PaginatedTable`, który będzie renderował paginowaną tabelkę na podstawie danych przekazanych do propsa `dataEntries` - wygenerowanych przez Ciebie danych. 16 | * [ ] Stwórz komponent `Pagination` który będzie renderował wszystkie przyciski do zmiany stron 17 | * [ ] Stwórz hook `usePagination(dataEntries, elementsOnPage)` który zwraca poniższe dane: 18 | ```javascript 19 | const [ 20 | { actualPageIdx, lastPageIdx, entriesOnSelectedPage, isBusy }, 21 | { goToFirstPage, goToPrevPage, goToPage, goToNextPage, goToLastPage } 22 | ] = usePagination(dataEntries) 23 | // actualPageIdx to index aktualnej strony 24 | // lastPageIdx to index ostatniej strony 25 | // entriesOnSelectedPage to przy elementsOnPage = 50 zawiera 50 elementów z dataEntries dla aktualnej strony 26 | // isBusy - boolean true/false, defaultowo false, który jest włączony na 333ms podczas gdy zmieniana jest strona i wyświetlane są nowe dane 27 | 28 | // goToPage(pageIdx) - zmienia daną stronę 29 | // goToFirstPage, goToPrevPage, goToNextPage, goToLastPage - zmienia stronę na odpowiednią 30 | ``` 31 | 32 | ## Cele dodatkowe 33 | * [ ] Brak 34 | 35 | ## Przydatne linki 36 | 37 | - Tworzenie własnych hooków - https://pl.reactjs.org/docs/hooks-custom.html 38 | 39 | ## Kawałek kodu na początek 40 | ```javascript 41 | const PaginatedTable = ({ dataEntries }) => { 42 | // ... 43 | return null 44 | } 45 | 46 | const Pagination = ({ paginationState, paginationActions })=>{ 47 | 48 | } 49 | const usePagination = (dataEntries, elementsOnPage=50) => { 50 | // ... 51 | // return [paginationState, paginationActions] 52 | } 53 | ``` 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /Zbiór React/SimpleLogic/useGeo.md: -------------------------------------------------------------------------------- 1 |

Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

2 |
https://gladiators-of-javascript.com/#gladiators
3 | 4 |

useGeo hook

5 | 6 |
7 | 8 | ## Wymagana wiedza 9 | 10 | - JavaScript, React 11 | 12 | 13 | ## Technologie potrzebne do zadania 14 | 15 | - JavaScript, React 16 | 17 | ## Cele główne 18 | * [ ] Stwórz custom hook `useGeo`, który dodaje do komponentu poniższe właściwości: 19 | - `geoData` - zwraca wszystkie informacje geolokalizacyjne z window 20 | - `toggleListening` - true/false - akcja, która przyjmuje true/false i włacza lub wyłącza nasłuch na geolokalizacji 21 | 22 | * [ ] Sprawdź czy Twój hook działa poprawnie: 23 | - zwraca poprawny typ danych = `[boolean, function]` 24 | - włącza i wyłącza nasłuch na geolokalizacji 25 | - zwraca latitude i longitude 26 | 27 | * [ ] Zamockuj window oraz metody niezbędne do geolokalizacji ustawiając: 28 | - defaultowo lat i long na Londyn 29 | - ustawiając defaultowo nasłuch na wyłączony 30 | 31 | ## Cele dodatkowe 32 | * [ ] Brak 33 | 34 | ## Przydatne linki 35 | - latitude i longitude - https://www.latlong.net/ 36 | - Tworzenie własnych hooków - https://pl.reactjs.org/docs/hooks-custom.html 37 | 38 | ## Kawałek kodu na lepszy początek 39 | ```javascript 40 | const useGeo = (ref) => { 41 | // return [geoData, toggleListening] 42 | } 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /Zbiór backend/express_or_next/bearerMiddleware.md: -------------------------------------------------------------------------------- 1 |

Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

2 |
https://gladiators-of-javascript.com/#gladiators
3 | 4 |

Bearer token middleware

5 | 6 |
7 | 8 | ## Wymagana wiedza 9 | - Solidne podstawy JS-a. 10 | - Asynchroniczność(promise, async/await). 11 | - Podstawowa znajomość mechaniznów zabezpieczenia "bearer-token". 12 | - Podstawowa znajmość jednej z nizej wymienionych baz danych. 13 | 14 | ## Technologie potrzebne do zadania 15 | 16 | - Express.js lub Next.js. 17 | - mongoDB/PostgreSQL/Redis 18 | 19 | ## Cele główne 20 | 21 | * [ ] Na postawie tokenów przekazywanych w **Request Headers** oraz jednej dowolnej bazy danych **(mongo/sql/redis)** weryfikuj czy dany request jest zawiera poprawny token. 22 | * [ ] Jeśli request nie zawiera odpowiedniego **tokenu**, to response powinien zwracać odpowiedni komunikat i status 23 | 24 | ## Cele opcjonalne do wykonania 25 | 26 | - Brak 27 | 28 | ## Przydatne linki 29 | 30 | - Czym są middleware w express - https://developer.okta.com/blog/2018/09/13/build-and-understand-express-middleware-through-examples 31 | - Czym są bearer tokeny - https://stackoverflow.com/questions/25838183/what-is-the-oauth-2-0-bearer-token-exactly/25843058 32 | 33 | ## Kawałek kodu dla lepszego początku! 34 | 35 | ```javascript 36 | function bearerTokenMiddleware(){ 37 | // ... 38 | } 39 | 40 | // aby użyć to tak w expressie 41 | const server = express() 42 | server.use(bearerTokenMiddleware) 43 | ``` 44 | -------------------------------------------------------------------------------- /Zbiór backend/express_or_next/googleSheetIntegration.md: -------------------------------------------------------------------------------- 1 |

Google sheet integration

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | - Solidne podstawy JS-a. 7 | - Asynchroniczność(promise, async/await). 8 | - Podstawowa wiedza z zakresu frontendu(budowa formularza). 9 | - Podstawowa wiedza z zakresu połączenia z usługą google sheet i google drive 10 | 11 | ## Technologie potrzebne do zadania 12 | 13 | - Express.js lub Next.js. 14 | 15 | ## Cele główne 16 | 17 | * [ ] Przygotowanie integracji do google sheets, które będą swoistą bazą danych dla informacji z formularza na stronie(jeśli formularza zawiera imie, naziwsko, e-mail to arkusz google sheets powinien zawierać wszystkie dane z formulrza jako kolumny) 18 | * [ ] Stwórz możliwośc uploadu plików przez formularz na google drive. Do google sheets z informacja do tego formularza ma trafiać link do google drive(jedno kliknięcie aby ściągnąć) 19 | * [ ] Każdy wypełniony formularz ma mieć swój identyfikator i datę utworzenia(timestamp), każdy formularz ma mieć powiązane IP z osobą wysyłająca 20 | * [ ] Każdy formularza powinien mieć podstawową walidacje zarówno po stronie frontendu jak i backendu 21 | 22 | ## Cele opcjonalne do wykonania 23 | 24 | * [ ] Na podstawie IP z formularza dokonaj geolokalizacji osoby wysyłającej 25 | 26 | ## Przydatne linki 27 | 28 | - Przykład integracji node z google sheets - https://dev.to/osumgbachiamaka/how-to-build-an-api-with-nodejs-expressjs-and-google-sheet-1-45gf 29 | - Przykład budowy formularzy w HTML - https://www.htmlgoodies.com/html5/css/working-with-html-forms.html 30 | 31 | ## Kawałek kodu dla lepszego początku! 32 | 33 | ```javascript 34 | // część backendowa opowiedzialna za wysyłkę plików. 35 | 36 | const router = express.Router() 37 | 38 | router.post('/upload', (req,res) =>{ 39 | 40 | // ... logika obsługująca wysyłkę plików 41 | 42 | }) 43 | // 44 | // częśc frontendowa(potzebujemy jedynie formularza) 45 | 46 | 47 |
48 | input ... 49 | ``` 50 | -------------------------------------------------------------------------------- /Zbiór frontend/html_and_css/ChatUI.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Przemocny/zbior-zadan-html-css-js-react/cc6652b761b73d71a23eb0dfdea28bed2c1f9dc9/Zbiór frontend/html_and_css/ChatUI.jpg -------------------------------------------------------------------------------- /Zbiór frontend/html_and_css/ChatUI.md: -------------------------------------------------------------------------------- 1 |

ChatUI

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | - Podstawy HTML i CSS 7 | - Znajomośc właściwości elementów w CSS 8 | - Znajomośc metodologi BEM 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - HTML 13 | - CSS 14 | - BEM 15 | 16 | ## Cele główne 17 | 18 | * [ ] Twoim zadaniem jest odtworzyć widok czatu z grafiki poniżej w metodologii BEM oraz statycznym HTML. 19 | 20 | 21 | chatui 22 | 23 | ## Kawałek kodu dla lepszego początku! 24 | 25 | ```html 26 |
27 | ``` 28 | -------------------------------------------------------------------------------- /Zbiór frontend/html_and_css/clockwisePresentation.md: -------------------------------------------------------------------------------- 1 |

Clockwise Presentation

2 | 3 |
4 | 5 | ## Wymagana wiedza 6 | - Podstawy HTML i CSS 7 | - Znajomośc właściwości elementów w CSS 8 | 9 | ## Technologie potrzebne do zadania 10 | 11 | - HTML 12 | - CSS 13 | 14 | ## Cele główne 15 | 16 | * [ ] Wykorzystując kod podany poniżej stwórz 12 elementową prezentację do zdjęć, która wygląda jak godziny na 12 godzinnym zegarze analogowym. 17 | * [ ] Niech każdy z elementów `
  • ` będzie ustawiony na odpowiedniej pozycji za pomocą właściwości position absolute - index 0 godzina 12. 18 | * [ ] Niech każdy z elementów `
  • ` zawiera zdjęcie o wymarze 50px x 50px 19 | * [ ] Podczas interakcji za pomocą elementu wskazującego na `
  • ` pozycja ma się zmieniać na środek zegara, a wielkość zdjęcia na 300px x 300px 20 | * [ ] Zdjęcie zawsze ma mieć odpowiednie propoercje tego co wyświetla 21 | 22 | 23 | 24 | ## Cele opcjonalne do wykonania 25 | 26 | * [ ] Zmiana właściwości CSS ma być animowana 27 | 28 | ## Przydatne linki 29 | 30 | - Wyjaśnienie position w CSS - https://css-tricks.com/almanac/properties/p/position/ 31 | - CSS Animations - przykłady - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations 32 | 33 | ## Kawałek kodu dla lepszego początku! 34 | 35 | ```html 36 |
    37 |
      38 |
    • 39 | 40 |
      • 41 |
    • 42 | 43 |
      • 44 |
    • 45 | 46 |
      • 47 |
    • 48 | 49 |
      • 50 |
    • 51 | 52 |
      • 53 |
    • 54 | 55 |
      • 56 |
    • 57 | 58 |
      • 59 |
    • 60 | 61 |
      • 62 |
    • 63 | 64 |
      • 65 |
    • 66 | 67 |
      • 68 |
    • 69 | 70 |
      • 71 |
    • 72 | 73 |
      • 74 |
    75 |
    76 | ``` 77 | -------------------------------------------------------------------------------- /Zbiór frontend/html_and_css/starWarsIntro.md: -------------------------------------------------------------------------------- 1 |

    Star Wars Intro

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | 7 | - Podstawy html oraz css 8 | 9 | ## Technologie potrzebne do zadania 10 | 11 | - HTML, CSS 12 | 13 | ## Cele główne 14 | 15 | [![](http://img.youtube.com/vi/tGsKzZtRwxw/0.jpg)](http://www.youtube.com/watch?v=tGsKzZtRwxw "") 16 | 17 | * [ ] Na podstawie wideo, odtwórz wygląd i animację intro z filmu Star Wars (kliknij obrazek powyżej) 18 | * [ ] Niech cała animacja zajmuje 100% szerokości ekranu, i niech będzie umieszczona w klasie `.intro`, tło niech będzie podobne do tego z wideo. 19 | * [ ] Tytuł filmu ma być umieszczony w klasie `.title`, umieszczony w odpowiednim miejscu, oraz ma posiadać odpowiednią animację zanikania. 20 | * [ ] Napisy końcowe mają być umieszczone w klasie `.perspective-text`, i działać tak jak na filmie. 21 | 22 | :heavy_check_mark: Napisy końcowe mają być umieszczone w klasie `.perspective-text`, i działać tak jak na filmie. 23 | 24 | ## Przydatne linki 25 | 26 | - CSS Animations - https://www.w3schools.com/css/css3_animations.asp 27 | - Plac zabaw z animacjami i perspektywą- https://css-playground.com/view/18/perspective-with-animations 28 | 29 | 30 | ## Kawałek kodu dla lepszego początku! 31 | ```css 32 | .title{} 33 | .perspective-text{} 34 | 35 | ``` 36 | ```html 37 |
    38 |
    39 |
    40 |
    41 | ``` 42 | -------------------------------------------------------------------------------- /Zbiór frontend/html_and_js/ScrollingList.md: -------------------------------------------------------------------------------- 1 |

    Scrolling List

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | 7 | - Podstawy html oraz JavaScript 8 | 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - HTML, Podstawy JavaScript 13 | 14 | ## Cele główne 15 | 16 | * [ ] Stwórz scrollowaną listę z dwoma `IntersectionObserverami`. 17 | * [ ] Lista ma tworzyć podczas scrollowania przez użytkownika animajcję, w oparciu o intersection ratio, a na "liście" widać tylko kilka elementów, i animują się tylko te góra/dół. 18 | * [ ] Reszta listy pojawia się poprzez lazy loading w zależności od potrzeb. 19 | 20 | ## Przydatne linki 21 | 22 | - Intersection Observer API - https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 23 | 24 | - Lazy Loading - https://bedekodzic.pl/lazy-loading/ -------------------------------------------------------------------------------- /Zbiór frontend/html_and_js/data.js: -------------------------------------------------------------------------------- 1 | const data = [ 2 | { 3 | "_id": "5e985a07feddae7617ac44f6", 4 | "age": 24, 5 | "eyeColor": "brown", 6 | "name": "Cummings Baxter", 7 | "gender": "male", 8 | "company": "VELOS", 9 | "email": "cummingsbaxter@velos.com", 10 | "phone": "+1 (907) 482-2451", 11 | "tags": [ 12 | "labore", 13 | "elit", 14 | "excepteur", 15 | "nisi", 16 | "mollit", 17 | "anim", 18 | "aliquip" 19 | ], 20 | "friends": [ 21 | { 22 | "id": 0, 23 | "name": "Sheppard Jensen" 24 | } 25 | ] 26 | }, 27 | { 28 | "_id": "5e985a0709dfa1e6fd93c6ad", 29 | "age": 32, 30 | "eyeColor": "brown", 31 | "name": "Madelyn Dickson", 32 | "gender": "female", 33 | "company": "KENGEN", 34 | "email": "madelyndickson@kengen.com", 35 | "phone": "+1 (984) 521-2439", 36 | "tags": [ 37 | "nisi", 38 | "veniam", 39 | "dolore", 40 | "officia", 41 | "ex", 42 | "non", 43 | "pariatur" 44 | ], 45 | "friends": [ 46 | { 47 | "id": 0, 48 | "name": "Bruce Barton" 49 | }, 50 | { 51 | "id": 1, 52 | "name": "Juliet Schmidt" 53 | }, 54 | { 55 | "id": 2, 56 | "name": "Horton Haley" 57 | }, 58 | { 59 | "id": 3, 60 | "name": "Herminia Witt" 61 | } 62 | ] 63 | }, 64 | { 65 | "_id": "5e985a0737e2306e9aef6ecd", 66 | "age": 26, 67 | "eyeColor": "blue", 68 | "name": "Mcguire Mercado", 69 | "gender": "male", 70 | "company": "LINGOAGE", 71 | "email": "mcguiremercado@lingoage.com", 72 | "phone": "+1 (963) 450-2194", 73 | "tags": [ 74 | "cupidatat", 75 | "occaecat", 76 | "amet", 77 | "qui", 78 | "elit", 79 | "esse", 80 | "deserunt" 81 | ], 82 | "friends": [ 83 | { 84 | "id": 0, 85 | "name": "Loraine Harper" 86 | }, 87 | { 88 | "id": 1, 89 | "name": "Luann Randall" 90 | }, 91 | { 92 | "id": 2, 93 | "name": "Obrien Rich" 94 | }, 95 | { 96 | "id": 3, 97 | "name": "Noble Wilkerson" 98 | } 99 | ] 100 | }, 101 | { 102 | "_id": "5e985a07148cfba58c860ec2", 103 | "age": 26, 104 | "eyeColor": "brown", 105 | "name": "Marina Porter", 106 | "gender": "female", 107 | "company": "GORGANIC", 108 | "email": "marinaporter@gorganic.com", 109 | "phone": "+1 (867) 417-3497", 110 | "tags": [ 111 | "laborum", 112 | "aliquip", 113 | "sit", 114 | "adipisicing", 115 | "aute", 116 | "cupidatat", 117 | "aliquip" 118 | ], 119 | "friends": [ 120 | { 121 | "id": 0, 122 | "name": "Blair Hill" 123 | }, 124 | { 125 | "id": 1, 126 | "name": "Ebony Jimenez" 127 | } 128 | ] 129 | }, 130 | { 131 | "_id": "5e985a074984f9f08ccaaa4c", 132 | "age": 25, 133 | "eyeColor": "green", 134 | "name": "Barlow Ferguson", 135 | "gender": "male", 136 | "company": "TOYLETRY", 137 | "email": "barlowferguson@toyletry.com", 138 | "phone": "+1 (837) 484-2231", 139 | "tags": [ 140 | "est", 141 | "dolor", 142 | "minim", 143 | "ut", 144 | "anim", 145 | "culpa", 146 | "non" 147 | ], 148 | "friends": [ 149 | { 150 | "id": 0, 151 | "name": "Delacruz Acevedo" 152 | }, 153 | { 154 | "id": 1, 155 | "name": "Gloria Tanner" 156 | }, 157 | { 158 | "id": 2, 159 | "name": "Cantrell Myers" 160 | }, 161 | { 162 | "id": 3, 163 | "name": "Fisher Leonard" 164 | } 165 | ] 166 | } 167 | ] -------------------------------------------------------------------------------- /Zbiór frontend/html_and_js/searchDeep.md: -------------------------------------------------------------------------------- 1 |

    Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

    2 |
    https://gladiators-of-javascript.com/#gladiators
    3 | 4 |

    Search Deep

    5 | 6 |
    7 | 8 | ## Wymagana wiedza 9 | 10 | - Podstawy html oraz JavaScript 11 | 12 | 13 | ## Technologie potrzebne do zadania 14 | 15 | - HTML, Podstawy JavaScript, znajomość metod tablic JavaScript 16 | 17 | ## Cele główne 18 | 19 | * [ ] Korzystając z funkcji `filter()` stwórz funkcję `filterWith(arr, filter)`. 20 | * [ ] Funkcja ma umożliwić przeszukanie podanej jako argument `arr` tablicy z obiektami, pod względem zgodności wartości którego kolwiek klucza z podanym argumentem `filter` w formie string. 21 | * [ ] Funkcja ma także umożliwić przeszukania zagnieżdżonych list takich jak `tags` czy `friends` 22 | * [ ] Jeśli długość argumentu `filter` będzie wynosił od 0 do 2 funkcja ma zwrócić pusty array, w przeciwnym wypadku ma filtrować każdy klucz typu string w obiekcie. 23 | * [ ] Do przetestowania działania funkcji, skorzystaj z zestawu danych umiesczonych w pliku `data.js`. 24 | 25 | ## Przydatne linki 26 | 27 | - Metoda .filter() - https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/filter 28 | 29 | ## Kawałek kodu dla lepszego początku! 30 | 31 | ```javascript 32 | function filterWith(arr, filter){ 33 | // ... 34 | } 35 | 36 | ``` 37 | -------------------------------------------------------------------------------- /Zbiór frontend/html_and_js/typingEffect.md: -------------------------------------------------------------------------------- 1 |

    Typing Effect

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | 7 | - Znajomośc JavaScript, podstawy OOP 8 | 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - JavaScript, HTML 13 | 14 | ## Cele główne 15 | 16 | * [ ] Twoim zadaniem jest odtworzyć efekt wizualny pisania, na podstawie biblioteki: https://mattboldt.com/demos/typed-js/ 17 | * [ ] Instancja klasy `Typed`: 18 | - ma pozwalać na wskazanie elementu html, w którym aktualny tekst zawarty w elemencie zostanie zdobiony tym elementem. 19 | - ma tworzyć za wskazanym elementem, mrugająca, pionową linię symulującą kursor, 20 | - ma pozwalać na wsazanie czy pisane mają być wyrazy czy litery, 21 | - ma poozwalać na wskazanie tempa pisania w ilościach liter na minutę (defaultowo 120/min) 22 | 23 | 24 | ## Przydatne linki 25 | 26 | - Wprowadzenie do programowania obiektowego - https://developer.mozilla.org/pl/docs/Web/JavaScript/Wprowadzenie_do_programowania_obiektowego_w_jezyku_JavaScript 27 | 28 | ## Kawałek kodu dla lepszego początku! 29 | 30 | ```javascript 31 | class Typed{ 32 | // ... 33 | } 34 | ``` 35 | 36 | -------------------------------------------------------------------------------- /Zbiór frontend/html_css_and_js/DatePicker.md: -------------------------------------------------------------------------------- 1 |

    Date Picker

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | 7 | - JavaScript, HTML, CSS 8 | 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - JavaScript, HTML, CSS 13 | 14 | ## Cele główne 15 | * [ ] Twoim zadaniem jest odtworzyć wygląd i działanie datepickera zaprezentowanego w gifie poniżej. 16 | * [ ] Date Picker powinien mieć możliwośc wyboru dnia, miesiąca, roku niezależnie od siebie. 17 | * [ ] Postaraj się jak najbardziej szczegółowo odtworzyć wygląd pickera z gifa. 18 | * [ ] Postaraj się uzyskać jak najwięcej mikrointerakcji np. zwiększenie rozmiaru/koloru aktualnie wybranej pozycji podczas kliknięcia. 19 | 20 | ![](date-picker-ui-element.gif) 21 | 22 | -------------------------------------------------------------------------------- /Zbiór frontend/html_css_and_js/FlipCard.md: -------------------------------------------------------------------------------- 1 |

    Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

    2 |
    https://gladiators-of-javascript.com/#gladiators
    3 | 4 |

    Flip Card

    5 | 6 |
    7 | 8 | ## Wymagana wiedza 9 | 10 | - JavaScript, HTML, CSS 11 | 12 | 13 | ## Technologie potrzebne do zadania 14 | 15 | - JavaScript, HTML, CSS, Metodologia BEM 16 | 17 | ## Cele główne 18 | * [ ] Twoim zadaniem jest stworzyć element planszy o wymiarach 5x5 (kwadratów) jak w gifie poniżej. 19 | * [ ] Skorzystaj z poniższych wymiarów przy projektowaniu elementu: 20 | ```scss 21 | .grid{ 22 | // kwadrat 5x5 23 | &__cell{ 24 | 25 | } 26 | 27 | &__card{ 28 | &--flipped{} 29 | 30 | &--small{ 31 | // kwadrat 1x1 32 | } 33 | &--medium{ 34 | // prostokąt 2x1 35 | } 36 | &--big{ 37 | // kwadrat 2x2 38 | } 39 | } 40 | 41 | } 42 | ``` 43 | * [ ] Zastosuj metodologię BEM podczas przygotowywania styli. 44 | * [ ] Sposób działania planszy: 45 | - wybór dowolnej karty powodujem że odwraca się ona jak memo i zostaje w takiej pozycji do ponownego kliknięcia przez użytkownika, 46 | - wybor innej karty nie wpływa na pozycję innych kart 47 | 48 | * [ ] Postaraj się dodać animację odwrotu karty tak jak w gifie, nie jest to wymóg, ale bardzo mile widziana opcja. 49 | 50 | 51 | ![](flipCardGrid.gif) 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /Zbiór frontend/html_css_and_js/SmartLogo.md: -------------------------------------------------------------------------------- 1 |

    Smart Logo

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | 7 | - JavaScript, HTML, CSS 8 | 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - JavaScript, HTML, CSS 13 | 14 | ## Cele główne 15 | * [ ] Twoim zadaniem jest stworzyć scrollowalny element o klasie `.post` , w którym są umieszczone 3 elementy. Na podstawie poniższego gifa załóżmy że: 16 | - element o kolorze niebieskim to główna część np. tekst na stronie postu, nadaj mu klasę `.post__content`, 17 | - element o kolorze zielonym to logo, nadaj mu klasę `.post__logo` 18 | - element o kolorze czerwonym to informacje o autorze,`.__post__author` 19 | - informacje o poscie, autorze, logu są jedynie dla lepszego zobrazowania problemu 20 | 21 | * [ ] Element post umieszczony jest w elemencie `.body` w którym występuje `navbar` właściwościach: 22 | - wysokość 100px, 23 | - szerokość 100%, 24 | - przezroczystość 100%, 25 | - granica dolna 1px szara, 26 | 27 | * [ ] Zasada działania: 28 | - jeśli użytkownik przescrolluje element o klasie `.post` ppowyżej niż wysokośc navbara liczona od góry, wtedy element o klasie `.post__logo` zostaje "przeniesiony" do navbara, zmieniajac swój rozmiar o połowę, i umieszczany jest w pozycji absolute tak jak w gifie. 29 | - równocześnie do powyższego zachowania, navbar przestaje być przezroczysty i staje się półprzeźroczysty 30 | - po ponownym przescrollowaniu poniżej wysokości navbara, układ wraca do pozycji domyślnej 31 | 32 | * [ ] W zadaniu wykorzystaj metodologię BEM 33 | 34 | ![](task.gif) 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Zbiór frontend/html_css_and_js/date-picker-ui-element.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Przemocny/zbior-zadan-html-css-js-react/cc6652b761b73d71a23eb0dfdea28bed2c1f9dc9/Zbiór frontend/html_css_and_js/date-picker-ui-element.gif -------------------------------------------------------------------------------- /Zbiór frontend/html_css_and_js/flipCardGrid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Przemocny/zbior-zadan-html-css-js-react/cc6652b761b73d71a23eb0dfdea28bed2c1f9dc9/Zbiór frontend/html_css_and_js/flipCardGrid.gif -------------------------------------------------------------------------------- /Zbiór frontend/html_css_and_js/task.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Przemocny/zbior-zadan-html-css-js-react/cc6652b761b73d71a23eb0dfdea28bed2c1f9dc9/Zbiór frontend/html_css_and_js/task.gif -------------------------------------------------------------------------------- /Zbiór fullstack/chatwidget.md: -------------------------------------------------------------------------------- 1 |

    Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

    2 |
    https://gladiators-of-javascript.com/#gladiators
    3 | 4 |

    Opis zadania chat widget

    5 | 6 |
    7 | 8 | ## Poziom zadania 9 | - Mid Fullstack 10 | 11 | ## Wymagana wiedza 12 | - Biegła znajomość JS + Solidne podstawy Typescript 13 | - Solidne podstawy React 14 | - Solidne postawy node.js(express) lub Next.js 15 | - REST API 16 | 17 | ## Technologie potrzebne do zadania 18 | - React 19 | - Express.js lub Next.js. 20 | - API RTC(Real time communication) do wyboru - Telegram/Whatsup/Slack 21 | 22 | ## Potrzeby klienta 23 | - Klient oczekuje żę zrobisz mu widget na strone, który będzie służył do komunikacji z obsługą jego strony 24 | - Komunikacja możę odbywać się opcjonalnie pomiędzy widgetem, a slackiem lub widgetem a telegramem lub widgetem a whatsup 25 | 26 | ## Wytyczne do zadania 27 | 28 | :heavy_check_mark: Widget jest zbudowany jako mikroapka w React lub w czystym JS/TS 29 | 30 | :heavy_check_mark: Skrypt z widgetem można załączyć w i pojawi się w prawym, dolnym rogu strony na wczytaniu strony 31 | 32 | :heavy_check_mark: Widget mozna sparametryzować po stronie API tworząc konto klienta, aby wskazać providera do usługi komunikacji RCT 33 | 34 | :heavy_check_mark: Widget mozna sparametryzować po stronie API generując clientId oraz clientSecret działający tylko w obrębie wskazanej przez klienta domeny 35 | 36 | :heavy_check_mark: Widget można sparametryzować po stronie klienta, tak aby dało się podpinać bezpośrednio do wskazanego konta klienta za pomocą clientId i clientSecret 37 | 38 | ## Wytyczne opcjonalne do wykonania 39 | 40 | - Brak 41 | 42 | ## Krótki opis działania 43 | - Mam 2 konta whatsappa, chciałbym móc przełączać chata, aby wysyłał raz na jedno, a raz na drugie 44 | 45 |

    Zadanie nie zawiera 'przydatnych linków' ani 'kod na lepszy początek' gdyż poziom mid do czegoś zobowiązuje :muscle:

    46 | -------------------------------------------------------------------------------- /Zbiór fullstack/googleFormsLike.md: -------------------------------------------------------------------------------- 1 |

    Opis zadania chat widget

    2 | 3 |
    4 | 5 | ## Poziom zadania 6 | - Mid Fullstack 7 | 8 | ## Wymagana wiedza 9 | - Biegła znajomość JS + Solidne podstawy Typescript 10 | - Solidne postawy node.js(express) lub Next.js 11 | - REST API 12 | 13 | ## Technologie potrzebne do zadania 14 | - Express.js lub Next.js. 15 | - API Google sheets 16 | 17 | ## Wytyczne do zadania 18 | 19 | :heavy_check_mark: po zalogowaniu do admina User może podpiąć dowolny akrusz google sheets jako miejsce do zapisywania odpowiedzi 20 | 21 | :heavy_check_mark: po zalogowaniu do admina User może skonfigurować dowolnie strukturę danych dla formularza do ankiety 22 | 23 | :heavy_check_mark: apka ma generować dostępny z GETa link do formularza, który możemy przesyłać do ankieterów i ich odpowiedzi zapisują się we wskazanym arkuszu Google Sheets 24 | 25 | :heavy_check_mark: każda ankieta ma zawierać czas otworzenia ankiety, czas wysłania ankiety, ip ankietera, jego przybliżoną lokalizację szacowaną na podstawie ip 26 | 27 | ## Wytyczne opcjonalne do wykonania 28 | 29 | - Brak 30 | 31 | ## Krótki opis działania według wytycznych 32 | - Ankieta może posiadać wiele różnych pytań i każde z nich może być innym rodzajem inputa w celu zbierania różnych rodzajów odpowiedzi (np text input, email input, textarea, multicheckbox, radiobuttons, range) 33 | - user może zapisywać swoje formularze 34 | - user może dodać nowy formularz na podstawie istniejącego 35 | - user może zmodyfikować dowolny formularz 36 | - user może wskazać dane do Google Sheet w celu integracji 37 | - user może zobaczyć w Google Sheets wszystkie informacje o odpowiedziach ankietowanych 38 | 39 |

    Zadanie nie zawiera 'przydatnych linków' ani 'kod na lepszy początek' gdyż poziom mid do czegoś zobowiązuje :muscle:Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

    2 |
    https://gladiators-of-javascript.com/#gladiators
    3 | 4 |

    Opis zadania ArrayMethods

    5 |
    6 | 7 | ## Wymagana wiedza 8 | - Solidne podstawy JS-a. 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - Typescript 13 | 14 | ## Cele główne 15 | 16 | * [ ] Odwzoruj identyczne działanie metod tablicowych za pomocą pętli for lub while w funkcjach 17 | * [ ] .forEach 18 | * [ ] .map 19 | * [ ] .entries 20 | * [ ] .filter 21 | * [ ] .reduce 22 | * [ ] .every 23 | * [ ] .some 24 | 25 | ## Cele opcjonalne do wykonania 26 | 27 | * [ ] Brak 28 | 29 | ## Przydatne linki 30 | 31 | - Array methods w JS - https://medium.com/quick-code/understanding-js-array-methods-which-can-make-programming-not-so-overwhelming-for-beginners-7afb5b4a0967 32 | - Funkcja w JS - https://codeburst.io/javascript-functions-understanding-the-basics-207dbf42ed99?gi=43b26b329212 33 | ## Kawałek kodu dla lepszego początku! 34 | 35 | ```javascript 36 | const forEachFn = (array, callback) => {} 37 | 38 | const mapFn = (array, callback) => {} 39 | 40 | const entriesFn = (array, callback) => {} 41 | 42 | const filterFn = (array, callback) => {} 43 | 44 | const reduceFn = (array, callback, inital) => {} 45 | 46 | const everyFn = (array, callback) => {} 47 | 48 | const someFn = (array, callback) => {} 49 | ``` 50 | -------------------------------------------------------------------------------- /Zbiór fundamentals/js_functional/includes.md: -------------------------------------------------------------------------------- 1 |

    Opis zadania includes

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | - Solidne podstawy JS-a. 7 | 8 | ## Technologie potrzebne do zadania 9 | 10 | - Typescript 11 | 12 | ## Cele główne 13 | 14 | * [ ] Stwórz funkcję, która działa podobnie do array.includes(element) 15 | * [ ] Funkcja szuka warunku spełnionego dla elementu według **callbackForEachElement**, jeśli znajdzie pierwszy pasujący element to funkcja przerywa iterację po arrayu i zwraca true 16 | 17 | ## Cele opcjonalne do wykonania 18 | 19 | * [ ] Brak 20 | 21 | ## Przydatne linki 22 | 23 | - Jak działa metoda .includes() - https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/includes 24 | 25 | ## Kawałek kodu dla lepszego początku! 26 | 27 | ```javascript 28 | function includes(array, callbackForEachElement){} 29 | ``` 30 | -------------------------------------------------------------------------------- /Zbiór fundamentals/js_functional/recursivePromise.md: -------------------------------------------------------------------------------- 1 |

    Opis zadania recursivePromise

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | - Solidne podstawy JS-a. 7 | - Asynchroniczność(Promise) 8 | 9 | ## Technologie potrzebne do zadania 10 | 11 | - Typescript 12 | 13 | ## Cele główne 14 | 15 | * [ ] Stwórz funkcję tworzącą promisę o nazwie recursivePromise(arrayOfPromises), którą przyjmuję jako argument listę z promisami. Na potrzeby zadania zakładamy, że każdy z elementów arrayOfPromises jest promisem i elementów w arrayOfPromises jest minimum 7. Promisy z listy mają się wywoływać kolejna po zakończeniu poprzedniej, a ostatnia w .then ma zwrócić listę ze wszystkimi wynikami promis z arrayOfPromises zachowując odpowiednią kolejność. Jeśli wystąpi błąd w którejkolwiek promisie ma on zostać zwrócony do .catch wraz z poprzednimi wynikami z promis 16 | 17 | ## Cele opcjonalne do wykonania 18 | 19 | * [ ] Brak 20 | 21 | ## Przydatne linki 22 | 23 | - Kompendium o promisach - https://medium.com/better-programming/understanding-promises-in-javascript-13d99df067c1 24 | 25 | ## Kawałek kodu dla lepszego początku! 26 | 27 | ```javascript 28 | function recursivePromise(arrayOfPromises){ 29 | 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /Zbiór fundamentals/js_functional/regExpSearch.md: -------------------------------------------------------------------------------- 1 |

    Opis zadania regExpSearch

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | - Solidne podstawy JS-a. 7 | 8 | ## Technologie potrzebne do zadania 9 | 10 | - Typescript 11 | 12 | ## Cele główne 13 | 14 | * [ ] Stwórz 3 regexpy 15 | * [ ] Pierwszy, który pozwoli Ci zaznaczyć wszystkie hashtagi w tekscie(#nauka #tag) 16 | * [ ] Drugi, który znajdzie imiona według wzorca, że pierwsza litera jest duża, a następne małe, +/- kolejne słowa frazy(Marek, Aleksandra, Magda, Paweł) 17 | * [ ] Trzeci, który znajdzie pojedyczno podane znaki interpunktycje i specjalne - !@#$%^&*-=+_?~( lorem # ipsum - to znajdzie / lorem@ipsum - tego nie znajdzie 18 | 19 | ## Cele opcjonalne do wykonania 20 | 21 | * [ ] Brak 22 | 23 | ## Przydatne linki 24 | 25 | - Kompendium wiedzy o RegExp - https://blog.bitsrc.io/a-beginners-guide-to-regular-expressions-regex-in-javascript-9c58feb27eb4 26 | 27 | ## Kawałek kodu dla lepszego początku! 28 | 29 | ```javascript 30 | const allHashtags = ...regexp 31 | const allPhrasesWithOneBigLetterAndSmall = ..regexp 32 | const allSpecialAndPunction = ...regexp 33 | ``` 34 | -------------------------------------------------------------------------------- /Zbiór fundamentals/js_oop/MouseRecorder.md: -------------------------------------------------------------------------------- 1 |

    Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

    2 |
    https://gladiators-of-javascript.com/#gladiators
    3 | 4 |

    Opis zadania MouseRecorder

    5 | 6 |
    7 | 8 | ## Wymagana wiedza 9 | - Solidne podstawy JS-a. 10 | - Podstawy Object Oriented Programming(OOP) 11 | 12 | ## Technologie potrzebne do zadania 13 | 14 | - Typescript 15 | 16 | ## Cele główne 17 | 18 | * [ ] Stwórz klasę **MouseRecorder** 19 | * [ ] Wypracuj metodę **.record()**, która przez 30sec co 100ms będzie zapisywać do localstorage aktualną pozycję myszki oraz scrolla ekranu 20 | * [ ] Wypracuj metodę **.play()**, która zmienia kursor na cancel oraz odtwarza zapis z localstorage 21 | 22 | ## Cele opcjonalne do wykonania 23 | 24 | * [ ] Brak 25 | 26 | ## Przydatne linki 27 | 28 | - Czym jest localstorage - https://blog.logrocket.com/localstorage-javascript-complete-guide/ 29 | 30 | ## Kawałek kodu dla lepszego początku! 31 | 32 | ```javascript 33 | class PositionRecorder{ 34 | constructor(){ 35 | // ... 36 | } 37 | 38 | record(){ 39 | 40 | } 41 | 42 | play(){ 43 | 44 | } 45 | } 46 | ``` 47 | -------------------------------------------------------------------------------- /Zbiór fundamentals/js_oop/envDetector.md: -------------------------------------------------------------------------------- 1 |

    Opis zadania Env Detector

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | 7 | - Solidne podstawy JS-a. 8 | - Podstawy OOP 9 | 10 | ## Technologie potrzebne do zadania 11 | 12 | - Typescript 13 | 14 | ## Cele główne 15 | 16 | * [ ] Wytworzenie klasy **EnvDetector**, której wszystkie metody są statyczne(wytyczne do zadania znajdują się w kodzie poniżej) 17 | * [ ] Klasa działa tylko na podstawie elementu **window** i wyrzuca error, jeśli window nie istnieje 18 | 19 | ## Cele opcjonalne do wykonania 20 | 21 | * [ ] Brak 22 | 23 | ## Przydatne linki 24 | 25 | - Czym jest obiekt **window** - https://stackoverflow.com/questions/10037145/some-help-understanding-window-object / https://www.bitdegree.org/learn/javascript-window 26 | 27 | ## Kawałek kodu dla lepszego początku! 28 | 29 | ```javascript 30 | // ma metody, które zwracają: 31 | // - wymiary okna oraz wymiary strony (pamiętaj, że zmieniają się one w przypadku window.resize) 32 | // - typ urządzenia (mobile/tablet/laptop) 33 | // - rodzaj przeglądarki uzytkownika (ie/edge/firefox/opera/chrome) 34 | // - system operacyjny uzytkownika (ios/android/windows/linux/macos) 35 | // - informację czy dane urządzenie posiada ekran dotykowy 36 | // - informację czy dane urządzenie jest offline czy online 37 | 38 | class EnvDetector { 39 | getBrowserSize(){} 40 | getWindowSize(){} 41 | getDeviceType(){} 42 | getOS(){} 43 | isTouchable(){} 44 | isOnline(){} 45 | } 46 | ``` 47 | -------------------------------------------------------------------------------- /Zbiór fundamentals/js_oop/promiseMethods.md: -------------------------------------------------------------------------------- 1 |

    Opis zadania PromiseMethods

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | - Solidne podstawy JS-a. 7 | - Asynchroniczność 8 | 9 | ## Technologie potrzebne do zadania 10 | 11 | - Typescript 12 | 13 | ## Cele główne 14 | 15 | * [ ] Wypracuj funkcje, które odwzorowują działanie metod promisowych + według mnie promisy powinny posiadać jeszczę dwie dodatkowe metody(Wszystko opisane dokładniej poniżej w kodzie) 16 | * [ ] Wypracowanie funkcji **promise.all(arrayOfPromises)** 17 | * [ ] Wypracowanie funkcji **promise.race(arrayOfPromises)** 18 | * [ ] Wypracowanie funkcji **promise.last(arrayOfPromise)** 19 | * [ ] Wypracowanie funkcji **promise.ignoreErrors(arrayOfPromise)** 20 | 21 | ## Cele opcjonalne do wykonania 22 | 23 | * [ ] Brak 24 | 25 | ## Przydatne linki 26 | 27 | - Wszystko o promisach - https://medium.com/better-programming/understanding-promises-in-javascript-13d99df067c1 28 | 29 | ## Kawałek kodu dla lepszego początku! 30 | 31 | ```javascript 32 | // Promise.last(arrayOfPromise) - zwraca do then tylko ostatnią promisę, która się wykonała asynchronicznie, 33 | // a jeśli wystąpił błąd w co najmniej jednej promisę, zwraca do catch ten błąd po ukończeniu ostatniej promisy 34 | 35 | // Promise.ignoreErrors(arrayOfPromise) - nie ważne co się stanie, 36 | // zwracane są tylko te wyniki promise, które zakończyły się sukcesem, błędy są ignorowane 37 | 38 | 39 | // skopiuj identyczne działanie tych metod w funkcjach 40 | const promiseAll = (arrayOfPromise) => { 41 | return new Promise((resolve, reject)=>{ 42 | // ... 43 | }) 44 | } 45 | 46 | const promiseRace = (arrayOfPromise) => { 47 | return new Promise((resolve, reject)=>{ 48 | // ... 49 | }) 50 | } 51 | 52 | const promiseLast = (arrayOfPromise) => { 53 | return new Promise((resolve, reject)=>{ 54 | // ... 55 | }) 56 | } 57 | 58 | 59 | const promiseIgnoreErrors = (arrayOfPromise) => { 60 | return new Promise((resolve, reject)=>{ 61 | // ... 62 | }) 63 | } 64 | ``` 65 | -------------------------------------------------------------------------------- /Zbiór fundamentals/js_oop/resizeObserver.md: -------------------------------------------------------------------------------- 1 |

    Opis zadania ResizeObserver

    2 | 3 |
    4 | 5 | ## Wymagana wiedza 6 | - Solidne podstawy JS-a. 7 | - Podstawy Object Oriented Programming(OOP) 8 | 9 | ## Technologie potrzebne do zadania 10 | 11 | - Typescript 12 | 13 | ## Cele główne 14 | 15 | * [ ] Stwórz klasę ResizeObserver z metodami takimi jak zawiera pattern **Observera** 16 | * [ ] ResizeObserver ma nasłuchiwać na globalnym **window.resize** oraz **window.onorientationchange** 17 | * [ ] ResizeObserver ma w metodzie observe zamontować callback w nasłuchu na eventach **onresize** i **onorientationchange** 18 | * [ ] W callbacku observe ma być zwracany obiekt z wartościami z window takimi jak - {outerHeight, outerWidth, innerHeight, innerWidth, orientation} 19 | * [ ] ResizeObserver ma odmontować nasłuch na eventy po wywołaniu mentody **unobserve** 20 | 21 | ## Cele opcjonalne do wykonania 22 | 23 | * [ ] Brak 24 | 25 | ## Przydatne linki 26 | 27 | - Czym jest Observer pattern - https://medium.com/better-programming/the-observer-pattern-in-javascript-4f4e0b908d5e 28 | - Czym jest obiekt window - https://stackoverflow.com/questions/10037145/some-help-understanding-window-object / https://www.bitdegree.org/learn/javascript-window 29 | 30 | ## Kawałek kodu dla lepszego początku! 31 | 32 | ```javascript 33 | class ResizeObserver { 34 | constructor() { 35 | // ... 36 | } 37 | observe = (callback) => { 38 | // ... 39 | } 40 | unobserve = () => { 41 | // ... 42 | } 43 | } 44 | ``` 45 | -------------------------------------------------------------------------------- /jsgladiator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Przemocny/zbior-zadan-html-css-js-react/cc6652b761b73d71a23eb0dfdea28bed2c1f9dc9/jsgladiator.png -------------------------------------------------------------------------------- /pitagoras.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Przemocny/zbior-zadan-html-css-js-react/cc6652b761b73d71a23eb0dfdea28bed2c1f9dc9/pitagoras.jpg -------------------------------------------------------------------------------- /tests/lodash.md: -------------------------------------------------------------------------------- 1 |

    Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

    2 |
    https://gladiators-of-javascript.com/#gladiators
    3 | 4 |

    Opis testów do zadania WriteTestsForLodashFns

    5 | 6 |
    7 | 8 | ## Wymagana wiedza 9 | - Solidne podstawy JS-a. 10 | - Podstawowa znajomość testów z użyciem Jest oraz Chai 11 | 12 | ## Technologie potrzebne do zadania 13 | 14 | - Typescript 15 | - Biblioteka lodash 16 | 17 | ## Cele główne 18 | 19 | * [ ] Ściągnij bibliotekę lodash (https://lodash.com/) i wyciągnij z niej poniższe funkcje, przeczytaj uważnie za co one są odpowiednie 20 | * [ ] Korzystając z biblioteki jest.js oraz chai.js stwórz min 2 testy opisujące poprawne działanie i min 2 testy opisujące niepoprawne działanie. 21 | * [ ] .mapKeys 22 | * [ ] .zip 23 | * [ ] .chunk 24 | * [ ] .concat 25 | * [ ] .uniqBy 26 | * [ ] .head 27 | * [ ] .remove 28 | * [ ] .tail 29 | * [ ] .shuffle 30 | 31 | ## Cele opcjonalne do wykonania 32 | 33 | * [ ] Brak 34 | 35 | ## Przydatne linki 36 | 37 | - Dokumentacja chai - https://www.chaijs.com/api/assert/ 38 | - Dokumentacja jest - https://jestjs.io/docs/en/getting-started 39 | - Dokumentacja lodash - https://lodash.com/docs/4.17.15 40 | -------------------------------------------------------------------------------- /tests/request.md: -------------------------------------------------------------------------------- 1 |

    Przykładowe zadanie ze zbiorow Gladiatorów Javascriptu. Kup nasze zbiory już dziś!

    2 |
    https://gladiators-of-javascript.com/#gladiators
    3 | 4 |

    Opis testów do zadania request

    5 | 6 |
    7 | 8 | ## Wymagana wiedza 9 | - Solidne podstawy JS-a. 10 | - Podstawowa znajomość testów z użyciem Jest 11 | - Asynchroniczność 12 | 13 | ## Technologie potrzebne do zadania 14 | 15 | - Typescript 16 | - Jest 17 | - Axios 18 | 19 | ## Cele główne 20 | 21 | * [ ] Korzystając z biblioteki axios i jej typów przetestuj tą instancję, mockując odpowiednie klasy 22 | * [ ] Możesz wysłać zapytanie na adres GET /next?q=error 23 | * [ ] Możesz obsłużyć błąd typu 500 oraz 404 24 | * [ ] Możesz wysłać plik na POST /file 25 | * [ ] Jeśli w config.query wejdzie {"key":"value"} to dawać url z końcówką ?key=value 26 | * [ ] Możesz obsłużyć błąd spowodowany timeoutem 27 | 28 | ## Cele opcjonalne do wykonania 29 | 30 | * [ ] Brak 31 | 32 | ## Przydatne linki 33 | 34 | - Dokumentacja Axios - https://github.com/axios/axios 35 | - Dokumentacja Jest - https://jestjs.io/docs/en/getting-started 36 | - Czym jest Mock - https://stackabuse.com/using-mocks-for-testing-in-javascript-with-jes/ 37 | 38 | ## Kawałek kodu dla lepszego początku! 39 | 40 | ```javascript 41 | import axios from 'axios' 42 | import querystring from 'query-string' 43 | 44 | // możesz modyfikować i ulepszać instancję axiosa, aby wykonać to zadanie 45 | const instance = axios.create({ 46 | baseURL: 'https://base-url.com/api/', 47 | timeout: 1000 * 60, 48 | headers: { 49 | Accept: 'application/json', 50 | 'Content-Type': 'application/json' 51 | } 52 | }) 53 | 54 | // staraj się nie modifykować abstrakcji request 55 | export const request = (_url, _config = {}) => { 56 | let req = { 57 | url: _url, 58 | ..._config 59 | } 60 | if (!req.headers) { 61 | req.headers = {} 62 | } 63 | if (_config.multipart) { 64 | req.headers['content-type'] = 'multipart/form-data' 65 | } 66 | 67 | if (_config.query && Object.keys(_config.query).length !== 0) { 68 | req.url += '?' + querystring.stringify(_config.query, { arrayFormat: 'bracket' }) 69 | } 70 | 71 | return instance 72 | .request(req) 73 | .then((data) => { 74 | return data.data 75 | }) 76 | .catch((err) => { 77 | const { data, status } = err.response 78 | return Promise.reject({ data, status }) 79 | }) 80 | } 81 | ``` 82 | --------------------------------------------------------------------------------