├── .gitignore ├── .vscode └── settings.json ├── 01-html-codebase ├── class-01-intro-to-html │ └── index.html ├── class-02-text-formatting-lists │ └── index.html └── class-03-tables-and-forms │ ├── forms.html │ └── tables.html ├── 02-css-codebase ├── class-01-intro-to-css │ ├── css │ │ └── style.css │ └── index.html ├── class-02 │ ├── background-files │ │ ├── assets │ │ │ ├── bg-image.jpg │ │ │ └── protruding-squares.png │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── color-files │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── fonts-files │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── links-files │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ └── specificity-files │ │ ├── css │ │ └── style.css │ │ └── index.html ├── class-03 │ ├── border-example │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── box-model │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── box-shadow │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── display-property │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── margin-example │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── padding │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ └── position-property │ │ ├── css │ │ └── style.css │ │ └── index.html ├── class-04 │ ├── flex-container │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ └── flex-properties │ │ ├── css │ │ └── style.css │ │ └── index.html ├── class-05 │ └── intro-to-grid │ │ ├── css │ │ └── style.css │ │ └── index.html └── class-06 │ ├── 01-grid-spanning-cells │ ├── css │ │ └── style.css │ └── index.html │ └── 02-grid-named-areas-media-queries │ ├── css │ └── style.css │ └── index.html ├── 03-js-codebase ├── 01-class │ ├── 01-js-console-comments │ │ ├── index.html │ │ └── script.js │ ├── 02-variables │ │ ├── index.html │ │ └── script.js │ ├── 03-data-types │ │ ├── index.html │ │ └── script.js │ └── 04-memory-allocation │ │ ├── index.html │ │ └── script.js ├── 02-class │ ├── 01-operators │ │ ├── index.html │ │ └── script.js │ ├── 02-type-conversions-and-coercions │ │ ├── index.html │ │ └── script.js │ └── 03-string-functions │ │ ├── index.html │ │ └── script.js ├── 03-class │ ├── 01-number-methods │ │ ├── index.html │ │ └── script.js │ ├── 02-math-object-functions │ │ ├── index.html │ │ └── script.js │ ├── 03-date-object │ │ ├── index.html │ │ └── script.js │ └── 04-arrays │ │ ├── index.html │ │ └── script.js ├── 04-class │ ├── 01-object-basics │ │ ├── index.html │ │ └── script.js │ ├── 02-object-nesting-and-spread │ │ ├── index.html │ │ └── script.js │ ├── 03-object-desctructuring │ │ ├── index.html │ │ └── script.js │ └── 04-json │ │ ├── index.html │ │ ├── newFile.json │ │ └── script.js ├── 05-class │ ├── 01-functions-basics │ │ ├── index.html │ │ └── script.js │ ├── 02-function-expr-arrow │ │ ├── index.html │ │ └── script.js │ ├── 03-iife-functions │ │ ├── index.html │ │ ├── script.js │ │ └── script2.js │ └── 04-challenge │ │ ├── challenge.md │ │ ├── index.html │ │ └── script.js ├── 06-class │ ├── 01-if-statement-basics │ │ ├── index.html │ │ └── script.js │ ├── 02-if-else-statements │ │ ├── index.html │ │ └── script.js │ ├── 03-nested-if-statements │ │ ├── index.html │ │ └── script.js │ ├── 04-switch-case-statements │ │ ├── index.html │ │ └── script.js │ ├── 05-challenge-switch │ │ ├── index.html │ │ └── script.js │ ├── 06-truthy-false-if-statements │ │ ├── index.html │ │ └── script.js │ ├── 07-logical-assignment-operators │ │ ├── index.html │ │ └── script.js │ └── 08-ternary-operator │ │ ├── index.html │ │ └── script.js ├── 07-class │ ├── 01-for-loop-basics │ │ ├── index.html │ │ └── script.js │ ├── 02-while-and-do-while-loops │ │ ├── index.html │ │ └── script.js │ ├── 03-for-of-and-for-in-loops │ │ ├── index.html │ │ └── script.js │ ├── 04-array-high-order-functions │ │ ├── index.html │ │ └── script.js │ └── 05-playground-high-order-functions │ │ ├── index.html │ │ └── script.js ├── 08-class │ └── 01-dom-basics │ │ ├── index.html │ │ └── script.js ├── 09-class │ ├── index.html │ ├── script.js │ └── style.css ├── 10-class │ ├── 01-traversing-dom │ │ ├── index.html │ │ └── script.js │ ├── 02-create-remove-elements │ │ ├── index.html │ │ └── script.js │ └── 03-practice │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── 11-class │ ├── 01-events-intro │ │ ├── events-calendar.png │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── 02-mouse-events │ │ ├── events-calendar.png │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── 03-keyboard-events-and-event-object │ │ ├── events-calendar.png │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── 12-class │ ├── 01-event-listeners-cont │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── 02-form-submit-events │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── 13-class │ ├── 01-execution-pcontext │ │ ├── index.html │ │ └── script.js │ ├── 02-async-js │ │ ├── index.html │ │ └── script.js │ └── 03-setTimout-setInterval │ │ ├── index.html │ │ └── script.js └── 14-class │ ├── 01-callbacks │ ├── index.html │ ├── script.js │ └── style.css │ ├── 02-ajax-xhr │ ├── index.html │ ├── json │ │ ├── albums.json │ │ ├── authors.json │ │ └── songs.json │ ├── script.js │ └── style.css │ ├── 03-callbackhell │ ├── index.html │ ├── json │ │ ├── albums.json │ │ ├── authors.json │ │ └── songs.json │ ├── script.js │ └── style.css │ ├── 04-promises │ ├── index.html │ ├── json │ │ ├── albums.json │ │ ├── authors.json │ │ └── songs.json │ ├── script.js │ └── style.css │ └── 05-refactor-callbacks-to-promises │ ├── index.html │ ├── script.js │ └── style.css ├── 04-bootstrap-codebase └── 01-class │ ├── 00-bootstrap-comiled-css │ ├── bootstrap.min.css │ ├── bootstrap.min.js │ └── index.html │ ├── 01-bootstrap-cdn.html │ ├── 02-containers.html │ ├── 03-typography.html │ ├── 04-display-positioning.html │ ├── 05-colors.html │ ├── 06-spacing.html │ ├── 07-sizing.html │ ├── 08-buttons.html │ ├── 09-navbars.html │ ├── 10-grid.html │ ├── 11-flex.html │ ├── 12-cards.html │ ├── 13-theme-colors.html │ ├── 14-lists-and-badges copy.html │ ├── 15-form-inputs.html │ ├── 16-form-input-validation.html │ ├── 17-alerts-progress-bars.html │ ├── 18-breadcrumps-carusels.html │ ├── 19-modals.html │ └── 20-popovers-and-tooltips.html ├── 05-jest-codebase ├── 01-common-jest-matchers │ ├── __tests__ │ │ └── index.test.js │ └── index.js └── 02-alogorithms-unit-test │ ├── fizzbuzz │ ├── fizzbuzz.js │ └── fizzbuzz.test.js │ ├── palindrome │ ├── palindrome.js │ └── palindrome.test.js │ └── reversestring │ ├── reversestring.js │ └── reversestring.test.js ├── README.md ├── package-lock.json ├── package.json └── practice-projects ├── blog-layout ├── css │ ├── membership-page.css │ └── style.css ├── index.html └── membership-page.html └── objects-challenge ├── challenge.md ├── index.html └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | */node_modules/ -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /01-html-codebase/class-01-intro-to-html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My First Web Page 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Welcome To My Web Page

12 |

My Journey to Web Development...

13 |

This header should be smaller...

14 |

This is even smaller...

15 |
This is even smaller than small one...
16 |
This should be the smallest heading...
17 | 18 |

Hello

19 | 20 | 21 |

Welcome to my blog about my coding journey. Here I will share information about HTML, CSS, and JS

22 | 23 | 24 |

Technologies that I want to learn:
25 | - HTML
26 | - CSS
27 | - JS
28 |

29 | 30 | 31 | 32 | 33 | 34 |

35 | Hello there. I love HTML. This is not a joke! 36 |

37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | Open Google 45 | 46 | 47 | -------------------------------------------------------------------------------- /02-css-codebase/class-01-intro-to-css/css/style.css: -------------------------------------------------------------------------------- 1 | /* * the pound sign is the sorthand for id - ctrl + / or mac command +* */ 2 | #two { 3 | color: blue; 4 | } 5 | /* the dot sign is shorthand for class attribute */ 6 | .myheader { 7 | color: red; 8 | } 9 | 10 | /* the star selector aka universal it is a whild card that selects all the tags in html document */ 11 | * { 12 | color: yellow; 13 | } 14 | 15 | /* we can group the selectors by separating them with commas 16 | */ 17 | 18 | p, h3, h2 { 19 | color: blue; 20 | } -------------------------------------------------------------------------------- /02-css-codebase/class-01-intro-to-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Practice 8 | 9 | 21 | 22 | 23 | 30 | 35 | 36 | 37 |

Number One

38 |

Number Two

39 |

Number Three

40 | 41 |

H2 first header

42 |

H2 second header

43 |

H2 third header

44 | 45 |

Nice paragraph

46 | 47 |

Nice header

48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /02-css-codebase/class-02/background-files/assets/bg-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dmytro-ch21/fsd1-html-css-jss-codebase/c99209cdee55769c56eaa1be93025e8fa2281f31/02-css-codebase/class-02/background-files/assets/bg-image.jpg -------------------------------------------------------------------------------- /02-css-codebase/class-02/background-files/assets/protruding-squares.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dmytro-ch21/fsd1-html-css-jss-codebase/c99209cdee55769c56eaa1be93025e8fa2281f31/02-css-codebase/class-02/background-files/assets/protruding-squares.png -------------------------------------------------------------------------------- /02-css-codebase/class-02/background-files/css/style.css: -------------------------------------------------------------------------------- 1 | /* applied for all inner elements in body tag */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | line-height: 1.6; /*1.6 is a dynamic relational size*/ 5 | } 6 | 7 | p { 8 | font-size: 25px; 9 | } 10 | 11 | .hero { 12 | /* set the font color */ 13 | color: #fff; 14 | 15 | /* set the height of the hero image element */ 16 | height: 100vh; 17 | 18 | /* center the text */ 19 | text-align: center; 20 | 21 | /* background color */ 22 | background-color: coral; 23 | 24 | /* background-image 25 | use url() to provide the path of the image 26 | if you want to traverse back with your path use ../ 27 | */ 28 | background-image: url('../assets/bg-image.jpg'); 29 | 30 | /* chnage the size 31 | some other options 32 | cover - cover the whole window 33 | contain - cover the whole window 34 | auto - default 35 | */ 36 | background-size: cover; 37 | 38 | /* by default the background is set to repeat 39 | some other options: 40 | repeat-x - repeat horizontally 41 | repeat-y - repeat vertically 42 | no-repeat - no repeat 43 | */ 44 | background-repeat: no-repeat; 45 | 46 | /* when you want to apply a pattern as a background image 47 | you can use repeat property */ 48 | background-image: url(../assets/protruding-squares.png); 49 | background-size: 200px; 50 | background-repeat: repeat; 51 | 52 | /* we can change the position of the image 53 | some other options: 54 | center - center the image 55 | top - top of the image 56 | bottom - bottom of the image 57 | */ 58 | background-position: center; 59 | 60 | /* shorthand of background, when you apply the position and size use forward slash so browset doent get confused */ 61 | /* background: url('../assets/pattern.jpg') repeat center/cover; */ 62 | 63 | /* linear gradient */ 64 | /* 65 | 1. provide 'to where' 66 | 2. start color 67 | 3. end color 68 | */ 69 | 70 | /* UNCOMMENT this block if you want to see the gradient */ 71 | /* background: linear-gradient(to bottom, lightblue, darkblue); 72 | background: linear-gradient(to top right, lightblue, darkred); */ 73 | } -------------------------------------------------------------------------------- /02-css-codebase/class-02/background-files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 |
20 |

CSS Backgrounds.

21 |

22 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi saepe expedita id autem neque! Vitae ratione iusto dicta ipsam eveniet? 23 |

24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /02-css-codebase/class-02/color-files/css/style.css: -------------------------------------------------------------------------------- 1 | /* applied for all inner elements in body tag */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | background-color: white; 5 | } 6 | 7 | h3.economy { 8 | color: coral; 9 | } 10 | 11 | h3.luxury { 12 | color: #2263c5; 13 | } 14 | 15 | h3.family { 16 | /* RGBA */ 17 | color: rgba(194, 2, 2, 0.9); 18 | /* HSLA */ 19 | color: hsla(245, 60%, 50%, 0.4); 20 | } -------------------------------------------------------------------------------- /02-css-codebase/class-02/color-files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Colors 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 |
22 |

CSS Colors

23 |
24 |
25 |

Economy Cars

26 |

Best value for daily use.

27 | View Options 28 |
29 |
30 |

Luxury Cars

31 |

Travel in style.

32 | View Options 33 |
34 |
35 |

Family Cars

36 |

Space for everyone.

37 | View Options 38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /02-css-codebase/class-02/fonts-files/css/style.css: -------------------------------------------------------------------------------- 1 | /* here we apply the imported font from google fonts and linked in html head section */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | } 5 | 6 | /* Apply different font styles */ 7 | h3 { 8 | /* change the font size using different units */ 9 | /* this will change the font size to 30px */ 10 | /* other options are xx-small, x-small, small, medium, large, x-large, xx-large */ 11 | /* also you can apply different units such as px, rem, em, or words */ 12 | /* 13 | px - pixels 14 | rem - root em - the root element 15 | em - the current element 16 | */ 17 | font-size: x-large; /* px, rem, em, or words*/ 18 | 19 | /* change the font weight */ 20 | font-weight: bold; /* 100-900, bold, normal, thin */ 21 | 22 | /* change the font style */ 23 | font-style: normal; 24 | /* font-variant: small-caps; */ 25 | 26 | /* shorthand - font */ 27 | /* font: italic small-caps bold 30px Arial; */ 28 | 29 | /* this will capitalize the text */ 30 | text-transform: capitalize; 31 | 32 | /* this will indent the text */ 33 | text-indent: 30px; 34 | 35 | /* this will change the spacing between letters */ 36 | letter-spacing: 5px; 37 | 38 | /* this will change the spacing between words */ 39 | word-spacing: 10px; 40 | 41 | /* this will center the text */ 42 | /* other options are left, right */ 43 | text-align: center; 44 | } 45 | 46 | /* Apply different text decorations for links*/ 47 | a { 48 | /* this will remove the underline */ 49 | text-decoration: none; 50 | } -------------------------------------------------------------------------------- /02-css-codebase/class-02/fonts-files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 |
20 |

CSS Fonts

21 |
22 |
23 |

Economy Cars

24 |

Best value for daily use.

25 | View Options 26 |
27 |
28 |

Luxury Cars

29 |

Travel in style.

30 | View Options 31 |
32 |
33 |

Family Cars

34 |

Space for everyone.

35 | View Options 36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /02-css-codebase/class-02/links-files/css/style.css: -------------------------------------------------------------------------------- 1 | /* applied for all inner elements in body tag */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | /* set the line height */ 5 | line-height: 1.6; /*1.6 is a dynamic relational size*/ 6 | } 7 | 8 | /* regular link */ 9 | a { 10 | /* set the text decoration 11 | some other options: 12 | underline - underline the link 13 | overline - overline the link 14 | line-through - line through the link 15 | */ 16 | text-decoration: none; 17 | 18 | /* set the text color */ 19 | color: rgba(255, 0, 0, 0.422); 20 | } 21 | 22 | /* a:hover - is a pseudo class 23 | it is used to style the link when the mouse hovers over it 24 | we can add any styling here we prefer for that specific state 25 | */ 26 | a:hover { 27 | color: red; 28 | } 29 | 30 | /* a:active - is a pseudo class 31 | it is used to style the link when the link is clicked 32 | */ 33 | a:active { 34 | background-color: blue; 35 | color: white; 36 | } 37 | 38 | /* a:focus - is a pseudo class 39 | it is used to style the link when the link is clicked 40 | and you havent clicked anywhere else 41 | the moment you click on something else the link will out of focus 42 | */ 43 | a:focus { 44 | background-color: yellow; 45 | } 46 | 47 | /* a:visited - is a pseudo class 48 | it is used to style the link when the link was already clicked/visited 49 | */ 50 | a:visited { 51 | color: lightgray; 52 | } 53 | 54 | /* icons display 55 | we can use the font awesome library 56 | https://docs.fontawesome.com/web/style/style-cheatsheet 57 | */ 58 | 59 | i.fa-2x { 60 | color: yellow; 61 | } 62 | 63 | i.fa-3x { 64 | color: chocolate; 65 | } 66 | 67 | i.fa-4x { 68 | color: darkblue; 69 | } 70 | 71 | i.fa-5x { 72 | color: darkred; 73 | } -------------------------------------------------------------------------------- /02-css-codebase/class-02/links-files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 |
24 |

CSS Styling Links

25 |

Check out our latest blog post.

26 |

Check out our latest blog post.

27 | 28 |

Icons Display:

29 | 30 | 31 | 32 | 33 |

Icons Change Size and Colors:

34 | 35 | 36 | 37 | 38 | 39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /02-css-codebase/class-02/specificity-files/css/style.css: -------------------------------------------------------------------------------- 1 | /* applied for all inner elements in body tag */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | line-height: 1.6; /*1.6 is a dynamic relational size*/ 5 | } 6 | 7 | /* spcific selectors have more priority */ 8 | .container h1 { 9 | color: black; 10 | } 11 | 12 | /* the order of rules matter, it will apply the latest rule to element */ 13 | h1 { 14 | color:red !important; 15 | } 16 | 17 | h1 { 18 | color:yellow; 19 | } 20 | 21 | /* class has more priorityu than tag names, but lower than specificity */ 22 | .heading { 23 | color: salmon; 24 | } 25 | 26 | /* ID has more priority than tag names and class */ 27 | #head { 28 | color: black; 29 | } -------------------------------------------------------------------------------- /02-css-codebase/class-02/specificity-files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 |

CSS Specificity

20 |
21 |
22 |

CSS Specificity In Action

23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /02-css-codebase/class-03/border-example/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | /* apply font family to the whole document */ 8 | body { 9 | font-family: 'Poppins', sans-serif; 10 | } 11 | 12 | /* style common boxes */ 13 | .box { 14 | background-color: salmon; 15 | width: 400px; 16 | padding: 20px; 17 | margin: 20px auto; 18 | 19 | /* set borders */ 20 | /* border: 3px solid darkblue; */ 21 | border-width: 4px; 22 | border-style: solid; 23 | border-color: darkblue; 24 | } 25 | 26 | .box-1 { 27 | border: none; 28 | border-top: 3px solid yellow; 29 | border-bottom: 5px dashed blue; 30 | } 31 | 32 | .box-2 { 33 | border-radius: 15px; 34 | 35 | /* with border radius you make round elements */ 36 | width: 300px; 37 | height: 300px; 38 | border-radius: 50%; 39 | 40 | text-align: center; 41 | padding-top: 70px; 42 | 43 | background: linear-gradient(to bottom left, red, blue); 44 | } 45 | 46 | .box-3 { 47 | border-top-left-radius: 20px; 48 | border-bottom-right-radius: 20px; 49 | } -------------------------------------------------------------------------------- /02-css-codebase/class-03/border-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 |
24 |

CSS Margins

25 |
26 |

Box 1

27 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, ex.

28 |
29 |
30 |

Box 2

31 |

Dolorem, neque incidunt. Doloremque quod rerum similique error hic saepe!

32 |
33 |
34 |

Box 3

35 |

Cum quod ullam sint fugiat possimus dignissimos voluptatum vel maiores?

36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /02-css-codebase/class-03/box-model/css/style.css: -------------------------------------------------------------------------------- 1 | /* apply font family to the whole document */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | } 5 | 6 | /* create a common style for cards/boxes */ 7 | .card { 8 | background-color: darkblue; 9 | color: white; 10 | padding: 20px; 11 | border: 5px solid red; 12 | margin: 20px; 13 | } 14 | 15 | /* style each card separately */ 16 | .card-1 { 17 | color: salmon; 18 | width: 200px; 19 | height: 150px; 20 | 21 | /* if your content overflows the box use overflow property to control it */ 22 | /* overflow: hidden; */ 23 | /* overflow: scroll; */ 24 | overflow-y: scroll; 25 | } 26 | 27 | .card-2 { 28 | /* is a responsive width that will grow and shrink as the parent box changes in size */ 29 | /* it preferred over the fixed size */ 30 | width: 50%; 31 | } 32 | 33 | .card-2 p{ 34 | /* we can have inner elements width set to percentage and that would be relative to the parent element/box */ 35 | width: 50%; 36 | } 37 | 38 | .card-3 { 39 | /* 40 | max-width is recommended in most of the cases over the width 41 | the idea is that you set only the maximum width and if smaller size needed it will adjust 42 | however, once we learn flexbox this will be less used 43 | */ 44 | 45 | /* flexbox is used in most modern application 90% of time, also grid is used but not as popular as flexbox */ 46 | max-width: 800px; 47 | min-width: 400px; 48 | } -------------------------------------------------------------------------------- /02-css-codebase/class-03/box-model/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |

Card 1

26 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius iste debitis non earum ab laborum ad, animi 27 | consequuntur atque fugit reprehenderit facilis saepe nesciunt eaque.

28 |
29 |
30 |

Card 2

31 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius iste debitis non earum ab laborum ad, animi 32 | consequuntur atque fugit reprehenderit facilis saepe nesciunt eaque.

33 |
34 |
35 |

Card 3

36 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius iste debitis non earum ab laborum ad, animi 37 | consequuntur atque fugit reprehenderit facilis saepe nesciunt eaque.

38 |
39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /02-css-codebase/class-03/box-shadow/css/style.css: -------------------------------------------------------------------------------- 1 | /* apply font family to the whole document */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | } 5 | 6 | /* Reset */ 7 | * { 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | .container { 14 | display: flex; 15 | justify-content: space-between; 16 | background-color: rgb(235, 228, 228); 17 | } 18 | 19 | .box { 20 | width: 200px; 21 | height: 200px; 22 | border: 2px solid black; 23 | margin: 15px; 24 | 25 | /* flexbox */ 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | 30 | border-radius: 10px; 31 | } 32 | 33 | .box-1 { 34 | box-shadow: 10px 10px black; 35 | } 36 | 37 | .box-2 { 38 | border: none; 39 | box-shadow: 10px 10px 10px rgba(0,0,0, 0.2); 40 | } 41 | 42 | .box-3 { 43 | border: none; 44 | box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5), 10px 10px 10px rgba(0, 0, 0, 0.2); 45 | } -------------------------------------------------------------------------------- /02-css-codebase/class-03/box-shadow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 |

CSS Shadows

24 |
25 |
Box 1
26 |
Box 2
27 |
Box 3
28 | 29 | 30 | -------------------------------------------------------------------------------- /02-css-codebase/class-03/display-property/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | /* apply font family to the whole document */ 8 | body { 9 | font-family: 'Poppins', sans-serif; 10 | } 11 | 12 | h1, 13 | h2, 14 | p { 15 | margin-bottom: 15px; 16 | } 17 | 18 | .none-el { 19 | display: none; 20 | } 21 | 22 | .hidden-el { 23 | visibility: hidden; 24 | } 25 | 26 | p { 27 | display: inline; 28 | } 29 | 30 | a { 31 | background-color: darkblue; 32 | color: white; 33 | text-decoration: none; 34 | margin: 10px; 35 | padding: 10px; 36 | 37 | /* you cannot change the width and height of inline elements */ 38 | /* to actually change we have to change the display property */ 39 | width: 100px; 40 | height: 50px; 41 | 42 | /* inline block acts as a inline element however you can change the wiodth and height of the elements */ 43 | display: inline-block; 44 | } -------------------------------------------------------------------------------- /02-css-codebase/class-03/display-property/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 |

CSS Display Property

24 | 25 |

26 | Display None 27 |

28 | 29 |

30 | Visibility Hidden 31 |

32 | 33 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti cumque ullam aliquid eveniet odit 34 | exercitationem quam expedita distinctio est porro?

35 | 36 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam vero illo cumque ex. Quis maxime qui sint iusto debitis quia dolorem sapiente eveniet officiis dolor nulla sequi, asperiores, accusantium deleniti est ratione, numquam pariatur temporibus iste eligendi at ducimus. Maiores?

37 | 38 | Link 1 39 | Link 2 40 | 41 | 42 | -------------------------------------------------------------------------------- /02-css-codebase/class-03/margin-example/css/style.css: -------------------------------------------------------------------------------- 1 | /* apply font family to the whole document */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | } 5 | 6 | /* style common boxes */ 7 | .box { 8 | background-color: salmon; 9 | max-width: 400px; 10 | padding: 20px; 11 | margin: 20px; 12 | } 13 | 14 | .box h1 { 15 | margin-bottom: 20px; 16 | } 17 | 18 | .box-2 { 19 | margin-top: 40px; 20 | margin-right: 50px; 21 | margin-bottom: 40px; 22 | margin-left: 60px; 23 | 24 | /* T-R-B-L */ 25 | margin: 20px 30px 40px 50px; 26 | } 27 | 28 | /* to make sure we have the box model in center on x axis we use auto for left and right margins */ 29 | .box { 30 | margin: 20px auto; 31 | } -------------------------------------------------------------------------------- /02-css-codebase/class-03/margin-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 |
24 |

CSS Margins

25 |
26 |

Box 1

27 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, ex.

28 |
29 |
30 |

Box 2

31 |

Dolorem, neque incidunt. Doloremque quod rerum similique error hic saepe!

32 |
33 |
34 |

Box 3

35 |

Cum quod ullam sint fugiat possimus dignissimos voluptatum vel maiores?

36 |
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /02-css-codebase/class-03/padding/css/style.css: -------------------------------------------------------------------------------- 1 | /* apply font family to the whole document */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | } 5 | 6 | .box { 7 | background-color: darkblue; 8 | color: #fff; 9 | max-width: 300px; 10 | 11 | /* padding-top: 20px; 12 | padding-right: 30px; 13 | padding-bottom: 40px; 14 | padding-left: 50px; */ 15 | 16 | /* one unit with padding property will set evenly to all sides the specified size */ 17 | padding: 50px; 18 | 19 | /* 20 | two units will set: 21 | first for top and bottom 22 | second for left and right 23 | */ 24 | padding: 20px 50px; 25 | 26 | /* 27 | here first sets the top 28 | second sets the left and right 29 | third sets the bottom 30 | */ 31 | padding: 20px 40px 30px; 32 | 33 | /* if you want to specify all of them */ 34 | /* T-R-B-L */ 35 | padding: 10px 20px 30px 40px; 36 | 37 | 38 | } -------------------------------------------------------------------------------- /02-css-codebase/class-03/padding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 |
24 |

CSS Padding

25 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus repellat sint mollitia itaque 26 | consequuntur est eius veritatis, ducimus iusto porro?

27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /02-css-codebase/class-03/position-property/css/style.css: -------------------------------------------------------------------------------- 1 | /* apply font family to the whole document */ 2 | body { 3 | font-family: 'Poppins', sans-serif; 4 | } 5 | 6 | /* Reset */ 7 | * { 8 | box-sizing: border-box; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | .box { 14 | width: 200px; 15 | height: 200px; 16 | background: lightblue; 17 | border: 2px solid black; 18 | margin: 15px; 19 | 20 | /* flexbox */ 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .box-1 { 27 | position: static; 28 | /* statically positioned elements cannot use properties as top, left, bottom, right */ 29 | top: 200px; 30 | } 31 | 32 | .box-2 { 33 | position: relative; 34 | left: 30px; 35 | top: -10px; 36 | } 37 | 38 | .box-3 { 39 | position: fixed; 40 | top: -15px; 41 | left: -15px; 42 | width: 100vw; 43 | height: 50px; 44 | z-index: 2; 45 | } 46 | 47 | .box-4 { 48 | position: sticky; 49 | top: 100px; 50 | } 51 | 52 | /* to use absolute position which means move the element relative to the parent element 53 | we need to make sure that the parent has the psotion relative */ 54 | 55 | .box-5 { 56 | position: relative; 57 | background-color: darkred; 58 | } 59 | 60 | .box-6 { 61 | /* the absolute position will allow you to move element around based on the parent element */ 62 | position: absolute; 63 | background-color: yellow; 64 | width: 100px; 65 | height: 25px; 66 | border: none; 67 | top: -20px; 68 | right: -20px; 69 | } -------------------------------------------------------------------------------- /02-css-codebase/class-04/flex-container/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Arial', sans-serif; 3 | } 4 | 5 | /* Make the container a flex container using display: flex */ 6 | .flex-container { 7 | /* Set a background color to visualize the container */ 8 | background-color: aqua; 9 | height: 90vh; 10 | 11 | /* Set up flex display, which defaults to row direction */ 12 | display: flex; 13 | gap: 20px; 14 | 15 | /* Define the flex direction. Options include: 16 | - row (default): items align in a horizontal row 17 | - row-reverse: items align in reverse order horizontally 18 | - column: items align vertically 19 | - column-reverse: items align in reverse order vertically */ 20 | flex-direction: row; 21 | 22 | /* Enable wrapping, allowing items to move to the next line if they overflow the container */ 23 | flex-wrap: wrap; 24 | 25 | /* Control the alignment of items along the main axis with justify-content. Options include: 26 | - flex-start: items align to the start 27 | - flex-end: items align to the end 28 | - center: items align to the center 29 | - space-around: items have equal space around them 30 | - space-between: items have equal space between them 31 | - space-evenly: items have equal space distributed evenly */ 32 | justify-content: center; 33 | 34 | /* For flex-direction: column, justify-content aligns items along the vertical axis */ 35 | /* Uncomment if changing to column direction 36 | flex-direction: column; 37 | justify-content: flex-start; 38 | */ 39 | 40 | /* Use align-items to align items on the cross-axis (vertical when flex-direction: row). 41 | Options include: 42 | - flex-start: items align at the top 43 | - flex-end: items align at the bottom 44 | - center: items align at the center 45 | - stretch: items stretch to fill the container (if no height is specified on items) */ 46 | align-items: center; 47 | 48 | /* When using column direction, stretch won't work with items that have a specified width */ 49 | } 50 | 51 | /* Style for individual flex items */ 52 | .flex-item { 53 | border: 2px solid black; 54 | border-radius: 10px; 55 | padding: 10px; 56 | width: 200px; 57 | /* Specify height and background color for visual clarity */ 58 | height: 150px; 59 | background-color: salmon; 60 | } -------------------------------------------------------------------------------- /02-css-codebase/class-04/flex-container/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 24 |

CSS Flex Container and Items

25 | 26 |
27 |
28 | Box 1 29 |
30 |
31 | Box 2 32 |
33 |
34 | Box 3 35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /02-css-codebase/class-04/flex-properties/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Fundamentals 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 | 24 |

CSS Flex Items Properties

25 | 26 |
27 |
Box 1
28 |
Box 2
29 |
Box 3
30 |
Box 4
31 |
Box 5
32 |
Box 6
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /02-css-codebase/class-05/intro-to-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My Blog Layout Practice 7 | 8 | 9 | 10 | 11 | 14 | 15 | 18 | 19 | 20 | 21 |
22 |

CSS Grid Demo

23 |
24 |
Item 1 New text 25 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, deleniti. 26 |
27 |
Item 2
28 |
Item 3
29 |
Item 4
30 |
Item 5
31 |
Item 6
32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /02-css-codebase/class-06/01-grid-spanning-cells/css/style.css: -------------------------------------------------------------------------------- 1 | /* Reset default styles for box-model */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | .container { 9 | --my-background-color: #d5d5d5; 10 | --my-secondary-color: #9d79ff; 11 | --my-regular-padding: 2rem; 12 | --my-paragraph-font-size: 1.2rem; 13 | --my-header-font-size: 2.2rem; 14 | --shadow-common-color: rgba(0,0,0, 0.2); 15 | } 16 | 17 | /* Set default font for the whole document */ 18 | body { 19 | font-family: 'Nunito', sans-serif; 20 | } 21 | 22 | .container { 23 | padding: var(--my-regular-padding); 24 | } 25 | 26 | html { 27 | font-size: 16px; 28 | } 29 | 30 | .box { 31 | background-color: var(--my-background-color); 32 | padding: var(--my-regular-padding); 33 | border: 1px solid black; 34 | border-radius: 0.8rem; 35 | margin-bottom: 2rem; 36 | 37 | /* Absolute Units */ 38 | /* font-size: 20px; */ 39 | /* font-size: 20pt; */ 40 | /* font-size: 1in; */ 41 | /* font-size: 0.5cm; */ 42 | /* font-size: 6mm; */ 43 | 44 | /* Relative Units - Dynamic*/ 45 | /* rem - is relative to the root element's (html) font-size 46 | by default html (font-size) is 16px 47 | */ 48 | /* font-size: 1.3rem; */ 49 | } 50 | 51 | ul { 52 | list-style: none; 53 | /* em - parent element's font size */ 54 | font-size: var(--my-paragraph-font-size); 55 | color: var(--my-background-color); 56 | } 57 | 58 | /* vh, vw, % */ 59 | 60 | .outer-box { 61 | background-color: var(--my-background-color); 62 | padding: var(--my-regular-padding); 63 | border-radius: 1.5rem; 64 | 65 | /* vw - viewport width */ 66 | width: 80vw; 67 | height: 30vh; 68 | 69 | font-size: 20px; 70 | 71 | box-shadow: 0 0 10px var(--shadow-common-color); 72 | } 73 | 74 | .inner-box { 75 | font-size: var(--my-header-font-size); 76 | background-color: var(--my-secondary-color); 77 | padding: var(--my-regular-padding); 78 | border-radius: 0.7rem; 79 | 80 | width: 50%; 81 | /* font-size: 120%; */ 82 | } -------------------------------------------------------------------------------- /02-css-codebase/class-06/01-grid-spanning-cells/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Blog Layout Practice 8 | 9 | 10 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | 22 | 23 |
24 |

Hello

25 |
26 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos, accusantium?

27 |
28 | 29 | 39 | 40 |
41 |

Outer Box

42 |
43 |

Inner Box

44 |
45 |
46 | 47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /02-css-codebase/class-06/02-grid-named-areas-media-queries/css/style.css: -------------------------------------------------------------------------------- 1 | /* Reset default styles for box-model */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Set default font for the whole document */ 9 | body { 10 | font-family: 'Nunito', sans-serif; 11 | } 12 | 13 | .item { 14 | padding: 20px; 15 | } 16 | 17 | .header { 18 | background-color: #30314bcd; 19 | text-align: center; 20 | grid-area: header; 21 | 22 | /* In order to make an element stick to the topin grid do not use fixed position */ 23 | position: sticky; 24 | top: 0; 25 | } 26 | 27 | .sidebar { 28 | background-color: #e7e7e7; 29 | text-align: center; 30 | grid-area: sidebar; 31 | } 32 | 33 | .main { 34 | background-color: #cccccc; 35 | text-align: center; 36 | grid-area: main-content; 37 | } 38 | 39 | .footer { 40 | background-color: #30314bcd; 41 | text-align: center; 42 | grid-area: footer; 43 | } 44 | 45 | article { 46 | margin: 30px; 47 | box-shadow: 0 0 10px rgba(0,0,0, 0.2); 48 | border-radius: 10px; 49 | } 50 | 51 | 52 | .grid-container { 53 | min-height: 100vh; 54 | display: grid; 55 | grid-template-areas: 56 | "header" 57 | "sidebar" 58 | "main-content" 59 | "footer"; 60 | grid-template-columns: 1fr; 61 | } 62 | 63 | 64 | /* syntax is @media (condition){} */ 65 | /* two most common conditions will be: min-width and max-width */ 66 | @media (min-width: 600px) { 67 | .grid-container { 68 | grid-template-areas: 69 | "header header" 70 | "sidebar main-content" 71 | "footer footer"; 72 | grid-template-columns: 1fr 1fr; 73 | } 74 | 75 | .header { 76 | background-color: darkblue; 77 | color: white; 78 | } 79 | } 80 | 81 | @media (min-width: 900px) { 82 | .grid-container { 83 | grid-template-areas: 84 | "header header header header" 85 | "sidebar main-content main-content main-content" 86 | "footer footer footer footer"; 87 | grid-template-columns: repeat(4, 1fr); 88 | } 89 | 90 | .header { 91 | background-color: darkred; 92 | color: white; 93 | } 94 | } -------------------------------------------------------------------------------- /03-js-codebase/01-class/01-js-console-comments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Intro To JS 7 | 8 | 9 |

Intro To JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/01-class/01-js-console-comments/script.js: -------------------------------------------------------------------------------- 1 | // using the console of your browser 2 | // pay attention to syntax 3 | console.log(234); 4 | 5 | console.log("Log some text"); 6 | 7 | console.log(100, "Text", true); 8 | 9 | const x = 500; 10 | console.log(x); 11 | 12 | // install extention JSES6 13 | // clg -> console.log(); 14 | 15 | console.log(); 16 | 17 | console.error("Alert! Problem Here..."); 18 | 19 | console.warn("Warining! Here might be a problem..."); 20 | 21 | console.table({ name: "Dmytro", email: "dmytro@email.com" }); 22 | 23 | // single line of code 24 | console.log(object); -------------------------------------------------------------------------------- /03-js-codebase/01-class/02-variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Variables 7 | 8 | 9 |

Leaning Variables in JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/01-class/02-variables/script.js: -------------------------------------------------------------------------------- 1 | // Variables are containers to store data 2 | // In JS there are 3 different variables -> var, let, const 3 | 4 | // Pay attention to 5 | // type of vatiable comes first and it is a keyword - you need to type specifically as is 6 | // names of variables use the camelCase approach, first word with small letter and others capitalized 7 | let firstName = "John"; 8 | let lastName = "Doe"; 9 | 10 | console.log(firstName, lastName); 11 | 12 | var age = 30; // initialize first 13 | 14 | console.log(age); 15 | 16 | // Naming Conventions 17 | 18 | // let 1name = 'Dima'; - cannot start with numbers 19 | // let name+last = 'Cho'; - cannot have special characters 20 | 21 | // Name Formatting 22 | // name, age, num 23 | 24 | // multi-word formatting 25 | // firstName - camelCase 26 | // first_name - underscore, snake case 27 | // FirstName - PascalCase 28 | // firstname - lowercase 29 | 30 | // Reassigning variables 31 | let myAge = 35; 32 | console.log(myAge); 33 | 34 | // reassign value of already declared value 35 | myAge = 31; 36 | console.log(myAge); 37 | 38 | myAge = myAge + 1; // myAge = 31 + 1 = 32; 39 | console.log(myAge); 40 | 41 | // Constants - const 42 | 43 | const x = 1000; 44 | // x = 2000; - cannot be reassigned 45 | console.log(x); 46 | 47 | // const score; // constants cannot be only declared, it should be initialized as well 48 | 49 | // cost with objects and arrays 50 | 51 | const person = { 52 | name: "Dima", 53 | }; 54 | console.log(person); 55 | 56 | // person = {}; cannot reassign 57 | 58 | // but you can modify an object 59 | person.name = "Mike"; 60 | console.log(person); 61 | 62 | // Declare multiple variables at once 63 | let a, b, c; 64 | console.log(a, b, c); 65 | 66 | // Declare and initialize multiple variables 67 | const d = 20, 68 | f = 30, 69 | p = 100; 70 | 71 | console.log(d, f, p); -------------------------------------------------------------------------------- /03-js-codebase/01-class/03-data-types/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Variables 7 | 8 | 9 |

Leaning Data Types in JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/01-class/03-data-types/script.js: -------------------------------------------------------------------------------- 1 | // Strings - represent sequence of characters (text) 2 | const firstName = 'John'; 3 | console.log(firstName, typeof firstName); 4 | 5 | const str = "John's" 6 | console.log(str); 7 | 8 | const text = 'Someone said - "Java Script is boring"'; 9 | console.log(text); 10 | 11 | // Number 12 | const myAge = 30.9; 13 | const myTemp = 75; 14 | 15 | console.log(myTemp, typeof myTemp); 16 | console.log(myAge, typeof myAge); 17 | 18 | 19 | // Boolean 20 | const hasKids = false; 21 | console.log(hasKids, typeof hasKids); 22 | 23 | // Null 24 | const streetAddress = null; 25 | console.log(streetAddress, typeof streetAddress); 26 | 27 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof#typeof_null 28 | 29 | 30 | // Undefined 31 | let count; 32 | console.log(count, typeof count); 33 | 34 | // Symbol 35 | const id = Symbol('id'); 36 | console.log(id, typeof id); 37 | 38 | // BigInt - since number data type can sto a specific range 39 | const largeNumber = BigInt(120937746678732357654678123458763124); 40 | const largeNumberInSimpleNumber = 120937746678732357654678123458763124n; 41 | console.log(largeNumberInSimpleNumber, typeof largeNumberInSimpleNumber); 42 | console.log(largeNumber, typeof largeNumber); 43 | console.log(largeNumber); 44 | 45 | // Reference Types 46 | // Arrays 47 | const someNumbers = [2, 4, 6, 2, 1, 2]; 48 | console.log(someNumbers, typeof someNumbers); 49 | 50 | // JS - Objects 51 | const car = { 52 | model: "Tesla", 53 | make: "CyberTruck", 54 | year: 2024, 55 | color: 'Titanium' 56 | } 57 | 58 | console.log(car, typeof car); 59 | 60 | // JS - functions 61 | // it says function but it is an object at core 62 | function sayHi() { 63 | console.log('Hello!'); 64 | } 65 | 66 | console.log(sayHi, typeof sayHi); -------------------------------------------------------------------------------- /03-js-codebase/01-class/04-memory-allocation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Variables 7 | 8 | 9 |

Leaning Memory Allocation in JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/01-class/04-memory-allocation/script.js: -------------------------------------------------------------------------------- 1 | // These will be stored in stack 2 | let myName = 'John'; 3 | let myLastName = 'Doe'; 4 | let myAge = 40; 5 | 6 | // Objects are referenced and stored in heap 7 | let myCar = { 8 | brand: 'Tesla', 9 | model: 'Model 3', 10 | color: 'Black', 11 | year: 2024 12 | } 13 | 14 | // Assign to myWifesCar a reference to myCar 15 | let myWifesCar = myCar; 16 | console.log(myWifesCar); 17 | 18 | // Change the color of the car object 19 | myWifesCar.color = 'Pink'; 20 | 21 | // Print myCar 22 | console.log(myCar); -------------------------------------------------------------------------------- /03-js-codebase/02-class/01-operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operators in JS 7 | 8 | 9 |

Operators in JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/02-class/01-operators/script.js: -------------------------------------------------------------------------------- 1 | // Operators in JS 2 | console.log('Operators in JS'); 3 | 4 | // console.log(10 + 2); 5 | // console.log(10 - 2); 6 | // console.log(10 * 2); 7 | // console.log(10 / 2); 8 | // console.log(7 % 5); 9 | // console.log(3 ** 2); 10 | 11 | let result; 12 | 13 | result = -4 + 10; 14 | result = result - 2; 15 | result = 10 * 20; 16 | result = result / 5; 17 | result = result % 11; 18 | result = 4 ** 4; 19 | 20 | // console.log(result); 21 | 22 | // (+) Math with numbers, or you can use with string for concatenation 23 | const text = 'Yoll' + 'Academy'; 24 | const firstName = 'John'; 25 | const lastName = 'Doe'; 26 | const fullName = firstName + ' ' + lastName; 27 | // console.log(fullName); 28 | 29 | 30 | // Increment and decrement 31 | let count = 1; 32 | ++count; 33 | // count++; 34 | // console.log(count); 35 | 36 | count--; 37 | // count = count - 1; 38 | // console.log(count); 39 | 40 | 41 | // Assignment operators 42 | let num = 100; 43 | 44 | // num = num + 5; // 105 45 | // num += 5; 46 | // num -= 5; 47 | // num *= 2; 48 | // num /= 2; 49 | // num %= 14; 50 | // num **= 5; 51 | 52 | // console.log(num); 53 | 54 | // Comparison Operators 55 | // Equality (==) or (===) 56 | // console.log(2 == '2'); // == -> loose comparison and it wount check the types, will check if values are the same 57 | // console.log(2 === '2'); // === -> strict comparison and it will check the values and the types to match 58 | 59 | const x = 5; 60 | const y = 5; 61 | 62 | let comparisonResult = x === y; 63 | comparisonResult = x != y; 64 | comparisonResult = x !== y; 65 | 66 | comparisonResult = 10 > 10; 67 | comparisonResult = 10 >= 10; 68 | 69 | comparisonResult = 6 < 6; 70 | comparisonResult = 6 <= 6; 71 | 72 | // console.log(comparisonResult); 73 | 74 | 75 | let res = 10 > 5 && 8 < 8; // true && false 76 | // console.log(res); 77 | 78 | 79 | const isWeekend = false; 80 | const isHoliday = true; 81 | 82 | res = isWeekend || isHoliday; 83 | 84 | // console.log(res); 85 | 86 | const isRaining = true; 87 | 88 | console.log(!isRaining); 89 | 90 | console.log((18 > 17 && 10 <= 10) || (isWeekend || isHoliday || !isRaining)); 91 | -------------------------------------------------------------------------------- /03-js-codebase/02-class/02-type-conversions-and-coercions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Type Conversions in JS 7 | 8 | 9 |

Type Conversions in JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/02-class/02-type-conversions-and-coercions/script.js: -------------------------------------------------------------------------------- 1 | console.log('Type Conversions In JS'); 2 | 3 | // const name = prompt('Enter your name: '); 4 | // console.log('Hello ' + name); 5 | 6 | // const age = prompt('Enter your age: '); 7 | // console.log(age, typeof age); 8 | 9 | // console.log('In 2 years you will be: ', age + 2); 10 | 11 | // Conversions 12 | 13 | let someNumber = '20'; 14 | // console.log(someNumber, typeof someNumber); 15 | 16 | // String to a number 17 | // someNumber = parseInt(someNumber); // it will identify the numbers until the first not digit character 18 | // someNumber = Number(someNumber); 19 | // unary operator 20 | someNumber = +someNumber; 21 | 22 | // console.log(someNumber, typeof someNumber); 23 | 24 | // floating number 25 | 26 | let newNumber = '25.9'; 27 | // newNumber = Number(newNumber); 28 | // newNumber = +newNumber; 29 | newNumber = parseFloat(newNumber); 30 | // console.log(newNumber, typeof newNumber); 31 | 32 | let realNumber = null; 33 | // realNumber = realNumber.toString(); 34 | realNumber = String(realNumber); 35 | // realNumber = '' + realNumber; 36 | // console.log(realNumber, typeof realNumber); 37 | 38 | // Boolean Conversion 39 | let someValue = NaN; 40 | let boolResult = Boolean(someValue); 41 | // console.log(boolResult); 42 | 43 | // Type Coercion 44 | let result; 45 | 46 | let x = 5; 47 | let y = '10'; 48 | result = x + y; 49 | 50 | // Multiplication example 51 | // result = x * y; 52 | // result = x + null; 53 | // result = x + true; 54 | // result = x + false; 55 | // result = x + undefined; 56 | // result = 'ten' * 5; 57 | 58 | 59 | console.log(result, typeof result); 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /03-js-codebase/02-class/03-string-functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | String Functions in JS 7 | 8 | 9 |

String Functions in JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/02-class/03-string-functions/script.js: -------------------------------------------------------------------------------- 1 | console.log('String Functions!'); 2 | 3 | // const name = prompt('Enter name: '); 4 | // const age = prompt('Enter age: '); 5 | 6 | // let message = 'Hello ' + name + '! You entered your age as ' + age + '. Nice to meet you!'; 7 | 8 | // message = `Hello ${name}! You entered your age as ${age}. Nice to meet you`; 9 | 10 | // console.log(message); 11 | 12 | // String Functions 13 | let myString = 'Yoll Academy School.txt'; 14 | // console.log(myString.__proto__); 15 | // console.log(myString, typeof myString); 16 | 17 | let result = myString.length; 18 | 19 | result = myString.toUpperCase(); 20 | 21 | result = myString.toLowerCase(); 22 | 23 | result = myString.includes('Yoll'); 24 | 25 | result = myString.charAt(1); 26 | 27 | result = myString[0]; 28 | 29 | result = myString.indexOf('Yoll'); 30 | 31 | result = myString.substring(5); 32 | 33 | result = myString.substring(5, 12); 34 | 35 | result = myString.slice(5); 36 | 37 | result = myString.slice(-10); 38 | 39 | let myStr = ' Hello World '; 40 | result = myStr.trim(); 41 | 42 | // replace() will replace one occurance or regex 43 | // replaceAll() will replace all occurances of given character/s 44 | 45 | let sentence = 'Hello World World!'; 46 | result = sentence.replace(/World/g, 'JS'); 47 | console.log(result); 48 | // result = sentence.replace('l', '1'); 49 | 50 | // result = sentence.replace(); 51 | 52 | // let arrayWithWords = sentence.split(''); 53 | 54 | // console.log(result); 55 | 56 | 57 | // let firstName = 'Mark'; 58 | 59 | // // let greeting = 'Hello ' + firstName + '. Nice to meet you!'; 60 | 61 | // let greeting = `Hello ${firstName}. Nice to meet you!`; 62 | 63 | // console.log(greeting); 64 | 65 | 66 | // this is 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /03-js-codebase/03-class/01-number-methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Number Methods 7 | 8 | 9 |

Number Methods

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/03-class/01-number-methods/script.js: -------------------------------------------------------------------------------- 1 | console.log('Number Methods in JS'); 2 | 3 | const num = 123.9988; 4 | 5 | // identify how many digits are in the num variable 6 | let result; 7 | result = num.toString().length; 8 | 9 | // get fixed decimal points 10 | result = Number(num.toFixed(3)); 11 | 12 | // get a specific number of digits 13 | result = num.toPrecision(3); 14 | 15 | // get exponential number - for very large or very small numbers 16 | result = num.toExponential(3); 17 | 18 | // in different areas the numbers are denoted differently 19 | const newNumber = 123456.452563; 20 | result = newNumber.toLocaleString('en-US'); 21 | result = newNumber.toLocaleString('hi-IN'); 22 | result = newNumber.toLocaleString('de-DE'); 23 | result = newNumber.toLocaleString('ar-EG'); 24 | 25 | console.log(result, typeof result); 26 | -------------------------------------------------------------------------------- /03-js-codebase/03-class/02-math-object-functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Math Methods 7 | 8 | 9 |

Math Methods

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/03-class/02-math-object-functions/script.js: -------------------------------------------------------------------------------- 1 | console.log("Math Methods in JS"); 2 | 3 | let result; 4 | 5 | const x = 16; 6 | 7 | const num = 123.444; 8 | 9 | result = Math.sqrt(x); 10 | result = Math.abs(-7); 11 | result = Math.round(4.3); 12 | result = Math.round(num * 100) / 100; 13 | result = Math.ceil(4.111); 14 | result = Math.floor(4.99); 15 | result = Math.pow(2, 3); 16 | result = Math.min(22, 44, 3, 2, 54, 23, -124); 17 | result = Math.max(22, 44, 3, 2, 54, 23, -124); 18 | result = Math.random(); // 0 - 1 19 | result = Math.floor(Math.random() * 10); // 0 - 1 20 | 21 | console.log(result); 22 | -------------------------------------------------------------------------------- /03-js-codebase/03-class/03-date-object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Date Object 7 | 8 | 9 |

Date Object

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/03-class/03-date-object/script.js: -------------------------------------------------------------------------------- 1 | console.log("Date Object in JS"); 2 | 3 | let date = new Date(); 4 | 5 | // we can create the date object with custom date 6 | date = new Date('2024-11-22'); // this format sets the day to one less 7 | date = new Date('11-22-2024'); 8 | date = new Date('2024-11-22T20:10:10'); 9 | 10 | // YYYY, MM, DD, HH, mm, ss - month is set to 0 based 11 | date = new Date(2024, 10, 22, 10, 10, 10); 12 | 13 | // timestamps 14 | date = Date.now(); 15 | 16 | // timestamp of a custom date 17 | date = new Date('2024-11-22T20:10:10').getTime(); 18 | 19 | // convert the timestamp in seconds 20 | date = date / 1000; 21 | 22 | date = new Date(1732324425000); 23 | 24 | console.log(date); 25 | 26 | let newDate = new Date(); 27 | 28 | console.log(newDate.getFullYear()); 29 | console.log(newDate.getMonth()); // 0 based 30 | console.log(newDate.getDay()); 31 | console.log(newDate.getDate()); 32 | console.log(newDate.getHours()); 33 | console.log(newDate.getMinutes()); 34 | console.log(newDate.getSeconds()); 35 | 36 | let formattedDate = `${newDate.getMonth()}-${newDate.getFullYear()}`; 37 | console.log(formattedDate); 38 | 39 | 40 | // Template Literals 41 | let text = `Current year is ${newDate.getFullYear()}`; 42 | console.log(text); 43 | // console.log('Current year is ' + newDate.getFullYear()); 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /03-js-codebase/03-class/04-arrays/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays in JS 7 | 8 | 9 |

Arrays In JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/04-class/01-object-basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS Object Basics 7 | 8 | 9 |

JS Object Basics

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/04-class/01-object-basics/script.js: -------------------------------------------------------------------------------- 1 | console.log('JS Objects Basics'); 2 | let prop; 3 | // Declare an object (2 ways) 4 | 5 | // With constructor 6 | // const person = new Object({ 7 | // name: 'Bart Simpson', 8 | // age: 30, 9 | // isNewUser: true 10 | // }); 11 | 12 | // Object Literals - more performant 13 | const person = { 14 | name: 'Bart Simpson', 15 | age: 30, 16 | isNewUser: false, 17 | }; 18 | 19 | // Access the properties 20 | // 1. using dot operator 21 | prop = person.isNewUser; 22 | 23 | // 2. using square brackets 24 | prop = person['name']; 25 | 26 | // Adding more properties 27 | person.newProprty = 'Some value'; 28 | 29 | // Removing properties 30 | delete person.isNewUser; 31 | 32 | // Different properties an obj can have 33 | const newPerson = { 34 | name: 'Lisa Simpson', 35 | age: 12, 36 | isNewUser: true, 37 | 38 | // nested objects 39 | address: { 40 | street: '123 Main Street', 41 | city: 'Springfield', 42 | state: 'OR' 43 | }, 44 | 45 | // arrays 46 | hobbies: ['music', 'study'], 47 | 48 | // functions 49 | sayHi: function() { 50 | console.log(`Hello, my name is ${this.name}`); 51 | } 52 | }; 53 | 54 | newPerson.sayHi(); 55 | 56 | // access the city of the person obj 57 | console.log(newPerson); 58 | 59 | // An object can have properties with spaces 60 | const newSampleObj = { 61 | recommendedPropertyName: 'Some value here', 62 | 'not recommended property name': 'some value here as well' 63 | } 64 | 65 | console.log(newSampleObj.recommendedPropertyName); 66 | console.log(newSampleObj['not recommended property name']); 67 | 68 | 69 | console.log(person); 70 | -------------------------------------------------------------------------------- /03-js-codebase/04-class/02-object-nesting-and-spread/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS Object Destructuring 7 | 8 | 9 |

JS Object Destructuring

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/04-class/02-object-nesting-and-spread/script.js: -------------------------------------------------------------------------------- 1 | console.log('JS Object Nesting and Spread Operator'); 2 | 3 | // Nested object 4 | const newPerson = { 5 | name: 'John Doe', 6 | age: 50, 7 | isNewUser: true, 8 | address: { 9 | street: '123 Main Street', 10 | city: 'Miami', 11 | state: 'FL', 12 | zipcode: 33000, 13 | coordinates: { 14 | lat: -110, 15 | lon: 34 16 | } 17 | } 18 | } 19 | 20 | // console.log(newPerson.address.coordinates.lat); 21 | 22 | // sometimes you you will need to ccombine or merge two objects 23 | 24 | const userInfo = { 25 | name: 'Bart Simpson', 26 | dateOfBirth: new Date('1990-01-01').getTime(), 27 | isActive: false 28 | } 29 | 30 | const userCredentials = { 31 | username: 'bart.simpson', 32 | email: 'bsimpson@email.com', 33 | password: 'secret' 34 | } 35 | 36 | 37 | // combine - 2 ways 38 | const user = Object.assign({}, userInfo, userCredentials, {newProp: 'value'}); 39 | // or 40 | // use spread operator 41 | const user2 = {...userInfo, ...userCredentials}; 42 | 43 | 44 | // Arrays with objects 45 | 46 | const products = [ 47 | { 48 | id: 1, 49 | title: 'iPhone 16', 50 | price: 1299.99 51 | }, 52 | { 53 | id: 2, 54 | title: 'Samsung Laptop', 55 | price: 1499.99 56 | }, 57 | { 58 | id: 3, 59 | title: 'Google Pixel', 60 | price: 999.99 61 | } 62 | ]; 63 | 64 | // console.log(products[0].price); 65 | 66 | let result; 67 | const person = { 68 | name: 'John Doe', 69 | age: 50, 70 | isNewUser: true 71 | } 72 | 73 | 74 | // Few useful methods from Object 75 | // Object.keys() 76 | result = Object.keys(person); 77 | 78 | // Get all values separately 79 | result = Object.values(person); 80 | 81 | // Get all etries as an array 82 | result = Object.entries(person); 83 | 84 | // identify if the object has a property 85 | result = person.hasOwnProperty('name'); 86 | 87 | result = 'address' in person; 88 | 89 | console.log(result); 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /03-js-codebase/04-class/03-object-desctructuring/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS Object Nesting and Spread Operator 7 | 8 | 9 |

JS Object Nesting and Spread Operator

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/04-class/03-object-desctructuring/script.js: -------------------------------------------------------------------------------- 1 | console.log("JS Object Nesting and Spread Operator"); 2 | 3 | // // sometimes we have some variables already declared and we want to add them to an object 4 | // const firstName = "Bart"; 5 | // const lastName = "Doe"; 6 | 7 | // const user = { 8 | // id: 1, 9 | // firstName, 10 | // lastName, 11 | // }; 12 | 13 | // console.log(user); 14 | 15 | // // Destructuring The Object 16 | 17 | // const product = { 18 | // id: 1, 19 | // name: "Laptop", 20 | // price: 1000.99, 21 | // stock: 5, 22 | // info: { 23 | // make: "Dell", 24 | // model: "XPS 11", 25 | // }, 26 | // }; 27 | 28 | // // const id = product.id; 29 | // // 1. The variables in {} are declared as id and name 30 | // // 2. The prperties of product object with same names will be accessed 31 | // // 3. The value of id and name from product object is assigned to newly created variables 32 | // const { 33 | // id, 34 | // name, 35 | // info: { make }, 36 | // } = product; 37 | // // console.log(id, name, make); 38 | 39 | // // destructuring with change of variables 40 | // console.log(product); 41 | // // const { id: productId, name: productName } = product; 42 | 43 | // const productId = product.id; 44 | // const productName = product.name; 45 | 46 | 47 | // console.log(productId, productName); 48 | 49 | // // Array destructuring 50 | // const arr = [10, 20, 30, 40, 50]; 51 | 52 | 53 | // // rest operator, the syntax is exact as in spread operator 54 | // const [x, y, ...rest] = arr; 55 | 56 | // console.log(x, y); 57 | // console.log(rest); 58 | 59 | 60 | let user = { 61 | id: 1, 62 | firstName: 'John', 63 | lastName: 'Doe', 64 | }; 65 | 66 | console.log(user); 67 | 68 | // let id = user.id; 69 | let { id } = user; 70 | 71 | // let productId = user.id; 72 | let { id: productId } = user; 73 | 74 | user.productId = 1; 75 | delete user.id; 76 | 77 | console.log(user); 78 | 79 | console.log(`productId: ${productId}`); 80 | 81 | -------------------------------------------------------------------------------- /03-js-codebase/04-class/04-json/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JSON Intro 7 | 8 | 9 |

JSON Intro

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/04-class/04-json/newFile.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "title": "Product 1", 5 | "price": 1000 6 | }, 7 | { 8 | "id": 1, 9 | "title": "Product 1", 10 | "price": 1000 11 | }, 12 | { 13 | "id": 1, 14 | "title": "Product 1", 15 | "price": 1000 16 | } 17 | ] -------------------------------------------------------------------------------- /03-js-codebase/04-class/04-json/script.js: -------------------------------------------------------------------------------- 1 | console.log("JSON Intro"); 2 | 3 | // JSON - Java Script Object Notation 4 | const product = { 5 | id: 1, 6 | name: 'Product 1', 7 | description: 'Description of Product 1', 8 | price: 1000.99 9 | } 10 | 11 | console.log(product); 12 | 13 | // convert js object to a json 14 | const jsonProduct = JSON.stringify(product); 15 | console.log(jsonProduct); 16 | 17 | // parse from text to a JS object 18 | const parsedProduct = JSON.parse(jsonProduct); 19 | console.log(parsedProduct); 20 | 21 | // commonly you have arrays 22 | const products = [ 23 | { 24 | id: 1, 25 | name: 'Product 1', 26 | description: 'Description of Product 1', 27 | price: 1000.99 28 | }, 29 | { 30 | id: 2, 31 | name: 'Product 2', 32 | description: 'Description of Product 2', 33 | price: 1000.99 34 | }, 35 | { 36 | id: 3, 37 | name: 'Product 3', 38 | description: 'Description of Product 3', 39 | price: 1000.99 40 | } 41 | ]; 42 | 43 | console.log(products); 44 | 45 | const jsonProductsArray = JSON.stringify(products); 46 | console.log(jsonProductsArray); 47 | 48 | const parsedArrayWithProducts = JSON.parse(jsonProductsArray); 49 | console.log(parsedArrayWithProducts); -------------------------------------------------------------------------------- /03-js-codebase/05-class/01-functions-basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS Function Basics 7 | 8 | 9 |

JS Function Basics

10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /03-js-codebase/05-class/01-functions-basics/script.js: -------------------------------------------------------------------------------- 1 | console.log("JS Function Basics"); 2 | 3 | // A function is a way to group code together 4 | // You can then, call the function to execute that code multiple times 5 | 6 | // declare a function 7 | function sayHi() { 8 | console.log("Hello, from function"); 9 | console.log("This code can be reused!"); 10 | console.log("Byeee!"); 11 | } 12 | 13 | // call the function 14 | // sayHi(); 15 | // sayHi(); 16 | // sayHi(); 17 | 18 | // Ususally you will need to pass some data 19 | // Parameters and Arguments 20 | function sayHello(name) { 21 | // params are bind to the scope of this function 22 | console.log(`Hello, I'm ${name}`); 23 | } 24 | 25 | const x = "Dima"; 26 | // sayHello(x); 27 | // sayHello('John'); 28 | 29 | // You can declare multiple parameters 30 | function addNumbers(num1, num2) { 31 | console.log(num1 + num2); 32 | } 33 | 34 | // Usually, we will want to process the data and then return it back to the caller 35 | function subtractNumbers(num1, num2) { 36 | // everything before return statemnt will be run 37 | // console.log('before return'); 38 | return num1 - num2; 39 | console.log("after return"); 40 | // you cannot have any other lines of code after the return statement 41 | } 42 | 43 | const result = subtractNumbers(20, 10); 44 | // console.log(result); 45 | // console.log(subtractNumbers(33, 12)); 46 | 47 | // Parameters and Arguments in depth 48 | // we can assign to the parameter a default value to prevent any issues 49 | // and avoind having our param set do undefined 50 | function createUser(user = "No info") { 51 | return `User with name ${user} has been created!`; 52 | } 53 | 54 | let res = createUser("John"); 55 | 56 | // console.log(res); 57 | 58 | // Rest parameter 59 | // with the rest operator it will collect all the arugments and place into an array 60 | // then you can iterate over the array and process it 61 | function sumAll(...nums) { 62 | let total = 0; 63 | for (let num of nums) { 64 | total += num; 65 | } 66 | return total; 67 | } 68 | 69 | res = sumAll(10, 20, 30, 430); 70 | 71 | console.log(res); 72 | 73 | // Object as parameter 74 | 75 | function logUser(user) { 76 | // object {name: '', age: 0} 77 | return `User ${user.name} is ${user.age} years old! Hello There.`; 78 | } 79 | 80 | const user = { 81 | name: "John Doe", 82 | age: 30, 83 | }; 84 | 85 | // res = logUser(user); 86 | 87 | console.log(logUser(user)); 88 | 89 | // cretae a function that randomnly picks a number from given array, or list of nums 90 | const numbers = [11, 2, 3, 44, 55, 4]; 91 | 92 | // console.log(Math.random() * numbers.length); 93 | 94 | 95 | 96 | // const randIndex = Math.floor(Math.random() * numbers.length); // 0 - 1, 5.9999677836 -> 5 97 | // console.log(numbers[randIndex]); 98 | 99 | function getRandom(arr){ 100 | const randIndex = Math.floor(Math.random() * arr.length); 101 | return arr[randIndex]; 102 | } 103 | 104 | // console.log(getRandom(numbers)); 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /03-js-codebase/05-class/02-function-expr-arrow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS Function Expression and Arrow 7 | 8 | 9 |

JS Function Expression and Arrow

10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /03-js-codebase/05-class/02-function-expr-arrow/script.js: -------------------------------------------------------------------------------- 1 | console.log("JS Function Expression and Arrow"); 2 | 3 | // Basic declaration (Function declaration) 4 | function add(x, y) { 5 | // function is hoisted 6 | return x + y; 7 | } 8 | 9 | // console.log(add(10, 20)); 10 | 11 | // Function Expression 12 | const multiply = function (x, y) { 13 | // not hoisted 14 | return x * y; 15 | }; 16 | 17 | // console.log(multiply(10, 2)); 18 | 19 | // Arrow Functions - Not Hoisted 20 | // const subtract = (x, y) => { 21 | // return x - y; 22 | // }; 23 | 24 | const subtractShort = (x, y) => x - y; 25 | console.log(subtractShort(10, 5)); 26 | 27 | // // if you have only one parameter - you can ommit paranthesys 28 | // const multiplyByTwo = num => num * 2; 29 | 30 | // console.log(multiplyByTwo(30)); 31 | 32 | // Array - iterate over 33 | // const nums = [10, 20, 30, 40, 50]; 34 | 35 | // nums.forEach(function(num){ 36 | // console.log(num); 37 | // }); 38 | 39 | // nums.forEach(num => console.log(num)); 40 | 41 | // when we need to return an object we will use () to avoid confusion 42 | const createUser = () => ({name: 'John', age: 30}); -------------------------------------------------------------------------------- /03-js-codebase/05-class/03-iife-functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS IIFE (Immidiately Invoked Functyion Expression) 7 | 8 | 9 |

JS IIFE (Immidiately Invoked Functyion Expression)

10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /03-js-codebase/05-class/03-iife-functions/script.js: -------------------------------------------------------------------------------- 1 | console.log('JS IIFE (Immidiately Invoked Function Expression)'); 2 | 3 | // const user = 'Dima'; 4 | // console.log(user); 5 | 6 | (function(name){ 7 | 8 | const user = name; 9 | console.log(user); 10 | 11 | })('Dima'); 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/05-class/03-iife-functions/script2.js: -------------------------------------------------------------------------------- 1 | const user = 'John'; 2 | console.log(user); -------------------------------------------------------------------------------- /03-js-codebase/05-class/04-challenge/challenge.md: -------------------------------------------------------------------------------- 1 | # Functions Challeneges 2 | 3 | ## Problem 1: Convert Miles to Kilometers 4 | 5 | Create a function called `getKilometers` to convert miles to kilometers. The function will take an argument as `miles` and return the equivalent distance in kilometers. 6 | `1 kilometer = 0.621371 miles.` 7 | 8 | Example: 9 | ```javascript 10 | console.log(getKilometers(20)); // 32.19 kilometers 11 | ``` 12 | 13 | Additionaly make it arrow function. 14 | 15 | ## Problem 2: Convert Fahrenheit to Celsius 16 | 17 | Create a function called getCelsius that takes a temperature in Fahrenheit as an argument and returns the temperature in Celsius. 18 | • Enhance the output by appending "C" or "\xB0" to indicate degrees Celsius. 19 | 20 | Example: 21 | ```javascript 22 | console.log(getCelsius(32)); // 0°C 23 | ``` 24 | 25 | ## Problem 3: Find Minimum and Maximum in an Array 26 | 27 | Create an arrow function called minMax() that takes an array of numbers as input and returns an object containing the minimum and maximum numbers from the array. 28 | 29 | Example: 30 | ```javascript 31 | minMax([22, 34, 5, 123]); // { min: 5, max: 123 } 32 | ``` 33 | 34 | ## Problem 4: Immediately Invoked Function Expression (IIFE) 35 | 36 | Create an IIFE that takes the radius of a circle and calculates the circumference. The result should be logged immediately. 37 | • Circumference = 2 * Math.PI * radius. 38 | 39 | 40 | ```javascript 41 | // Output for radius = 5 42 | "The circumference is 31.42" 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /03-js-codebase/05-class/04-challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Practice Problems 7 | 8 | 9 |

Practice Problems

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/05-class/04-challenge/script.js: -------------------------------------------------------------------------------- 1 | // console.log('Practice Problems'); 2 | // Problem 1: 3 | // regular declarion 4 | function getKilometers(miles) { 5 | return (miles / 0.621371).toFixed(2); 6 | } 7 | 8 | // arrow function 9 | const convertToKilometers = (miles) => (miles / 0.621371).toFixed(2); 10 | 11 | // console.log(getKilometers(20)); 12 | // console.log(convertToKilometers(20)); 13 | 14 | // Problem 2: 15 | const getCelsius = (f) => { 16 | // (32°F − 32) × 5/9 17 | const celsius = (((f - 32) * 5) / 9).toFixed(1); 18 | return `${celsius}\xB0C`; 19 | }; 20 | 21 | // console.log(getCelsius(100)); 22 | 23 | // Problem 3 24 | function minMax(arr) { 25 | const copyArr = [...arr]; 26 | copyArr.sort(); // TODO - sort method with numbers trick 27 | const min = copyArr[0]; 28 | const max = copyArr[copyArr.length - 1]; 29 | return {min, max} 30 | } 31 | 32 | function minMax2(arr){ 33 | const min = Math.min(...arr); 34 | const max = Math.max(...arr); 35 | return {min, max} 36 | } 37 | 38 | console.log(minMax([2, 3, 2, 9, 3, 4, 2])); 39 | console.log(minMax2([2, 3, 122, 93, 34, 46, 27])); 40 | 41 | 42 | // Problem 4: 43 | (function(radius){ 44 | const circ = (2 * Math.PI * radius).toFixed(2); 45 | console.log(`The circumference is ${circ}`); 46 | })(5); 47 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/01-if-statement-basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | If Statement Basics 7 | 8 | 9 |

If Statement Basics

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/01-if-statement-basics/script.js: -------------------------------------------------------------------------------- 1 | console.log('If Statement Basics'); 2 | 3 | 4 | // If statement allows us to execute a block of code based on a condition 5 | // if (cond) { 6 | // code to execute 7 | // } 8 | 9 | if(true){ 10 | console.log('This is true and code runs!'); 11 | } 12 | 13 | if(false){ 14 | console.log('This is NOT true and code WONT runs!'); 15 | } 16 | 17 | // Weather App 18 | const temperature = 101; 19 | 20 | if(temperature >= 100){ 21 | console.log('Heat warning: Stay Hydraded!'); 22 | } 23 | 24 | // Passing score quiz application 25 | const score = 60; 26 | const passingScore = 60; 27 | 28 | // if(score >= passingScore){ 29 | // console.log(`Congratulations! You passed the test with score as ${score}`); 30 | // } 31 | 32 | // Each if statement can have an optional else statement that is run specifically when the condition is false 33 | // else statement has to always attached to an if statement 34 | if(score >= passingScore){ 35 | console.log(`Congratulations! You passed the test with score as ${score}`); 36 | } else { 37 | console.log(`Sorry, your score as ${score} is too low. Please try again.`); 38 | } 39 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/02-if-else-statements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | If Else Statements 7 | 8 | 9 |

If Else Statements

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/02-if-else-statements/script.js: -------------------------------------------------------------------------------- 1 | console.log("If Else Statements"); 2 | const score = 60; 3 | const passingScore = 60; 4 | 5 | // the variables declared as const and let are scoped to the if statement block 6 | // const and let are scoped means they will not be accessible outside of this if statement block 7 | if (score >= passingScore) { 8 | const bonusPoints = 10; 9 | console.log( 10 | `Congrats! You passed the test and you got bonus points ${bonusPoints}` 11 | ); 12 | } 13 | 14 | // console.log(bonusPoints); 15 | 16 | // Shorthand for if statements 17 | const isLoggedIn = true; 18 | 19 | if (isLoggedIn) 20 | console.log("Welcome back!"), 21 | console.log("This stetament is shown when you are logged in"); 22 | else console.log("Please log in!"); 23 | 24 | // Multiple conditions 25 | const playerLevel = 700; 26 | let level; 27 | // Beginners less 500, Intermid less 1000, Advanced above 1000 28 | // when you get over 5 or more else if (in that case switch becomes cleaner) 29 | 30 | if (playerLevel < 500) { 31 | level = "Beginner"; 32 | } else if (playerLevel < 1000) { 33 | level = "Intermediate"; 34 | } else { 35 | level = "Advanced"; 36 | } 37 | 38 | console.log(`Player Level: ${level}`); 39 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/03-nested-if-statements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Nested If Statements 7 | 8 | 9 |

Nested If Statements

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/03-nested-if-statements/script.js: -------------------------------------------------------------------------------- 1 | console.log("Nested If Statements"); 2 | 3 | // Nested If Statements 4 | const playerPoints = 150; 5 | let level; 6 | 7 | if (playerPoints < 500) { 8 | level = "Beginner"; 9 | 10 | if(playerPoints > 400) { 11 | level += ": Platinum"; 12 | } else if (playerPoints > 200){ 13 | level += ": Gold"; 14 | } 15 | 16 | } else if (playerPoints < 1000) { 17 | level = "Intermediate"; 18 | 19 | if(playerPoints > 800){ 20 | level += ": Gold"; 21 | } 22 | 23 | } else { 24 | level = "Advanced"; 25 | } 26 | 27 | console.log(level); 28 | 29 | // Multiple conditions with logical operators 30 | const gamesPlayed = 10; 31 | const winRate = 80; 32 | 33 | if(gamesPlayed >= 10){ 34 | if(winRate >= 70){ 35 | console.log('Expert Player Badge.'); 36 | } else { 37 | console.log('Great Player Badge.'); 38 | } 39 | } 40 | 41 | if(gamesPlayed >= 10 && winRate >= 70){ 42 | console.log('Expert Player Badge.'); 43 | } else { 44 | console.log('Great Player Badge.'); 45 | } 46 | 47 | // Date object gives access to hours 48 | 49 | const date = new Date(2024, 11, 2, 6, 20, 0); // YYYY, MM, DD, HH, mm, ss 50 | const hours = date.getHours(); 51 | console.log(hours); 52 | 53 | // if its in between 8AM and 5PM then we clg It is work time! 54 | if(hours >= 8 && hours <= 17){ 55 | console.log('It is working time!'); 56 | } else { 57 | console.log('The work day is finished!'); 58 | } 59 | 60 | // if it is 6 am or 8 pm - brush your teeth 61 | if(hours === 6 || hours === 20){ 62 | console.log('Brush your teeth.'); 63 | } -------------------------------------------------------------------------------- /03-js-codebase/06-class/04-switch-case-statements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Switch Case Statements 7 | 8 | 9 |

Switch Case Statements

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/04-switch-case-statements/script.js: -------------------------------------------------------------------------------- 1 | console.log("Switch Case Statements"); 2 | 3 | // I want to print based on the month number the name of the month 4 | const date = new Date(2024, 11, 2, 30, 0, 0); // 0-11, 1-31, 0-24 5 | const month = date.getMonth(); 6 | console.log(date); 7 | 8 | // if statement version 9 | // if (month === 0) { 10 | // console.log("It is January"); 11 | // } else if (month === 1) { 12 | // console.log("It is February"); 13 | // } else if (month === 2) { 14 | // console.log("It is March"); 15 | // } else { 16 | // console.log("No such month number!"); 17 | // } 18 | 19 | // swicth case statement version 20 | 21 | switch (month) { 22 | case 0: 23 | console.log("It is January"); 24 | break; 25 | case 1: 26 | console.log("It is February"); 27 | break; 28 | case 2: 29 | console.log("It is March"); 30 | break; 31 | default: 32 | console.log("No such month number!"); 33 | break; 34 | } 35 | 36 | const hours = date.getHours(); 37 | console.log(`Current hours ${hours}`); 38 | 39 | 40 | // ranges in switch 41 | switch (true) { 42 | case hours < 12: // 20 43 | console.log('Good morning!'); 44 | break; 45 | case hours < 18: 46 | console.log('Good agternoon!'); 47 | break; 48 | case hours <= 24: 49 | console.log('Good night!'); 50 | break; 51 | default: 52 | console.log('Not sure what to say!'); 53 | break; 54 | } 55 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/05-challenge-switch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Challenge Switch 7 | 8 | 9 |

Challenge Switch

10 |

11 | Create a function that takes 2 numbers and an operator as argumentrs 12 | The operator can be +, -, *, /. 13 | The function should return the result of the calculation, 14 | if anything other than the four operators is passed in, the function should return an error message 15 |

16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/05-challenge-switch/script.js: -------------------------------------------------------------------------------- 1 | console.log("Challenge Switch"); 2 | 3 | // create a function 4 | function calculate(num1, num2, operator) { 5 | // +, -, *, /, error 6 | let result; 7 | switch (operator) { 8 | case "+": 9 | result = num1 + num2; 10 | break; 11 | case "-": 12 | result = num1 - num2; 13 | break; 14 | case "*": 15 | result = num1 * num2; 16 | break; 17 | case "/": 18 | result = num1 / num2; 19 | break; 20 | default: 21 | result = "Invalid operator!"; 22 | break; 23 | } 24 | 25 | return result; 26 | } 27 | 28 | const total = calculate(5, 2, "#"); 29 | console.log(total); 30 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/06-truthy-false-if-statements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Truthy and Falsy Values with If Statements 7 | 8 | 9 |

Truthy and Falsy Values with If Statements

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/06-truthy-false-if-statements/script.js: -------------------------------------------------------------------------------- 1 | console.log("Truthy and Falsy Values with If Statements"); 2 | 3 | // Falsy values: false, 0, ('', "", ``), null, undefined, NaN 4 | // Truthy: Evrything else, including: [], {}, '0', 'false' 5 | 6 | const givenValue = false; 7 | 8 | if(NaN){ 9 | console.log(`${givenValue} is truthy.`); 10 | } else { 11 | console.log(`${givenValue} is falsy.`); 12 | } 13 | 14 | const email = ''; 15 | 16 | if(email){ 17 | console.log('The email is present.'); 18 | } else { 19 | console.log('The email is missing.'); 20 | } 21 | 22 | // Loose equality 23 | // (==) - (===) 24 | // undefined and null will not get coerced (undefined can be loosly compared to null) 25 | // console.log(false == 0); 26 | // console.log('' == 0); 27 | // console.log(undefined == null); 28 | 29 | 30 | // Logical Operators 31 | // console.log(10 < 20 && 50 >= 60); 32 | // console.log(10 < 20 || 50 >= 60); 33 | 34 | // && with single values will retun back first falsy or last value 35 | // short circuit 36 | // // t t 37 | // console.log(10 && 20); 38 | // console.log(10 && 20 && 30); 39 | // console.log(10 && '' && 20 && 30); 40 | 41 | // posts 42 | const posts = []; 43 | posts.length > 0 && console.log(posts[0]); 44 | 45 | // The OR Operator - will return the first truthy value 46 | console.log(10 || 20); 47 | console.log(0 || 100); 48 | console.log(0 || null || "" || undefined); 49 | 50 | // The ?? - double coalecing operator - it returns the second value when the first is null or undefined 51 | console.log(10 ?? 20); 52 | console.log(null ?? 20); 53 | console.log(undefined ?? 200); 54 | 55 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/07-logical-assignment-operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Logical Assignment Operators 7 | 8 | 9 |

Logical Assignment Operators

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/07-logical-assignment-operators/script.js: -------------------------------------------------------------------------------- 1 | console.log("Logical Assignment Operators"); 2 | 3 | // ||= will assign the right side on if the left is a falsy value 4 | // &&= will assign the right side on if the left is a truthy value 5 | // ??= will assign the right side on if the left is a null or undefined value 6 | 7 | let test = 0; 8 | 9 | // option 1 10 | if(!test){ 11 | test = 100; 12 | } 13 | 14 | // option 2 15 | test = test || 100; 16 | 17 | // shorter - ||= 18 | test ||= 100; 19 | 20 | console.log(test); 21 | 22 | 23 | // example 24 | const config = {theme: 'dark'}; // light, dark, modern dark etc... 25 | 26 | // if(!config.theme){ 27 | // config.theme = 'light'; 28 | // } 29 | 30 | config.theme ||= 'light'; 31 | console.log(config.theme); 32 | 33 | 34 | // &&= will assign the right side on if the left is a truthy value 35 | 36 | let newTest = 'some value'; 37 | 38 | // option 1 39 | if(newTest){ 40 | newTest = 'reset value'; 41 | } 42 | 43 | // option 2 44 | newTest = newTest && 'reset value'; 45 | 46 | // option 3 47 | newTest &&= 'reset value'; 48 | 49 | console.log(newTest); 50 | 51 | 52 | // real example 53 | let isLoggedIn = true; 54 | 55 | // when user clicks on log out 56 | // if(isLoggedIn){ 57 | // isLoggedIn = false; 58 | // } 59 | 60 | isLoggedIn &&= false; 61 | 62 | console.log(isLoggedIn); 63 | 64 | // ??= - will assign the right side on if the left is a null or undefined value 65 | 66 | let userInfo = 'Dima'; 67 | 68 | if(userInfo === null || userInfo === undefined){ 69 | userInfo = 'No information provided'; 70 | } 71 | 72 | userInfo = userInfo ?? 'No information provided'; 73 | 74 | userInfo ??= 'No information provided'; 75 | 76 | console.log(userInfo); 77 | 78 | 79 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/08-ternary-operator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ternary Operator 7 | 8 | 9 |

Ternary Operator

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/06-class/08-ternary-operator/script.js: -------------------------------------------------------------------------------- 1 | console.log("Ternary Operator"); 2 | 3 | const age = 15; 4 | 5 | // if (age >= 18) { 6 | // console.log('You can drive!'); 7 | // } else { 8 | // console.log('You CANNOT drive!'); 9 | // } 10 | 11 | // Ternary operator 12 | // condition ? ex if true left side : ex if false right side; 13 | // age >= 18 ? console.log('You can drive!') : console.log('You CANNOT drive!'); 14 | 15 | // usually you need to assign a value based on condition 16 | const canDrive = age >= 18 ? "You can drive" : "You CANNOT drive!"; 17 | console.log(canDrive); 18 | 19 | // Multiple statemenst 20 | 21 | const isUserAuth = false; 22 | 23 | // if(isUserAuth){ 24 | // alert('Welcome to homepage!'); 25 | // redirect = '/homepage'; 26 | // } else { 27 | // alert('Access Denied!'); 28 | // redirect = '/login'; 29 | // } 30 | 31 | const redirect = isUserAuth 32 | ? (alert("Welcome to homepage!"), "/homePageFromTeranary") 33 | : (alert("Access Denied!"), "/loginFromTernary"); 34 | 35 | console.log(redirect); 36 | -------------------------------------------------------------------------------- /03-js-codebase/07-class/01-for-loop-basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | For Loop 7 | 8 | 9 |

For Loop

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/07-class/01-for-loop-basics/script.js: -------------------------------------------------------------------------------- 1 | console.log("For Loops"); 2 | 3 | // For Loop used to repeat a block of code when the numer of repetitions needed is known 4 | // for(intinialization; condition; increment/decrement){ 5 | // // code to repeat 6 | // } 7 | 8 | // intinialization - giving a variable to our counter, and an initial value as a start point 9 | // condition - a condition that checks the counter if matches a specific test, if true the body will be executed, if false it will stop 10 | // increment/decrement - after the loop body has been executed, the counter will be incremented or decremented 11 | 12 | // log Number 1 till 10 in the console 13 | // for(let i = 10; i >= 1; i--){ 14 | // console.log(`Number ${i}`); 15 | // } 16 | 17 | // Variation of increment 18 | // for(let i = 0; i <= 10; i += 5){ 19 | // console.log(`Number ${i}`); 20 | // } 21 | 22 | // Use if statements in loop 23 | // for(let i = 1; i <= 10; i++){ 24 | // if(i === 7){ 25 | // console.log(`${i} is my lucky number!`); 26 | // } else { 27 | // console.log(`Number ${i}`); 28 | // } 29 | // } 30 | 31 | // You can also nest loops 32 | // outer loop 33 | // for(let i = 1; i <= 10; i++){ // all variables declared here are scoped to for loop block 34 | // console.log(`Current Number Is: ${i}`); 35 | 36 | // // inner loop 37 | // for(let j = 1; j <= 10; j++){ 38 | // console.log(`${i} * ${j} = ${i * j}`); 39 | // } 40 | // } 41 | 42 | // Loop througth an array 43 | // const simpsons = ["Homer", "Marge", "Bart", "Lisa", "Maggie", "Abe", "Mona"]; 44 | 45 | // for (let i = 0; i < simpsons.length; i++) { 46 | // // if (i === 3) { 47 | // // console.log(`${simpsons[i]} is the best character in the show!`); 48 | // // } else { 49 | // // console.log(simpsons[i]); 50 | // // } 51 | 52 | // if (simpsons[i] === 'Bart') { 53 | // console.log(`${simpsons[i]} is the best character in the show!`); 54 | // } else { 55 | // console.log(simpsons[i]); 56 | // } 57 | // } 58 | 59 | // '', "", `` -> all are equally strings 60 | // console.log('One' === 'One'); 61 | // console.log('One' === "One"); 62 | // console.log('One' === `One`); 63 | 64 | // console.log('One', typeof 'One'); 65 | // console.log("One", typeof "One"); 66 | // console.log(`One`, typeof `One`); 67 | 68 | // Break and Continue statements 69 | // for(let i = 1; i <= 20; i++){ // i = 13 = true 70 | // console.log(`Number: ${i}`); 71 | 72 | // if(i === 13){ 73 | // console.log('Breaking here...'); 74 | // break; 75 | // } 76 | // } 77 | 78 | // for(let i = 1; i <= 20; i++){ // i = 13 = true 79 | // if(i === 13){ 80 | // console.log('Skipping here...'); 81 | // continue; 82 | // } 83 | // console.log(`Number: ${i}`); 84 | // } 85 | 86 | -------------------------------------------------------------------------------- /03-js-codebase/07-class/02-while-and-do-while-loops/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | While and Do While Loop 7 | 8 | 9 |

While and Do While Loop

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/07-class/02-while-and-do-while-loops/script.js: -------------------------------------------------------------------------------- 1 | console.log("While and Do While Loop"); 2 | 3 | // while is used when you don't know exactly the number of iterations 4 | 5 | let i = 21; 6 | 7 | while(i <= 20){ // false 8 | console.log(`Number ${i}`); 9 | i++; 10 | } 11 | 12 | // do while - will make sure that the body is executed at least once before it will check the condition 13 | 14 | let num = 21; 15 | 16 | do { 17 | console.log(`Number is ${num}`); 18 | num++; 19 | } while(num <= 20); 20 | -------------------------------------------------------------------------------- /03-js-codebase/07-class/03-for-of-and-for-in-loops/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | For Of and For In Loops 7 | 8 | 9 |

For Of and For In Loops

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/07-class/03-for-of-and-for-in-loops/script.js: -------------------------------------------------------------------------------- 1 | console.log("For Of and For In Loops"); 2 | 3 | // Array 4 | // const products = ['laptop', 'phone', 'tablet', 'pc']; 5 | 6 | // Option 1 7 | // for (let index = 0; index < products.length; index++) { 8 | // console.log(products[index]); 9 | // } 10 | 11 | // For Of Loop - is used to iterate over iterable objects 12 | // for(const product of products){ // product will be reinitialized every iteration 13 | // console.log(product); 14 | // } 15 | 16 | // Array with objects 17 | // const users = [ 18 | // {name: 'John', age: 35}, 19 | // {name: 'Jane', age: 30}, 20 | // {name: 'Jake', age: 15}, 21 | // {name: 'Jude', age: 5}, 22 | // ]; 23 | // console.log('Users over 30 y.o'); 24 | // for(const user of users){ 25 | // if(user.age >= 30){ 26 | // console.log(user.name); 27 | // } 28 | // } 29 | 30 | // Iterating over strings 31 | // const str = 'Hello World'; 32 | 33 | // // option 1 34 | // for (let index = str.length - 1; index >= 0; index--) { 35 | // // console.log(str.charAt(index)); 36 | // console.log(str[index]); 37 | // } 38 | 39 | // // Option 2 40 | // for(const letter of str){ 41 | // console.log(letter); 42 | // } 43 | 44 | 45 | // For In allows us to iterate over the objects 46 | 47 | // const car = { 48 | // make: 'BMW', 49 | // model: 'M5', 50 | // doors: 5, 51 | // type: 'Sedan', 52 | // maxSpeed: 160, 53 | // hp: 300 54 | // } 55 | 56 | // for(const key in car){ 57 | // console.log(car[key]); 58 | // } 59 | 60 | 61 | // You can use this for arrays as well 62 | // const products2 = ['laptop', 'phone', 'tablet', 'pc']; 63 | 64 | // for(const index in products2){ 65 | // console.log(products2[index]); 66 | // } 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /03-js-codebase/07-class/04-array-high-order-functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Array High Order Functions 7 | 8 | 9 |

Array High Order Functions

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/07-class/04-array-high-order-functions/script.js: -------------------------------------------------------------------------------- 1 | console.log("Array High Order Functions"); 2 | 3 | // For Each 4 | 5 | // High Order Function - is a function that recieves a function as an arguments 6 | // The function that is passed as an argument is called callback function. 7 | 8 | // const technologies = [ 9 | // "HTML", 10 | // "CSS", 11 | // "JavaScript", 12 | // "React", 13 | // "Bootstrap", 14 | // "Python", 15 | // "Flask", 16 | // ]; 17 | 18 | // // Option 1 - Anonymous function 19 | // technologies.forEach(function(item){ 20 | // console.log(item); 21 | // }); 22 | 23 | // Option 2 = Arrow Function 24 | // technologies.forEach((item) => console.log(item)); 25 | 26 | // // Option 3 27 | // function logItems(tech){ 28 | // console.log(tech); 29 | // } 30 | 31 | // technologies.forEach(logItems); 32 | 33 | // You can also pass currentItem, idndex, access the whole arr 34 | 35 | // technologies.forEach((item, index, arr) => console.log(`${index + 1} - ${item} from [${arr}]`)); 36 | 37 | // const cars = [ 38 | // { make: "BMW", model: "M5", year: 2020 }, 39 | // { make: "Mercedes", model: "AMG S500", year: 2024 }, 40 | // { make: "Tesla", model: "Cybertrack", year: 2023 }, 41 | // { make: "Porche", model: "Cayene", year: 2021 }, 42 | // ]; 43 | 44 | // cars.forEach((car) => console.log(car.model)); 45 | 46 | // Filtering - filter() 47 | // const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 48 | 49 | // const evenNumber = []; 50 | // numbers.forEach((number) => { 51 | // if(number % 2 === 0){ 52 | // evenNumber.push(number); 53 | // } 54 | // }); 55 | 56 | // console.log(evenNumber); 57 | 58 | // arr.filter() - will return back a new array with all the elements that meet the criteria 59 | 60 | // const evenNumbers = numbers.filter(function(num){ 61 | // return num % 2 === 0; 62 | // }); 63 | // const evenNumbers = numbers.filter((number) => number % 2 === 0); 64 | 65 | // console.log(evenNumbers); 66 | 67 | 68 | // map() - will allow you to modify the array elements using another array as base 69 | // this function will return a new function with modified elements 70 | const numbers = [10, 20, 30, 40, 50]; // ['Number 10', 'Number 20'] 71 | 72 | // option 1 73 | // const newNumbers = []; 74 | 75 | // numbers.forEach((num) => { 76 | // newNumbers.push(num * 2); 77 | // }); 78 | 79 | // option 2 80 | // const newNumbers = numbers.map((num) => 'Number ' + num); 81 | 82 | // console.log(newNumbers); 83 | 84 | 85 | // // reduce() - will allow you to accumulate all the data in a single value 86 | // const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 87 | 88 | // // let sum = 0; //10 89 | 90 | // // arr.forEach((number) => { // 4 91 | // // sum = sum + number; // sum = 6 + 4 = 10 92 | // // }); 93 | 94 | // // console.log(sum); 95 | 96 | // // accumulator/prevoiusValue, currentValue 97 | // const sum = arr.reduce((acc, cur) => acc + cur, 0); 98 | 99 | // console.log(sum, typeof sum); 100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /03-js-codebase/07-class/05-playground-high-order-functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise High Order Functions 7 | 8 | 9 |

Exercise High Order Functions

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/08-class/01-dom-basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM Basics 7 | 19 | 20 | 21 | 22 |

DOM Basics

23 | 24 |

User Name

25 | 26 |
27 | Yoll Academy
28 | Google
29 | Yoll Academy
30 | 31 |

Here goes the paragraph!

32 | 33 |
34 | 35 | 36 |
37 |
38 |
39 | 40 | 41 |
42 | 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /03-js-codebase/09-class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Daily Goal Tracker 7 | 8 | 9 | 10 |
11 |
12 | 13 | 20 | 21 |
    22 |
  • 23 | Exercise 1hr 24 | 25 |
    • 26 |
  • 27 | Study Before Work 28 | 29 |
    • 30 |
  • 31 | 10,000 Steps 32 | 33 |
    • 34 |
35 |
36 |
37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /03-js-codebase/09-class/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Arial, Helvetica, sans-serif; 9 | background-color: #0a192f; /* Dark blue background */ 10 | } 11 | 12 | .container { 13 | width: 100vw; 14 | /* min-height: 100vh; */ 15 | display: flex; 16 | justify-content: center; 17 | align-items: top; 18 | padding: 3rem; 19 | } 20 | 21 | .tracker { 22 | min-width: 500px; 23 | max-width: 800px; 24 | display: flex; 25 | flex-direction: column; 26 | } 27 | 28 | .add-btn::before{ 29 | content: '+ '; 30 | } 31 | 32 | .add-btn { 33 | max-width: 200px; 34 | font-size: 1.5rem; 35 | padding: 0.6rem 2rem; 36 | background-color: #64ffda; /* Neon mint */ 37 | color: #0a192f; /* Dark blue text */ 38 | border: none; 39 | border-radius: 5px; 40 | transition: all 0.3s ease; 41 | } 42 | 43 | .add-btn:hover { 44 | background-color: #4dd5bd; 45 | box-shadow: 0 0 15px rgba(100, 255, 218, 0.5); 46 | } 47 | 48 | input { 49 | border: none; 50 | background-color: transparent; /* Subtle neon background */ 51 | border-bottom: 2px solid #64ffda; /* Neon mint border */ 52 | padding: 1rem; 53 | font-size: 1.2rem; 54 | margin: 1rem 0; 55 | color: #64ffda; /* Neon mint text */ 56 | } 57 | 58 | input::placeholder { 59 | font-size: 2rem; 60 | color: rgba(100, 255, 218, 0.3); /* Subtle neon placeholder */ 61 | } 62 | 63 | ul { 64 | list-style: none; 65 | } 66 | 67 | li { 68 | font-size: 1.5rem; 69 | font-weight: 700; 70 | border: 1px solid #64ffda; /* Neon mint border */ 71 | padding: 1rem; 72 | margin: 1rem 0; 73 | border-radius: 5px; 74 | box-shadow: 0 0 10px rgba(100, 255, 218, 0.2); /* Neon glow effect */ 75 | color: #64ffda; /* Neon mint text */ 76 | background-color: rgba(100, 255, 218, 0.05); /* Very subtle background */ 77 | 78 | display: flex; 79 | justify-content: space-between; 80 | transition: all 0.3s ease; 81 | } 82 | 83 | .list-item-blue { 84 | color: blue; 85 | } 86 | 87 | .list-item-yellow { 88 | color: yellow; 89 | } 90 | 91 | .list-item-red { 92 | color: red; 93 | } 94 | 95 | .active { 96 | border: 4px solid yellow; 97 | } 98 | 99 | .done { 100 | background-color: lightgreen; 101 | color: darkslateblue; 102 | } 103 | 104 | 105 | li:hover { 106 | box-shadow: 0 0 20px rgba(100, 255, 218, 0.3); /* Enhanced glow on hover */ 107 | transform: translateY(-2px); 108 | } 109 | 110 | li > button { 111 | border: none; 112 | background-color: transparent; 113 | font-size: 1.5rem; 114 | color: #ff6b6b; /* Neon red for delete button */ 115 | transition: color 0.3s ease; 116 | } 117 | 118 | li > button:hover { 119 | color: #ff4747; /* Brighter red on hover */ 120 | } -------------------------------------------------------------------------------- /03-js-codebase/10-class/01-traversing-dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Traversing DOM 7 | 17 | 18 | 19 |
20 |

Traversing DOM

21 | 22 |
Child 1
23 |
Child 2
24 |
Child 3
25 |
Child 4
26 |
Child 5
27 | text 28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /03-js-codebase/10-class/01-traversing-dom/script.js: -------------------------------------------------------------------------------- 1 | // Basic element selection 2 | // Locate the parent element with class container 3 | const containerElement = document.querySelector('.container'); 4 | console.log(containerElement); 5 | 6 | // element.children -> HTMLCollection 7 | console.log(containerElement.children); 8 | 9 | // access elements 10 | // first 11 | console.log(containerElement.firstElementChild); 12 | // last 13 | console.log(containerElement.lastElementChild); 14 | // specific 15 | console.log(containerElement.children[4]); 16 | 17 | const headerElement = document.querySelector('h1'); 18 | // identify what is the parent of an element 19 | console.log(headerElement.parentElement); 20 | 21 | // traverse to siblings 22 | const thirdElement = document.querySelector('.child-element:nth-child(4)'); 23 | // select 3rd element in its type as div 24 | // const thirdElement = document.querySelector('.child-element:nth-of-type(3)'); 25 | console.log(thirdElement); 26 | console.log(thirdElement.previousElementSibling); 27 | console.log(thirdElement.nextElementSibling); 28 | 29 | 30 | thirdElement.innerText = 'Child Three'; 31 | thirdElement.previousElementSibling.style.color = 'blue'; 32 | thirdElement.nextElementSibling.style.color = 'green'; 33 | thirdElement.nextElementSibling.style.backgroundColor = 'lightgrey'; 34 | 35 | thirdElement.nextElementSibling.id = 'child-4'; 36 | thirdElement.previousElementSibling.id = 'child-2'; 37 | 38 | // NodeList - contains all typoes of nodes 39 | // element.childNodes 40 | console.log(containerElement.childNodes); 41 | console.log(containerElement.nextSibling); 42 | console.log(containerElement.previousSibling); 43 | 44 | // DOM - Tree Data Structure 45 | 46 | // innerText - returns the content text considering css (if the element is hidden) it will not return anything 47 | // textContent - returns the content text regardless css 48 | // innerHTML - gives access to elements inside of another element 49 | 50 | 51 | // HTMLCollection, NodeList are array like data structure. However, they are not: Array, LinkedList 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /03-js-codebase/10-class/02-create-remove-elements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Create and Remove Elements 7 | 8 | 9 |

Create and Remove Elements

10 | 11 |
12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /03-js-codebase/10-class/02-create-remove-elements/script.js: -------------------------------------------------------------------------------- 1 | // Being able to create the elements in DOM dynamically via JS 2 | // Element.innerHTTML = `

uwerf

` 3 | window.onload = function () { 4 | // create an element in the container 5 | 6 | const myDivElement = document.createElement("div"); 7 | // add attributes 8 | myDivElement.className = "new-item"; 9 | myDivElement.id = "item-1"; 10 | 11 | // adding content 12 | // myDivElement.textContent = 'This is pretty cool!' 13 | myDivElement.innerText = "This is pretty cool!"; 14 | 15 | // adding html inside as content 16 | myDivElement.innerHTML = `

This is also cool, cause its a tag!

`; 17 | 18 | // creting the new paragraph with function 19 | const p = document.createElement("p"); 20 | p.innerText = "This is even cooler!"; 21 | 22 | myDivElement.appendChild(p); 23 | 24 | // to actually get the element created by js into dom we need to append it 25 | // we could first locate the parent element and then add it to that element 26 | 27 | const container = document.querySelector(".container"); 28 | container.appendChild(myDivElement); 29 | 30 | const newParagraph = createParagraph( 31 | "This is an element created by a function!!!" 32 | ); 33 | container.appendChild(newParagraph); 34 | 35 | // Removal 36 | // remove self 37 | newParagraph.remove(); 38 | // remove from parent 39 | container.removeChild(newParagraph); 40 | 41 | console.log(myDivElement); 42 | }; 43 | 44 | function createParagraph(text) { 45 | const p = document.createElement("p"); 46 | p.innerText = text; 47 | return p; 48 | } 49 | 50 | 51 | -------------------------------------------------------------------------------- /03-js-codebase/10-class/03-practice/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Practice Creating Elements With JS 7 | 8 | 9 | 10 |
11 |
12 |
Santa
13 |
🎅
14 |
🔮 Power: Free gifts!
15 |
16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /03-js-codebase/10-class/03-practice/script.js: -------------------------------------------------------------------------------- 1 | const emojis = ["🧙‍♂️", "🦸‍♂️", "🧚‍♀️", "🦹‍♀️", "🧛‍♂️", "🧜‍♀️", "🧝‍♂️", "🧞‍♀️"]; 2 | const names = [ 3 | "Luna", 4 | "Pixel", 5 | "Optimus", 6 | "Loki", 7 | "Telemakus", 8 | "Dimams", 9 | "Goku", 10 | "Pikachu", 11 | ]; 12 | const powers = [ 13 | "Time Travels", 14 | "Unlimited PTO", 15 | "Invisible", 16 | "AI", 17 | "Super Intellect", 18 | "Superhuman Strong", 19 | ]; 20 | 21 | const colors = ["red", "blue", "green", "brown"]; 22 | 23 | // helper function to generate an random index 24 | function randomElement(array) { 25 | return array[Math.floor(Math.random() * array.length)]; 26 | } 27 | 28 | 29 | function generateCard() { 30 | const nameElement = document.querySelector(".name"); 31 | const emojiElement = document.querySelector(".emoji"); 32 | const powerElement = document.querySelector(".power-text"); 33 | 34 | nameElement.innerText = randomElement(names); 35 | nameElement.style.color = randomElement(colors); 36 | emojiElement.innerText = randomElement(emojis); 37 | emojiElement.style.color = randomElement(colors); 38 | powerElement.innerText = randomElement(powers); 39 | powerElement.style.color = randomElement(colors); 40 | } 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /03-js-codebase/10-class/03-practice/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Arial, Helvetica, sans-serif; 9 | background-color: rgb(240, 231, 231); 10 | } 11 | 12 | .container { 13 | width: 100vw; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | padding: 5rem; 18 | } 19 | 20 | .card { 21 | width:250px; 22 | height: 300px; 23 | background-color: white; 24 | border-radius: 1rem; 25 | box-shadow: 0px 10px 10px rgba(0,0,0,0.1); 26 | 27 | display: flex; 28 | flex-direction: column; 29 | padding: 1rem;; 30 | } 31 | 32 | .name, .power { 33 | font-weight: 700; 34 | } 35 | 36 | .name { 37 | font-size: 1.5rem; 38 | } 39 | 40 | .emoji { 41 | flex: auto; 42 | 43 | background-color: rgb(208, 194, 194); 44 | border-radius: 1rem; 45 | 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | 50 | font-size: 6rem; 51 | margin: 1rem 0; 52 | } 53 | 54 | button { 55 | margin-top: 2rem; 56 | width: 200px; 57 | background-color: blue; 58 | color: white; 59 | } 60 | 61 | button:hover{ 62 | color: yellow; 63 | } -------------------------------------------------------------------------------- /03-js-codebase/11-class/01-events-intro/events-calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dmytro-ch21/fsd1-html-css-jss-codebase/c99209cdee55769c56eaa1be93025e8fa2281f31/03-js-codebase/11-class/01-events-intro/events-calendar.png -------------------------------------------------------------------------------- /03-js-codebase/11-class/01-events-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Event Practice 7 | 8 | 9 | 10 |
11 |
12 | Image of a calendar 13 |

Event Practice

14 |
15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | Here is the output: 28 |
29 | 30 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /03-js-codebase/11-class/01-events-intro/script.js: -------------------------------------------------------------------------------- 1 | // const logo = document.querySelector("img"); 2 | // const header = document.querySelector("h1"); 3 | // const input = document.querySelector("#text"); 4 | // const button = document.querySelector("#click-btn"); 5 | // const output = document.querySelector(".output"); 6 | // const clearButton = document.querySelector('#clear-btn'); 7 | 8 | // There few ways to apply events: 9 | // -------------------- Inline Listeners ------------------------- // 10 | // Inline in html - not recommended 11 | // function onClickButton(){ 12 | // alert('Hello From A Function!'); 13 | // } 14 | 15 | // -------------------- JS Listeners ------------------------- // 16 | // Java Script listeners 17 | // button.onclick = function() { 18 | // alert('Hello From JS Listener!'); 19 | // } 20 | 21 | // button.onclick = function() { 22 | // console.log('Second Event'); 23 | // } 24 | 25 | // -------------------- JS Function Listener ------------------------- // 26 | // Java Script Listener Function 27 | // addEventListener() - takes 2 arguments: 28 | // 1. type of the event as a string 29 | // 2. the function to execute when the event is fired 30 | 31 | // Different ways to pass a function as argument 32 | 33 | // Function Expression 34 | // button.addEventListener('click', function() { 35 | // alert('This is the coolest way!'); 36 | // }); 37 | 38 | // Arrow Function 39 | // button.addEventListener('click', () => alert('This is the coolest way!')); 40 | 41 | // // Pass a function obj as an argument 42 | // define a function 43 | // function onClickAlert() { 44 | // alert("The cleaner way!"); 45 | // } 46 | 47 | // function onClickLog() { 48 | // console.log("The cleaner way Log!"); 49 | // } 50 | 51 | // // if we use a function name followed by parentheses the is being called immidiately. 52 | // button.addEventListener("click", onClickAlert); 53 | // button.addEventListener("click", onClickLog); 54 | 55 | // We also can trigger things programatically - click on a button using JS 56 | // apply a deplay - setTimeout(); 57 | // setTimeout(function(){}, time); 58 | // setTimeout(() => button.click(), 5000); 59 | 60 | // button.addEventListener("click", onClickAlert); 61 | 62 | // Removing an event listener - in case you will remove the element from DOM where the listener is applied 63 | // setTimeout(() => { 64 | // button.removeEventListener('click', onClickAlert); 65 | // }, 5000); 66 | 67 | 68 | // Add on click a new header to the output area 69 | 70 | function onClickMe(){ 71 | const headerH3 = document.createElement('h3'); 72 | headerH3.textContent = 'New Item H3'; 73 | output.appendChild(headerH3); 74 | } 75 | 76 | function onClearClick(){ 77 | // Option 1 78 | // document.querySelectorAll('h3').forEach((item) => item.remove()); 79 | // Option 2 80 | Array.from(output.children).forEach((item) => item.remove()); 81 | } 82 | 83 | button.addEventListener('click', onClickMe); 84 | clearButton.addEventListener('click', onClearClick); -------------------------------------------------------------------------------- /03-js-codebase/11-class/01-events-intro/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Arial, Helvetica, sans-serif; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-size: 2rem; 13 | } 14 | 15 | .container { 16 | width: 600px; 17 | padding: 1rem; 18 | } 19 | 20 | .header-group, 21 | .text-input, 22 | .output, 23 | #click-btn { 24 | width: 100%; 25 | margin-bottom: 1rem; 26 | } 27 | 28 | .header-group { 29 | display: flex; 30 | align-items: center; 31 | } 32 | 33 | .header-group > img { 34 | width: 100px; 35 | margin-right: 1rem; 36 | } 37 | 38 | .text-input > input { 39 | width: 100%; 40 | height: 3rem; 41 | padding: 10px; 42 | margin-top: 1rem; 43 | } 44 | 45 | .text-input > input::placeholder{ 46 | font-size: 1.5rem; 47 | } 48 | 49 | .btn { 50 | width: 100%; 51 | height: 3rem; 52 | font-size: 1.5rem; 53 | background-color: rgba(71, 61, 139, 0.828); 54 | color: white; 55 | border-radius: 5px; 56 | transition: ease-in; 57 | } 58 | 59 | .output { 60 | background-color: lightgoldenrodyellow; 61 | font-size: 1rem; 62 | padding: 2rem; 63 | } 64 | 65 | #click-btn:hover { 66 | transform: translateY(-5px); 67 | } 68 | -------------------------------------------------------------------------------- /03-js-codebase/11-class/02-mouse-events/events-calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dmytro-ch21/fsd1-html-css-jss-codebase/c99209cdee55769c56eaa1be93025e8fa2281f31/03-js-codebase/11-class/02-mouse-events/events-calendar.png -------------------------------------------------------------------------------- /03-js-codebase/11-class/02-mouse-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mouse Evenets 7 | 8 | 9 | 10 |
11 |
12 | Image of a calendar 13 |

Mouse Evenets

14 |
15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 |
23 | Here is the output: 24 |
25 | 26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /03-js-codebase/11-class/02-mouse-events/script.js: -------------------------------------------------------------------------------- 1 | // Selectors 2 | const logo = document.querySelector("img"); 3 | const header = document.querySelector("h1"); 4 | const input = document.querySelector("#text"); 5 | const button = document.querySelector("#click-btn"); 6 | const output = document.querySelector(".output"); 7 | const clearButton = document.querySelector("#clear-btn"); 8 | 9 | // Functions 10 | const onClickMe = () => { 11 | const headerH3 = document.createElement("h3"); 12 | headerH3.textContent = "New Item H3"; 13 | output.appendChild(headerH3); 14 | }; 15 | 16 | const onClearClick = () => { 17 | Array.from(output.children).forEach((item) => item.remove()); 18 | }; 19 | 20 | const onClick = () => { 21 | logo.style.transform = 22 | logo.style.transform === "scale(1.2)" ? "scale(1)" : "scale(1.2)"; 23 | }; 24 | 25 | const onDoubleClick = () => { 26 | if (document.body.style.backgroundColor === "white") { 27 | document.body.style.backgroundColor = "darkblue"; 28 | document.body.style.color = "white"; 29 | } else { 30 | document.body.style.backgroundColor = "white"; 31 | document.body.style.color = "black"; 32 | } 33 | }; 34 | 35 | const onRightClick = () => console.log("Context MenuEvent Fired!"); 36 | 37 | const onMouseDown = () => { 38 | logo.style.opacity = 0.5; 39 | console.log("On Mouse Down Event Fired!"); 40 | }; 41 | 42 | const onMouseUp = () => { 43 | logo.style.opacity = 1; 44 | console.log("On Mouse Up Event Fired!"); 45 | }; 46 | 47 | const onScroll = () => console.log("Scrolling....."); 48 | 49 | const onHoverOver = () => console.log("Hovering over ha?"); 50 | 51 | const onHoverOut = () => console.log("Why leaving the logo?"); 52 | 53 | const onDragStart = () => console.log("Started to drag the element..."); 54 | 55 | const onDragEnd = () => console.log("Finished to drag the element..."); 56 | 57 | const onDrag = (event) => { 58 | header.textContent = `Logo is moving X: ${event.clientX}, Y: ${event.clientY}`; 59 | } 60 | 61 | // --------------------- MOUSE EVENTS --------------------- // 62 | 63 | // onclick 64 | logo.addEventListener("click", onClick); 65 | 66 | // dlbclick 67 | logo.addEventListener("dblclick", onDoubleClick); 68 | 69 | // contextmenu - right click 70 | logo.addEventListener("contextmenu", onRightClick); 71 | 72 | // mouseDown 73 | logo.addEventListener("mousedown", onMouseDown); 74 | 75 | // mouseUp 76 | logo.addEventListener("mouseup", onMouseUp); 77 | 78 | // wheel - scroll 79 | logo.addEventListener("wheel", onScroll); 80 | 81 | // mouseover 82 | logo.addEventListener("mouseover", onHoverOver); 83 | 84 | // mouseout 85 | logo.addEventListener("mouseout", onHoverOut); 86 | 87 | // dragstart 88 | logo.addEventListener("dragstart", onDragStart); 89 | 90 | // dragend 91 | logo.addEventListener("dragend", onDragEnd); 92 | 93 | // drag 94 | logo.addEventListener("drag", onDrag); 95 | 96 | // adding a new element 97 | button.addEventListener("click", onClickMe); 98 | 99 | // removing the elements 100 | clearButton.addEventListener("click", onClearClick); 101 | -------------------------------------------------------------------------------- /03-js-codebase/11-class/02-mouse-events/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Arial, Helvetica, sans-serif; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-size: 2rem; 13 | } 14 | 15 | .container { 16 | width: 600px; 17 | padding: 1rem; 18 | } 19 | 20 | .header-group, 21 | .text-input, 22 | .output, 23 | #click-btn { 24 | width: 100%; 25 | margin-bottom: 1rem; 26 | } 27 | 28 | .header-group { 29 | display: flex; 30 | align-items: center; 31 | } 32 | 33 | .header-group > h1 { 34 | font-size: 2rem; 35 | } 36 | 37 | .header-group > img { 38 | width: 100px; 39 | margin-right: 1rem; 40 | } 41 | 42 | .text-input > input { 43 | width: 100%; 44 | height: 3rem; 45 | padding: 10px; 46 | margin-top: 1rem; 47 | } 48 | 49 | .text-input > input::placeholder { 50 | font-size: 1.5rem; 51 | } 52 | 53 | .btn { 54 | width: 100%; 55 | height: 3rem; 56 | font-size: 1.5rem; 57 | background-color: rgba(71, 61, 139, 0.828); 58 | color: white; 59 | border-radius: 5px; 60 | transition: ease-in; 61 | } 62 | 63 | .output { 64 | background-color: lightgoldenrodyellow; 65 | font-size: 1rem; 66 | padding: 2rem; 67 | } 68 | 69 | #click-btn:hover { 70 | transform: translateY(-5px); 71 | } 72 | -------------------------------------------------------------------------------- /03-js-codebase/11-class/03-keyboard-events-and-event-object/events-calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dmytro-ch21/fsd1-html-css-jss-codebase/c99209cdee55769c56eaa1be93025e8fa2281f31/03-js-codebase/11-class/03-keyboard-events-and-event-object/events-calendar.png -------------------------------------------------------------------------------- /03-js-codebase/11-class/03-keyboard-events-and-event-object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Keyboard Events and Event Object Properties 7 | 8 | 9 | 10 |
11 |
12 | Image of a calendar 13 |

Keyboard Events

14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 |
0
22 |
0
23 |
0
24 |
25 | 26 | 27 | 28 |
29 | Here is the output: 30 |
31 | 32 | 33 | 34 | Visit Google 35 | 36 | 37 |
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /03-js-codebase/11-class/03-keyboard-events-and-event-object/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: Arial, Helvetica, sans-serif; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | font-size: 2rem; 13 | } 14 | 15 | .container { 16 | width: 600px; 17 | padding: 1rem; 18 | } 19 | 20 | .header-group, 21 | .text-input, 22 | .output, 23 | #click-btn { 24 | width: 100%; 25 | margin-bottom: 1rem; 26 | } 27 | 28 | .header-group { 29 | display: flex; 30 | align-items: center; 31 | } 32 | 33 | .header-group > h1 { 34 | font-size: 3rem; 35 | } 36 | 37 | .header-group > img { 38 | width: 100px; 39 | margin-right: 1rem; 40 | } 41 | 42 | .text-input > input { 43 | width: 100%; 44 | height: 3rem; 45 | padding: 10px; 46 | margin-top: 1rem; 47 | font-size: 2rem; 48 | } 49 | 50 | .text-input > input::placeholder { 51 | font-size: 1.5rem; 52 | } 53 | 54 | .btn { 55 | width: 100%; 56 | height: 3rem; 57 | font-size: 1.5rem; 58 | background-color: rgba(71, 61, 139, 0.828); 59 | color: white; 60 | border-radius: 5px; 61 | transition: ease-in; 62 | } 63 | 64 | .output { 65 | background-color: lightgoldenrodyellow; 66 | font-size: 1rem; 67 | padding: 2rem; 68 | } 69 | 70 | #click-btn:hover { 71 | transform: translateY(-5px); 72 | } 73 | 74 | .keys { 75 | display: flex; 76 | justify-content: center; 77 | gap: 2rem; 78 | margin-bottom: 2rem; 79 | } 80 | 81 | .keys > div { 82 | font-size: 4rem; 83 | border: 1px solid darkblue; 84 | border-radius: 5px; 85 | width: auto; 86 | text-align: center; 87 | } 88 | -------------------------------------------------------------------------------- /03-js-codebase/12-class/01-event-listeners-cont/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Event Listeners Continuation 7 | 8 | 9 | 10 |
11 |

Sign Up

12 | 13 |
14 | 15 | 16 |
First Name is Mandatory
17 |
18 | 19 |
20 | 21 | 22 |
Last Name is Mandatory
23 |
24 | 25 |
26 | 27 | 28 |
Email is Mandatory
29 |
30 | 31 |
32 | 33 | 34 |
Password is Mandatory
35 |
36 | 37 |
38 | 39 | 46 |
Prefix is Mandatory
47 |
48 | 49 |
50 | 54 |
Checking This is Mandatory
55 |
56 | 57 |
58 | 62 |
Checking Terms is Mandatory
63 |
64 | 65 |
66 | 67 |
68 |
69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /03-js-codebase/12-class/01-event-listeners-cont/script.js: -------------------------------------------------------------------------------- 1 | // Selectors elements 2 | const header = document.querySelector('h1'); 3 | const inputFirstName = document.querySelector('#first-name'); 4 | const inputLastName = document.querySelector('#last-name'); 5 | const inputEmail = document.querySelector('#email'); 6 | const inputPassword = document.querySelector('#password'); 7 | const inputPrefix = document.querySelector('#prefix'); 8 | const inputNewsletter = document.querySelector('#newsletter'); 9 | const inputTerms = document.querySelector('#terms'); 10 | const button = document.querySelector('button[type=submit]'); 11 | 12 | // Listeners 13 | // The event keydown can be used for input fields where client types something 14 | // inputFirstName.addEventListener('keydown', onInput); 15 | 16 | // 'input' - is more generic type that can be used for different input fields (text, checkbox, dropdown so on) 17 | inputFirstName.addEventListener('input', onInput); 18 | 19 | // 'change' - it will trigger when a change in the input field is detected (pretty much similar to 'input') 20 | inputLastName.addEventListener('change', onInput); 21 | 22 | // Apply same input type on a dropdown 23 | inputPrefix.addEventListener('input', onInput); 24 | 25 | // Apply input to checkbox or radio 26 | inputNewsletter.addEventListener('input', onChange); 27 | 28 | // focus - when the input is clicked and active 29 | inputEmail.addEventListener('focus', onFocus); 30 | 31 | // blur - when the client goes outside of an input 32 | inputEmail.addEventListener('blur', onBlur); 33 | 34 | inputEmail.addEventListener('change', onPasswordChange); 35 | 36 | function onPasswordChange(event) { 37 | header.textContent = event.target.value; 38 | } 39 | 40 | // function trigerred when the input is on focus 41 | function onFocus(event){ 42 | inputEmail.style.outlineStyle = 'solid'; 43 | inputEmail.style.outlineWidth = '4px'; 44 | inputEmail.style.outlineColor = 'yellow'; 45 | } 46 | 47 | // function trigerred when the input is out of focus 48 | function onBlur(){ 49 | inputEmail.style.outlineStyle = 'none'; 50 | } 51 | 52 | // When we need to get values from inputs as text, dropdowns etc... we use value property 53 | function onInput(event){ 54 | console.log(event.target.value); 55 | // header.textContent = event.target.value; 56 | } 57 | 58 | // When we work with checkboxes and radiobutton we can access a property called checked 59 | // This property will tell me if (checked) true or (unchecked) false 60 | function onChange(event){ 61 | console.log(event.target.checked); 62 | // logic 63 | 64 | const isChecked = event.target.checked; 65 | header.textContent = isChecked ? 'Subscribed' : 'Not Subscribed!'; 66 | 67 | if(!isChecked){ 68 | document.querySelector('#err-news').style.display = 'block'; 69 | } else { 70 | document.querySelector('#err-news').style.display = 'none'; 71 | } 72 | } 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /03-js-codebase/12-class/01-event-listeners-cont/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | background: #f9f9f9; 4 | color: #333; 5 | margin: 0; 6 | padding: 20px; 7 | } 8 | 9 | form { 10 | max-width: 300px; 11 | margin: 0 auto; 12 | background: #fff; 13 | border: 1px solid #ddd; 14 | padding: 20px; 15 | border-radius: 4px; 16 | } 17 | 18 | h1 { 19 | margin-top: 0; 20 | font-size: 1.5em; 21 | text-align: center; 22 | } 23 | 24 | .form-group { 25 | display: flex; 26 | flex-direction: column; 27 | margin-bottom: 15px; 28 | } 29 | 30 | .form-group label { 31 | margin-bottom: 5px; 32 | font-size: 0.9em; 33 | } 34 | 35 | .form-group input[type="text"], 36 | .form-group input[type="email"], 37 | .form-group input[type="password"], 38 | .form-group select { 39 | padding: 8px; 40 | border: 1px solid #ccc; 41 | border-radius: 4px; 42 | } 43 | 44 | .checkbox-group { 45 | flex-direction: row; 46 | align-items: center; 47 | } 48 | 49 | .checkbox-group label { 50 | display: flex; 51 | gap: 5px; 52 | font-size: 0.9em; 53 | margin: 0; 54 | } 55 | 56 | button[type="submit"] { 57 | width: 100%; 58 | padding: 10px; 59 | font-size: 1em; 60 | border: none; 61 | color: #fff; 62 | background: #333; 63 | border-radius: 4px; 64 | cursor: pointer; 65 | } 66 | 67 | button[type="submit"]:hover { 68 | background: #555; 69 | } 70 | 71 | 72 | .error { 73 | display: none; 74 | color: red; 75 | font-size: 0.6rem; 76 | } -------------------------------------------------------------------------------- /03-js-codebase/12-class/02-form-submit-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Form Event Listeners 7 | 8 | 9 | 10 |
11 |

Sign Up

12 | 13 |
14 | 15 | 16 |
First Name is Mandatory
17 |
18 | 19 |
20 | 21 | 22 |
Last Name is Mandatory
23 |
24 | 25 |
26 | 27 | 28 |
Email is Mandatory
29 |
30 | 31 |
32 | 33 | 34 |
Password is Mandatory
35 |
36 | 37 |
38 | 39 | 46 |
Prefix is Mandatory
47 |
48 | 49 |
50 | 59 |
Checking This is Mandatory
60 |
61 | 62 |
63 | 67 |
Checking Terms is Mandatory
68 |
69 | 70 |
71 | 72 |
73 |
74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /03-js-codebase/12-class/02-form-submit-events/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | background: #f9f9f9; 4 | color: #333; 5 | margin: 0; 6 | padding: 20px; 7 | } 8 | 9 | form { 10 | max-width: 300px; 11 | margin: 0 auto; 12 | background: #fff; 13 | border: 1px solid #ddd; 14 | padding: 20px; 15 | border-radius: 4px; 16 | } 17 | 18 | h1 { 19 | margin-top: 0; 20 | font-size: 1.5em; 21 | text-align: center; 22 | } 23 | 24 | .form-group { 25 | display: flex; 26 | flex-direction: column; 27 | margin-bottom: 15px; 28 | } 29 | 30 | .form-group label { 31 | margin-bottom: 5px; 32 | font-size: 0.9em; 33 | } 34 | 35 | .form-group input[type="text"], 36 | .form-group input[type="email"], 37 | .form-group input[type="password"], 38 | .form-group select { 39 | padding: 8px; 40 | border: 1px solid #ccc; 41 | border-radius: 4px; 42 | } 43 | 44 | .checkbox-group { 45 | flex-direction: row; 46 | align-items: center; 47 | } 48 | 49 | .checkbox-group label { 50 | display: flex; 51 | gap: 5px; 52 | font-size: 0.9em; 53 | margin: 0; 54 | } 55 | 56 | button[type="submit"] { 57 | width: 100%; 58 | padding: 10px; 59 | font-size: 1em; 60 | border: none; 61 | color: #fff; 62 | background: #333; 63 | border-radius: 4px; 64 | cursor: pointer; 65 | } 66 | 67 | button[type="submit"]:hover { 68 | background: #555; 69 | } 70 | 71 | 72 | .error { 73 | display: none; 74 | color: red; 75 | font-size: 0.6rem; 76 | } -------------------------------------------------------------------------------- /03-js-codebase/13-class/01-execution-pcontext/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Execution Context 7 | 8 | 9 |

Execution Context

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/13-class/01-execution-pcontext/script.js: -------------------------------------------------------------------------------- 1 | console.log('Works!'); 2 | 3 | const x = 100; 4 | const y = 200; 5 | 6 | function getSum(n1, n2){ 7 | const sum = n1 + n2; 8 | return sum; 9 | } 10 | 11 | const sum1 = getSum(x, y); 12 | const sum2 = getSum(10, 33); 13 | 14 | console.log(sum1); 15 | console.log(sum2); 16 | 17 | 18 | function one(){ 19 | console.log('One'); 20 | two(); 21 | } 22 | function two(){ 23 | console.log('One'); 24 | three(); 25 | } 26 | function three(){ 27 | console.log('One'); 28 | } 29 | 30 | one(); -------------------------------------------------------------------------------- /03-js-codebase/13-class/02-async-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Asynchronous JS 7 | 8 | 9 |

Asynchronous JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /03-js-codebase/13-class/02-async-js/script.js: -------------------------------------------------------------------------------- 1 | console.log("Start"); 2 | 3 | const x = 10; 4 | const y = 20; 5 | const sum = x + y; 6 | 7 | // blocking code 8 | function delay(millies) { 9 | console.log("Running the delay..."); 10 | const startTimestamp = Date.now(); 11 | while (Date.now() - startTimestamp < millies) { 12 | //code 13 | } 14 | } 15 | delay(3000); 16 | 17 | console.log('End'); 18 | 19 | 20 | 21 | 22 | // console.log('Start'); 23 | 24 | // const x = 10; 25 | // const y = 20; 26 | // const sum = x + y; 27 | 28 | // setTimeout(function(){ 29 | // console.log('Running Delay'); 30 | // }, 4000); 31 | 32 | // console.log('Sum: ' + sum); 33 | // console.log('End'); 34 | -------------------------------------------------------------------------------- /03-js-codebase/13-class/03-setTimout-setInterval/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Asynchronous Functions 7 | 8 | 9 |

Asynchronous Functions

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /03-js-codebase/13-class/03-setTimout-setInterval/script.js: -------------------------------------------------------------------------------- 1 | const timeoutID = setTimeout(changeText, 4000); 2 | 3 | console.log(timeoutID); 4 | 5 | console.log('Hello from Global Scope!'); 6 | 7 | function changeText(){ 8 | document.querySelector('h1').textContent = 'Hello from Callback!'; 9 | } 10 | 11 | document.querySelector('#clear-btn').addEventListener('click', function(){ 12 | console.log(`Removing timeout with ID: ${timeoutID}`); 13 | clearTimeout(timeoutID); 14 | console.log('Timeout Cancelled!'); 15 | }); 16 | 17 | Lets create a digital clock that shows hh:mm:ss 18 | 19 | const date = new Date(); 20 | const formattedDate = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; 21 | document.querySelector('h1').textContent = formattedDate; 22 | 23 | 24 | let intervalID; 25 | 26 | function startClock() { 27 | const date = new Date(); 28 | const formattedDate = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; 29 | document.querySelector("h1").textContent = formattedDate; 30 | } 31 | 32 | function startClockInterval(){ 33 | intervalID = setInterval(startClock, 1000); 34 | console.log('ID: ' + intervalID); 35 | } 36 | 37 | function stopClock() { 38 | clearInterval(intervalID); 39 | console.log('Clock Stopped!'); 40 | } 41 | 42 | document.getElementById('start-btn').addEventListener('click', startClockInterval); 43 | document.getElementById('stop-btn').addEventListener('click', stopClock); 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/01-callbacks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Callbacks 7 | 8 | 9 | 10 |

Callbacks

11 | 12 |
13 |

Items

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/01-callbacks/script.js: -------------------------------------------------------------------------------- 1 | console.log("Callbacks JS"); 2 | 3 | // ----------- Select Elements From Page -------------- // 4 | const header = document.querySelector('h1'); 5 | const button = document.getElementById('btn-click'); 6 | const items = document.querySelector('.items'); 7 | 8 | // Callback Example 9 | function onClickHandler(){ 10 | header.classList.toggle('color-red'); 11 | } 12 | 13 | // Add event listener 14 | button.addEventListener('click', onClickHandler); 15 | 16 | console.log('Further code...'); 17 | 18 | // Implementing our callback function 19 | function logCallback(){ 20 | console.log('Regular log. Callback executed...'); 21 | } 22 | 23 | function newLogCallback(data){ 24 | console.log('Result: ', data); 25 | } 26 | 27 | function mainFunction(callback){ 28 | const x = 100; 29 | const y = 200; 30 | const result = x + y; 31 | callback(result); 32 | } 33 | 34 | mainFunction(logCallback); 35 | mainFunction(newLogCallback); 36 | mainFunction(() => { 37 | console.log('This is the custom logic....'); 38 | }); 39 | 40 | // ============================================= // 41 | const songs = [ 42 | {title: 'Shape of You', duration: '3.20'}, 43 | {title: 'Wind Of Change', duration: '4.15'}, 44 | {title: 'I Miss You', duration: '2.50'}, 45 | ]; 46 | 47 | function rederSongs(){ 48 | setTimeout(() => { 49 | 50 | document.querySelectorAll('.item').forEach((song) => song.remove()); 51 | 52 | songs.forEach((song) => { 53 | const div = document.createElement('div'); 54 | div.className = 'item'; 55 | div.innerHTML = ` 56 |

${song.title}

57 |

Duration: ${song.duration}

58 | `; 59 | items.appendChild(div); 60 | }); 61 | }, 1000); 62 | } 63 | 64 | function addSong(song, callback){ 65 | setTimeout(() => { 66 | songs.push(song); 67 | console.log('Successfully added a new song to db: ', songs); 68 | callback(); 69 | }, 2000); 70 | } 71 | 72 | addSong({title: 'TNT', duration: '5.10'}, rederSongs); 73 | addSong({title: 'Imagine', duration: '3.50'}, rederSongs); 74 | addSong({title: 'Imagine', duration: '3.50'}, rederSongs); 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/01-callbacks/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | #btn-click { 10 | padding: 0.6rem; 11 | background-color: black; 12 | color: white; 13 | border: none; 14 | border-radius: 5px; 15 | } 16 | 17 | #btn-click:active { 18 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 19 | } 20 | 21 | .items { 22 | margin-top: 2rem; 23 | border: 1px solid rgb(198, 198, 198); 24 | max-width: 600px; 25 | padding: 1rem; 26 | border-radius: 10px; 27 | 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | 34 | .item { 35 | background-color: rgb(233, 233, 233); 36 | border-radius: 5px; 37 | width: 100%; 38 | overflow-wrap: wrap; 39 | padding: 0.5rem; 40 | margin-bottom: 1rem; 41 | } 42 | 43 | .color-red { 44 | color: rgb(172, 0, 0); 45 | } 46 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/02-ajax-xhr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AJAX & XHR 7 | 8 | 9 | 10 |

AJAX & XHR

11 | 12 |
13 |

Items

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/02-ajax-xhr/json/albums.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Divide", 4 | "author": "Ed Sheeran", 5 | "songs": [ 6 | { 7 | "title": "Shape of You", 8 | "duration": "3:54" 9 | }, 10 | { 11 | "title": "Castle on the Hill", 12 | "duration": "4:21" 13 | } 14 | ] 15 | }, 16 | { 17 | "title": "After Hours", 18 | "author": "The Weeknd", 19 | "songs": [ 20 | { 21 | "title": "Blinding Lights", 22 | "duration": "3:20" 23 | }, 24 | { 25 | "title": "Save Your Tears", 26 | "duration": "3:35" 27 | } 28 | ] 29 | }, 30 | { 31 | "title": "A Night at the Opera", 32 | "author": "Freddie Mercury", 33 | "songs": [ 34 | { 35 | "title": "Bohemian Rhapsody", 36 | "duration": "5:55" 37 | }, 38 | { 39 | "title": "Love of My Life", 40 | "duration": "3:39" 41 | } 42 | ] 43 | }, 44 | { 45 | "title": "21", 46 | "author": "Adele", 47 | "songs": [ 48 | { 49 | "title": "Rolling in the Deep", 50 | "duration": "3:48" 51 | }, 52 | { 53 | "title": "Someone Like You", 54 | "duration": "4:45" 55 | } 56 | ] 57 | }, 58 | { 59 | "title": "Imagine", 60 | "author": "John Lennon", 61 | "songs": [ 62 | { 63 | "title": "Imagine", 64 | "duration": "3:15" 65 | }, 66 | { 67 | "title": "Jealous Guy", 68 | "duration": "4:13" 69 | } 70 | ] 71 | } 72 | ] 73 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/02-ajax-xhr/json/authors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "author": "Ed Sheeran", 4 | "bio": "Ed Sheeran is an English singer-songwriter known for his hit singles like 'Shape of You' and 'Thinking Out Loud.'" 5 | }, 6 | { 7 | "author": "The Weeknd", 8 | "bio": "The Weeknd, born Abel Tesfaye, is a Canadian singer known for his genre-blending music and hits like 'Blinding Lights.'" 9 | }, 10 | { 11 | "author": "Freddie Mercury", 12 | "bio": "Freddie Mercury was the lead vocalist of the British rock band Queen, known for iconic songs like 'Bohemian Rhapsody.'" 13 | }, 14 | { 15 | "author": "Adele", 16 | "bio": "Adele is an English singer-songwriter known for her powerful voice and chart-topping hits like 'Rolling in the Deep.'" 17 | }, 18 | { 19 | "author": "John Lennon", 20 | "bio": "John Lennon was a member of The Beatles and a solo artist, famous for his song 'Imagine.'" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/02-ajax-xhr/json/songs.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Shape of You", 4 | "duration": "3:54" 5 | }, 6 | { 7 | "title": "Blinding Lights", 8 | "duration": "3:20" 9 | }, 10 | { 11 | "title": "Bohemian Rhapsody", 12 | "duration": "5:55" 13 | }, 14 | { 15 | "title": "Rolling in the Deep", 16 | "duration": "3:48" 17 | }, 18 | { 19 | "title": "Imagine", 20 | "duration": "3:15" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/02-ajax-xhr/script.js: -------------------------------------------------------------------------------- 1 | console.log("AJAX and XHR JS"); 2 | 3 | // ----------- Select Elements From Page -------------- // 4 | const header = document.querySelector('h1'); 5 | const button = document.getElementById('btn-click'); 6 | const items = document.querySelector('.items'); 7 | 8 | 9 | // HTTP - protocol 10 | // AJAX - Async JS and XML 11 | // XHR - XML Http Request 12 | 13 | const xhr = new XMLHttpRequest(); 14 | // open function - provide method and endpoint/url 15 | xhr.open('GET', './json/song.json'); 16 | // 0 - unsent/not initialized 17 | // 1 - opened - open() has been called - connection established 18 | // 2 - response header recieved 19 | // 3 - response body/data recieved 20 | // 4 - request finished / complete response recieved 21 | 22 | // act on the event that we made 23 | // properties that are useful from xhr obj - readyState, status, responseText 24 | xhr.onreadystatechange = function() { 25 | // validate that your request is good 26 | if(xhr.readyState === 4 && xhr.status === 200){ 27 | const response = JSON.parse(xhr.responseText); 28 | 29 | console.log(response); 30 | 31 | response.forEach((song) => { 32 | const div = document.createElement('div'); 33 | div.className = 'item'; 34 | div.innerHTML = ` 35 | ${song.title} - Duration: ${song.duration} 36 | `; 37 | items.appendChild(div); 38 | }); 39 | } 40 | } 41 | 42 | xhr.send(); -------------------------------------------------------------------------------- /03-js-codebase/14-class/02-ajax-xhr/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | #btn-click { 10 | padding: 0.6rem; 11 | background-color: black; 12 | color: white; 13 | border: none; 14 | border-radius: 5px; 15 | } 16 | 17 | #btn-click:active { 18 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 19 | } 20 | 21 | .items { 22 | margin-top: 2rem; 23 | border: 1px solid rgb(198, 198, 198); 24 | max-width: 600px; 25 | padding: 1rem; 26 | border-radius: 10px; 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | align-items: center; 31 | } 32 | 33 | .item { 34 | background-color: rgb(233, 233, 233); 35 | border-radius: 5px; 36 | width: 100%; 37 | overflow-wrap: wrap; 38 | padding: 0.5rem; 39 | margin-bottom: 1rem; 40 | } 41 | 42 | .color-red { 43 | color: rgb(172, 0, 0); 44 | } 45 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/03-callbackhell/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Callback Hell 7 | 8 | 9 | 10 |

Callback Hell

11 | 12 |
13 |

Items

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/03-callbackhell/json/albums.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Divide", 4 | "author": "Ed Sheeran", 5 | "songs": [ 6 | { 7 | "title": "Shape of You", 8 | "duration": "3:54" 9 | }, 10 | { 11 | "title": "Castle on the Hill", 12 | "duration": "4:21" 13 | } 14 | ] 15 | }, 16 | { 17 | "title": "After Hours", 18 | "author": "The Weeknd", 19 | "songs": [ 20 | { 21 | "title": "Blinding Lights", 22 | "duration": "3:20" 23 | }, 24 | { 25 | "title": "Save Your Tears", 26 | "duration": "3:35" 27 | } 28 | ] 29 | }, 30 | { 31 | "title": "A Night at the Opera", 32 | "author": "Freddie Mercury", 33 | "songs": [ 34 | { 35 | "title": "Bohemian Rhapsody", 36 | "duration": "5:55" 37 | }, 38 | { 39 | "title": "Love of My Life", 40 | "duration": "3:39" 41 | } 42 | ] 43 | }, 44 | { 45 | "title": "21", 46 | "author": "Adele", 47 | "songs": [ 48 | { 49 | "title": "Rolling in the Deep", 50 | "duration": "3:48" 51 | }, 52 | { 53 | "title": "Someone Like You", 54 | "duration": "4:45" 55 | } 56 | ] 57 | }, 58 | { 59 | "title": "Imagine", 60 | "author": "John Lennon", 61 | "songs": [ 62 | { 63 | "title": "Imagine", 64 | "duration": "3:15" 65 | }, 66 | { 67 | "title": "Jealous Guy", 68 | "duration": "4:13" 69 | } 70 | ] 71 | } 72 | ] 73 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/03-callbackhell/json/authors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "author": "Ed Sheeran", 4 | "bio": "Ed Sheeran is an English singer-songwriter known for his hit singles like 'Shape of You' and 'Thinking Out Loud.'" 5 | }, 6 | { 7 | "author": "The Weeknd", 8 | "bio": "The Weeknd, born Abel Tesfaye, is a Canadian singer known for his genre-blending music and hits like 'Blinding Lights.'" 9 | }, 10 | { 11 | "author": "Freddie Mercury", 12 | "bio": "Freddie Mercury was the lead vocalist of the British rock band Queen, known for iconic songs like 'Bohemian Rhapsody.'" 13 | }, 14 | { 15 | "author": "Adele", 16 | "bio": "Adele is an English singer-songwriter known for her powerful voice and chart-topping hits like 'Rolling in the Deep.'" 17 | }, 18 | { 19 | "author": "John Lennon", 20 | "bio": "John Lennon was a member of The Beatles and a solo artist, famous for his song 'Imagine.'" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/03-callbackhell/json/songs.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Shape of You", 4 | "duration": "3:54" 5 | }, 6 | { 7 | "title": "Blinding Lights", 8 | "duration": "3:20" 9 | }, 10 | { 11 | "title": "Bohemian Rhapsody", 12 | "duration": "5:55" 13 | }, 14 | { 15 | "title": "Rolling in the Deep", 16 | "duration": "3:48" 17 | }, 18 | { 19 | "title": "Imagine", 20 | "duration": "3:15" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/03-callbackhell/script.js: -------------------------------------------------------------------------------- 1 | console.log("AJAX and XHR JS"); 2 | 3 | // ----------- Select Elements From Page -------------- // 4 | const header = document.querySelector("h1"); 5 | const button = document.getElementById("btn-click"); 6 | const items = document.querySelector(".items"); 7 | 8 | function getData(endpoint, callback) { 9 | const xhr = new XMLHttpRequest(); 10 | xhr.open("GET", endpoint); 11 | xhr.onreadystatechange = function () { 12 | if (xhr.readyState === 4 && xhr.status === 200) { 13 | callback(JSON.parse(xhr.responseText)); 14 | } 15 | }; 16 | 17 | const randomNumer = Math.floor(Math.random() * 3000 + 1000); 18 | console.log("Timeout: ", randomNumer); 19 | setTimeout(() => { 20 | xhr.send(); 21 | }, randomNumer); 22 | } 23 | 24 | // get the data in order first get all songs, second get all authors, get all albums 25 | // getData('./json/songs.json'); 26 | // getData('./json/authors.json'); 27 | // getData('./json/albums.json'); 28 | 29 | // this pattern is called callbackhell 30 | // hard to read, maintain and debud 31 | getData("./json/songs.json", (data) => { 32 | console.log(data); 33 | getData("./json/authors.json", (data) => { 34 | console.log(data); 35 | getData("./json/albums.json", (data) => { 36 | console.log(data); 37 | }); 38 | }); 39 | }); 40 | 41 | function getData(endpoint) { 42 | return new Promise((resolve, reject) => { 43 | const xhr = new XMLHttpRequest(); 44 | xhr.open("GET", endpoint); 45 | 46 | xhr.onreadystatechange = function () { 47 | if (xhr.readyState === 4) { 48 | if (xhr.status === 200) { 49 | resolve(JSON.parse(xhr.responseText)); 50 | } else { 51 | reject({ error: "Something is wrong with data" }); 52 | } 53 | } 54 | }; 55 | 56 | const randomNumer = Math.floor(Math.random() * 3000 + 1000); 57 | console.log("Timeout: ", randomNumer); 58 | setTimeout(() => { 59 | xhr.send(); 60 | }, randomNumer); 61 | }); 62 | } 63 | 64 | // get the data in order first get all songs, second get all authors, get all albums 65 | // getData('./json/songs.json'); 66 | // getData('./json/authors.json'); 67 | // getData('./json/albums.json'); 68 | 69 | // this pattern is called callbackhell 70 | // hard to read, maintain and debud 71 | getData("./json/songs.json") 72 | .then((data) => { 73 | console.log(data); 74 | return getData("./json/authors.json"); 75 | }) 76 | .then((data) => { 77 | console.log(data); 78 | return getData("./json/albums.json"); 79 | }) 80 | .then((data) => { 81 | console.log(data); 82 | }) 83 | .catch((error) => { 84 | console.log(error); 85 | }); 86 | 87 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/03-callbackhell/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | #btn-click { 10 | padding: 0.6rem; 11 | background-color: black; 12 | color: white; 13 | border: none; 14 | border-radius: 5px; 15 | } 16 | 17 | #btn-click:active { 18 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 19 | } 20 | 21 | .items { 22 | margin-top: 2rem; 23 | border: 1px solid rgb(198, 198, 198); 24 | max-width: 600px; 25 | padding: 1rem; 26 | border-radius: 10px; 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | align-items: center; 31 | } 32 | 33 | .item { 34 | background-color: rgb(233, 233, 233); 35 | border-radius: 5px; 36 | width: 100%; 37 | overflow-wrap: wrap; 38 | padding: 0.5rem; 39 | margin-bottom: 1rem; 40 | } 41 | 42 | .color-red { 43 | color: rgb(172, 0, 0); 44 | } 45 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/04-promises/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promises 7 | 8 | 9 | 10 |

Promises

11 | 12 |
13 |

Items

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/04-promises/json/albums.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Divide", 4 | "author": "Ed Sheeran", 5 | "songs": [ 6 | { 7 | "title": "Shape of You", 8 | "duration": "3:54" 9 | }, 10 | { 11 | "title": "Castle on the Hill", 12 | "duration": "4:21" 13 | } 14 | ] 15 | }, 16 | { 17 | "title": "After Hours", 18 | "author": "The Weeknd", 19 | "songs": [ 20 | { 21 | "title": "Blinding Lights", 22 | "duration": "3:20" 23 | }, 24 | { 25 | "title": "Save Your Tears", 26 | "duration": "3:35" 27 | } 28 | ] 29 | }, 30 | { 31 | "title": "A Night at the Opera", 32 | "author": "Freddie Mercury", 33 | "songs": [ 34 | { 35 | "title": "Bohemian Rhapsody", 36 | "duration": "5:55" 37 | }, 38 | { 39 | "title": "Love of My Life", 40 | "duration": "3:39" 41 | } 42 | ] 43 | }, 44 | { 45 | "title": "21", 46 | "author": "Adele", 47 | "songs": [ 48 | { 49 | "title": "Rolling in the Deep", 50 | "duration": "3:48" 51 | }, 52 | { 53 | "title": "Someone Like You", 54 | "duration": "4:45" 55 | } 56 | ] 57 | }, 58 | { 59 | "title": "Imagine", 60 | "author": "John Lennon", 61 | "songs": [ 62 | { 63 | "title": "Imagine", 64 | "duration": "3:15" 65 | }, 66 | { 67 | "title": "Jealous Guy", 68 | "duration": "4:13" 69 | } 70 | ] 71 | } 72 | ] 73 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/04-promises/json/authors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "author": "Ed Sheeran", 4 | "bio": "Ed Sheeran is an English singer-songwriter known for his hit singles like 'Shape of You' and 'Thinking Out Loud.'" 5 | }, 6 | { 7 | "author": "The Weeknd", 8 | "bio": "The Weeknd, born Abel Tesfaye, is a Canadian singer known for his genre-blending music and hits like 'Blinding Lights.'" 9 | }, 10 | { 11 | "author": "Freddie Mercury", 12 | "bio": "Freddie Mercury was the lead vocalist of the British rock band Queen, known for iconic songs like 'Bohemian Rhapsody.'" 13 | }, 14 | { 15 | "author": "Adele", 16 | "bio": "Adele is an English singer-songwriter known for her powerful voice and chart-topping hits like 'Rolling in the Deep.'" 17 | }, 18 | { 19 | "author": "John Lennon", 20 | "bio": "John Lennon was a member of The Beatles and a solo artist, famous for his song 'Imagine.'" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/04-promises/json/songs.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Shape of You", 4 | "duration": "3:54" 5 | }, 6 | { 7 | "title": "Blinding Lights", 8 | "duration": "3:20" 9 | }, 10 | { 11 | "title": "Bohemian Rhapsody", 12 | "duration": "5:55" 13 | }, 14 | { 15 | "title": "Rolling in the Deep", 16 | "duration": "3:48" 17 | }, 18 | { 19 | "title": "Imagine", 20 | "duration": "3:15" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/04-promises/script.js: -------------------------------------------------------------------------------- 1 | console.log("AJAX and XHR JS"); 2 | 3 | // ----------- Select Elements From Page -------------- // 4 | const header = document.querySelector('h1'); 5 | const button = document.getElementById('btn-click'); 6 | const items = document.querySelector('.items'); 7 | 8 | 9 | // Promise 10 | 11 | // create a promise 12 | // a promise will have two states : resolved or rejected 13 | // resolved when all good 14 | // rejected - when error 15 | // const promise = new Promise((resolve, reject) => { 16 | // // Simulate a task that is time consuming 17 | // setTimeout(() => { 18 | // console.log('Async task 1 resolved'); 19 | // resolve(); 20 | // }, 5000); 21 | // }); 22 | 23 | // promise.then(() => { 24 | // console.log('Promise ONe consumed and processed!'); 25 | // }); 26 | 27 | // Promise 2 - chaining methods 28 | 29 | // new Promise((resolve, reject) => { 30 | // // Simulate a task that is time consuming 31 | // setTimeout(() => { 32 | // console.log('Async task 2 resolved'); 33 | // resolve(); 34 | // }, 1000); 35 | // }).then(() => { 36 | // console.log('Promise 2 processed!'); 37 | // }); 38 | 39 | // Promise 3 - passing data to then 40 | 41 | // new Promise((resolve, reject) => { 42 | // // Simulate a task that is time consuming 43 | // setTimeout(() => { 44 | // console.log('Async task 3 resolved'); 45 | // const data = {name: 'John Doe', age: 35}; 46 | // resolve(data); 47 | // }, 1000); 48 | // }).then((info) => { 49 | // console.log('Promise 3 processed: ', info); 50 | // }); 51 | 52 | // Promise 4 53 | const getUser = new Promise((resolve, reject) => { 54 | // Simulate a task that is time consuming 55 | setTimeout(() => { 56 | console.log('Async task 4 resolved'); 57 | const data = {name: 'John Doe', age: 35}; 58 | 59 | const error = false; 60 | 61 | if(!error){ 62 | resolve(data); 63 | } else { 64 | reject({error: 'ERROR: Something went wrong!'}); 65 | } 66 | 67 | }, 2000); 68 | }); 69 | 70 | getUser 71 | .then((data)=> { 72 | console.log('Data processed successfully: ', data); 73 | }) 74 | .catch((error) => { 75 | console.log(error); 76 | }) 77 | .finally(() => { 78 | console.log('FINALLY Executed...'); 79 | }); -------------------------------------------------------------------------------- /03-js-codebase/14-class/04-promises/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | #btn-click { 10 | padding: 0.6rem; 11 | background-color: black; 12 | color: white; 13 | border: none; 14 | border-radius: 5px; 15 | } 16 | 17 | #btn-click:active { 18 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 19 | } 20 | 21 | .items { 22 | margin-top: 2rem; 23 | border: 1px solid rgb(198, 198, 198); 24 | max-width: 600px; 25 | padding: 1rem; 26 | border-radius: 10px; 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | align-items: center; 31 | } 32 | 33 | .item { 34 | background-color: rgb(233, 233, 233); 35 | border-radius: 5px; 36 | width: 100%; 37 | overflow-wrap: wrap; 38 | padding: 0.5rem; 39 | margin-bottom: 1rem; 40 | } 41 | 42 | .color-red { 43 | color: rgb(172, 0, 0); 44 | } 45 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/05-refactor-callbacks-to-promises/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Refactor 7 | 8 | 9 | 10 |

Refactor

11 | 12 |
13 |

Items

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/05-refactor-callbacks-to-promises/script.js: -------------------------------------------------------------------------------- 1 | console.log("Callbacks JS"); 2 | 3 | // ----------- Select Elements From Page -------------- // 4 | const header = document.querySelector('h1'); 5 | const button = document.getElementById('btn-click'); 6 | const items = document.querySelector('.items'); 7 | 8 | 9 | const songs = [ 10 | {title: 'Shape of You', duration: '3.20'}, 11 | {title: 'Wind Of Change', duration: '4.15'}, 12 | {title: 'I Miss You', duration: '2.50'}, 13 | ]; 14 | 15 | function rederSongs(){ 16 | setTimeout(() => { 17 | 18 | document.querySelectorAll('.item').forEach((song) => song.remove()); 19 | 20 | songs.forEach((song) => { 21 | const div = document.createElement('div'); 22 | div.className = 'item'; 23 | div.innerHTML = ` 24 |

${song.title}

25 |

Duration: ${song.duration}

26 | `; 27 | items.appendChild(div); 28 | }); 29 | }, 1000); 30 | } 31 | 32 | function showError(error){ 33 | const h2 = document.createElement('h2'); 34 | h2.className = 'item'; 35 | h2.textContent = error; 36 | h2.style.color = 'red'; 37 | items.appendChild(h2); 38 | } 39 | 40 | function addSong(song){ 41 | return new Promise((resolve, reject) => { 42 | setTimeout(() => { 43 | const error = true; 44 | if(!error){ 45 | songs.push(song); 46 | console.log('Successfully added a new song to db: ', songs); 47 | resolve(); 48 | } else { 49 | reject("Something went wrong"); 50 | } 51 | }, 2000); 52 | }); 53 | } 54 | 55 | addSong({title: 'TNT', duration: '5.10'}) 56 | .then(rederSongs) 57 | .catch(showError); 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /03-js-codebase/14-class/05-refactor-callbacks-to-promises/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans-serif; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | #btn-click { 10 | padding: 0.6rem; 11 | background-color: black; 12 | color: white; 13 | border: none; 14 | border-radius: 5px; 15 | } 16 | 17 | #btn-click:active { 18 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 19 | } 20 | 21 | .items { 22 | margin-top: 2rem; 23 | border: 1px solid rgb(198, 198, 198); 24 | max-width: 600px; 25 | padding: 1rem; 26 | border-radius: 10px; 27 | 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: center; 31 | align-items: center; 32 | } 33 | 34 | .item { 35 | background-color: rgb(233, 233, 233); 36 | border-radius: 5px; 37 | width: 100%; 38 | overflow-wrap: wrap; 39 | padding: 0.5rem; 40 | margin-bottom: 1rem; 41 | } 42 | 43 | .color-red { 44 | color: rgb(172, 0, 0); 45 | } 46 | -------------------------------------------------------------------------------- /04-bootstrap-codebase/01-class/00-bootstrap-comiled-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Hello World!

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /04-bootstrap-codebase/01-class/01-bootstrap-cdn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | Bootstraop Intro 13 | 14 | 15 |

Hello World!

16 | 17 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /04-bootstrap-codebase/01-class/02-containers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | Bootstrap Containers 13 | 14 | 15 |

Containers

16 | 17 |
18 |

Regular Container

19 |

20 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 21 | distinctio eveniet dolore deleniti repellendus, atque mollitia omnis 22 | inventore voluptas architecto? 23 |

24 |
25 | 26 |
27 |

Small Container

28 |

29 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 30 | distinctio eveniet dolore deleniti repellendus, atque mollitia omnis 31 | inventore voluptas architecto? 32 |

33 |
34 | 35 |
36 |

Medium Container

37 |

38 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 39 | distinctio eveniet dolore deleniti repellendus, atque mollitia omnis 40 | inventore voluptas architecto? 41 |

42 |
43 | 44 |
45 |

Large Container

46 |

47 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 48 | distinctio eveniet dolore deleniti repellendus, atque mollitia omnis 49 | inventore voluptas architecto? 50 |

51 |
52 | 53 |
54 |

X Large Container

55 |

56 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 57 | distinctio eveniet dolore deleniti repellendus, atque mollitia omnis 58 | inventore voluptas architecto? 59 |

60 |
61 | 62 |
63 |

XX Large Container

64 |

65 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 66 | distinctio eveniet dolore deleniti repellendus, atque mollitia omnis 67 | inventore voluptas architecto? 68 |

69 |
70 | 71 |
72 |

Fluid Container

73 |

74 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium 75 | distinctio eveniet dolore deleniti repellendus, atque mollitia omnis 76 | inventore voluptas architecto? 77 |

78 |
79 | 80 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /04-bootstrap-codebase/01-class/13-theme-colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | Themes in Bootstrap 13 | 14 | 15 |
16 |

Themes in Bootstrap

17 | 18 |
19 |
20 |

21 | 22 |

23 |
24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 |
32 | 33 |
34 | 35 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /04-bootstrap-codebase/01-class/16-form-input-validation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | Form Inputs Validation 13 | 14 | 15 |
16 |

Form Inputs Validation

17 | 18 |
19 |
20 | Username: 21 | 22 | 23 |
Please enter a valid username!
24 |
25 | 26 |
27 | Email: 28 | 29 | 30 |
Please enter a valid email!
31 |
32 | 33 |
34 | 35 | 38 |
Checking this is required!
39 |
40 | 41 | 42 |
43 | 44 |
45 | 46 |
47 | 48 | 53 | 54 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /04-bootstrap-codebase/01-class/19-modals.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | Modals 13 | 14 | 15 |
16 |

Modals

17 | 18 | 26 | 27 | 28 | 54 |
55 | 56 |
57 | 58 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /04-bootstrap-codebase/01-class/20-popovers-and-tooltips.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | Popovers and Tooltips 13 | 14 | 15 |
16 |

Popovers and Tooltips

17 | 18 | 27 |

28 | 29 | 30 |

31 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 32 | Pariatur nostrum ut, modi quasi reprehenderit vel deserunt totam, vero magni aliquid hic 38 | repellat illum? 39 | Ipsa expedita ad 45 | , tempore error incidunt nesciunt quaerat eveniet ex porro facere 46 | excepturi sapiente tempora, ab reiciendis? 47 |

48 |
49 | 50 |
51 | 52 | 57 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /05-jest-codebase/01-common-jest-matchers/__tests__/index.test.js: -------------------------------------------------------------------------------- 1 | const {toBeOrNotToBe, throwIfNegative} = require('../index'); 2 | 3 | // const toBeOrNotToBe = require('./index').toBeOrNotToBe; 4 | // const throwIfNegative = require('./index').throwIfNegative; 5 | 6 | // test() and it() are alomost the same in functionality 7 | // test('function add 2 + 4 is equal to 6') 8 | // it('should return 6 when 2 + 4') 9 | 10 | 11 | // toBe() 12 | test("toBe - checks strict equality", () => { 13 | const sum = 5 + 10; 14 | // sum should be 15 15 | expect(sum).toBe(15); 16 | }); 17 | 18 | // toEqual() 19 | it("toEqual - checks object eqauality", () => { 20 | const user = { name: "John Doe", age: 35 }; 21 | const expectedUser = { name: "John Doe", age: 35 }; 22 | 23 | expect(user).toEqual(expectedUser); 24 | }); 25 | 26 | // toBeNull() and toBeUndefined() 27 | it('toBeNull - checks if actual is null', () => { 28 | const result = toBeOrNotToBe(3); 29 | expect(result).toBeNull(); 30 | }); 31 | 32 | it('toBeUndefined - checks if actual is undefined', () => { 33 | const result = undefined; 34 | expect(result).toBeUndefined(); 35 | }); 36 | 37 | // toBeTruthy() and toBeFalsy() 38 | test('toBeTruthy checks if actual value is truthy', ()=> { 39 | const result = toBeOrNotToBe(10); // true 40 | const num = 10; 41 | expect(num).toBeTruthy(); 42 | }); 43 | 44 | test('toBeFalsy checks if actual value is falsy', ()=> { 45 | const result = 20 < 15; 46 | expect(result).toBeFalsy(); 47 | }); 48 | 49 | test('not operator', () => { 50 | const result = 20 < 15; 51 | expect(result).not.toBe(true); 52 | }); 53 | 54 | test('toThrow - check if a function throws and error', () => { 55 | // when you are testing for thrown errors make sure you are using a callback function 56 | expect(() => throwIfNegative(-5)).toThrow(); 57 | }); 58 | 59 | test('toThrow - check if a function is not throwing and error', () => { 60 | // when you are testing for thrown errors make sure you are using a callback function 61 | expect(() => throwIfNegative(5)).not.toThrow(); 62 | }); 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /05-jest-codebase/01-common-jest-matchers/index.js: -------------------------------------------------------------------------------- 1 | function toBeOrNotToBe(number){ 2 | if(number % 2 === 0){ 3 | return true; 4 | } else { 5 | return null; 6 | } 7 | } 8 | 9 | function throwIfNegative(num){ 10 | if(num < 0){ 11 | throw new Error('Negative value not allowed!'); 12 | } 13 | return num; 14 | } 15 | 16 | 17 | module.exports = {toBeOrNotToBe, throwIfNegative}; -------------------------------------------------------------------------------- /05-jest-codebase/02-alogorithms-unit-test/fizzbuzz/fizzbuzz.js: -------------------------------------------------------------------------------- 1 | function fizzbuzz(number){ 2 | if(typeof number !== 'number'){ 3 | throw new Error('Please provide a number!'); 4 | } 5 | 6 | if(number % 3 === 0 && number % 5 === 0){ 7 | return 'fizzbuzz'; 8 | } else if(number % 3 === 0){ 9 | return 'fizz'; 10 | } else if(number % 5 === 0){ 11 | return 'buzz'; 12 | } else { 13 | return number; 14 | } 15 | }; 16 | 17 | module.exports = fizzbuzz; 18 | -------------------------------------------------------------------------------- /05-jest-codebase/02-alogorithms-unit-test/fizzbuzz/fizzbuzz.test.js: -------------------------------------------------------------------------------- 1 | const fizzbuzz = require('./fizzbuzz'); 2 | 3 | describe('Testing fizzbuzz logic', () => { 4 | 5 | it('should be a function', () => { 6 | expect(typeof fizzbuzz).toBe('function'); 7 | }); 8 | 9 | it('shoud return the number if not multiple of 3 nor of 5', () => { 10 | expect(fizzbuzz(1)).toBe(1); 11 | expect(fizzbuzz(13)).toBe(13); 12 | }); 13 | 14 | it('shoud return fizz when it is a multiple of 3', () => { 15 | expect(fizzbuzz(3)).toBe('fizz'); 16 | expect(fizzbuzz(6)).toBe('fizz'); 17 | }); 18 | 19 | it('shoud return buzz when it is a multiple of 5', () => { 20 | expect(fizzbuzz(5)).toBe('buzz'); 21 | expect(fizzbuzz(10)).toBe('buzz'); 22 | }); 23 | 24 | it('should return fizzbuzz if multiple of 3 and 5', () => { 25 | expect(fizzbuzz(15)).toBe('fizzbuzz'); 26 | expect(fizzbuzz(30)).toBe('fizzbuzz'); 27 | }); 28 | 29 | it('should throw an error if not number', () => { 30 | expect(() => fizzbuzz(true)).toThrow(); 31 | expect(() => fizzbuzz('hi')).toThrow(); 32 | }); 33 | 34 | }); -------------------------------------------------------------------------------- /05-jest-codebase/02-alogorithms-unit-test/palindrome/palindrome.js: -------------------------------------------------------------------------------- 1 | function palindrome(str){ 2 | if(str === ''){ 3 | return false; 4 | } 5 | 6 | return str === str.split('').reverse().join(''); 7 | }; 8 | 9 | module.exports = palindrome; -------------------------------------------------------------------------------- /05-jest-codebase/02-alogorithms-unit-test/palindrome/palindrome.test.js: -------------------------------------------------------------------------------- 1 | // const palindrome - decalring a variable (can be named as you want), you will just assign the import to it 2 | // require() - function that accepts a module path to import it 3 | // './palindrome' - the actual path to the module to import (make sure you have the export in it) 4 | 5 | const palindrome = require('./palindrome'); 6 | 7 | 8 | describe('Palindrome Tests: ', () => { 9 | 10 | it('should be a function', () => { 11 | expect(typeof palindrome).toBe('function'); 12 | }); 13 | 14 | it('should return a boolean', () => { 15 | expect(typeof palindrome('hi')).toBe('boolean'); 16 | }); 17 | 18 | it('should return true if a string is palindrome', () => { 19 | expect(palindrome('kayak')).toBeTruthy(); 20 | expect(palindrome('racecar')).toBeTruthy(); 21 | }); 22 | 23 | it('should return false if a string is not palindrome', () => { 24 | expect(palindrome('hello')).toBeFalsy(); 25 | expect(palindrome('')).toBeFalsy(); 26 | }); 27 | 28 | }); 29 | 30 | -------------------------------------------------------------------------------- /05-jest-codebase/02-alogorithms-unit-test/reversestring/reversestring.js: -------------------------------------------------------------------------------- 1 | function reversestring(str){ 2 | return str.split('').reverse().join(''); 3 | } 4 | 5 | module.exports = reversestring; -------------------------------------------------------------------------------- /05-jest-codebase/02-alogorithms-unit-test/reversestring/reversestring.test.js: -------------------------------------------------------------------------------- 1 | const reversestring = require('./reversestring'); 2 | 3 | describe('Test Reverse String Function: ', () => { 4 | 5 | it('should be a function', () => { 6 | expect(typeof reversestring).toBe('function'); 7 | }); 8 | 9 | it('should return a string', () => { 10 | expect(typeof reversestring('hello')).toBe('string'); 11 | }); 12 | 13 | it('should return a reversed string', () => { 14 | expect(reversestring('hello')).toBe('olleh'); 15 | expect(reversestring('world')).toBe('dlrow'); 16 | expect(reversestring('test')).toBe('tset'); 17 | expect(reversestring('')).toBe(''); 18 | }); 19 | 20 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Resources 2 | 3 | ## Fonts: 4 | - [Google Fonts](https://fonts.google.com/) - choose any fonts you like and link them to your project. 5 | 6 | ## Free Images: 7 | - [Unsplash](https://unsplash.com/) - Has most of the images are free 8 | - [Pexels](https://www.pexels.com/) - Has a wide range of free stock photos and videos 9 | - [Pixabay](https://pixabay.com/) - Contains a massive collection of free images, illustrations, and vectors. 10 | - [Svgbackgrounds](https://www.svgbackgrounds.com/) - has great patterns 11 | 12 | ## Icons: 13 | - [Font Awesome](https://fontawesome.com/search) 14 | 15 | ## Images API: 16 | - `https://picsum.photos/600/300` - you can chnage the sizes as needed 17 | - `https://placehold.co/600x300` - no image just a placeholder showing you the size of the image needed -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fsd1-html-css-jss-codebase", 3 | "version": "1.0.0", 4 | "description": "## Fonts: - [Google Fonts](https://fonts.google.com/) - choose any fonts you like and link them to your project.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/dmytro-ch21/fsd1-html-css-jss-codebase.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/dmytro-ch21/fsd1-html-css-jss-codebase/issues" 18 | }, 19 | "homepage": "https://github.com/dmytro-ch21/fsd1-html-css-jss-codebase#readme", 20 | "dependencies": { 21 | "jest": "^29.7.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /practice-projects/objects-challenge/challenge.md: -------------------------------------------------------------------------------- 1 | # Playlist Challenge 2 | 3 | ## 1. Create the Playlist: 4 | 5 | - #### Create an array called playlist. Add 4 objects, each object with these properties: 6 | - songName (string): The name of the song. 7 | - artist (string): The artist of the song. 8 | - duration (number): The duration of the song in minutes. 9 | - status (object): Properties: 10 | - favorite (boolean, initially false). 11 | - played (boolean, initially false). 12 | - skipped (boolean, initially false). 13 | 14 | ## 2. Mark Songs as Played: 15 | 16 | - #### You listened to all the songs in the playlist. Update the played property of all songs to true. 17 | 18 | ## 3. Update Favorite and Skipped Status: 19 | 20 | - #### Mark the first and last songs as favorites 21 | - #### Mark the third song as skipped 22 | 23 | ## 4. Destructure Data: 24 | - #### Destructure the artist and songName of the first song into variables firstArtist and firstSong. 25 | 26 | ## 5. Add a New Song To The Playlist 27 | 28 | - #### Add a new song to the playlist array 29 | 30 | ## 6. Remove the skipped song from the playlist array. 31 | 32 | ## 7. Convert to JSON and Back 33 | 34 | -------------------------------------------------------------------------------- /practice-projects/objects-challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Challenge 7 | 8 | 9 |

Challenge

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /practice-projects/objects-challenge/script.js: -------------------------------------------------------------------------------- 1 | console.log("Challenge - Objects"); 2 | 3 | const playlist = [ 4 | { 5 | songName: "Segunda", 6 | artist: "Jeremy Soule", 7 | duration: 3.12, 8 | status: { 9 | favorite: false, 10 | played: false, 11 | skipped: false, 12 | }, 13 | }, 14 | { 15 | songName: "Vienna", 16 | artist: "Billy Joel", 17 | duration: 2.45, 18 | status: { 19 | favorite: false, 20 | played: false, 21 | skipped: false, 22 | }, 23 | }, 24 | { 25 | songName: "Falling", 26 | artist: "Sunday Scaries", 27 | duration: 3.0, 28 | status: { 29 | favorite: false, 30 | played: false, 31 | skipped: false, 32 | }, 33 | }, 34 | { 35 | songName: "Single Ladies", 36 | artist: "Beyonce", 37 | duration: 3.4, 38 | status: { 39 | favorite: false, 40 | played: false, 41 | skipped: false, 42 | }, 43 | }, 44 | { 45 | songName: "Shape Of You", 46 | artist: "Ed Sheeran", 47 | duration: 2.5, 48 | status: { 49 | favorite: false, 50 | played: false, 51 | skipped: false, 52 | }, 53 | }, 54 | { 55 | songName: "Soltera", 56 | artist: "Shakira", 57 | duration: 2.9, 58 | status: { 59 | favorite: false, 60 | played: false, 61 | skipped: false, 62 | }, 63 | }, 64 | ]; 65 | 66 | console.log(playlist.length); 67 | 68 | playlist[0].status.played = true; 69 | playlist[1].status.played = true; 70 | playlist[2].status.played = true; 71 | playlist[3].status.played = true; 72 | playlist[4].status.played = true; 73 | playlist[5].status.played = true; 74 | 75 | // console.log(playlist); 76 | 77 | // fav 78 | playlist[0].status.favorite = true; 79 | // 6 - 1 80 | playlist[playlist.length - 1].status.favorite = true; 81 | 82 | // skipped 83 | playlist[2].status.skipped = true; 84 | 85 | // destructuring 86 | const { artist: firstArtist, songName: firstSong } = playlist[0]; 87 | 88 | console.log(firstArtist, firstSong); 89 | 90 | playlist.push({ 91 | songName: "Wind Of Change", 92 | artist: "Scorpions", 93 | duration: 2.6, 94 | status: { 95 | favorite: false, 96 | played: false, 97 | skipped: false, 98 | }, 99 | }); 100 | 101 | playlist.splice(2, 1); 102 | 103 | console.log(playlist); 104 | 105 | // Convert to a json 106 | const jsonPlaylist = JSON.stringify(playlist); 107 | console.log(jsonPlaylist); 108 | 109 | // Convert back to a js object 110 | const parsedPlaylist = JSON.parse(jsonPlaylist); 111 | console.log(parsedPlaylist); 112 | --------------------------------------------------------------------------------