├── .gitignore ├── 01_HTML_intro_24_04_2023 ├── 01_HTML_intro_24_04_2023.code-workspace ├── images │ └── Elephas_maximus.jpg └── index.html ├── 01_Homework_24_04_2023 └── index.html ├── 02_CSS_Coffee_25_04_2023 ├── Coffee.rtf ├── images │ ├── Image20230425120023.png │ └── Image20230425120039.jpg ├── index.html └── style.css ├── 02_CSS_intro_25_04_2023 ├── index.html └── style.css ├── 03_CSS_Cofee_Position_27_04_2023 ├── images │ ├── Image20230425120023.png │ └── Image20230425120039.jpg ├── index.html └── style.css ├── 03_Homework ├── images │ ├── Image20230425120023.png │ └── Image20230425120039.jpg ├── index.html └── style.css ├── 04_CSS_Flex_28_04_2023 ├── index.html └── style.css ├── 04_CSS_Flex_Practice_28_04_2023 ├── images │ ├── Image20230428121301.jpg │ ├── Image20230428121335.jpg │ ├── Image20230428121338.jpg │ ├── Image20230428121342.jpg │ ├── Image20230428121344.jpg │ ├── Image20230428121348.jpg │ ├── Image20230428121351.jpg │ ├── Image20230428121407.jpg │ ├── Image20230428121410.jpg │ ├── Image20230428121413.jpg │ ├── Image20230428121417.jpg │ └── icon.jpg ├── index.html └── style.css ├── 05_CSS_Form_02_05_2023 ├── index.html └── style.css ├── 05_Homework_Form ├── index.html └── style.css ├── 06_CSS_Bootstrap_04_05_2023 ├── Images │ ├── antique.jpg │ ├── facebook.svg │ ├── gifts.jpg │ ├── instagram.svg │ ├── jumbotron.jpg │ ├── kitchen.jpg │ ├── twitter.svg │ └── woodwork.jpg ├── index.html └── style.css ├── 06_HW_Bootstrap ├── index.html └── style.css ├── 07_JS_Dom1_05_05_2023 ├── index.html └── script.js ├── 07_JS_Dom1_Practice_05_05_2023 ├── animation.css ├── animation.html └── animation.js ├── 08_JS_Intro1_08_05_2023 ├── index.html └── script.js ├── 09_HW_10_05_2023 ├── index.html └── script.js ├── 09_JS_Intro2_10_05_2023 ├── index.html └── script.js ├── 10_HW_Arrays_Func ├── index.html └── script.js ├── 10_JS_Arrays_Func_11_05_2023 ├── index.html └── script.js ├── 11_JS_Objects_12_05_2023 ├── index.html ├── script.js └── style.css ├── 12_JS_Event_Counter_15_05_2023 ├── index.html ├── script.js └── style.css ├── 12_JS_TODO_15_05_2023 ├── index.html ├── script.js └── style.css ├── 13_JS_JSONPlaceHolder_17_05_2023 ├── index.html ├── script.js └── style.css ├── 13_JS_Promies_17_05_2023 ├── index.html ├── script.js └── style.css ├── 14_JS_AsyncAwait_22_05_2023 ├── index.html ├── script.js └── style.css ├── 14_JS_JSONPlaceHolder_HomeWork-22_05_2023 ├── index.html ├── script.js ├── script2.js ├── script3.js └── style.css ├── 15_JS_WeatherApp_24_05_2023 ├── index.html ├── script.js └── style.css ├── 16_react_intro ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── index.html │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── components │ ├── ComponentA.js │ ├── Counter.js │ └── MyComponent.js │ ├── index.css │ ├── index.js │ └── reportWebVitals.js ├── 17_homework1_ts ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── component │ │ ├── Todo.css │ │ └── Todo.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── 17_homework_react ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── component │ ├── todo.css │ └── todo.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── 17_homework_ts ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── Components │ │ ├── counter.tsx │ │ └── theoryTypeScript.ts │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── setupTests.ts └── tsconfig.json ├── 17_hw ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ └── todolist │ │ │ ├── TodoList.css │ │ │ └── TodoList.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ └── reportWebVitals.ts └── tsconfig.json ├── 19_class_components ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ ├── Counter.tsx │ │ └── FuncComponents.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ └── reportWebVitals.ts └── tsconfig.json ├── 19_hw ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ ├── ClassComponent.tsx │ │ ├── Json.tsx │ │ └── UserList.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ └── reportWebVitals.ts └── tsconfig.json ├── 20_router ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ ├── About.tsx │ │ ├── Home.tsx │ │ └── Users.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ └── reportWebVitals.ts └── tsconfig.json ├── 20_router_fetch ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ ├── Comments.tsx │ │ ├── Posts.tsx │ │ └── Users.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── reportWebVitals.ts │ └── utils │ │ └── util.ts └── tsconfig.json ├── 21_context ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ ├── SecondChild.tsx │ │ ├── UserOrders.tsx │ │ └── Utils.ts │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ └── reportWebVitals.ts └── tsconfig.json ├── 22_react_redux ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── actions │ │ └── counterAction.ts │ ├── components │ │ └── Counter.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── reducer │ │ └── counterReducer.ts │ ├── reportWebVitals.ts │ └── store │ │ └── store.ts └── tsconfig.json ├── 23_react_redux_fetch ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ ├── Comments.tsx │ │ ├── DataFetcher.tsx │ │ ├── Photos.tsx │ │ ├── Posts.tsx │ │ └── Users.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── reducer │ │ └── reducers.ts │ ├── reportWebVitals.ts │ └── store │ │ └── store.ts └── tsconfig.json ├── 25pizza_react_redux ├── .editorconfig ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── @types │ │ └── assets.d.ts │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── images │ │ │ ├── arrow_icon.svg │ │ │ ├── close_icon.svg │ │ │ ├── icon_cart.svg │ │ │ ├── logo.svg │ │ │ ├── pizza-image.png │ │ │ ├── plus_icon.svg │ │ │ ├── search_icon.svg │ │ │ └── star_icon.svg │ ├── asstets │ │ └── images │ │ │ ├── Image20230628093948.png │ │ │ ├── arrow_icon.svg │ │ │ ├── cards28_06_23.rar │ │ │ ├── close_icon.svg │ │ │ ├── icon_cart.svg │ │ │ ├── logo.svg │ │ │ ├── plus_icon.svg │ │ │ ├── search_icon.svg │ │ │ └── star_icon.svg │ ├── components │ │ ├── Card.tsx │ │ ├── Cards.tsx │ │ ├── CartCard.tsx │ │ ├── CartCards.tsx │ │ ├── Categories.tsx │ │ ├── Header.tsx │ │ ├── HeaderCart.tsx │ │ ├── Homework.tsx │ │ ├── Logo.tsx │ │ ├── NotFoundBlock.tsx │ │ ├── NoteFoundBlock.tsx │ │ ├── Pagination.tsx │ │ ├── ParamsBlock.tsx │ │ ├── Rating.tsx │ │ ├── Search.tsx │ │ ├── SearchForm.tsx │ │ ├── Skeleton.tsx │ │ ├── Slider.tsx │ │ └── Sorting.tsx │ ├── index.css │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── MainLayout.tsx │ ├── logo.svg │ ├── pages │ │ ├── Cart.tsx │ │ ├── Home.tsx │ │ ├── NotFound.tsx │ │ ├── Pizza.tsx │ │ └── Search.tsx │ ├── react-app-env.d.ts │ ├── redux │ │ ├── slices │ │ │ ├── cartSlice.js │ │ │ ├── cartSlice.ts │ │ │ ├── filterSlice.js │ │ │ ├── filterSlice.ts │ │ │ ├── itemsSlice.js │ │ │ ├── itemsSlice.ts │ │ │ ├── searchSlice.js │ │ │ └── searchSlice.ts │ │ ├── store.js │ │ └── store.ts │ ├── reportWebVitals.js │ ├── reportWebVitals.ts │ └── setupTests.js └── tsconfig.json ├── Position_28_04_2023 ├── Image20230428154755.png ├── img.zip ├── img │ ├── asteroid.png │ ├── bg.jpg │ ├── planet-1.png │ ├── planet-2.png │ ├── planet-3.png │ ├── spaceship.png │ ├── superman.png │ └── ufo.png ├── index.html └── style.css ├── README.md └── seminars ├── Arrays_10_05_2023 ├── index.html └── script.js ├── CV_26_04_2023 ├── 2.jpg ├── index.html └── style.css ├── Consultation10 ├── app-store │ ├── index.html │ ├── index.js │ └── style.css └── gender-app │ ├── index.html │ ├── index.js │ └── style.css ├── Dom_Examples_05_05_2023 ├── Images │ ├── Rouen_Cathedral_1.jpg │ ├── Rouen_Cathedral_2.jpg │ ├── Rouen_Cathedral_3.jpg │ ├── Rouen_Cathedral_4.jpg │ ├── Rouen_Cathedral_5.jpg │ └── Rouen_Cathedral_6.jpg ├── index.html └── scrypt.js ├── Form_02_05_2023 ├── index.html └── style.css ├── Form_New_03_05_2023 ├── index.html └── style.css ├── JSONPLaceHolder_AsyncAwait_23_05_2023 ├── index.html ├── script.js └── style.css ├── JSONPlaceHolder_17_05_2023 ├── index.html ├── script.js └── style.css ├── JSONPlaceHolder_Albums_17_05_2023 ├── index.html ├── script.js └── style.css ├── Objects2_16_05_2023 ├── index.html └── script.js ├── Objects_12_05_2023 ├── index.html └── script.js ├── PRIMITIVES_09_05_2023 ├── index.html └── script.js ├── cards28_06_23 ├── .gitignore ├── README.md ├── cards28_06_23.rar ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ ├── Card.tsx │ │ └── GameTable.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── redux │ │ ├── gameSlice.ts │ │ └── store.ts │ └── reportWebVitals.ts └── tsconfig.json ├── hookusestate_map ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ └── reportWebVitals.ts └── tsconfig.json ├── react-14_06_2023 ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── reducers │ │ ├── index.ts │ │ └── todoReducer.ts │ ├── reportWebVitals.ts │ └── store │ │ └── store.ts └── tsconfig.json ├── tic-tac-toe ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── action │ │ └── index.ts │ ├── components │ │ ├── Board.tsx │ │ ├── Game.tsx │ │ └── Square.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ ├── reducers │ │ └── index.ts │ ├── reportWebVitals.ts │ └── store │ │ └── index.ts └── tsconfig.json └── weather_react_redux ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.tsx ├── components │ ├── WeatherForm.tsx │ └── WeatherInfo.tsx ├── index.css ├── index.tsx ├── react-app-env.d.ts ├── reducers │ └── weatherReducer.ts ├── reportWebVitals.ts └── store │ └── index.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | *.log -------------------------------------------------------------------------------- /01_HTML_intro_24_04_2023/01_HTML_intro_24_04_2023.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": "." 5 | }, 6 | { 7 | "path": "../01_homework" 8 | } 9 | ], 10 | "settings": { 11 | "liveServer.settings.multiRootWorkspaceName": "01_HTML_intro_24_04_2023" 12 | } 13 | } -------------------------------------------------------------------------------- /01_HTML_intro_24_04_2023/images/Elephas_maximus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/01_HTML_intro_24_04_2023/images/Elephas_maximus.jpg -------------------------------------------------------------------------------- /02_CSS_Coffee_25_04_2023/images/Image20230425120023.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/02_CSS_Coffee_25_04_2023/images/Image20230425120023.png -------------------------------------------------------------------------------- /02_CSS_Coffee_25_04_2023/images/Image20230425120039.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/02_CSS_Coffee_25_04_2023/images/Image20230425120039.jpg -------------------------------------------------------------------------------- /02_CSS_Coffee_25_04_2023/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: whitesmoke; 3 | } 4 | .header{ 5 | height: 400px; 6 | background-image: url('./images/Image20230425120039.jpg'); 7 | background-position: center; 8 | background-repeat: no-repeat; 9 | } 10 | h1{ 11 | font-size: 102px; 12 | text-align:center; 13 | } -------------------------------------------------------------------------------- /02_CSS_intro_25_04_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Box Model 7 | 8 | 9 |
10 | Outer1 11 |
Inner1
12 |
13 |
14 | Outer2 15 |
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /02_CSS_intro_25_04_2023/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: pink; 3 | font-size: 32px; 4 | color:whitesmoke; 5 | margin:0; 6 | } 7 | 8 | 9 | .outer1{ 10 | height: 200px; 11 | background-color: blue; 12 | margin:0 auto 10px; 13 | width: 90%; 14 | border-top: 3px solid black; 15 | } 16 | 17 | .outer2{ 18 | height: 200px; 19 | background-color: green; 20 | margin-top: 20px; 21 | 22 | } 23 | .inner1{ 24 | height: 100px; 25 | background-color: red; 26 | width: 80px; 27 | margin: 13px auto 0; 28 | 29 | } 30 | -------------------------------------------------------------------------------- /03_CSS_Cofee_Position_27_04_2023/images/Image20230425120023.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/03_CSS_Cofee_Position_27_04_2023/images/Image20230425120023.png -------------------------------------------------------------------------------- /03_CSS_Cofee_Position_27_04_2023/images/Image20230425120039.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/03_CSS_Cofee_Position_27_04_2023/images/Image20230425120039.jpg -------------------------------------------------------------------------------- /03_Homework/images/Image20230425120023.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/03_Homework/images/Image20230425120023.png -------------------------------------------------------------------------------- /03_Homework/images/Image20230425120039.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/03_Homework/images/Image20230425120039.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_28_04_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flexbox theory 9 | 10 | 11 |
12 |
1
13 |
2
14 |
3
15 |
4
16 |
5
17 |
18 | 19 | -------------------------------------------------------------------------------- /04_CSS_Flex_28_04_2023/style.css: -------------------------------------------------------------------------------- 1 | .flex-container{ 2 | width: 900px; 3 | height: 450px; 4 | background-color: pink; 5 | margin: 0 auto; 6 | display: flex; 7 | flex-wrap: wrap; 8 | /* flex-direction: column; */ 9 | justify-content: space-evenly; 10 | align-items: flex-start; 11 | align-content: space-evenly; 12 | } 13 | .item{ 14 | height: 150px; 15 | width: 250px; 16 | background-color: blue; 17 | color:whitesmoke; 18 | font-size: 3em; 19 | text-align: center; 20 | color:whitesmoke; 21 | } 22 | .small{ 23 | height: 100px; 24 | font-size: 2em; 25 | order: 5; 26 | align-self: flex-end; 27 | } 28 | .large{ 29 | height: 200px; 30 | font-size: 5em; 31 | order: 4; 32 | } -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121301.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121301.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121335.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121335.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121338.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121338.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121342.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121342.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121344.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121344.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121348.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121348.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121351.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121351.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121407.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121407.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121410.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121410.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121413.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121413.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/Image20230428121417.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/Image20230428121417.jpg -------------------------------------------------------------------------------- /04_CSS_Flex_Practice_28_04_2023/images/icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/04_CSS_Flex_Practice_28_04_2023/images/icon.jpg -------------------------------------------------------------------------------- /05_CSS_Form_02_05_2023/style.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | text-align: center; 3 | } 4 | 5 | form{ 6 | display:flex; 7 | flex-direction: column; 8 | align-items: center; 9 | width: 50%; 10 | margin: 0 auto; 11 | } 12 | 13 | label{ 14 | margin-bottom: .5em; 15 | font-weight: bold; 16 | } 17 | 18 | input,select,textarea{ 19 | padding: .5em; 20 | border-radius: 5px; 21 | border: 1px solid #ccc; 22 | margin-bottom: 1em; 23 | font-size: .8em; 24 | width: 100%; 25 | } 26 | 27 | #submit { 28 | width: 25%; 29 | color:white; 30 | background-color: #4caf50; 31 | cursor: pointer; 32 | font-size: 1em; 33 | } 34 | #reset{ 35 | width: 25%; 36 | color:white; 37 | background-color: #ed1d1a; 38 | cursor:pointer; 39 | font-size: 1em; 40 | } -------------------------------------------------------------------------------- /06_CSS_Bootstrap_04_05_2023/Images/antique.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/06_CSS_Bootstrap_04_05_2023/Images/antique.jpg -------------------------------------------------------------------------------- /06_CSS_Bootstrap_04_05_2023/Images/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /06_CSS_Bootstrap_04_05_2023/Images/gifts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/06_CSS_Bootstrap_04_05_2023/Images/gifts.jpg -------------------------------------------------------------------------------- /06_CSS_Bootstrap_04_05_2023/Images/jumbotron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/06_CSS_Bootstrap_04_05_2023/Images/jumbotron.jpg -------------------------------------------------------------------------------- /06_CSS_Bootstrap_04_05_2023/Images/kitchen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/06_CSS_Bootstrap_04_05_2023/Images/kitchen.jpg -------------------------------------------------------------------------------- /06_CSS_Bootstrap_04_05_2023/Images/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /06_CSS_Bootstrap_04_05_2023/Images/woodwork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/06_CSS_Bootstrap_04_05_2023/Images/woodwork.jpg -------------------------------------------------------------------------------- /06_CSS_Bootstrap_04_05_2023/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/06_CSS_Bootstrap_04_05_2023/style.css -------------------------------------------------------------------------------- /06_HW_Bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Bootstrap 10 | 11 | 12 |
13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /06_HW_Bootstrap/style.css: -------------------------------------------------------------------------------- 1 | .blue, .red, .green, .orange, .yellow{ 2 | height: 100px; 3 | text-align: center; 4 | font-size: 2em; 5 | } 6 | 7 | .blue{ 8 | background-color: blue; 9 | } 10 | 11 | .red{ 12 | background-color: red; 13 | } 14 | 15 | .green{ 16 | background-color: green; 17 | } 18 | 19 | .orange{ 20 | background-color: orange; 21 | } 22 | 23 | .yellow{ 24 | background-color: yellow; 25 | } -------------------------------------------------------------------------------- /07_JS_Dom1_05_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dom 9 | 10 | 11 |
12 |

First text

13 |

Second text

14 |
15 |

Outer text

16 | 17 | -------------------------------------------------------------------------------- /07_JS_Dom1_Practice_05_05_2023/animation.css: -------------------------------------------------------------------------------- 1 | #container{ 2 | width: 200px; 3 | height: 200px; 4 | background-color: green; 5 | position: relative; 6 | margin: 0 auto; 7 | } 8 | 9 | #box{ 10 | width: 50px; 11 | height: 50px; 12 | background-color:red; 13 | position: absolute; 14 | } 15 | 16 | /* #time{ 17 | margin: 10px auto; 18 | width: fit-content; 19 | } */ -------------------------------------------------------------------------------- /07_JS_Dom1_Practice_05_05_2023/animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Dom practice 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /08_JS_Intro1_08_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | intro JS 9 | 10 | 11 |

Hello!

12 | 13 | 14 | -------------------------------------------------------------------------------- /09_HW_10_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HW 09 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /09_JS_Intro2_10_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Intro JS2 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /10_HW_Arrays_Func/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HW Arrays Func 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /10_JS_Arrays_Func_11_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Array Func 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /11_JS_Objects_12_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Objects 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 24 |
    25 | 26 |
27 |
    28 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /11_JS_Objects_12_05_2023/style.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | background-color: #000; 4 | color: aliceblue; 5 | font-family: arial; 6 | } 7 | .container { 8 | display: flex; 9 | flex-direction: column; 10 | width: 30%; 11 | margin: 0 auto; 12 | } 13 | 14 | label { 15 | text-align: center; 16 | margin-top: 5px; 17 | } 18 | 19 | button { 20 | background-color: greenyellow; 21 | width: fit-content; 22 | margin: 0 auto; 23 | cursor: pointer; 24 | border-radius: 20px; 25 | } 26 | #stats{ 27 | background-color: yellow; 28 | cursor: pointer; 29 | 30 | } 31 | #add:hover{ 32 | transform: scale(1.5); 33 | background-color: wheat; 34 | color: green; 35 | } 36 | #stats:hover{ 37 | transform: scale(1.3); 38 | background-color: wheat; 39 | color: green; 40 | } -------------------------------------------------------------------------------- /12_JS_Event_Counter_15_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Counter 10 | 11 | 12 |
13 |

Counter App

14 |
15 | 16 | 17 | 0 18 | 19 | 20 |
21 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /12_JS_Event_Counter_15_05_2023/style.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | text-align: center; 3 | margin-top: 50px; 4 | } 5 | 6 | .counter{ 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | margin-top: 20px; 11 | } 12 | 13 | button{ 14 | margin: 0 10px; 15 | font-size: 24px; /* 1.5 rem */ 16 | padding:10px 20px; 17 | background-color: #007bff; 18 | color: #fff; 19 | border: none; 20 | cursor: pointer; 21 | transition: all 0.3s ease; 22 | } 23 | 24 | .counter span{ 25 | font-size: 32px; 26 | padding: 0 20px; 27 | } 28 | 29 | button:hover{ 30 | background-color: #0056b3; 31 | font-size: 28px; 32 | } 33 | 34 | #reset{ 35 | margin: 15px 0 ; 36 | } 37 | /* 38 | a:visited{ 39 | color: pink; 40 | } 41 | 42 | a:active{ 43 | color: greenyellow; 44 | } */ -------------------------------------------------------------------------------- /12_JS_TODO_15_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Todo List 10 | 11 | 12 |
13 |

Todo List App

14 |
15 | 16 | 17 |
18 |
    19 |
    20 | 21 | -------------------------------------------------------------------------------- /12_JS_TODO_15_05_2023/script.js: -------------------------------------------------------------------------------- 1 | const task = document.getElementById('taskInput'); 2 | const addTaskButton = document.getElementById('addTask'); 3 | const taskListUl = document.getElementById('taskList'); 4 | 5 | addTaskButton.addEventListener('click', addTask); 6 | addTaskButton.addEventListener('keydown', e => { 7 | console.log(e.key); 8 | if (e.key === 'Enter') { 9 | addTask; 10 | } 11 | }); 12 | taskListUl.addEventListener('click', (e) => { 13 | if (e.target.tagName === 'BUTTON') { 14 | e.target.parentElement.remove(); 15 | } 16 | if (e.target.checked) { 17 | e.target.previousSibling.style.textDecoration = 'line-through black'; 18 | } else { 19 | e.target.previousSibling.style.textDecoration = 'none'; 20 | } 21 | }); 22 | 23 | function addTask() { 24 | const taskName = task.value.trim(); 25 | if (taskName) { 26 | const li = document.createElement('li'); 27 | li.innerHTML = `${taskName}`; 28 | taskListUl.appendChild(li); 29 | } 30 | task.value = ''; 31 | } -------------------------------------------------------------------------------- /13_JS_JSONPlaceHolder_17_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | JSONPlaceHolder 10 | 11 | 12 |

    User List

    13 |
      14 | 15 |
    16 | 17 | 18 | 19 | 20 |
      21 | 22 |
    23 | 24 |
    25 | 26 | -------------------------------------------------------------------------------- /13_JS_JSONPlaceHolder_17_05_2023/style.css: -------------------------------------------------------------------------------- 1 | #userList2{ 2 | cursor: pointer; 3 | } 4 | h1{ 5 | margin: 25px 0; 6 | } 7 | .userDetailsDiv{ 8 | border: 1px solid black; 9 | width: fit-content; 10 | padding: 20px; 11 | position: absolute; 12 | top: 30%; 13 | left: 30%; 14 | } 15 | .userDetailsDiv>h2{ 16 | text-align: center; 17 | } 18 | body{ 19 | position: relative; 20 | } 21 | /* .userList{ 22 | 23 | } */ -------------------------------------------------------------------------------- /13_JS_Promies_17_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Promises 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /13_JS_Promies_17_05_2023/script.js: -------------------------------------------------------------------------------- 1 | function getFiveInSevenSec(){ 2 | setTimeout(()=> { 3 | return 5; 4 | }, 7000); 5 | } 6 | 7 | let result = getFiveInSevenSec(); 8 | console.log(`${result}`); // undefined потому что синхронный код не дождался значения 9 | 10 | let promise = new Promise(function(resolved, reject){ 11 | setTimeout(()=>{ 12 | resolved(5); 13 | }, 7000); 14 | }); 15 | console.log(promise); 16 | 17 | promise.then((value)=>{ 18 | console.log(value); 19 | }) 20 | 21 | let promise2 = new Promise(function(resolved, reject){ 22 | setTimeout(()=>{ 23 | reject(new Error('Ошибка, ничего не пришло назад')); 24 | },7000); 25 | }); 26 | 27 | promise2 28 | .then((data)=>{ 29 | console.log(data); 30 | }) 31 | .catch((err)=>{ 32 | console.log(err); 33 | }) 34 | 35 | let url = fetch('https://cataas.com/api/cats') 36 | .then((value)=> value.json()) 37 | .then((data)=> console.log(data)) -------------------------------------------------------------------------------- /13_JS_Promies_17_05_2023/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/13_JS_Promies_17_05_2023/style.css -------------------------------------------------------------------------------- /14_JS_AsyncAwait_22_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Async Await 10 | 11 | 12 |

    JSON Place Holder async/await example

    13 |

    Users

    14 | 15 |
      16 | 17 |
      18 | 19 |
      20 |

      Add Post

      21 | 22 | 23 | 24 |
      25 | 26 | 27 | 28 |

      Posts

      29 | 30 |
        31 | 32 | -------------------------------------------------------------------------------- /14_JS_AsyncAwait_22_05_2023/style.css: -------------------------------------------------------------------------------- 1 | #usersList{ 2 | cursor: pointer; 3 | background-color: #ccc; 4 | text-align: center; 5 | position: relative; 6 | width: fit-content; 7 | } -------------------------------------------------------------------------------- /14_JS_JSONPlaceHolder_HomeWork-22_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | JSONPlaceHolder 11 | 12 | 13 |

        User List

        14 |
          15 | 16 |
        17 | 18 | 19 | 20 | 21 |
          22 | 23 |
        24 | 25 |
        26 | 27 | -------------------------------------------------------------------------------- /14_JS_JSONPlaceHolder_HomeWork-22_05_2023/script2.js: -------------------------------------------------------------------------------- 1 | import { x } from "./script3.js"; 2 | 3 | console.log(x); 4 | 5 | -------------------------------------------------------------------------------- /14_JS_JSONPlaceHolder_HomeWork-22_05_2023/script3.js: -------------------------------------------------------------------------------- 1 | const x = 5; 2 | export {x}; -------------------------------------------------------------------------------- /14_JS_JSONPlaceHolder_HomeWork-22_05_2023/style.css: -------------------------------------------------------------------------------- 1 | #userList2{ 2 | cursor: pointer; 3 | } 4 | h1{ 5 | margin: 25px 0; 6 | } 7 | .userDetailsDiv{ 8 | border: 1px solid black; 9 | width: fit-content; 10 | padding: 20px; 11 | position: absolute; 12 | top: 30%; 13 | left: 30%; 14 | } 15 | .userDetailsDiv>h2{ 16 | text-align: center; 17 | } 18 | body{ 19 | position: relative; 20 | } 21 | /* .userList{ 22 | 23 | } */ -------------------------------------------------------------------------------- /15_JS_WeatherApp_24_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Weather App 10 | 11 | 12 |
        13 |

        Weather App

        14 |
        15 | 16 | 17 |
        18 |
        19 | 20 |
        21 |
        22 | 23 | -------------------------------------------------------------------------------- /15_JS_WeatherApp_24_05_2023/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/15_JS_WeatherApp_24_05_2023/style.css -------------------------------------------------------------------------------- /16_react_intro/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /16_react_intro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "16_react_intro1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /16_react_intro/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /16_react_intro/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /16_react_intro/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/16_react_intro/src/App.css -------------------------------------------------------------------------------- /16_react_intro/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import MyComponent from './components/MyComponent'; 4 | import ComponentA from './components/ComponentA'; 5 | import Counter from './components/Counter'; 6 | 7 | function App() { 8 | 9 | const name = 'Bob Dilan'; 10 | 11 | return ( 12 | <> 13 |

        Hello, {name}!

        14 |

        This is an axample of writing code in react

        15 | {/* 16 | 1. Комментарий в react выглядит так; 17 | 2. Компоненты можно испольовать бесконечное количество раз; 18 | 3. Удобство синтаксиса(пишем в js шаблон как в HTML); 19 | */} 20 | 21 | 22 | 23 | ); 24 | 25 | } 26 | 27 | export default App; -------------------------------------------------------------------------------- /16_react_intro/src/components/ComponentA.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const ComponentA = ()=> { 4 | return ( 5 |

        6 | This is our second custom component 7 |

        8 | ) 9 | } 10 | 11 | export default ComponentA; -------------------------------------------------------------------------------- /16_react_intro/src/components/MyComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const MyComponent = ()=> { 4 | return ( 5 |

        6 | This is our first custom component 7 |

        8 | ) 9 | } 10 | 11 | export default MyComponent; -------------------------------------------------------------------------------- /16_react_intro/src/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | color: rgb(255, 255, 0); 3 | background-color: rgb(18, 18, 242); 4 | text-align: center; 5 | } 6 | 7 | #btn10{ 8 | font-size: 1.2rem; 9 | cursor:pointer; 10 | border-radius: 25%; 11 | 12 | } 13 | 14 | #btn-10{ 15 | font-size: 1.2rem; 16 | cursor:pointer; 17 | border-radius: 25%; 18 | } 19 | 20 | #zero{ 21 | font-size: 1.5rem; 22 | cursor: pointer; 23 | bottom: none; 24 | } -------------------------------------------------------------------------------- /16_react_intro/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | // 10 | 11 | // 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /16_react_intro/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /17_homework1_ts/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /17_homework1_ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework1_ts/public/favicon.ico -------------------------------------------------------------------------------- /17_homework1_ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework1_ts/public/logo192.png -------------------------------------------------------------------------------- /17_homework1_ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework1_ts/public/logo512.png -------------------------------------------------------------------------------- /17_homework1_ts/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /17_homework1_ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /17_homework1_ts/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework1_ts/src/App.css -------------------------------------------------------------------------------- /17_homework1_ts/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /17_homework1_ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Todo from './component/Todo'; 4 | 5 | function App() { 6 | return ( 7 |
        8 | 9 |
        10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /17_homework1_ts/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework1_ts/src/index.css -------------------------------------------------------------------------------- /17_homework1_ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /17_homework1_ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /17_homework1_ts/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /17_homework1_ts/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /17_homework1_ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /17_homework_react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /17_homework_react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "17_homework_react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /17_homework_react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_react/public/favicon.ico -------------------------------------------------------------------------------- /17_homework_react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_react/public/logo192.png -------------------------------------------------------------------------------- /17_homework_react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_react/public/logo512.png -------------------------------------------------------------------------------- /17_homework_react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /17_homework_react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /17_homework_react/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_react/src/App.css -------------------------------------------------------------------------------- /17_homework_react/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Todo from './component/todo'; 3 | 4 | function App() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /17_homework_react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /17_homework_react/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_react/src/index.css -------------------------------------------------------------------------------- /17_homework_react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /17_homework_react/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /17_homework_react/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /17_homework_ts/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /17_homework_ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_ts/public/favicon.ico -------------------------------------------------------------------------------- /17_homework_ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_ts/public/logo192.png -------------------------------------------------------------------------------- /17_homework_ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_ts/public/logo512.png -------------------------------------------------------------------------------- /17_homework_ts/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /17_homework_ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /17_homework_ts/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_ts/src/App.css -------------------------------------------------------------------------------- /17_homework_ts/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /17_homework_ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import React from "react"; 3 | import Counter from "./Components/counter"; 4 | 5 | const App:React.FC = ()=>{ 6 | // dffvsd 7 | return ( 8 |
        {/* в return может быть вложен только 1 элемент на верхнем уровне */} 9 | 10 |
        11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /17_homework_ts/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_homework_ts/src/index.css -------------------------------------------------------------------------------- /17_homework_ts/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /17_homework_ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /17_homework_ts/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /17_homework_ts/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /17_homework_ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /17_hw/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /17_hw/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "17_hw", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.34", 11 | "@types/react": "^18.2.8", 12 | "@types/react-dom": "^18.2.4", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /17_hw/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_hw/public/favicon.ico -------------------------------------------------------------------------------- /17_hw/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_hw/public/logo192.png -------------------------------------------------------------------------------- /17_hw/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/17_hw/public/logo512.png -------------------------------------------------------------------------------- /17_hw/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /17_hw/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /17_hw/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /17_hw/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import TodoList from './components/todolist/TodoList'; 4 | 5 | function App():JSX.Element { 6 | return ( 7 |
        8 | 9 |
        10 | ); 11 | } 12 | 13 | export default App; -------------------------------------------------------------------------------- /17_hw/src/components/todolist/TodoList.css: -------------------------------------------------------------------------------- 1 | #taskList { 2 | width: fit-content; 3 | margin: 20px auto 0; 4 | } 5 | 6 | .task { 7 | border: 1px solid black; 8 | padding: 30px 30px 30px 20px; 9 | } 10 | 11 | .task > li { 12 | list-style-type: none; 13 | } 14 | 15 | .task > li > span { 16 | padding: 0 10px 0 0; 17 | } 18 | 19 | .task > li > button { 20 | margin: 0 0 0 10px; 21 | } -------------------------------------------------------------------------------- /17_hw/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } -------------------------------------------------------------------------------- /17_hw/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /17_hw/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /17_hw/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /17_hw/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /19_class_components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /19_class_components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/19_class_components/public/favicon.ico -------------------------------------------------------------------------------- /19_class_components/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/19_class_components/public/logo192.png -------------------------------------------------------------------------------- /19_class_components/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/19_class_components/public/logo512.png -------------------------------------------------------------------------------- /19_class_components/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /19_class_components/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /19_class_components/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /19_class_components/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Counter from './components/Counter'; 4 | import Counter1 from './components/FuncComponents'; 5 | 6 | function App() { 7 | return ( 8 |
        9 | {/* От родительского компонента App передаём набор информации через props 10 | дочерним компонентам. Передача props возможна только от родителя к ребёнку(!). 11 | Props записываются как "атрибут" "тэга" компонента */} 12 | 13 | 14 | 15 | 16 |
        17 | ); 18 | } 19 | 20 | export default App; -------------------------------------------------------------------------------- /19_class_components/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /19_class_components/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); -------------------------------------------------------------------------------- /19_class_components/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /19_class_components/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /19_class_components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /19_hw/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /19_hw/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hw19", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.34", 11 | "@types/react": "^18.2.8", 12 | "@types/react-dom": "^18.2.4", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /19_hw/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/19_hw/public/favicon.ico -------------------------------------------------------------------------------- /19_hw/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/19_hw/public/logo192.png -------------------------------------------------------------------------------- /19_hw/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/19_hw/public/logo512.png -------------------------------------------------------------------------------- /19_hw/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /19_hw/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /19_hw/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/19_hw/src/App.css -------------------------------------------------------------------------------- /19_hw/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Counter from './components/Json'; 4 | import List from './components/ClassComponent'; 5 | 6 | function App() { 7 | return ( 8 |
        9 | 10 | 11 |
        12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /19_hw/src/components/ClassComponent.tsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | const url = "https://jsonplaceholder.typicode.com/users"; 4 | 5 | interface User { 6 | id: number; 7 | name: string; 8 | } 9 | 10 | interface State { 11 | users: User[]; 12 | } 13 | 14 | class List extends Component<{}, State> { 15 | constructor(props: {}) { 16 | super(props); 17 | this.state = { 18 | users: [], 19 | }; 20 | } 21 | 22 | componentDidMount() { 23 | console.log("Component create from class"); 24 | 25 | const fetchUsers = async () => { 26 | try { 27 | const response = await fetch(url); 28 | const data = await response.json(); 29 | this.setState({ users: data }); 30 | } catch (error) { 31 | console.log(error); 32 | } 33 | }; 34 | 35 | fetchUsers(); 36 | } 37 | 38 | render() { 39 | const { users } = this.state; 40 | 41 | return ( 42 | <> 43 | 44 | ); 45 | } 46 | } 47 | 48 | export default List; -------------------------------------------------------------------------------- /19_hw/src/components/Json.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | const url = "https://jsonplaceholder.typicode.com/users"; 3 | 4 | const Counter: React.FC = () => { 5 | const [users, setUsers] = useState(); 6 | 7 | useEffect(() => { 8 | console.log("Create component!"); 9 | 10 | const users1 = async () => { 11 | try { 12 | const response = await fetch(url); 13 | const data = await response.json(); 14 | setUsers(data); 15 | } catch (error) { 16 | console.log(error); 17 | } 18 | }; 19 | 20 | }, ); 21 | 22 | return ( 23 | <> 24 | ); 25 | }; 26 | 27 | export default Counter; -------------------------------------------------------------------------------- /19_hw/src/components/UserList.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | interface IUsers { 4 | id:number, 5 | name:string, 6 | username: string, 7 | email:string, 8 | address:{}, 9 | phone:string, 10 | website:string, 11 | company:{} 12 | } 13 | 14 | const userList:React.FC = () =>{ 15 | const[users,setUsers] = useState([]); 16 | useEffect(()=>{ 17 | console.log("Hello from useEffect i`m created hear where component created in page"); 18 | 19 | },[]) 20 | return ( 21 |
        22 | ); 23 | } 24 | 25 | export default userList; -------------------------------------------------------------------------------- /19_hw/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/19_hw/src/index.css -------------------------------------------------------------------------------- /19_hw/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /19_hw/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /19_hw/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /19_hw/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /20_router/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /20_router/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/20_router/public/favicon.ico -------------------------------------------------------------------------------- /20_router/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/20_router/public/logo192.png -------------------------------------------------------------------------------- /20_router/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/20_router/public/logo512.png -------------------------------------------------------------------------------- /20_router/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /20_router/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /20_router/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /20_router/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Home from "./components/Home"; 4 | import About from "./components/About"; 5 | import Users from "./components/Users"; 6 | import { Routes, Route, Link } from "react-router-dom"; 7 | 8 | function App() { 9 | return ( 10 | // в "тэге" Routes 11 | 12 | } /> 13 | } /> 14 | } /> 15 | 16 | ); 17 | } 18 | 19 | export default App; -------------------------------------------------------------------------------- /20_router/src/components/About.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Link} from 'react-router-dom'; 3 | 4 | const About = () => { 5 | return ( 6 | <> 7 |

        Contacts

        8 | 9 | 10 | 11 | 12 | 13 | )} 14 | export default About; -------------------------------------------------------------------------------- /20_router/src/components/Home.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom' 3 | 4 | const Home = () => { 5 | return ( 6 |
        7 |

        Home

        8 | 9 | 10 | 11 | 12 | 13 |
        14 | ); 15 | } 16 | 17 | export default Home; -------------------------------------------------------------------------------- /20_router/src/components/Users.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Link} from 'react-router-dom'; 3 | 4 | const Users = () => { 5 | return ( 6 | <> 7 |

        Users

        8 | 9 | 10 | 11 | 12 | 13 | )} 14 | 15 | export default Users; -------------------------------------------------------------------------------- /20_router/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /20_router/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import { BrowserRouter } from "react-router-dom"; 7 | 8 | const root = ReactDOM.createRoot( 9 | document.getElementById("root") as HTMLElement 10 | ); 11 | root.render( 12 | 13 | {/* BrowserRouter - обязательная оболочка для всего нашего приложения 14 | для маршрутизации приложения */} 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | // If you want to start measuring performance in your app, pass a function 22 | // to log results (for example: reportWebVitals(console.log)) 23 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 24 | reportWebVitals(); -------------------------------------------------------------------------------- /20_router/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /20_router/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /20_router/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /20_router_fetch/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /20_router_fetch/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/20_router_fetch/public/favicon.ico -------------------------------------------------------------------------------- /20_router_fetch/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/20_router_fetch/public/logo192.png -------------------------------------------------------------------------------- /20_router_fetch/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/20_router_fetch/public/logo512.png -------------------------------------------------------------------------------- /20_router_fetch/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /20_router_fetch/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /20_router_fetch/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /20_router_fetch/src/components/Comments.tsx: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import { IComment,AppContext } from "../utils/util"; 3 | 4 | // interface IComment { 5 | // id: number; 6 | // body: string; 7 | // } 8 | 9 | const Comments: React.FC<{ comments: IComment[] }> = ({ comments }) => { 10 | 11 | const dataFromAppContext = useContext(AppContext); 12 | const commentsFromAppContext = dataFromAppContext?.comments|| []; 13 | 14 | return ( 15 | <> 16 |

        Comments

        17 | {commentsFromAppContext.map(comment => ( 18 |
        19 |

        Body: {comment.body}

        20 |
        21 | ))} 22 | 23 | ); 24 | }; 25 | 26 | export default Comments; -------------------------------------------------------------------------------- /20_router_fetch/src/components/Posts.tsx: -------------------------------------------------------------------------------- 1 | import React,{useContext} from "react"; 2 | import {AppContext, IPost } from "../utils/util"; 3 | 4 | // interface IPost { 5 | // id: number; 6 | // title: string; 7 | // body: string; 8 | // } 9 | 10 | const Posts: React.FC<{ posts: IPost[] }> = ({ posts }) => { 11 | 12 | const dataFromAppContext = useContext(AppContext); 13 | const postsFromAppContext = dataFromAppContext?.posts|| []; 14 | 15 | return ( 16 | <> 17 |

        Posts

        18 | {postsFromAppContext.map(post => ( 19 |
        20 |

        Title: {post.title}

        21 |

        Body: {post.body}

        22 |
        23 | ))} 24 | 25 | ); 26 | }; 27 | 28 | export default Posts; -------------------------------------------------------------------------------- /20_router_fetch/src/components/Users.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { AppContext, IUser } from '../utils/util'; 3 | 4 | // interface IUser { 5 | // id: number; 6 | // name: string; 7 | // email: string; 8 | // } 9 | 10 | // const style = { 11 | // backgroundColor: 'pink' 12 | // } 13 | 14 | const Users: React.FC<{ users: IUser[] }> = ({ users }) => { 15 | console.log(users); 16 | //Помещаем в usersFromContext информацию переданную от роидтельского компонента App 17 | // const usersFromContext:IUser[] = useContext(Context); 18 | const dataFromAppContext = useContext(AppContext); 19 | const usersFromAppContext = dataFromAppContext?.users|| []; 20 | 21 | return ( 22 | <> 23 |

        Users

        24 | {usersFromAppContext.map(user => ( 25 | // style= {style} 26 |
        27 |

        Name: {user.name}

        28 |

        Email: {user.email}

        29 |
        30 | ))} 31 | 32 | ); 33 | }; 34 | 35 | export default Users; -------------------------------------------------------------------------------- /20_router_fetch/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /20_router_fetch/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { BrowserRouter } from 'react-router-dom'; 7 | 8 | const root = ReactDOM.createRoot( 9 | document.getElementById('root') as HTMLElement 10 | ); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | 20 | // If you want to start measuring performance in your app, pass a function 21 | // to log results (for example: reportWebVitals(console.log)) 22 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 23 | reportWebVitals(); 24 | -------------------------------------------------------------------------------- /20_router_fetch/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /20_router_fetch/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /20_router_fetch/src/utils/util.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export interface IUser { 4 | id: number; 5 | name: string; 6 | email: string; 7 | } 8 | 9 | export interface IComment { 10 | id: number; 11 | body: string; 12 | } 13 | 14 | export interface IPost { 15 | id: number; 16 | title: string; 17 | body: string; 18 | } 19 | 20 | //interface IAppData описывает весь набор данных, который можно будет передавать из App в дочерние элемент 21 | export interface IAppData { 22 | users: IUser[], 23 | comments: IComment[], 24 | posts: IPost[] 25 | } 26 | //Создаём контекст и экспортируем его 27 | // export const Context = createContext([]); 28 | export const AppContext = createContext(null); -------------------------------------------------------------------------------- /20_router_fetch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /21_context/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /21_context/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "21_context", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.2", 10 | "@types/node": "^16.18.34", 11 | "@types/react": "^18.2.9", 12 | "@types/react-dom": "^18.2.4", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.9.5", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /21_context/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/21_context/public/favicon.ico -------------------------------------------------------------------------------- /21_context/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/21_context/public/logo192.png -------------------------------------------------------------------------------- /21_context/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/21_context/public/logo512.png -------------------------------------------------------------------------------- /21_context/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /21_context/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /21_context/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /21_context/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import UserOrders from "./components/UserOrders"; 4 | import { IUser, UserContext } from "./components/Utils"; 5 | 6 | 7 | function App() { 8 | // Создаем массив и типизируем его, для последующей передачи дочерним элементам 9 | const users: IUser[] = [ 10 | { id: 1, name: "John Doe" }, 11 | { id: 2, name: "Jane Smith" }, 12 | { id: 3, name: "Mike Johnson" } 13 | ]; 14 | 15 | return ( 16 | 17 | {/* Provider в атрибуте value передаёт информацию users всем дочерним компонентам */} 18 | {/* Любой вложенный компонент имеет доступ до передаваемой информации */} 19 |

        User App

        20 |
        21 | 22 |
        23 |         24 | ); 25 | } 26 | 27 | export default App; -------------------------------------------------------------------------------- /21_context/src/components/SecondChild.tsx: -------------------------------------------------------------------------------- 1 | import React,{useContext} from 'react'; 2 | import { UserContext } from './Utils'; 3 | 4 | const SecondChild = () => { 5 | const users = useContext(UserContext); 6 | console.log(users); 7 | 8 | return ( 9 | <> 10 | ) 11 | } 12 | 13 | export default SecondChild; -------------------------------------------------------------------------------- /21_context/src/components/UserOrders.tsx: -------------------------------------------------------------------------------- 1 | import React, {useContext} from 'react'; 2 | import { UserContext } from '../components/Utils'; 3 | import SecondChild from './SecondChild'; 4 | 5 | 6 | const UserOrders: React.FC = () => { 7 | // Пользуемся контекстом, в котором расположена информация от родительского компонента 8 | const users = useContext(UserContext); 9 | return ( 10 | <> 11 |

        UserOrders

        12 | {users.map((user) => ( 13 |
        14 |

        User: {user.name}

        15 |
        16 | ))} 17 | 18 | 19 | ); 20 | }; 21 | 22 | export default UserOrders; -------------------------------------------------------------------------------- /21_context/src/components/Utils.ts: -------------------------------------------------------------------------------- 1 | import React, { createContext } from "react"; 2 | 3 | export interface IUser{ 4 | id:number, 5 | name: string; 6 | }; 7 | 8 | export const UserContext = createContext([]); -------------------------------------------------------------------------------- /21_context/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /21_context/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /21_context/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /21_context/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /21_context/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /22_react_redux/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /22_react_redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/22_react_redux/public/favicon.ico -------------------------------------------------------------------------------- /22_react_redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/22_react_redux/public/logo192.png -------------------------------------------------------------------------------- /22_react_redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/22_react_redux/public/logo512.png -------------------------------------------------------------------------------- /22_react_redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /22_react_redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /22_react_redux/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /22_react_redux/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Counter from './components/Counter'; 4 | 5 | function App() { 6 | return ( 7 | 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /22_react_redux/src/actions/counterAction.ts: -------------------------------------------------------------------------------- 1 | import { Action } from "redux"; 2 | 3 | export interface IncrementAction extends Action{ 4 | type: 'INCREMENT'; 5 | } 6 | 7 | export interface DecrementAction extends Action{ 8 | type: 'DECREMENT'; 9 | } 10 | 11 | export type CounterAction = IncrementAction | DecrementAction; 12 | 13 | export const increment = ():IncrementAction => { 14 | return { 15 | type: 'INCREMENT' 16 | } 17 | } 18 | 19 | export const decrement = ():DecrementAction => { 20 | return { 21 | type: 'DECREMENT' 22 | } 23 | } -------------------------------------------------------------------------------- /22_react_redux/src/components/Counter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useSelector } from 'react-redux'; 3 | import { useDispatch } from 'react-redux'; 4 | import { RootState, decrement, increment } from '../store/store'; 5 | 6 | const Counter = () => { 7 | 8 | //dispath - єто метод внутри которого выполняется действия связанные с изменениям 9 | //глобального состояния. Схожий принцип с хуком useState где state тоже можно изменять только с помощью специального метода 10 | const dispatch = useDispatch(); 11 | 12 | //c помощью useSelector получаем глоабльное состояние 13 | const counter = useSelector((state:RootState)=> state.counter.value) 14 | 15 | const handIncrement = () =>{ 16 | dispatch(increment()); 17 | } 18 | 19 | const handDecrement = () =>{ 20 | dispatch(decrement()); 21 | } 22 | 23 | 24 | return ( 25 |
        26 |

        Counter: {counter}

        27 | 28 | 29 |
        30 | ) 31 | } 32 | 33 | export default Counter; 34 | -------------------------------------------------------------------------------- /22_react_redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /22_react_redux/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { Provider } from 'react-redux'; 7 | import { store } from './store/store'; 8 | 9 | // const store = createStore(); => устаревший способ создания store 10 | const root = ReactDOM.createRoot( 11 | document.getElementById('root') as HTMLElement 12 | ); 13 | 14 | root.render( 15 | 16 | 17 | 18 | ); 19 | 20 | // If you want to start measuring performance in your app, pass a function 21 | // to log results (for example: reportWebVitals(console.log)) 22 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 23 | reportWebVitals(); -------------------------------------------------------------------------------- /22_react_redux/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /22_react_redux/src/reducer/counterReducer.ts: -------------------------------------------------------------------------------- 1 | import { CounterAction } from "../actions/counterAction"; 2 | 3 | interface CounterState { 4 | count: number; 5 | } 6 | 7 | const initialState: CounterState = { 8 | count: 0, 9 | }; 10 | 11 | // reducer в качестве параметров принимает state и action и возвращает всегда (!) обновленный state 12 | const counterReducer = ( 13 | state = initialState, 14 | action: CounterAction 15 | ): CounterState => { 16 | switch (action.type) { 17 | case "INCREMENT": 18 | return { 19 | ...state, 20 | count: state.count + 1, 21 | }; 22 | case "DECREMENT": 23 | return { 24 | ...state, 25 | count: state.count - 1, 26 | }; 27 | default: 28 | return state; 29 | } 30 | }; 31 | 32 | export default counterReducer; -------------------------------------------------------------------------------- /22_react_redux/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /22_react_redux/src/store/store.ts: -------------------------------------------------------------------------------- 1 | import {configureStore, createSlice} from '@reduxjs/toolkit' 2 | 3 | const counterSlice = createSlice({ 4 | name: 'counter', 5 | initialState: {value: 0}, 6 | reducers:{ 7 | increment: (state) => { 8 | state.value +=1; 9 | }, 10 | decrement: (state) => { 11 | state.value -=1; 12 | } 13 | } 14 | }) 15 | 16 | 17 | export const { increment, decrement} = counterSlice.actions; 18 | export const counterReducer = counterSlice.reducer; 19 | 20 | export const store = configureStore({ 21 | reducer:{ 22 | counter: counterReducer 23 | } 24 | }) 25 | 26 | export type RootState = ReturnType; -------------------------------------------------------------------------------- /22_react_redux/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /23_react_redux_fetch/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /23_react_redux_fetch/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/23_react_redux_fetch/public/favicon.ico -------------------------------------------------------------------------------- /23_react_redux_fetch/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/23_react_redux_fetch/public/logo192.png -------------------------------------------------------------------------------- /23_react_redux_fetch/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/23_react_redux_fetch/public/logo512.png -------------------------------------------------------------------------------- /23_react_redux_fetch/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /23_react_redux_fetch/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /23_react_redux_fetch/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /23_react_redux_fetch/src/components/DataFetcher.tsx: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import React, { useEffect } from "react"; 3 | import { useDispatch } from "react-redux"; 4 | import { store } from "../store/store"; 5 | 6 | const DataFetcher: React.FC<{endpoint: string, action: Function}> = ({ 7 | endpoint, 8 | action 9 | }) => { 10 | // Любое изменение глобального state производим внутри метода dispatch() 11 | const dispatch = useDispatch(); 12 | 13 | // Хук, позволяющий работать с жизненным циклом компонента 14 | useEffect(() => { 15 | const fetchData = async () => { 16 | try { 17 | // CRUD => create / read / update / delete 18 | const response = await axios.get(endpoint); 19 | dispatch(action(response.data)); 20 | console.log(store.getState()); 21 | } catch (error) { 22 | console.log(error); 23 | } 24 | }; 25 | 26 | fetchData(); 27 | }, [dispatch, endpoint, action]) 28 | 29 | return null; 30 | }; 31 | 32 | export default DataFetcher; -------------------------------------------------------------------------------- /23_react_redux_fetch/src/components/Users.tsx: -------------------------------------------------------------------------------- 1 | // import React from 'react' 2 | // import { useSelector } from 'react-redux'; 3 | // import { DataState } from '../reducer/reducers'; 4 | 5 | // const Users:React.FC = () => { 6 | // const users = useSelector((state: {data: DataState}) => state.data.users); 7 | 8 | // return ( 9 | //
        10 | //

        Users:

        11 | //
          12 | // {users.map((user) => ( 13 | //
        • {user.name}
          • 14 | // ))} 15 | //
        16 | //
        17 | // ) 18 | // } 19 | 20 | // export default Users; 21 | 22 | import React from 'react' 23 | import { useSelector } from 'react-redux'; 24 | import { DataState } from '../reducer/reducers'; 25 | 26 | const Users = () => { 27 | const users = useSelector((state:{data:DataState})=>state.data.users); 28 | return ( 29 | <> 30 |

        Users:

        31 |
          32 | {users.map((user)=>( 33 |
        • {user.name}
          • 34 | ))} 35 |
        36 | 37 | ) 38 | } 39 | 40 | export default Users; -------------------------------------------------------------------------------- /23_react_redux_fetch/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /23_react_redux_fetch/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { Provider } from 'react-redux'; 7 | import { store } from './store/store'; 8 | 9 | const root = ReactDOM.createRoot( 10 | document.getElementById('root') as HTMLElement 11 | ); 12 | root.render( 13 | 14 | 15 | 16 | ); 17 | 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /23_react_redux_fetch/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /23_react_redux_fetch/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /23_react_redux_fetch/src/store/store.ts: -------------------------------------------------------------------------------- 1 | import { configureStore, combineReducers } from "@reduxjs/toolkit"; 2 | import dataSlice from '../reducer/reducers'; 3 | 4 | // 2.2 В rootReducer комбинируем все имеющиеся у нас reducer 5 | const rootReducer = combineReducers({ 6 | data: dataSlice, 7 | }) 8 | 9 | // 2.1 Создаём store в котором передаём информацию о reducer, 10 | // который комбинирует в себе остальные redusers 11 | export const store = configureStore({ 12 | reducer: rootReducer 13 | }) 14 | 15 | // export const store1 = configureStore({ 16 | // reducer: {data: dataSlice} 17 | // }) 18 | 19 | export type RootState = ReturnType; 20 | export default rootReducer; -------------------------------------------------------------------------------- /23_react_redux_fetch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /25pizza_react_redux/.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = crlf 10 | charset = utf-8 11 | trim_trailing_whitespace = false 12 | insert_final_newline = false -------------------------------------------------------------------------------- /25pizza_react_redux/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /25pizza_react_redux/README.md: -------------------------------------------------------------------------------- 1 | # Проект интернет магазин пицц на React.js 2 | 3 | [Ссылка на проект](https://sainozhenko.github.io/interviewProject) 4 | 5 | ## Описание: 6 | 7 | Pet-проект на React.js интернет магазин пицц 8 | 9 | ## Стек: 10 | 11 | ![HTML5](https://img.shields.io/badge/HTML5-333?style=for-the-badge&logo=html5&logoColor=E34F26) 12 | ![SCSS](https://img.shields.io/badge/SASS-333?style=for-the-badge&logo=sass&logoColor=CC6699) 13 | ![React](https://img.shields.io/badge/React-333?style=for-the-badge&logo=react&logoColor=60dff4) 14 | ![Redux Toolkit](https://img.shields.io/badge/Redux Toolkit-333?style=for-the-badge&logo=redux&logoColor=7549bc) 15 | ![Bem](https://img.shields.io/badge/-Бэм-333?style=for-the-badge&logo=bem&logoColor=fff) 16 | 17 | ## Планы: 18 | 19 | - [X] ~~сделать добавления товаров корзину~~ 20 | - [ ] добавить темную тему, 21 | - [ ] улучшить код. 22 | -------------------------------------------------------------------------------- /25pizza_react_redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/25pizza_react_redux/public/favicon.ico -------------------------------------------------------------------------------- /25pizza_react_redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/25pizza_react_redux/public/logo192.png -------------------------------------------------------------------------------- /25pizza_react_redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/25pizza_react_redux/public/logo512.png -------------------------------------------------------------------------------- /25pizza_react_redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /25pizza_react_redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/@types/assets.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.svg' { 2 | import React from "react"; 3 | export const ReactComponent: React.FC>; 4 | const src: string; 5 | export default src; 6 | } -------------------------------------------------------------------------------- /25pizza_react_redux/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Routes } from "react-router-dom"; 3 | import Cart from "./pages/Cart"; 4 | import Home from "./pages/Home"; 5 | import NotFound from "./pages/NotFound"; 6 | import Search from "./pages/Search"; 7 | import Pizza from "./pages/Pizza"; 8 | import MainLayout from "./layout/MainLayout"; 9 | 10 | function App() { 11 | return ( 12 |
        13 | 14 | }> 15 | } /> 16 | } /> 17 | } /> 18 | } /> 19 | } /> 20 | 21 | 22 |
        23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/assets/images/arrow_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/assets/images/close_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/assets/images/icon_cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/assets/images/pizza-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/25pizza_react_redux/src/assets/images/pizza-image.png -------------------------------------------------------------------------------- /25pizza_react_redux/src/assets/images/plus_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/assets/images/search_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/assets/images/star_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/asstets/images/Image20230628093948.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/25pizza_react_redux/src/asstets/images/Image20230628093948.png -------------------------------------------------------------------------------- /25pizza_react_redux/src/asstets/images/arrow_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/asstets/images/cards28_06_23.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/25pizza_react_redux/src/asstets/images/cards28_06_23.rar -------------------------------------------------------------------------------- /25pizza_react_redux/src/asstets/images/close_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/asstets/images/icon_cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/asstets/images/plus_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/asstets/images/search_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/asstets/images/star_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/components/Categories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import { onClickCategory, selectFilter } from "../redux/slices/filterSlice"; 4 | 5 | const Categories: React.FC = () => { 6 | const { categoryId, categoryNames } = useSelector(selectFilter); 7 | const dispatch = useDispatch(); 8 | 9 | return ( 10 |
          11 | {categoryNames.map((name: string, index: number) => ( 12 |
        • 13 | 22 |
          • 23 | ))} 24 |
        25 | ); 26 | }; 27 | 28 | export default Categories; 29 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Search from "./SearchForm"; 3 | import Logo from "./Logo"; 4 | import HeaderCart from "./HeaderCart"; 5 | 6 | const Header: React.FC = () => { 7 | return ( 8 |
        9 |
        10 | 11 | 12 |
        13 | 14 |
        15 | ); 16 | }; 17 | 18 | export default Header; 19 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/components/Homework.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react' 2 | 3 | const Homework = () => { 4 | //inputRef ссылка, на какой элемент ее повесить до такого элемента и будем иметь доступ 5 | const inputRef = useRef(null); 6 | 7 | 8 | useEffect(()=>{ 9 | const savedValue = localStorage.getItem('myValue'); 10 | if(savedValue&& inputRef.current){ 11 | inputRef.current.value = savedValue; 12 | } 13 | },[]); 14 | const handleSave = () => { 15 | const value = inputRef.current?.value? inputRef.current?.value : ''; 16 | localStorage.setItem('myValue', value); 17 | } 18 | 19 | return ( 20 |
        21 | 22 | 23 |
        24 | ) 25 | } 26 | 27 | export default Homework; 28 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/components/Logo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import logo from "../assets/images/logo.svg"; 4 | 5 | type LogoProps = { 6 | className: string; 7 | }; 8 | 9 | const Logo: React.FC = ({ className }) => { 10 | return ( 11 | 12 | Логотип Реакт Пицца 13 |
        14 |

        Online Pizza

        15 |

        самая вкусная пицца только у нас

        16 |
        17 | 18 | ); 19 | }; 20 | 21 | export default Logo; 22 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/components/NotFoundBlock.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | const NotFoundBlock: React.FC = () => { 5 | return ( 6 |
        7 |

        404 страница не найдена

        8 |

        9 | К сожалению такой страницы не существует 10 | ☹️ 11 |

        12 | 13 | На главную 14 | 15 |
        16 | ); 17 | }; 18 | 19 | export default NotFoundBlock; 20 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/components/NoteFoundBlock.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const NoteFoundBlock:React.FC = () => { 4 | return ( 5 |
        6 |

        Ошибка 404: страница не найдена

        7 |

        8 | К сожалению, такой страницы не существует! 9 | 😟 10 |

        11 | На галвную страницу 12 |
        13 | ); 14 | }; 15 | 16 | export default NoteFoundBlock; 17 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/components/Rating.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ReactComponent as StarIcon } from "../assets/images/star_icon.svg"; 3 | import { selectItemsData } from "../redux/slices/itemsSlice"; 4 | import { useSelector } from "react-redux"; 5 | 6 | type RatingProps = { 7 | className: string; 8 | }; 9 | 10 | const Rating: React.FC = ({ className }) => { 11 | const { item } = useSelector(selectItemsData); 12 | return ( 13 |

        14 | 15 | {[...new Array(5)].map((_, index) => ( 16 | 22 | ))} 23 | 24 | {item.reviews} отзывов 25 |

        26 | ); 27 | }; 28 | 29 | export default Rating; 30 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/components/Skeleton.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ContentLoader from "react-content-loader"; 3 | 4 | const Skeleton: React.FC = () => { 5 | return ( 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | export default Skeleton; 24 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.scss"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import { HashRouter } from "react-router-dom"; 7 | import { Provider } from "react-redux"; 8 | import store from "./redux/store"; 9 | 10 | const root = ReactDOM.createRoot(document.getElementById("root") as Element); 11 | root.render( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | // If you want to start measuring performance in your app, pass a function 22 | // to log results (for example: reportWebVitals(console.log)) 23 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 24 | reportWebVitals(); 25 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/layout/MainLayout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Outlet } from "react-router-dom"; 3 | import Header from "../components/Header"; 4 | 5 | const MainLayout: React.FC = () => { 6 | const [isVisible, setIsVisible] = React.useState(false); 7 | function visibleToTop() { 8 | if (window.scrollY >= 40) { 9 | setIsVisible(true); 10 | } else { 11 | setIsVisible(false); 12 | } 13 | } 14 | React.useEffect(() => { 15 | document.addEventListener("scroll", visibleToTop); 16 | return () => { 17 | document.removeEventListener("scroll", visibleToTop); 18 | }; 19 | }, []); 20 | return ( 21 |
        22 |
        23 |
        24 | 25 |
        26 | 32 |
        33 | ); 34 | }; 35 | 36 | export default MainLayout; 37 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/pages/NotFound.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import NotFoundBlock from "../components/NotFoundBlock"; 3 | 4 | const NotFound: React.FC = () => { 5 | return ( 6 | <> 7 | 8 | 9 | ); 10 | } 11 | 12 | export default NotFound; 13 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/redux/slices/searchSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | searchValue: "", 5 | }; 6 | 7 | export const searchSlice = createSlice({ 8 | name: "search", 9 | initialState, 10 | reducers: { 11 | onChangeSearch(state, actions) { 12 | state.searchValue = actions.payload; 13 | }, 14 | }, 15 | }); 16 | 17 | export const selectSearch = (state) => state.search; 18 | 19 | export const { onChangeSearch } = searchSlice.actions; 20 | 21 | export default searchSlice.reducer; 22 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/redux/slices/searchSlice.ts: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | const initialState = { 4 | searchValue : "" 5 | } 6 | 7 | export const searchSlice = createSlice ({ 8 | name: 'search', 9 | initialState, 10 | reducers: { 11 | onChangeSearch(state,action) { 12 | state.searchValue = action.payload; 13 | } 14 | } 15 | }); 16 | 17 | export const selectSearch = (state:any ) => state.search; 18 | 19 | export const {onChangeSearch} = searchSlice.actions; 20 | 21 | export default searchSlice.reducer; -------------------------------------------------------------------------------- /25pizza_react_redux/src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import filterReducer from "./slices/filterSlice"; 3 | import searchReducer from "./slices/searchSlice"; 4 | import itemsReducer from "./slices/itemsSlice"; 5 | import cartReducer from "./slices/cartSlice"; 6 | 7 | export default configureStore({ 8 | reducer: { 9 | filter: filterReducer, 10 | search: searchReducer, 11 | items: itemsReducer, 12 | cart: cartReducer, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import cartReducer from './slices/cartSlice'; 3 | import filterReducer from './slices/filterSlice'; 4 | import searchReducer from './slices/searchSlice'; 5 | import itemsReducer from './slices/itemsSlice'; 6 | 7 | export default configureStore({ 8 | reducer: { 9 | filter: filterReducer, 10 | search: searchReducer, 11 | items: itemsReducer, 12 | cart: cartReducer 13 | } 14 | }); -------------------------------------------------------------------------------- /25pizza_react_redux/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /25pizza_react_redux/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /25pizza_react_redux/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6", 4 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "ESNext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src", "src/@types"] 20 | } -------------------------------------------------------------------------------- /Position_28_04_2023/Image20230428154755.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/Position_28_04_2023/Image20230428154755.png -------------------------------------------------------------------------------- /Position_28_04_2023/img.zip: -------------------------------------------------------------------------------- 1 | PK -------------------------------------------------------------------------------- /Position_28_04_2023/img/asteroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/Position_28_04_2023/img/asteroid.png -------------------------------------------------------------------------------- /Position_28_04_2023/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/Position_28_04_2023/img/bg.jpg -------------------------------------------------------------------------------- /Position_28_04_2023/img/planet-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/Position_28_04_2023/img/planet-1.png -------------------------------------------------------------------------------- /Position_28_04_2023/img/planet-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/Position_28_04_2023/img/planet-2.png -------------------------------------------------------------------------------- /Position_28_04_2023/img/planet-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/Position_28_04_2023/img/planet-3.png -------------------------------------------------------------------------------- /Position_28_04_2023/img/spaceship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/Position_28_04_2023/img/spaceship.png -------------------------------------------------------------------------------- /Position_28_04_2023/img/superman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/Position_28_04_2023/img/superman.png -------------------------------------------------------------------------------- /Position_28_04_2023/img/ufo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/Position_28_04_2023/img/ufo.png -------------------------------------------------------------------------------- /Position_28_04_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
        12 | asteroid 13 | planet-1 14 | planet-2 15 | planet-3 16 | spaceship 17 | superman 18 | ufo 19 |
        20 | 21 | -------------------------------------------------------------------------------- /Position_28_04_2023/style.css: -------------------------------------------------------------------------------- 1 | #bg{ 2 | background-image: url('./img/bg.jpg'); 3 | width: 600px; 4 | height: 400px; 5 | margin: 0 auto; 6 | position: relative; 7 | } 8 | 9 | img{ 10 | position: absolute; 11 | } 12 | #asteroid{ 13 | top: 80px; 14 | right: 110px; 15 | } 16 | #planet-1{ 17 | top: 25px; 18 | left: 185px; 19 | 20 | } 21 | #planet-2{ 22 | top: 60px; 23 | left: 50px; 24 | } 25 | #planet-3{ 26 | bottom: 15px; 27 | left: 140px; 28 | z-index: 2; 29 | 30 | } 31 | #spaceship{ 32 | top: 160px; 33 | left: 145px; 34 | z-index: 1; 35 | 36 | 37 | } 38 | #superman{ 39 | right: 30px; 40 | bottom: 0; 41 | } 42 | #ufo{ 43 | bottom: 50px; 44 | left: 110px; 45 | z-index: 3; 46 | } -------------------------------------------------------------------------------- /seminars/Arrays_10_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Arrays 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /seminars/CV_26_04_2023/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/CV_26_04_2023/2.jpg -------------------------------------------------------------------------------- /seminars/CV_26_04_2023/style.css: -------------------------------------------------------------------------------- 1 | img{ 2 | width: 150px; 3 | } 4 | ul{ 5 | list-style: none; 6 | } 7 | a{ 8 | text-decoration: none; 9 | } 10 | .experience{ 11 | width: 100%; 12 | border-collapse: collapse; 13 | } 14 | .experience, 15 | .experience tr, 16 | .experience th, 17 | .experience td{ 18 | border: 1px solid black; 19 | } -------------------------------------------------------------------------------- /seminars/Consultation10/app-store/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | App-store 10 | 11 | 12 |

        Товары

        13 |
        14 |
        15 | 16 | -------------------------------------------------------------------------------- /seminars/Consultation10/app-store/index.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById("container"); 2 | 3 | async function loadProducts() { 4 | const response = await fetch("https://fakestoreapi.com/products"); 5 | const products = await response.json(); 6 | console.log(products); 7 | products.forEach(({ category, description, price, rating, title, id, image }) => { 8 | console.log(id); 9 | const cardHTML = 10 | `
        11 |

        ${title}

        12 | 13 |

        ${description}

        14 |
        15 | ${rating} 16 |
        17 |
        18 | ${price} 19 |
        20 |
        `; 21 | container.insertAdjacentHTML('beforeend', cardHTML); 22 | }); 23 | 24 | } 25 | 26 | loadProducts(); -------------------------------------------------------------------------------- /seminars/Consultation10/app-store/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | #container { 6 | display: flex; 7 | flex-wrap: wrap; 8 | } 9 | 10 | .productCard { 11 | max-width: 300px; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | gap: 10px; 16 | color: inherit; 17 | background-color: azure; 18 | border-radius: 10px; 19 | margin: 20px; 20 | padding: 20px; 21 | } 22 | 23 | .productCard img { 24 | max-width: 100%; 25 | height: 250px; 26 | object-fit: cover; 27 | } -------------------------------------------------------------------------------- /seminars/Consultation10/gender-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Gender reveal 10 | 11 | 12 |

        Узнать пол еще никогда не было так легко

        13 | 14 | 15 |
        16 |

        hey

        17 |
        18 | 19 | -------------------------------------------------------------------------------- /seminars/Consultation10/gender-app/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/Consultation10/gender-app/style.css -------------------------------------------------------------------------------- /seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_1.jpg -------------------------------------------------------------------------------- /seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_2.jpg -------------------------------------------------------------------------------- /seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_3.jpg -------------------------------------------------------------------------------- /seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_4.jpg -------------------------------------------------------------------------------- /seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_5.jpg -------------------------------------------------------------------------------- /seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/Dom_Examples_05_05_2023/Images/Rouen_Cathedral_6.jpg -------------------------------------------------------------------------------- /seminars/Form_02_05_2023/style.css: -------------------------------------------------------------------------------- 1 | form{ 2 | display: flex; 3 | flex-direction: column; 4 | max-width: 600px; 5 | margin: 0 auto; 6 | font-size: 16px; 7 | } 8 | 9 | label{ 10 | margin-bottom: 5px; 11 | font-weight: bold; 12 | } 13 | 14 | input, select, textarea{ 15 | padding: 10px; 16 | margin-bottom: 15px; 17 | border-radius: 5px; 18 | border: 1px solid black; 19 | } 20 | 21 | textarea{ 22 | height: 150px; 23 | } 24 | h1{ 25 | text-align: center; 26 | } 27 | span{ 28 | color: red; 29 | } 30 | 31 | input[type="checkbox"]{ 32 | 33 | align-self: flex-start; 34 | } 35 | 36 | input[type="submit"], input[type="reset"]{ 37 | color:whitesmoke; 38 | padding: 10px 20px; 39 | border-radius: 5px; 40 | border: none; 41 | font-size: 16px; 42 | cursor: pointer; 43 | } 44 | 45 | input[type="submit"]{ 46 | background-color: green; 47 | } 48 | input[type="reset"]{ 49 | background-color: red; 50 | } 51 | -------------------------------------------------------------------------------- /seminars/JSONPLaceHolder_AsyncAwait_23_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | JSONPlaceHolder Async/Await 10 | 11 | 12 |

        JSONPlaceHolder Async/Await

        13 |
        14 |
        15 | 16 | -------------------------------------------------------------------------------- /seminars/JSONPLaceHolder_AsyncAwait_23_05_2023/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/JSONPLaceHolder_AsyncAwait_23_05_2023/style.css -------------------------------------------------------------------------------- /seminars/JSONPlaceHolder_17_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | JSONPlaceHolder 10 | 11 | 12 |

        JSONPlaceHolder Posts

        13 |
        14 | 15 |
        16 | 17 | -------------------------------------------------------------------------------- /seminars/JSONPlaceHolder_17_05_2023/script.js: -------------------------------------------------------------------------------- 1 | const baseUrl = 'https://jsonplaceholder.typicode.com/'; 2 | 3 | fetch(`${baseUrl}posts`) 4 | .then((res) => res.json()) 5 | .then((posts) => { 6 | const postListDiv =document.getElementById('postList'); 7 | posts.forEach(post=>{ 8 | const postCard = document.createElement('div'); 9 | postCard.classList.add('postCard'); 10 | 11 | const postTitle = document.createElement('h3'); 12 | postTitle.classList.add('postTitle') 13 | postTitle.textContent = post.title; 14 | 15 | const postBody = document.createElement('p'); 16 | postBody.classList.add('postBody') 17 | postBody.textContent = post.body; 18 | 19 | postCard.append(postTitle,postBody); 20 | postListDiv.append(postCard); 21 | 22 | }); 23 | }) 24 | .catch((err)=> console.log(err)); -------------------------------------------------------------------------------- /seminars/JSONPlaceHolder_17_05_2023/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial, sans-serif; 3 | margin: 20px; 4 | } 5 | 6 | h1{ 7 | text-align: center; 8 | margin-bottom: 20px; 9 | } 10 | 11 | .postCard{ 12 | width: 500px; 13 | border: 1px solid #ccc; 14 | border-radius: 5px; 15 | padding: 10px; 16 | margin: 20px auto; 17 | } 18 | 19 | postTitle{ 20 | font-size: 18px; 21 | text-align: center; 22 | } 23 | 24 | .postBody{ 25 | margin-top: 5px; 26 | text-align: justify; 27 | text-indent: 25px; 28 | } -------------------------------------------------------------------------------- /seminars/JSONPlaceHolder_Albums_17_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | JSONPlaceHolder Albums 10 | 11 | 12 |

        JSONPlaceHolder Albums

        13 |
        14 | 15 | 16 | -------------------------------------------------------------------------------- /seminars/JSONPlaceHolder_Albums_17_05_2023/style.css: -------------------------------------------------------------------------------- 1 | a { 2 | background-image: url('https://via.placeholder.com/150/92c952'); 3 | display: block; 4 | height: 150px; 5 | width: 150px; 6 | } -------------------------------------------------------------------------------- /seminars/PRIMITIVES_09_05_2023/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/cards28_06_23.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/cards28_06_23/cards28_06_23.rar -------------------------------------------------------------------------------- /seminars/cards28_06_23/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/cards28_06_23/public/favicon.ico -------------------------------------------------------------------------------- /seminars/cards28_06_23/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/cards28_06_23/public/logo192.png -------------------------------------------------------------------------------- /seminars/cards28_06_23/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/cards28_06_23/public/logo512.png -------------------------------------------------------------------------------- /seminars/cards28_06_23/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 | <> 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/src/components/Card.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Card: React.FC<{ rank: string, suit: string }> = ({ rank, suit }) => { 4 | return ( 5 |
        6 | {rank} 7 | {suit} 8 |
        9 | ); 10 | }; 11 | 12 | export default Card; 13 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/src/components/GameTable.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSelector } from "react-redux"; 3 | import { useDispatch } from "react-redux"; 4 | import { IState } from "../redux/gameSlice"; 5 | import Card from "./Card"; 6 | 7 | const GameTable = () => { 8 | const dispatch = useDispatch(); 9 | const { playerDeck, computerDeck, isGameActive, result, playerCard } = useSelector((state: {game: IState }) => state.game) 10 | 11 | return ( 12 |
        13 |
        14 |

        Игрок

        15 | { playerCard && } 16 |
        17 | 18 |
        19 | ); 20 | }; 21 | 22 | export default GameTable; 23 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { Provider } from 'react-redux'; 7 | import { store } from './redux/store'; 8 | 9 | const root = ReactDOM.createRoot( 10 | document.getElementById('root') as HTMLElement 11 | ); 12 | root.render( 13 | 14 | 15 | 16 | ); 17 | 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import { gameSlice } from "./gameSlice"; 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | game: gameSlice.reducer 7 | } 8 | }); -------------------------------------------------------------------------------- /seminars/cards28_06_23/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /seminars/cards28_06_23/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /seminars/hookusestate_map/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /seminars/hookusestate_map/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/hookusestate_map/public/favicon.ico -------------------------------------------------------------------------------- /seminars/hookusestate_map/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/hookusestate_map/public/logo192.png -------------------------------------------------------------------------------- /seminars/hookusestate_map/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/hookusestate_map/public/logo512.png -------------------------------------------------------------------------------- /seminars/hookusestate_map/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /seminars/hookusestate_map/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /seminars/hookusestate_map/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /seminars/hookusestate_map/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /seminars/hookusestate_map/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /seminars/hookusestate_map/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /seminars/hookusestate_map/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /seminars/hookusestate_map/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/react-14_06_2023/public/favicon.ico -------------------------------------------------------------------------------- /seminars/react-14_06_2023/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/react-14_06_2023/public/logo192.png -------------------------------------------------------------------------------- /seminars/react-14_06_2023/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/react-14_06_2023/public/logo512.png -------------------------------------------------------------------------------- /seminars/react-14_06_2023/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
        8 | 9 |
        10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/src/reducers/index.ts: -------------------------------------------------------------------------------- 1 | import {Reducer} from 'redux'; 2 | 3 | interface ITodo{ 4 | id: number; 5 | text: string; 6 | completed: boolean; 7 | } 8 | 9 | interface ITodoState{ 10 | todos: ITodo[]; 11 | } 12 | 13 | interface AddTodoAction{ 14 | type: 'ADD_TODO'; 15 | payload: ITodo; 16 | } 17 | 18 | type TodoAction = AddTodoAction; 19 | 20 | const initialState: ITodoState = { 21 | todos:[], 22 | } 23 | 24 | const todoReducer: Reducer = ( 25 | state = initialState, 26 | action 27 | ):ITodoState=>{ 28 | switch(action.type){ 29 | case 'ADD_TODO': 30 | return { 31 | ...state, 32 | todos: [...state.todos, action.payload] 33 | } 34 | 35 | default: 36 | return state; 37 | } 38 | } 39 | export default todoReducer; -------------------------------------------------------------------------------- /seminars/react-14_06_2023/src/reducers/todoReducer.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers } from '@reduxjs/toolkit'; 2 | import todoReducer from './index'; 3 | 4 | 5 | export const rootReducer = combineReducers({ 6 | todo: todoReducer 7 | }) -------------------------------------------------------------------------------- /seminars/react-14_06_2023/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /seminars/react-14_06_2023/src/store/store.ts: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import { rootReducer } from "../reducers/todoReducer"; 3 | 4 | export const store = configureStore({ 5 | reducer:{ 6 | todo: rootReducer 7 | }} 8 | ) -------------------------------------------------------------------------------- /seminars/react-14_06_2023/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/tic-tac-toe/public/favicon.ico -------------------------------------------------------------------------------- /seminars/tic-tac-toe/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/tic-tac-toe/public/logo192.png -------------------------------------------------------------------------------- /seminars/tic-tac-toe/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/tic-tac-toe/public/logo512.png -------------------------------------------------------------------------------- /seminars/tic-tac-toe/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/App.css: -------------------------------------------------------------------------------- 1 | .board { 2 | display: grid; 3 | grid-template-columns: repeat(3, 1fr); 4 | grid-gap: 4px; 5 | margin-bottom: 16px; 6 | } 7 | 8 | .square { 9 | width: 100%; 10 | height: 100%; 11 | font-size: 24px; 12 | } 13 | 14 | .game { 15 | max-width: 400px; 16 | margin: 0 auto; 17 | text-align: center; 18 | } 19 | 20 | .status { 21 | margin-bottom: 16px; 22 | } 23 | 24 | button { 25 | padding: 8px 16px; 26 | } -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Game from './components/Game'; 4 | import { store } from './store'; 5 | import { addMove, resetGame } from './action'; 6 | 7 | function App() { 8 | return ( 9 | store.dispatch(addMove(index, player))} 14 | resetGame={() => store.dispatch(resetGame())} 15 | /> 16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/action/index.ts: -------------------------------------------------------------------------------- 1 | export enum ActionType { 2 | ADD_MOVE = 'ADD_MOVE', 3 | RESET_GAME = 'RESET_GAME' 4 | } 5 | 6 | interface AddMoveAction { 7 | type: ActionType.ADD_MOVE, 8 | payload: { 9 | index: number; 10 | player: string; 11 | } 12 | } 13 | 14 | interface ResetGameAction { 15 | type: ActionType.RESET_GAME 16 | } 17 | 18 | export type GameAction = AddMoveAction | ResetGameAction; 19 | 20 | export const addMove = (index: number, player: string): AddMoveAction => ({ 21 | type: ActionType.ADD_MOVE, 22 | payload: { index, player } 23 | }) 24 | 25 | export const resetGame = (): ResetGameAction => ({ 26 | type: ActionType.RESET_GAME 27 | }) -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/components/Board.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Square from "./Square"; 3 | 4 | interface BoardProps { 5 | board: string[]; 6 | onClick: (index: number) => void; 7 | } 8 | 9 | const Board: React.FC = ({ board, onClick }) => { 10 | return ( 11 |
        12 | {board.map((value, index) => ( 13 | onClick(index)} /> 14 | ))} 15 |
        16 | ); 17 | }; 18 | 19 | export default Board; 20 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/components/Square.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface SquareProps { 4 | value: string; 5 | onClick: () => void; 6 | } 7 | 8 | const Square: React.FC = ({ value, onClick }) => { 9 | return ( 10 | 13 | ); 14 | }; 15 | 16 | export default Square; 17 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/tic-tac-toe/src/index.css -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { Provider } from 'react-redux'; 7 | import { store } from './store'; 8 | 9 | const root = ReactDOM.createRoot( 10 | document.getElementById('root') as HTMLElement 11 | ); 12 | root.render( 13 | 14 | 15 | 16 | ); 17 | 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /seminars/tic-tac-toe/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import { gameReducer } from "../reducers"; 3 | 4 | export const store = configureStore({ 5 | reducer: gameReducer 6 | }) -------------------------------------------------------------------------------- /seminars/tic-tac-toe/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/weather_react_redux/public/favicon.ico -------------------------------------------------------------------------------- /seminars/weather_react_redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/weather_react_redux/public/logo192.png -------------------------------------------------------------------------------- /seminars/weather_react_redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sainozhenko/frontend/7ab8e357ec7d7ee4568c08a536d6836683d1fa1b/seminars/weather_react_redux/public/logo512.png -------------------------------------------------------------------------------- /seminars/weather_react_redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import WeatherForm from './components/WeatherForm'; 4 | import WeatherInfo from './components/WeatherInfo'; 5 | 6 | function App() { 7 | return ( 8 |
        9 |

        WeatherApp

        10 | 11 | 12 |
        13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/src/components/WeatherForm.tsx: -------------------------------------------------------------------------------- 1 | import { fetchWeather } from '../reducers/weatherReducer'; 2 | import React,{ useState} from 'react' 3 | import { useDispatch } from 'react-redux'; 4 | 5 | 6 | const WeatherForm:React.FC = () => { 7 | const [city,setCity]= useState(''); 8 | const dispatch = useDispatch(); 9 | 10 | const handleSubmit = (e:React.FormEvent)=>{ 11 | e.preventDefault(); 12 | dispatch(fetchWeather(city)); 13 | setCity(''); 14 | } 15 | 16 | return ( 17 |
        18 | setCity(e.target.value)} 23 | /> 24 | 25 |
        26 | ); 27 | } 28 | 29 | export default WeatherForm; 30 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/src/components/WeatherInfo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useSelector } from 'react-redux'; 3 | import { RootState } from '../store'; 4 | 5 | const WeatherInfo:React.FC = () => { 6 | 7 | const {data, error,loading} = useSelector((state: RootState)=> state.weather); 8 | 9 | if(loading) { 10 | return
        Loading...
        11 | }; 12 | if(error){ 13 | return
        Error: {error}
        14 | }; 15 | if(!data){ 16 | return null; 17 | } 18 | return ( 19 |
        20 |

        21 | WeatherInfo

        22 |

        City:{data.name}

        23 |

        Temparature: {(data.main.temp-273.15).toFixed(1)}°C

        24 |

        Description:{data.weather[0].description}

        25 |
        26 | ) 27 | } 28 | 29 | export default WeatherInfo; 30 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { Provider } from 'react-redux'; 7 | import { store } from './store'; 8 | 9 | const root = ReactDOM.createRoot( 10 | document.getElementById('root') as HTMLElement 11 | ); 12 | root.render( 13 | 14 | 15 | 16 | ); 17 | 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | reportWebVitals(); 22 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /seminars/weather_react_redux/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import { weatherReducer } from "../reducers/weatherReducer"; 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | weather: weatherReducer 7 | 8 | } 9 | }); 10 | 11 | export type RootState = ReturnType; 12 | export type AppDispatch = typeof store.dispatch -------------------------------------------------------------------------------- /seminars/weather_react_redux/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------