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 |
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 |
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 |
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.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
43 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam
44 | nobis earum fugiat corrupti ut explicabo maiores doloribus dolores
45 | in est!
46 |
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 |