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 |
--------------------------------------------------------------------------------
/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-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 | }
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | });
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 | }
--------------------------------------------------------------------------------
/03-js-codebase/10-class/01-traversing-dom/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Traversing DOM
7 |
17 |
18 |
19 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/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/08-class/01-dom-basics/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | DOM Basics
7 |
19 |
20 |
21 |
22 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus repellat sint mollitia itaque
26 | consequuntur est eius veritatis, ducimus iusto porro?
40 |
41 |
42 |
--------------------------------------------------------------------------------
/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/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/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();
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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/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/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
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?
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-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 | }
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
29 |
30 |
31 |
32 |
33 | Modal Title
34 |
35 |
41 |
42 |
43 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam
44 | nobis earum fugiat corrupti ut explicabo maiores doloribus dolores
45 | in est!
46 |
47 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/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 | });
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/04-bootstrap-codebase/01-class/16-form-input-validation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 | Form Inputs Validation
13 |
14 |
15 |
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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/03-js-codebase/12-class/01-event-listeners-cont/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Event Listeners Continuation
7 |
8 |
9 |
10 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/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/12-class/02-form-submit-events/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Form Event Listeners
7 |
8 |
9 |
10 |
74 |
75 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/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/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/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/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/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/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/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 |
--------------------------------------------------------------------------------
/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 |
13 |