├── 01.Javascript-Basics
    ├── 01.Where-to-add-javascript
    │   └── index.html
    ├── 02.Async & defer
    │   ├── index.html
    │   └── script1.js
    ├── 03.Working with strings
    │   └── index.html
    ├── 04.Storing data with variables
    │   └── index.html
    ├── 05.Mixing-strings-with-variables
    │   └── index.html
    ├── 06.Data types: Numbers
    │   └── index.html
    ├── 07.Data types: Boolean, null & undefined
    │   └── index.html
    ├── 08.Comments, semicolons and ASI
    │   └── index.html
    ├── 09.Operators: Assignment and comparison
    │   └── index.html
    ├── 10.Operators: Logical and arithmetic
    │   └── index.html
    ├── 11.Introduction-to-arrays
    │   └── index.html
    ├── 12.Introduction-to-objects
    │   └── index.html
    └── 13.Introduction-to-functions
    │   └── index.html
├── 02.Arrays-In-More-Depth
    ├── 01.The-array-constructor
    │   └── index.html
    ├── 02.Properties-methods-prototype
    │   └── index.html
    ├── 03.Modifying-arrays
    │   └── index.html
    ├── 04.Returning-new-values
    │   └── index.html
    ├── 05.Iteration Methods
    │   └── index.html
    ├── 06.Reducers
    │   └── index.html
    ├── 07.Map-forEach
    │   └── index.html
    ├── 08-Array-destructuring
    │   └── index.html
    ├── 09.Unique-values-with-set
    │   └── index.html
    └── 10.Two-dimensional-arrays
    │   └── index.html
├── 03.Functions
    ├── 01.The-global-object-built-in-functions
    │   └── index.html
    ├── 02.Function-expressions
    │   └── index.html
    ├── 03.Immediately-invoked-function-expressions
    │   └── index.html
    ├── 04.Anonymous-or-named
    │   └── index.html
    ├── 05.A-function-or-a-method
    │   └── index.html
    ├── 06.Arrow-functions
    │   └── index.html
    └── 07.Default-parameter-values-and-using-rest
    │   └── index.html
├── 04.Events-And-The-DOM
    ├── 01.Selecting-elements
    │   └── index.html
    ├── 02.Changing-values-and-attributes
    │   ├── burger.jpg
    │   └── index.html
    ├── 03.Changing-an-elements-css
    │   ├── burger.jpg
    │   └── index.html
    ├── 04.Creating-new-elements
    │   ├── burger.jpg
    │   └── index.html
    ├── 05.Adding-elements-to-the-page
    │   ├── burger.jpg
    │   └── index.html
    ├── 06.Cloning-and-removing-elements
    │   ├── burger.jpg
    │   └── index.html
    ├── 07.Mini-challenge-create-a-new-section
    │   ├── burger.jpg
    │   ├── index.html
    │   └── styles.css
    ├── 08.Looping-with-dom-elements
    │   ├── burger.jpg
    │   ├── index.html
    │   └── styles.css
    ├── 09.Listening-for-events
    │   ├── burger.jpg
    │   ├── burger2.jpg
    │   ├── index.html
    │   └── styles.css
    ├── 10.Listening-for-multiple-events-and-event-data
    │   ├── burger.jpg
    │   ├── burger2.jpg
    │   ├── elements.js
    │   ├── events.js
    │   ├── index.html
    │   └── styles.css
    ├── 11.Event-propagation
    │   ├── burger.jpg
    │   ├── burger2.jpg
    │   ├── elements.js
    │   ├── events.js
    │   ├── index.html
    │   └── styles.css
    ├── 12.Running-events-once
    │   ├── burger.jpg
    │   ├── burger2.jpg
    │   ├── elements.js
    │   ├── events.js
    │   ├── index.html
    │   └── styles.css
    ├── 13.Preventing-default-behaviour-and the-passive-option
    │   ├── burger.jpg
    │   ├── burger2.jpg
    │   ├── elements.js
    │   ├── events.js
    │   ├── index.html
    │   └── styles.css
    ├── 14.Removing-event-listeners
    │   ├── events.js
    │   ├── index.html
    │   └── styles.css
    ├── 15.HTML-collection-or-NodeList
    │   ├── index.html
    │   └── script.js
    └── 16.Mini-challenge-create-a-dark-mode-button
    │   ├── index.html
    │   ├── script.js
    │   └── styles.css
├── 05.Time-To-Practice
    ├── 01.Video-player
    │   ├── index.html
    │   ├── script.js
    │   ├── styles.css
    │   └── video.mp4
    └── 02.Shape-drop-game
    │   ├── index.html
    │   ├── script.js
    │   └── styles.css
├── 06.Loops-And-Conditionals
    ├── 01.For-loops
    │   └── index.html
    ├── 02.For-in-for-of
    │   └── index.html
    ├── 03.While-loops
    │   └── index.html
    ├── 04.If-else-statements
    │   └── index.html
    ├── 05.Else-if
    │   └── index.html
    ├── 06.The-switch-statement
    │   └── index.html
    ├── 07.Conditional-operator
    │   └── index.html
    ├── 08.Type-coercion-conversion
    │   └── index.html
    ├── 09.Truthy-falsy
    │   └── index.html
    └── 10.Optional-chaining
    │   └── index.html
├── 07.Objects-In-More-Depth
    ├── 01.The-object-constructor
    │   └── index.html
    ├── 02.Object-constructor-functions
    │   └── index.html
    ├── 03.Object-prototypes
    │   └── index.html
    ├── 04.Inheriting-object-prototypes
    │   └── index.html
    ├── 05.Copying-object-properties
    │   └── index.html
    ├── 06.CSS-style-objects
    │   └── index.html
    ├── 07.Looping-with-objects
    │   └── index.html
    ├── 08.Dynamic-objects
    │   └── index.html
    ├── 09.Primitive-reference-types
    │   └── index.html
    └── 10.Comparing-objects
    │   └── index.html
├── 08.Speedy-Chef-Project
    ├── index.html
    ├── index.js
    ├── pizza.svg
    └── styles.css
├── 09.Scope-Hoisting-Closures
    ├── 01.Introduction-to-scope
    │   └── index.html
    ├── 02.Nesting-scope
    │   └── index.html
    ├── 03.Block-function-scope
    │   └── index.html
    ├── 04.Hoisting
    │   └── index.html
    ├── 05.Temporal-dead-zone
    │   └── index.html
    └── 06.Closures
    │   └── index.html
├── 10.Async-Javascript
    ├── 01.A-little-bit-of-background
    │   └── index.html
    ├── 02.Callback-functions
    │   └── index.html
    ├── 03.Promises
    │   └── index.html
    ├── 04.The-promise-constructor
    │   └── index.html
    ├── 05.Handling-multiple-promises
    │   └── index.html
    ├── 06.Async-await
    │   └── index.html
    ├── 07.Handling-multiple-awaits
    │   └── index.html
    └── 08.Error-handling
    │   └── index.html
└── 11.More-Practice
    ├── 1.Leaving-so-soon
        ├── index.html
        ├── script.js
        └── styles.css
    └── 2.Image carousel
        ├── carousel
            ├── carousel.css
            ├── carousel.js
            └── images
            │   ├── beach.jpg
            │   ├── elephants.jpg
            │   ├── grass.jpg
            │   ├── lake.jpg
            │   └── town.jpg
        └── index.html


/01.Javascript-Basics/01.Where-to-add-javascript/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 		<title>Where to add JavaScript</title>
 8 | 	</head>
 9 | 	<body></body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/01.Javascript-Basics/02.Async & defer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Async & defer</title>
 9 |   <script src="script1.js"></script>
10 | </head>
11 | 
12 | <body>
13 |   <h1 id="title">Where to add Javascript</h1>
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/01.Javascript-Basics/02.Async & defer/script1.js:
--------------------------------------------------------------------------------
1 | document.getElementById("title").innerText = "Javascript";
2 | document.getElementById("title").style.color = "red";
3 | 


--------------------------------------------------------------------------------
/01.Javascript-Basics/03.Working with strings/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Working with strings</title>
 9 | </head>
10 | 
11 | <body>
12 |   <h1 id="title">Working with strings</h1>
13 | 
14 |   <script>
15 |     document.getElementById('title').innerText = 'something else'
16 |   </script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/01.Javascript-Basics/04.Storing data with variables/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Storing data with variables</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Storing data with variables</h1>
12 |     <script>
13 |       document.getElementById('title').innerText = 'variables';
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/01.Javascript-Basics/05.Mixing-strings-with-variables/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Mixing Strings With Variables</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Mixing Strings With Variables</h1>
12 |     <script>
13 |       const name = 'Chris';
14 |       const likes = 'pizza';
15 | 
16 |       document.getElementById('title').innerText =
17 |         'Mixing Strings With Variables';
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/01.Javascript-Basics/06.Data types: Numbers/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Data types: Numbers</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |   <h1 id="title">Data types: Numbers</h1>
14 |   <script>
15 |     document.getElementById('title').innerText = 'HELLO'
16 |   </script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/01.Javascript-Basics/07.Data types: Boolean, null & undefined/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Data types: Boolean, null & undefined</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |   <h1 id="title">Data types: Boolean, null & undefined</h1>
14 |   <script>
15 | 
16 |   </script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/01.Javascript-Basics/08.Comments, semicolons and ASI/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Comments, semicolons and ASI</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |   <h1 id="title">Comments, semicolons and ASI</h1>
14 |   <script>
15 | 
16 |   </script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/01.Javascript-Basics/09.Operators: Assignment and comparison/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 | 		<title>Operators</title>
 8 | 	</head>
 9 | 
10 | 	<body>
11 | 		<h1 id="title">Operators: Assignment & comparison</h1>
12 | 		<script>
13 | 			// ASSIGNMENT OPERATORS
14 | 			// =, +=, -+, *=, /=, %=
15 | 			const forename = "Homer";
16 | 			const surname = "Simpson";
17 | 			let number1 = 15;
18 | 			let number2 = 5;
19 | 
20 | 			// document.getElementById('title').innerText =
21 | 
22 | 			// COMPARISON OPERATORS
23 | 			// ==, !=, ===, !==, >, >=, <, <=
24 | 		</script>
25 | 	</body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/01.Javascript-Basics/10.Operators: Logical and arithmetic/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Operators: Logical & arithmetic</title>
 9 | </head>
10 | 
11 | <body>
12 | 
13 |   <h1 id="title">Operators: Logical & arithmetic</h1>
14 |   <script>
15 |     // ARITHMETIC OPERATORS
16 |     // +, -, *, /, %, ++, --
17 |     const forename = 'Chris'
18 |     const surname = 'Dixon'
19 |     let number1 = 16
20 |     let number2 = 5
21 | 
22 |     number1 += number2 // result = 20
23 |     // document.getElementById('title').innerText =
24 | 
25 |     // LOGICAL OPERATORS
26 |     // &&, ||, !
27 | 
28 |   </script>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/01.Javascript-Basics/11.Introduction-to-arrays/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 | 		<title>Introduction To Arrays & Object Types</title>
 8 | 	</head>
 9 | 
10 | 	<body>
11 | 		<h1 id="title">Introduction To Arrays & Object Types</h1>
12 | 		<script></script>
13 | 	</body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/01.Javascript-Basics/12.Introduction-to-objects/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Introduction To Objects</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Introduction To Objects</h1>
12 |     <script>
13 |       document.getElementById('title').innerText = 'Introduction To Objects';
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/01.Javascript-Basics/13.Introduction-to-functions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Introduction To Functions</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Introduction To Functions</h1>
12 |     <script>
13 |       let bread = ['flour', 'yeast', 'salt', 'water'];
14 |       let brownies = ['butter', 'chocolate', 'flour', 'eggs', 'sugar'];
15 |     </script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/01.The-array-constructor/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>The Array Constructor</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">The Array Constructor</h1>
12 |     <script>
13 |       // Array Literal
14 |       let pizza = ['dough', 'pepperoni', 'cheese', 'sauce'];
15 |     </script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/02.Properties-methods-prototype/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Properties, Methods & The Prototype</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Properties, Methods & The Prototype</h1>
12 |     <script>
13 |       let margherita = ['dough', 'sauce', 'cheese'];
14 |       let vegetarian = [
15 |         'dough',
16 |         'sauce',
17 |         'cheese',
18 |         'peppers',
19 |         'onions',
20 |         'jalapenos',
21 |       ];
22 |       let pepperoni = ['dough', 'sauce', 'cheese', 'pepperoni'];
23 |     </script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/03.Modifying-arrays/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Modifying Arrays</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Modifying Arrays</h1>
12 |     <script>
13 |       let pizza = ['dough', 'sauce', 'cheese'];
14 |       pizza.push('pepperoni');
15 |       console.log(pizza);
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/04.Returning-new-values/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Returning New Values</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Returning New Values</h1>
12 |     <script>
13 |       let pizza = ['dough', 'sauce', 'cheese'];
14 |       const isIncluded = pizza.includes('dough');
15 |       console.log(pizza, isIncluded);
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/05.Iteration Methods/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Iteration Methods</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Iteration Methods</h1>
12 |     <script>
13 |       // admin = full access & permissions
14 |       // author = can publish & manage their own posts
15 |       // subscriber = can only manage their own profile
16 |       let roles = ['admin', 'author', 'subscriber'];
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/06.Reducers/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Reducers</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Reducers</h1>
12 |     <script>
13 |       let numbers = [72, 33, 108, 222, 6];
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/07.Map-forEach/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Map & forEach</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Map & forEach</h1>
12 |     <script>
13 |       let numbers = [72, 33, 108, 222, 6];
14 |       let posts = [
15 |         { title: 'How to learn Javascript', body: 'bla bla bla' },
16 |         { title: 'How to be a ninja', body: 'bla bla bla' },
17 |         { title: 'How to be a ninja part 2', body: 'bla bla bla' },
18 |       ];
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/08-Array-destructuring/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Array Destructuring</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Array Destructuring</h1>
12 |     <script>
13 |       let posts = [
14 |         { title: 'How to learn Javascript', body: 'bla bla bla' },
15 |         { title: 'How to be a ninja', body: 'bla bla bla' },
16 |         { title: 'How to be a ninja part 2', body: 'bla bla bla' },
17 |       ];
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/09.Unique-values-with-set/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Unique Values With Set</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Unique Values With Set</h1>
12 |     <script>
13 |       let categories = [
14 |         'bags',
15 |         'shoes',
16 |         'shirts',
17 |         'ties',
18 |         'jackets',
19 |         'hats',
20 |         'bags',
21 |       ];
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/02.Arrays-In-More-Depth/10.Two-dimensional-arrays/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Two Dimensional Arrays</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Two Dimensional Arrays</h1>
12 |     <script></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/03.Functions/01.The-global-object-built-in-functions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>The Global Object & Built In Functions</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">The Global Object & Built In Functions</h1>
12 |     <script>
13 |       let bread = ['flour', 'yeast', 'salt', 'water'];
14 |       let brownies = ['butter', 'chocolate', 'flour', 'eggs', 'sugar'];
15 | 
16 |       function checkAllergies(recipe, ingredient) {
17 |         const hasIngredient = recipe.includes(ingredient);
18 |         return hasIngredient;
19 |       }
20 |     </script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/03.Functions/02.Function-expressions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Function Expressions</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Function Expressions</h1>
12 |     <script>
13 |       let bread = ['flour', 'yeast', 'salt', 'water'];
14 |       let brownies = ['butter', 'chocolate', 'flour', 'eggs', 'sugar'];
15 | 
16 |       function checkAllergies(recipe, ingredient) {
17 |         const hasIngredient = recipe.includes(ingredient);
18 |         return hasIngredient;
19 |       }
20 |     </script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/03.Functions/03.Immediately-invoked-function-expressions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Immediately Invoked Function Expressions</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Immediately Invoked Function Expressions</h1>
12 |     <script>
13 |       function hey() {
14 |         alert('HEY');
15 |       }
16 |       hey();
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/03.Functions/04.Anonymous-or-named/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 | 		<title>Anonymous Or Named?</title>
 8 | 	</head>
 9 | 
10 | 	<body>
11 | 		<h1 id="title">Anonymous Or Named?</h1>
12 | 		<script>
13 | 			let bread = ["flour", "yeast", "salt", "water"];
14 | 			let brownies = ["butter", "chocolate", "flour", "eggs", "sugar"];
15 | 
16 | 			// named function
17 | 			function numberOfIngredients(recipe) {
18 | 				return recipe.length;
19 | 			}
20 | 			// anonymous
21 | 			const checkAllergies = function (recipe, ingredient) {
22 | 				const hasIngredient = recipe.includes(ingredient);
23 | 				return hasIngredient;
24 | 			};
25 | 
26 | 			// ===============================================
27 | 			// let posts = [
28 | 			//   { title: 'How to learn Javascript', body: 'bla bla bla' },
29 | 			//   { title: 'How to be a ninja', body: 'bla bla bla' },
30 | 			//   { title: 'How to be a ninja part 2', body: 'bla bla bla' },
31 | 			// ];
32 | 
33 | 			const getIndex = posts
34 | 				.map(function (post) {
35 | 					return post.title.toUpperCase();
36 | 				})
37 | 				.findIndex(function (value) {
38 | 					return value === "HOW TO BE A NINJA PART 2";
39 | 				});
40 | 			console.log(getIndex);
41 | 		</script>
42 | 	</body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/03.Functions/05.A-function-or-a-method/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>A Function Or a Method</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">A Function Or a Method</h1>
12 |     <script>
13 |       let bread = ['flour', 'yeast', 'salt', 'water'];
14 |       let brownies = ['butter', 'chocolate', 'flour', 'eggs', 'sugar'];
15 |       // functions
16 |       function checkAllergies(recipe, ingredient) {
17 |         const hasIngredient = recipe.includes(ingredient);
18 |         return hasIngredient;
19 |       }
20 |     </script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/03.Functions/06.Arrow-functions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Arrow Functions</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Arrow Functions</h1>
12 |     <script>
13 |       const startGame = function () {
14 |         alert('game started');
15 |       };
16 | 
17 |       // =================================================
18 |       // let bread = ['flour', 'yeast', 'salt', 'water'];
19 |       // let brownies = ['butter', 'chocolate', 'flour', 'eggs', 'sugar'];
20 | 
21 |       // let checkRecipes = {
22 |       //   currentRecipes: 137,
23 |       //   maxRecipes: 1000,
24 |       //   checkAllergies: function (recipe, ingredient) {
25 |       //     const hasIngredient = recipe.includes(ingredient);
26 |       //     return hasIngredient;
27 |       //   },
28 |       //   numberOfIngredients: function (recipe) {
29 |       //     return recipe.length;
30 |       //   },
31 |       //   recipesLeft: function () {
32 |       //     return this.maxRecipes - this.currentRecipes;
33 |       //   },
34 |       // };
35 | 
36 |       // console.log(checkRecipes.recipesLeft());
37 |     </script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/03.Functions/07.Default-parameter-values-and-using-rest/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Default Parameter Values & Using Rest</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <h1 id="title">Default Parameter Values & Using Rest</h1>
12 |     <script></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/01.Selecting-elements/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Selecting Elements</title>
 8 |     <style>
 9 |       table,
10 |       td,
11 |       th {
12 |         border: 1px solid rgb(56, 56, 56);
13 |         padding: 1rem;
14 |       }
15 | 
16 |       table {
17 |         width: 100%;
18 |         border-collapse: collapse;
19 |       }
20 |       caption {
21 |         margin: 1rem 0;
22 |       }
23 |     </style>
24 |   </head>
25 | 
26 |   <body>
27 |     <section>
28 |       <table>
29 |         <caption>
30 |           Selecting DOM elements
31 |         </caption>
32 |         <tr>
33 |           <th>Select by:</th>
34 |           <th>Method:</th>
35 |         </tr>
36 |         <tr>
37 |           <td>id</td>
38 |           <td>getElementById</td>
39 |         </tr>
40 |         <tr>
41 |           <td>tag(element name)</td>
42 |           <td>getElement<mark>s</mark>ByTagName</td>
43 |         </tr>
44 |         <tr>
45 |           <td>class name</td>
46 |           <td>getElement<mark>s</mark>ByClassName</td>
47 |         </tr>
48 |         <tr>
49 |           <td>css selector (first match)</td>
50 |           <td>querySelector</td>
51 |         </tr>
52 |         <tr>
53 |           <td>css selector (all matches)</td>
54 |           <td>querySelectorAll</td>
55 |         </tr>
56 |       </table>
57 |     </section>
58 |     <script></script>
59 |   </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/02.Changing-values-and-attributes/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/02.Changing-values-and-attributes/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/02.Changing-values-and-attributes/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 | 		<title>Changing Values & Content</title>
 8 | 		<style>
 9 | 			body {
10 | 				margin: 0;
11 | 				color: rgb(89, 88, 88);
12 | 			}
13 | 
14 | 			header {
15 | 				display: flex;
16 | 				justify-content: space-between;
17 | 				align-items: center;
18 | 				padding: 0 10px;
19 | 			}
20 | 
21 | 			.green {
22 | 				color: rgb(40, 141, 40);
23 | 			}
24 | 
25 | 			.nav-inline {
26 | 				display: flex;
27 | 				list-style: none;
28 | 			}
29 | 
30 | 			.nav-item {
31 | 				font-size: 18px;
32 | 				margin: 0 5px;
33 | 				text-transform: uppercase;
34 | 				font-weight: bolder;
35 | 				color: rgb(89, 88, 88);
36 | 				cursor: pointer;
37 | 			}
38 | 
39 | 			img {
40 | 				width: 100%;
41 | 			}
42 | 		</style>
43 | 	</head>
44 | 
45 | 	<body>
46 | 		<header>
47 | 			<h1 id="site-title">Meaty Burgers</h1>
48 | 			<nav>
49 | 				<ul class="nav-inline">
50 | 					<li class="nav-item">our burgers</li>
51 | 					<li class="nav-item">history</li>
52 | 				</ul>
53 | 			</nav>
54 | 		</header>
55 | 		<img src="burger.jpg" />
56 | 		<script></script>
57 | 	</body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/03.Changing-an-elements-css/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/03.Changing-an-elements-css/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/03.Changing-an-elements-css/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Changing An Elements CSS</title>
 8 |     <style>
 9 |       body {
10 |         margin: 0;
11 |         color: rgb(89, 88, 88);
12 |       }
13 | 
14 |       header {
15 |         display: flex;
16 |         justify-content: space-between;
17 |         align-items: center;
18 |         padding: 0 10px;
19 |       }
20 | 
21 |       .green {
22 |         color: rgb(40, 141, 40);
23 |       }
24 | 
25 |       .nav-inline {
26 |         display: flex;
27 |         list-style: none;
28 |       }
29 | 
30 |       .nav-item {
31 |         font-size: 18px;
32 |         margin: 0 5px;
33 |         text-transform: uppercase;
34 |         font-weight: bolder;
35 |         color: rgb(89, 88, 88);
36 |         cursor: pointer;
37 |       }
38 | 
39 |       img {
40 |         width: 100%;
41 |       }
42 |     </style>
43 |   </head>
44 | 
45 |   <body>
46 |     <header>
47 |       <h1 id="site-title">
48 |         <span class="change-title blue red">Meaty</span> Burgers
49 |       </h1>
50 |       <nav>
51 |         <ul class="nav-inline">
52 |           <li class="nav-item">our burgers</li>
53 |           <li class="nav-item">history</li>
54 |         </ul>
55 |       </nav>
56 |     </header>
57 |     <img />
58 | 
59 |     <script>
60 |       const el = document.querySelector('.change-title');
61 |       el.innerHTML = '<em>No Meat</em>';
62 |       el.setAttribute('class', 'green');
63 | 
64 |       const image = document.querySelector('img');
65 |       image.setAttribute('src', 'burger.jpg');
66 |       image.setAttribute('alt', 'burger image');
67 |     </script>
68 |   </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/04.Creating-new-elements/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/04.Creating-new-elements/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/04.Creating-new-elements/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <title>Creating New Elements</title>
  8 |     <style>
  9 |       body {
 10 |         margin: 0 auto;
 11 |         color: rgb(89, 88, 88);
 12 |       }
 13 | 
 14 |       header {
 15 |         display: flex;
 16 |         justify-content: space-between;
 17 |         align-items: center;
 18 |         padding: 0 10px;
 19 |       }
 20 | 
 21 |       .green {
 22 |         color: rgb(40, 141, 40);
 23 |       }
 24 | 
 25 |       .nav-inline {
 26 |         display: flex;
 27 |         list-style: none;
 28 |       }
 29 | 
 30 |       .nav-item {
 31 |         font-size: 18px;
 32 |         margin: 0 5px;
 33 |         text-transform: uppercase;
 34 |         font-weight: bolder;
 35 |         color: rgb(89, 88, 88);
 36 |         cursor: pointer;
 37 |       }
 38 | 
 39 |       img {
 40 |         width: 100%;
 41 |       }
 42 | 
 43 |       section {
 44 |         text-align: center;
 45 |       }
 46 | 
 47 |       .content {
 48 |         display: flex;
 49 |         align-items: center;
 50 |         justify-content: center;
 51 |       }
 52 | 
 53 |       .content > div {
 54 |         flex: 1;
 55 |         padding: 1rem;
 56 |         font-size: 18px;
 57 |       }
 58 | 
 59 |       button {
 60 |         background: rgb(40, 141, 40);
 61 |         border: none;
 62 |         border-radius: 3px;
 63 |         padding: 10px 15px;
 64 |         cursor: pointer;
 65 |         font-weight: bolder;
 66 |         color: whitesmoke;
 67 |       }
 68 | 
 69 |       button:hover {
 70 |         background: rgb(130, 236, 120);
 71 |       }
 72 | 
 73 |       .info_section p {
 74 |         font-style: italic;
 75 |       }
 76 |     </style>
 77 |   </head>
 78 | 
 79 |   <body>
 80 |     <header>
 81 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
 82 |       <nav>
 83 |         <ul class="nav-inline">
 84 |           <li class="nav-item">our burgers</li>
 85 |           <li class="nav-item">history</li>
 86 |         </ul>
 87 |       </nav>
 88 |     </header>
 89 |     <img src="burger.jpg" />
 90 | 
 91 |     <section>
 92 |       <h3>Helping the planet, one bite at a time...</h3>
 93 |       <div class="content">
 94 |         <div class="image_section">
 95 |           <img src="burger.jpg" alt="burger image" />
 96 |         </div>
 97 |         <div class="info_section">
 98 |           <p>
 99 |             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut
100 |             unde sunt.
101 |           </p>
102 |           <button>BUY ONLINE</button>
103 |         </div>
104 |       </div>
105 |     </section>
106 | 
107 |     <script>
108 |       // ========= SECTION HEADING =========
109 | 
110 |       // ========= IMAGE =========
111 | 
112 |       // ========= INFO TEXT =========
113 | 
114 |       // ========= BUTTON =========
115 | 
116 |       // ========= WRAPPERS =========
117 | 
118 |       // ========= PUTTING IT ALL TOGETHER =========
119 | 
120 |       // ========= ADDING CLASSES =========
121 |     </script>
122 |   </body>
123 | </html>
124 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/05.Adding-elements-to-the-page/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/05.Adding-elements-to-the-page/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/05.Adding-elements-to-the-page/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <title>Adding Elements To The Page</title>
  8 |     <style>
  9 |       body {
 10 |         margin: 0 auto;
 11 |         color: rgb(89, 88, 88);
 12 |       }
 13 | 
 14 |       header {
 15 |         display: flex;
 16 |         justify-content: space-between;
 17 |         align-items: center;
 18 |         padding: 0 10px;
 19 |       }
 20 | 
 21 |       .green {
 22 |         color: rgb(40, 141, 40);
 23 |       }
 24 | 
 25 |       .nav-inline {
 26 |         display: flex;
 27 |         list-style: none;
 28 |       }
 29 | 
 30 |       .nav-item {
 31 |         font-size: 18px;
 32 |         margin: 0 5px;
 33 |         text-transform: uppercase;
 34 |         font-weight: bolder;
 35 |         color: rgb(89, 88, 88);
 36 |         cursor: pointer;
 37 |       }
 38 | 
 39 |       img {
 40 |         width: 100%;
 41 |       }
 42 | 
 43 |       section {
 44 |         text-align: center;
 45 |       }
 46 | 
 47 |       .content {
 48 |         display: flex;
 49 |         align-items: center;
 50 |         justify-content: center;
 51 |       }
 52 | 
 53 |       .content > div {
 54 |         flex: 1;
 55 |         padding: 1rem;
 56 |         font-size: 18px;
 57 |       }
 58 | 
 59 |       button {
 60 |         background: rgb(40, 141, 40);
 61 |         border: none;
 62 |         border-radius: 3px;
 63 |         padding: 10px 15px;
 64 |         cursor: pointer;
 65 |         font-weight: bolder;
 66 |         color: whitesmoke;
 67 |       }
 68 | 
 69 |       button:hover {
 70 |         background: rgb(130, 236, 120);
 71 |       }
 72 | 
 73 |       .info_section p {
 74 |         font-style: italic;
 75 |       }
 76 |     </style>
 77 |   </head>
 78 | 
 79 |   <body>
 80 |     <header>
 81 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
 82 |       <nav>
 83 |         <ul class="nav-inline">
 84 |           <li class="nav-item">our burgers</li>
 85 |           <li class="nav-item">history</li>
 86 |         </ul>
 87 |       </nav>
 88 |     </header>
 89 |     <img src="burger.jpg" />
 90 | 
 91 |     <section>
 92 |       <h3>Helping the planet, one bite at a time...</h3>
 93 |       <div class="content">
 94 |         <div class="image_section">
 95 |           <img src="burger.jpg" alt="burger image" />
 96 |         </div>
 97 |         <div class="info_section">
 98 |           <p>
 99 |             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut
100 |             unde sunt.
101 |           </p>
102 |           <button>BUY ONLINE</button>
103 |         </div>
104 |       </div>
105 |     </section>
106 | 
107 |     <script>
108 |       // ========= SECTION HEADING =========
109 |       const sectionHeading = document.createElement('h3');
110 |       const headingText = document.createTextNode(
111 |         'Helping the planet, one bite at a time...'
112 |       );
113 |       sectionHeading.appendChild(headingText);
114 | 
115 |       // ========= IMAGE =========
116 |       const imageElement = document.createElement('img');
117 |       imageElement.setAttribute('src', 'burger.jpg');
118 |       imageElement.setAttribute('alt', 'burger image');
119 | 
120 |       // ========= INFO TEXT =========
121 |       const infoSectionElement = document.createElement('p');
122 |       const infoSectionText = document.createTextNode(
123 |         'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.'
124 |       );
125 |       infoSectionElement.appendChild(infoSectionText);
126 | 
127 |       // ========= BUTTON =========
128 |       const buttonElement = document.createElement('button');
129 |       const buttonText = document.createTextNode('BUY ONLINE');
130 |       buttonElement.appendChild(buttonText);
131 | 
132 |       // ========= WRAPPERS =========
133 |       const sectionWrapper = document.createElement('section');
134 |       const contentWrapper = document.createElement('div');
135 |       const imageDivElement = document.createElement('div');
136 |       const textDivElement = document.createElement('div');
137 | 
138 |       // ========= PUTTING IT ALL TOGETHER =========
139 |       textDivElement.appendChild(infoSectionElement);
140 |       textDivElement.appendChild(buttonElement);
141 | 
142 |       imageDivElement.appendChild(imageElement);
143 | 
144 |       contentWrapper.appendChild(imageDivElement);
145 |       contentWrapper.appendChild(textDivElement);
146 | 
147 |       sectionWrapper.appendChild(sectionHeading);
148 |       sectionWrapper.appendChild(contentWrapper);
149 | 
150 |       // ========= ADDING CLASSES =========
151 |       contentWrapper.setAttribute('class', 'content');
152 |       imageDivElement.setAttribute('class', 'image_section');
153 |       textDivElement.setAttribute('class', 'info_section');
154 | 
155 |       // ADD TO PAGE
156 |     </script>
157 |   </body>
158 | </html>
159 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/06.Cloning-and-removing-elements/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/06.Cloning-and-removing-elements/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/06.Cloning-and-removing-elements/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <title>Cloning & Removing Elements</title>
  8 |     <style>
  9 |       body {
 10 |         margin: 0 auto;
 11 |         color: rgb(89, 88, 88);
 12 |       }
 13 | 
 14 |       header {
 15 |         display: flex;
 16 |         justify-content: space-between;
 17 |         align-items: center;
 18 |         padding: 0 10px;
 19 |       }
 20 | 
 21 |       .green {
 22 |         color: rgb(40, 141, 40);
 23 |       }
 24 | 
 25 |       .nav-inline {
 26 |         display: flex;
 27 |         list-style: none;
 28 |       }
 29 | 
 30 |       .nav-item {
 31 |         font-size: 18px;
 32 |         margin: 0 5px;
 33 |         text-transform: uppercase;
 34 |         font-weight: bolder;
 35 |         color: rgb(89, 88, 88);
 36 |         cursor: pointer;
 37 |       }
 38 | 
 39 |       img {
 40 |         width: 100%;
 41 |       }
 42 | 
 43 |       section {
 44 |         text-align: center;
 45 |       }
 46 | 
 47 |       .content {
 48 |         display: flex;
 49 |         align-items: center;
 50 |         justify-content: center;
 51 |       }
 52 | 
 53 |       .content > div {
 54 |         flex: 1;
 55 |         padding: 1rem;
 56 |         font-size: 18px;
 57 |       }
 58 | 
 59 |       button {
 60 |         background: rgb(40, 141, 40);
 61 |         border: none;
 62 |         border-radius: 3px;
 63 |         padding: 10px 15px;
 64 |         cursor: pointer;
 65 |         font-weight: bolder;
 66 |         color: whitesmoke;
 67 |       }
 68 | 
 69 |       button:hover {
 70 |         background: rgb(130, 236, 120);
 71 |       }
 72 | 
 73 |       .info_section p {
 74 |         font-style: italic;
 75 |       }
 76 |     </style>
 77 |   </head>
 78 | 
 79 |   <body>
 80 |     <header>
 81 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
 82 |       <nav>
 83 |         <ul class="nav-inline">
 84 |           <li class="nav-item">our burgers</li>
 85 |           <li class="nav-item">history</li>
 86 |         </ul>
 87 |       </nav>
 88 |     </header>
 89 |     <img src="burger.jpg" />
 90 | 
 91 |     <!-- <section>
 92 |       <h3>Helping the planet, one bite at a time...</h3>
 93 |       <div class="content">
 94 |         <div class="image_section">
 95 |           <img src="burger.jpg" alt="burger image" />
 96 |         </div>
 97 |         <div class="info_section">
 98 |           <p>
 99 |             Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut
100 |             unde sunt.
101 |           </p>
102 |           <button>BUY ONLINE</button>
103 |         </div>
104 |       </div>
105 |     </section> -->
106 | 
107 |     <script>
108 |       // ========= SECTION HEADING =========
109 |       const sectionHeading = document.createElement('h3');
110 |       const headingText = document.createTextNode(
111 |         'Helping the planet, one bite at a time...'
112 |       );
113 |       sectionHeading.appendChild(headingText);
114 | 
115 |       // ========= IMAGE =========
116 |       const imageElement = document.createElement('img');
117 |       imageElement.setAttribute('src', 'burger.jpg');
118 |       imageElement.setAttribute('alt', 'burger image');
119 | 
120 |       // ========= INFO TEXT =========
121 |       const infoSectionElement = document.createElement('p');
122 |       const infoSectionText = document.createTextNode(
123 |         'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.'
124 |       );
125 |       infoSectionElement.appendChild(infoSectionText);
126 | 
127 |       // ========= BUTTON =========
128 |       const buttonElement = document.createElement('button');
129 |       const buttonText = document.createTextNode('BUY ONLINE');
130 |       buttonElement.appendChild(buttonText);
131 | 
132 |       // ========= WRAPPERS =========
133 |       const sectionWrapper = document.createElement('section');
134 |       const contentWrapper = document.createElement('div');
135 |       const imageDivElement = document.createElement('div');
136 |       const textDivElement = document.createElement('div');
137 | 
138 |       // ========= PUTTING IT ALL TOGETHER =========
139 |       textDivElement.appendChild(infoSectionElement);
140 |       textDivElement.appendChild(buttonElement);
141 | 
142 |       imageDivElement.appendChild(imageElement);
143 | 
144 |       contentWrapper.appendChild(imageDivElement);
145 |       contentWrapper.appendChild(textDivElement);
146 | 
147 |       sectionWrapper.appendChild(sectionHeading);
148 |       sectionWrapper.appendChild(contentWrapper);
149 | 
150 |       // ========= ADDING CLASSES =========
151 |       contentWrapper.setAttribute('class', 'content');
152 |       imageDivElement.setAttribute('class', 'image_section');
153 |       textDivElement.setAttribute('class', 'info_section');
154 | 
155 |       // ADD TO PAGE
156 |       document.body.append(sectionWrapper);
157 | 
158 |       // ========= CLONING & REMOVING ELEMENTS =========
159 |     </script>
160 |   </body>
161 | </html>
162 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/07.Mini-challenge-create-a-new-section/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/07.Mini-challenge-create-a-new-section/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/07.Mini-challenge-create-a-new-section/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <title>Mini Challenge: Create a New Section With Javascript</title>
  8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=RocknRoll+One&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <link rel="stylesheet" href="styles.css" />
 14 |   </head>
 15 | 
 16 |   <body>
 17 |     <header>
 18 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
 19 |       <nav>
 20 |         <ul class="nav-inline">
 21 |           <li class="nav-item">our burgers</li>
 22 |           <li class="nav-item">history</li>
 23 |         </ul>
 24 |       </nav>
 25 |     </header>
 26 |     <img src="burger.jpg" />
 27 | 
 28 |     <section class="recipes">
 29 |       <h3>Home cooking time</h3>
 30 |       <p>Some of our chefs recipes you can try at home</p>
 31 |       <button>SEE ALL</button>
 32 |       <div class="recipes_container">
 33 |         <article>
 34 |           <img src="burger.jpg" alt="" />
 35 |           <h4>Ultimate Vegan</h4>
 36 |           <div class="recipe_info">
 37 |             <span>2 people</span> ~ <span>30 mins</span> ~
 38 |             <span>457 calories</span>
 39 |           </div>
 40 |         </article>
 41 |         <article>
 42 |           <img src="burger.jpg" alt="" />
 43 |           <h4>Spicy Bean Burger</h4>
 44 |           <div class="recipe_info">
 45 |             <span>4 people</span> ~ <span>40 mins</span> ~
 46 |             <span>624 calories</span>
 47 |           </div>
 48 |         </article>
 49 |       </div>
 50 |     </section>
 51 | 
 52 |     <script>
 53 |       // ========= SECTION HEADING =========
 54 |       const sectionHeading = document.createElement('h3');
 55 |       const headingText = document.createTextNode(
 56 |         'Helping the planet, one bite at a time...'
 57 |       );
 58 |       sectionHeading.appendChild(headingText);
 59 | 
 60 |       // ========= IMAGE =========
 61 |       const imageElement = document.createElement('img');
 62 |       imageElement.setAttribute('src', 'burger.jpg');
 63 |       imageElement.setAttribute('alt', 'burger image');
 64 | 
 65 |       // ========= INFO TEXT =========
 66 |       const infoSectionElement = document.createElement('p');
 67 |       const infoSectionText = document.createTextNode(
 68 |         'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.'
 69 |       );
 70 |       infoSectionElement.appendChild(infoSectionText);
 71 | 
 72 |       // ========= BUTTON =========
 73 |       const buttonElement = document.createElement('button');
 74 |       const buttonText = document.createTextNode('BUY ONLINE');
 75 |       buttonElement.appendChild(buttonText);
 76 | 
 77 |       // ========= WRAPPERS =========
 78 |       const sectionWrapper = document.createElement('section');
 79 |       const contentWrapper = document.createElement('div');
 80 |       const imageDivElement = document.createElement('div');
 81 |       const textDivElement = document.createElement('div');
 82 | 
 83 |       // ========= PUTTING IT ALL TOGETHER =========
 84 |       textDivElement.appendChild(infoSectionElement);
 85 |       textDivElement.appendChild(buttonElement);
 86 | 
 87 |       imageDivElement.appendChild(imageElement);
 88 | 
 89 |       contentWrapper.appendChild(imageDivElement);
 90 |       contentWrapper.appendChild(textDivElement);
 91 | 
 92 |       sectionWrapper.appendChild(sectionHeading);
 93 |       sectionWrapper.appendChild(contentWrapper);
 94 | 
 95 |       // ========= ADDING CLASSES =========
 96 |       sectionWrapper.setAttribute('class', 'planet_wrapper');
 97 |       contentWrapper.setAttribute('class', 'content');
 98 |       imageDivElement.setAttribute('class', 'image_section');
 99 |       textDivElement.setAttribute('class', 'info_section');
100 | 
101 |       // ADD TO PAGE
102 |       document.body.insertBefore(
103 |         sectionWrapper,
104 |         document.querySelector('.recipes')
105 |       );
106 |     </script>
107 |   </body>
108 | </html>
109 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/07.Mini-challenge-create-a-new-section/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: 'RocknRoll One', sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |   margin: 0 auto;
  7 |   color: rgb(89, 88, 88);
  8 | }
  9 | 
 10 | header {
 11 |   display: flex;
 12 |   justify-content: space-between;
 13 |   align-items: center;
 14 |   padding: 0 10px;
 15 | }
 16 | 
 17 | .planet_wrapper {
 18 |   background: #74c69d;
 19 | }
 20 | 
 21 | .green {
 22 |   color: rgb(40, 141, 40);
 23 | }
 24 | 
 25 | .nav-inline {
 26 |   display: flex;
 27 |   list-style: none;
 28 | }
 29 | 
 30 | .nav-item {
 31 |   font-size: 18px;
 32 |   margin: 0 5px;
 33 |   text-transform: uppercase;
 34 |   font-weight: bolder;
 35 |   color: rgb(89, 88, 88);
 36 |   cursor: pointer;
 37 | }
 38 | 
 39 | img {
 40 |   width: 100%;
 41 |   display: block;
 42 | }
 43 | 
 44 | section {
 45 |   text-align: center;
 46 |   padding: 20px 0;
 47 | }
 48 | 
 49 | h3 {
 50 |   font-family: 'Akaya Kanadaka', cursive;
 51 |   font-size: 24px;
 52 |   letter-spacing: 1.5px;
 53 |   text-transform: uppercase;
 54 |   margin: 0;
 55 |   padding: 10px 0;
 56 | }
 57 | 
 58 | .content {
 59 |   display: flex;
 60 |   align-items: center;
 61 |   justify-content: center;
 62 | }
 63 | 
 64 | .content > div {
 65 |   flex: 1;
 66 |   padding: 1rem;
 67 |   font-size: 18px;
 68 | }
 69 | 
 70 | button {
 71 |   background: rgb(40, 141, 40);
 72 |   border: none;
 73 |   border-radius: 3px;
 74 |   padding: 10px 15px;
 75 |   cursor: pointer;
 76 |   font-weight: bolder;
 77 |   color: whitesmoke;
 78 | }
 79 | 
 80 | button:hover {
 81 |   background: rgb(130, 236, 120);
 82 | }
 83 | 
 84 | .info_section p {
 85 |   font-style: italic;
 86 | }
 87 | 
 88 | /* RECIPES SECTION */
 89 | .recipes_container {
 90 |   display: flex;
 91 |   justify-content: space-around;
 92 | }
 93 | 
 94 | .recipes h4 {
 95 |   margin: 10px 0;
 96 | }
 97 | 
 98 | .recipes article {
 99 |   background: #74c69d;
100 |   margin: 10px;
101 | }
102 | 
103 | .recipe_info {
104 |   padding: 20px 0;
105 | }
106 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/08.Looping-with-dom-elements/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/08.Looping-with-dom-elements/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/08.Looping-with-dom-elements/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <title>Looping With DOM Elements</title>
  8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=RocknRoll+One&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <link rel="stylesheet" href="styles.css" />
 14 |   </head>
 15 | 
 16 |   <body>
 17 |     <header>
 18 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
 19 |       <nav>
 20 |         <ul class="nav-inline">
 21 |           <li class="nav-item">our burgers</li>
 22 |           <li class="nav-item">history</li>
 23 |         </ul>
 24 |       </nav>
 25 |     </header>
 26 |     <img src="burger.jpg" />
 27 | 
 28 |     <section class="recipes">
 29 |       <h3>Home cooking time</h3>
 30 |       <p>Some of our chefs recipes you can try at home</p>
 31 |       <button>SEE ALL</button>
 32 |       <div class="recipes_container">
 33 |         <article>
 34 |           <img src="burger.jpg" alt="" />
 35 |           <h4>Ultimate Vegan</h4>
 36 | 
 37 |           <div class="recipe_info">
 38 |             <span>2 people</span> ~ <span>30 mins</span> ~
 39 |             <span>457 calories</span>
 40 |           </div>
 41 |         </article>
 42 |         <article>
 43 |           <img src="burger.jpg" alt="" />
 44 |           <h4>Spicy Bean Burger</h4>
 45 |           <div class="recipe_info">
 46 |             <span>4 people</span> ~ <span>40 mins</span> ~
 47 |             <span>624 calories</span>
 48 |           </div>
 49 |         </article>
 50 |       </div>
 51 |     </section>
 52 | 
 53 |     <script>
 54 |       // ========= SECTION HEADING =========
 55 |       const sectionHeading = document.createElement('h3');
 56 |       const headingText = document.createTextNode(
 57 |         'Helping the planet, one bite at a time...'
 58 |       );
 59 |       sectionHeading.appendChild(headingText);
 60 | 
 61 |       // ========= IMAGE =========
 62 |       const imageElement = document.createElement('img');
 63 |       imageElement.setAttribute('src', 'burger.jpg');
 64 |       imageElement.setAttribute('alt', 'burger image');
 65 | 
 66 |       // ========= INFO TEXT =========
 67 |       const infoSectionElement = document.createElement('p');
 68 |       const infoSectionText = document.createTextNode(
 69 |         'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.'
 70 |       );
 71 |       infoSectionElement.appendChild(infoSectionText);
 72 | 
 73 |       // ========= BUTTON =========
 74 |       const buttonElement = document.createElement('button');
 75 |       const buttonText = document.createTextNode('BUY ONLINE');
 76 |       buttonElement.appendChild(buttonText);
 77 | 
 78 |       // ========= WRAPPERS =========
 79 |       const sectionWrapper = document.createElement('section');
 80 |       const contentWrapper = document.createElement('div');
 81 |       const imageDivElement = document.createElement('div');
 82 |       const textDivElement = document.createElement('div');
 83 | 
 84 |       // ========= PUTTING IT ALL TOGETHER =========
 85 |       textDivElement.appendChild(infoSectionElement);
 86 |       textDivElement.appendChild(buttonElement);
 87 | 
 88 |       imageDivElement.appendChild(imageElement);
 89 | 
 90 |       contentWrapper.appendChild(imageDivElement);
 91 |       contentWrapper.appendChild(textDivElement);
 92 | 
 93 |       sectionWrapper.appendChild(sectionHeading);
 94 |       sectionWrapper.appendChild(contentWrapper);
 95 | 
 96 |       // ========= ADDING CLASSES =========
 97 |       sectionWrapper.setAttribute('class', 'planet_wrapper');
 98 |       contentWrapper.setAttribute('class', 'content');
 99 |       imageDivElement.setAttribute('class', 'image_section');
100 |       textDivElement.setAttribute('class', 'info_section');
101 | 
102 |       // ADD TO PAGE
103 |       document.body.insertBefore(
104 |         sectionWrapper,
105 |         document.querySelector('.recipes')
106 |       );
107 | 
108 |       // ========= LOOPING =========
109 |     </script>
110 |   </body>
111 | </html>
112 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/08.Looping-with-dom-elements/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: 'RocknRoll One', sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |   margin: 0 auto;
  7 |   color: rgb(89, 88, 88);
  8 | }
  9 | 
 10 | header {
 11 |   display: flex;
 12 |   justify-content: space-between;
 13 |   align-items: center;
 14 |   padding: 0 10px;
 15 | }
 16 | 
 17 | .planet_wrapper {
 18 |   background: #74c69d;
 19 | }
 20 | 
 21 | .green {
 22 |   color: rgb(40, 141, 40);
 23 | }
 24 | 
 25 | .nav-inline {
 26 |   display: flex;
 27 |   list-style: none;
 28 | }
 29 | 
 30 | .nav-item {
 31 |   font-size: 18px;
 32 |   margin: 0 5px;
 33 |   text-transform: uppercase;
 34 |   font-weight: bolder;
 35 |   color: rgb(89, 88, 88);
 36 |   cursor: pointer;
 37 | }
 38 | 
 39 | img {
 40 |   width: 100%;
 41 |   display: block;
 42 | }
 43 | 
 44 | section {
 45 |   text-align: center;
 46 |   padding: 20px 0;
 47 | }
 48 | 
 49 | h3 {
 50 |   font-family: 'Akaya Kanadaka', cursive;
 51 |   font-size: 24px;
 52 |   letter-spacing: 1.5px;
 53 |   text-transform: uppercase;
 54 |   margin: 0;
 55 |   padding: 10px 0;
 56 | }
 57 | 
 58 | .content {
 59 |   display: flex;
 60 |   align-items: center;
 61 |   justify-content: center;
 62 | }
 63 | 
 64 | .content > div {
 65 |   flex: 1;
 66 |   padding: 1rem;
 67 |   font-size: 18px;
 68 | }
 69 | 
 70 | button {
 71 |   background: rgb(40, 141, 40);
 72 |   border: none;
 73 |   border-radius: 3px;
 74 |   padding: 10px 15px;
 75 |   cursor: pointer;
 76 |   font-weight: bolder;
 77 |   color: whitesmoke;
 78 | }
 79 | 
 80 | button:hover {
 81 |   background: rgb(130, 236, 120);
 82 | }
 83 | 
 84 | .info_section p {
 85 |   font-style: italic;
 86 | }
 87 | 
 88 | /* RECIPES SECTION */
 89 | .recipes_container {
 90 |   display: flex;
 91 |   justify-content: space-around;
 92 | }
 93 | 
 94 | .recipes h4 {
 95 |   margin: 10px 0;
 96 | }
 97 | 
 98 | .recipes article {
 99 |   background: #74c69d;
100 |   margin: 10px;
101 | }
102 | 
103 | .recipe_info {
104 |   padding: 20px 0;
105 | }
106 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/09.Listening-for-events/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/09.Listening-for-events/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/09.Listening-for-events/burger2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/09.Listening-for-events/burger2.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/09.Listening-for-events/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7 |     <title>Listening For Events</title>
  8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
  9 |     <link
 10 |       href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=RocknRoll+One&display=swap"
 11 |       rel="stylesheet"
 12 |     />
 13 |     <link rel="stylesheet" href="styles.css" />
 14 |   </head>
 15 | 
 16 |   <body>
 17 |     <header>
 18 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
 19 |       <nav>
 20 |         <ul class="nav-inline">
 21 |           <!-- <li class="nav-item">our burgers</li> -->
 22 |           <!-- <li class="nav-item">history</li> -->
 23 |         </ul>
 24 |       </nav>
 25 |     </header>
 26 |     <img src="burger.jpg" />
 27 | 
 28 |     <section class="recipes">
 29 |       <h3>Home cooking time</h3>
 30 |       <p>Some of our chefs recipes you can try at home</p>
 31 |       <button>SEE ALL</button>
 32 |       <div class="recipes_container">
 33 |         <article>
 34 |           <img src="burger.jpg" alt="" />
 35 |           <h4>Ultimate Vegan</h4>
 36 | 
 37 |           <div class="recipe_info">
 38 |             <span>2 people</span> ~ <span>30 mins</span> ~
 39 |             <span>457 calories</span>
 40 |           </div>
 41 |         </article>
 42 |         <article>
 43 |           <img src="burger.jpg" alt="" />
 44 |           <h4>Spicy Bean Burger</h4>
 45 |           <div class="recipe_info">
 46 |             <span>4 people</span> ~ <span>40 mins</span> ~
 47 |             <span>624 calories</span>
 48 |           </div>
 49 |         </article>
 50 |       </div>
 51 |     </section>
 52 | 
 53 |     <script>
 54 | // ========= SECTION HEADING =========
 55 | const sectionHeading = document.createElement('h3');
 56 | const headingText = document.createTextNode(
 57 |   'Helping the planet, one bite at a time...'
 58 | );
 59 | sectionHeading.appendChild(headingText);
 60 | 
 61 | // ========= IMAGE =========
 62 | const imageElement = document.createElement('img');
 63 | imageElement.setAttribute('src', 'burger.jpg');
 64 | imageElement.setAttribute('alt', 'burger image');
 65 | 
 66 | // ========= INFO TEXT =========
 67 | const infoSectionElement = document.createElement('p');
 68 | const infoSectionText = document.createTextNode(
 69 |   'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.'
 70 | );
 71 | infoSectionElement.appendChild(infoSectionText);
 72 | 
 73 | // ========= BUTTON =========
 74 | const buttonElement = document.createElement('button');
 75 | const buttonText = document.createTextNode('BUY ONLINE');
 76 | // add
 77 | // buttonElement.id = 'buy';
 78 | buttonElement.appendChild(buttonText);
 79 | 
 80 | // ========= WRAPPERS =========
 81 | const sectionWrapper = document.createElement('section');
 82 | const contentWrapper = document.createElement('div');
 83 | const imageDivElement = document.createElement('div');
 84 | const textDivElement = document.createElement('div');
 85 | 
 86 | // ========= PUTTING IT ALL TOGETHER =========
 87 | textDivElement.appendChild(infoSectionElement);
 88 | textDivElement.appendChild(buttonElement);
 89 | 
 90 | imageDivElement.appendChild(imageElement);
 91 | 
 92 | contentWrapper.appendChild(imageDivElement);
 93 | contentWrapper.appendChild(textDivElement);
 94 | 
 95 | sectionWrapper.appendChild(sectionHeading);
 96 | sectionWrapper.appendChild(contentWrapper);
 97 | 
 98 | // ========= ADDING CLASSES =========
 99 | sectionWrapper.setAttribute('class', 'planet_wrapper');
100 | contentWrapper.setAttribute('class', 'content');
101 | imageDivElement.setAttribute('class', 'image_section');
102 | textDivElement.setAttribute('class', 'info_section');
103 | 
104 | // ADD TO PAGE
105 | document.body.insertBefore(sectionWrapper, document.querySelector('.recipes'));
106 | 
107 | // ========= LOOPING =========
108 | const listItems = document.querySelectorAll('li');
109 | const links = ['our burgers', 'history'];
110 | links.forEach(function (link) {
111 |   const listElement = document.createElement('li');
112 |   const listText = document.createTextNode(link);
113 |   listElement.appendChild(listText);
114 |   listElement.classList.add('nav-item');
115 |   document.querySelector('ul').appendChild(listElement);
116 | });
117 | 
118 |     </script>
119 |   </body>
120 | </html>
121 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/09.Listening-for-events/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: 'RocknRoll One', sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |   margin: 0 auto;
  7 |   color: rgb(89, 88, 88);
  8 | }
  9 | 
 10 | header {
 11 |   display: flex;
 12 |   justify-content: space-between;
 13 |   align-items: center;
 14 |   padding: 0 10px;
 15 | }
 16 | 
 17 | .planet_wrapper {
 18 |   background: #74c69d;
 19 | }
 20 | 
 21 | .green {
 22 |   color: rgb(40, 141, 40);
 23 | }
 24 | 
 25 | .nav-inline {
 26 |   display: flex;
 27 |   list-style: none;
 28 | }
 29 | 
 30 | .nav-item {
 31 |   font-size: 18px;
 32 |   margin: 0 5px;
 33 |   text-transform: uppercase;
 34 |   font-weight: bolder;
 35 |   color: rgb(89, 88, 88);
 36 |   cursor: pointer;
 37 | }
 38 | 
 39 | img {
 40 |   width: 100%;
 41 |   display: block;
 42 | }
 43 | 
 44 | section {
 45 |   text-align: center;
 46 |   padding: 20px 0;
 47 | }
 48 | 
 49 | h3 {
 50 |   font-family: 'Akaya Kanadaka', cursive;
 51 |   font-size: 24px;
 52 |   letter-spacing: 1.5px;
 53 |   text-transform: uppercase;
 54 |   margin: 0;
 55 |   padding: 10px 0;
 56 | }
 57 | 
 58 | .content {
 59 |   display: flex;
 60 |   align-items: center;
 61 |   justify-content: center;
 62 | }
 63 | 
 64 | .content > div {
 65 |   flex: 1;
 66 |   padding: 1rem;
 67 |   font-size: 18px;
 68 | }
 69 | 
 70 | button {
 71 |   background: rgb(40, 141, 40);
 72 |   border: none;
 73 |   border-radius: 3px;
 74 |   padding: 10px 15px;
 75 |   cursor: pointer;
 76 |   font-weight: bolder;
 77 |   color: whitesmoke;
 78 | }
 79 | 
 80 | button:hover {
 81 |   background: rgb(130, 236, 120);
 82 | }
 83 | 
 84 | .info_section p {
 85 |   font-style: italic;
 86 | }
 87 | 
 88 | /* RECIPES SECTION */
 89 | .recipes_container {
 90 |   display: flex;
 91 |   justify-content: space-around;
 92 | }
 93 | 
 94 | .recipes h4 {
 95 |   margin: 10px 0;
 96 | }
 97 | 
 98 | .recipes article {
 99 |   background: #74c69d;
100 |   margin: 10px;
101 | }
102 | 
103 | .recipe_info {
104 |   padding: 20px 0;
105 | }
106 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/10.Listening-for-multiple-events-and-event-data/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/10.Listening-for-multiple-events-and-event-data/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/10.Listening-for-multiple-events-and-event-data/burger2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/10.Listening-for-multiple-events-and-event-data/burger2.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/10.Listening-for-multiple-events-and-event-data/elements.js:
--------------------------------------------------------------------------------
 1 | // ========= SECTION HEADING =========
 2 | const sectionHeading = document.createElement('h3');
 3 | const headingText = document.createTextNode(
 4 |   'Helping the planet, one bite at a time...'
 5 | );
 6 | sectionHeading.appendChild(headingText);
 7 | 
 8 | // ========= IMAGE =========
 9 | const imageElement = document.createElement('img');
10 | imageElement.setAttribute('src', 'burger.jpg');
11 | imageElement.setAttribute('alt', 'burger image');
12 | 
13 | // ========= INFO TEXT =========
14 | const infoSectionElement = document.createElement('p');
15 | const infoSectionText = document.createTextNode(
16 |   'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.'
17 | );
18 | infoSectionElement.appendChild(infoSectionText);
19 | 
20 | // ========= BUTTON =========
21 | const buttonElement = document.createElement('button');
22 | const buttonText = document.createTextNode('BUY ONLINE');
23 | // add
24 | // buttonElement.id = 'buy';
25 | buttonElement.appendChild(buttonText);
26 | 
27 | // ========= WRAPPERS =========
28 | const sectionWrapper = document.createElement('section');
29 | const contentWrapper = document.createElement('div');
30 | const imageDivElement = document.createElement('div');
31 | const textDivElement = document.createElement('div');
32 | 
33 | // ========= PUTTING IT ALL TOGETHER =========
34 | textDivElement.appendChild(infoSectionElement);
35 | textDivElement.appendChild(buttonElement);
36 | 
37 | imageDivElement.appendChild(imageElement);
38 | 
39 | contentWrapper.appendChild(imageDivElement);
40 | contentWrapper.appendChild(textDivElement);
41 | 
42 | sectionWrapper.appendChild(sectionHeading);
43 | sectionWrapper.appendChild(contentWrapper);
44 | 
45 | // ========= ADDING CLASSES =========
46 | sectionWrapper.setAttribute('class', 'planet_wrapper');
47 | contentWrapper.setAttribute('class', 'content');
48 | imageDivElement.setAttribute('class', 'image_section');
49 | textDivElement.setAttribute('class', 'info_section');
50 | 
51 | // ADD TO PAGE
52 | document.body.insertBefore(sectionWrapper, document.querySelector('.recipes'));
53 | 
54 | // ========= LOOPING =========
55 | const listItems = document.querySelectorAll('li');
56 | const links = ['our burgers', 'history'];
57 | links.forEach(function (link) {
58 |   const listElement = document.createElement('li');
59 |   const listText = document.createTextNode(link);
60 |   listElement.appendChild(listText);
61 |   listElement.classList.add('nav-item');
62 |   document.querySelector('ul').appendChild(listElement);
63 | });
64 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/10.Listening-for-multiple-events-and-event-data/events.js:
--------------------------------------------------------------------------------
1 | const headerImage = document.querySelector('#headerImage');
2 | function changeImage() {
3 |   headerImage.setAttribute('src', 'burger2.jpg');
4 | }
5 | headerImage.addEventListener('click', changeImage)
6 | 
7 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/10.Listening-for-multiple-events-and-event-data/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Listening For Multiple Events & Event Data</title>
 8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
 9 |     <link
10 |       href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=RocknRoll+One&display=swap"
11 |       rel="stylesheet"
12 |     />
13 |     <link rel="stylesheet" href="styles.css" />
14 |   </head>
15 | 
16 |   <body>
17 |     <header>
18 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
19 |       <nav>
20 |         <ul class="nav-inline">
21 |           <!-- <li class="nav-item">our burgers</li> -->
22 |           <!-- <li class="nav-item">history</li> -->
23 |         </ul>
24 |       </nav>
25 |     </header>
26 |     <img src="burger.jpg" 
27 |     id="headerImage"  />
28 | 
29 |     <section class="recipes">
30 |       <h3>Home cooking time</h3>
31 |       <p>Some of our chefs recipes you can try at home</p>
32 |       <button>SEE ALL</button>
33 |       <div class="recipes_container">
34 |         <article>
35 |           
36 |           <span class="add">&#9734;</span>
37 |           <img src="burger.jpg" alt="" />
38 |           <h4 >Ultimate Vegan</h4>
39 |           
40 |           <div class="recipe_info">
41 |             <span>2 people</span> ~ <span>30 mins</span> ~
42 |             <span>457 calories</span>
43 |           </div>
44 |         </article>
45 |         <article>
46 |           <span class="add">&#9734;</span>
47 |           
48 |           <img src="burger.jpg" alt="" />
49 |           <h4>Spicy Bean Burger</h4>
50 |           <div class="recipe_info">
51 |            
52 |             <span>4 people</span> ~ <span>40 mins</span> ~
53 |             <span>624 calories</span>
54 |           </div>
55 |         </article>
56 |       </div>
57 |     </section>
58 | 
59 |     <script src="elements.js"></script>
60 |     <script src="events.js"></script>
61 |   </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/10.Listening-for-multiple-events-and-event-data/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: 'RocknRoll One', sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |   margin: 0 auto;
  7 |   color: rgb(89, 88, 88);
  8 | }
  9 | 
 10 | header {
 11 |   display: flex;
 12 |   justify-content: space-between;
 13 |   align-items: center;
 14 |   padding: 0 10px;
 15 | }
 16 | 
 17 | .planet_wrapper {
 18 |   background: #74c69d;
 19 | }
 20 | 
 21 | .green {
 22 |   color: rgb(40, 141, 40);
 23 | }
 24 | 
 25 | .nav-inline {
 26 |   display: flex;
 27 |   list-style: none;
 28 | }
 29 | 
 30 | .nav-item {
 31 |   font-size: 18px;
 32 |   margin: 0 5px;
 33 |   text-transform: uppercase;
 34 |   font-weight: bolder;
 35 |   color: rgb(89, 88, 88);
 36 |   cursor: pointer;
 37 | }
 38 | 
 39 | img {
 40 |   width: 100%;
 41 |   display: block;
 42 | }
 43 | 
 44 | section {
 45 |   text-align: center;
 46 |   padding: 20px 0;
 47 | }
 48 | 
 49 | h3 {
 50 |   font-family: 'Akaya Kanadaka', cursive;
 51 |   font-size: 24px;
 52 |   letter-spacing: 1.5px;
 53 |   text-transform: uppercase;
 54 |   margin: 0;
 55 |   padding: 10px 0;
 56 | }
 57 | 
 58 | .content {
 59 |   display: flex;
 60 |   align-items: center;
 61 |   justify-content: center;
 62 | }
 63 | 
 64 | .content > div {
 65 |   flex: 1;
 66 |   padding: 1rem;
 67 |   font-size: 18px;
 68 | }
 69 | 
 70 | button {
 71 |   background: rgb(40, 141, 40);
 72 |   border: none;
 73 |   border-radius: 3px;
 74 |   padding: 10px 15px;
 75 |   cursor: pointer;
 76 |   font-weight: bolder;
 77 |   color: whitesmoke;
 78 | }
 79 | 
 80 | button:hover {
 81 |   background: rgb(130, 236, 120);
 82 | }
 83 | 
 84 | .info_section p {
 85 |   font-style: italic;
 86 | }
 87 | 
 88 | /* RECIPES SECTION */
 89 | .recipes_container {
 90 |   display: flex;
 91 |   justify-content: space-around;
 92 | }
 93 | 
 94 | .recipes h4 {
 95 |   margin: 10px 0;
 96 | }
 97 | 
 98 | .recipes article {
 99 |   background: #74c69d;
100 |   margin: 10px;
101 | }
102 | 
103 | .recipe_info {
104 |   padding: 20px 0;
105 | }
106 | 
107 | 
108 | .add {
109 |   cursor: pointer;
110 | }


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/11.Event-propagation/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/11.Event-propagation/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/11.Event-propagation/burger2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/11.Event-propagation/burger2.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/11.Event-propagation/elements.js:
--------------------------------------------------------------------------------
 1 | // ========= SECTION HEADING =========
 2 | const sectionHeading = document.createElement('h3');
 3 | const headingText = document.createTextNode(
 4 |   'Helping the planet, one bite at a time...'
 5 | );
 6 | sectionHeading.appendChild(headingText);
 7 | 
 8 | // ========= IMAGE =========
 9 | const imageElement = document.createElement('img');
10 | imageElement.setAttribute('src', 'burger.jpg');
11 | imageElement.setAttribute('alt', 'burger image');
12 | 
13 | // ========= INFO TEXT =========
14 | const infoSectionElement = document.createElement('p');
15 | const infoSectionText = document.createTextNode(
16 |   'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.'
17 | );
18 | infoSectionElement.appendChild(infoSectionText);
19 | 
20 | // ========= BUTTON =========
21 | const buttonElement = document.createElement('button');
22 | const buttonText = document.createTextNode('BUY ONLINE');
23 | // add
24 | // buttonElement.id = 'buy';
25 | buttonElement.appendChild(buttonText);
26 | 
27 | // ========= WRAPPERS =========
28 | const sectionWrapper = document.createElement('section');
29 | const contentWrapper = document.createElement('div');
30 | const imageDivElement = document.createElement('div');
31 | const textDivElement = document.createElement('div');
32 | 
33 | // ========= PUTTING IT ALL TOGETHER =========
34 | textDivElement.appendChild(infoSectionElement);
35 | textDivElement.appendChild(buttonElement);
36 | 
37 | imageDivElement.appendChild(imageElement);
38 | 
39 | contentWrapper.appendChild(imageDivElement);
40 | contentWrapper.appendChild(textDivElement);
41 | 
42 | sectionWrapper.appendChild(sectionHeading);
43 | sectionWrapper.appendChild(contentWrapper);
44 | 
45 | // ========= ADDING CLASSES =========
46 | sectionWrapper.setAttribute('class', 'planet_wrapper');
47 | contentWrapper.setAttribute('class', 'content');
48 | imageDivElement.setAttribute('class', 'image_section');
49 | textDivElement.setAttribute('class', 'info_section');
50 | 
51 | // ADD TO PAGE
52 | document.body.insertBefore(sectionWrapper, document.querySelector('.recipes'));
53 | 
54 | // ========= LOOPING =========
55 | const listItems = document.querySelectorAll('li');
56 | const links = ['our burgers', 'history'];
57 | links.forEach(function (link) {
58 |   const listElement = document.createElement('li');
59 |   const listText = document.createTextNode(link);
60 |   listElement.appendChild(listText);
61 |   listElement.classList.add('nav-item');
62 |   document.querySelector('ul').appendChild(listElement);
63 | });
64 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/11.Event-propagation/events.js:
--------------------------------------------------------------------------------
 1 | const headerImage = document.querySelector('#headerImage');
 2 | function changeImage() {
 3 |   headerImage.setAttribute('src', 'burger2.jpg');
 4 | }
 5 | headerImage.addEventListener('click', changeImage)
 6 | 
 7 | function addToFavourites(e) {
 8 |   alert(`${e.target.parentNode.children[2].innerText}`)
 9 | }
10 | 
11 | const addButtons = document.querySelectorAll(".add");
12 | addButtons.forEach(function(button) {
13 |   button.addEventListener('click', addToFavourites)
14 | })
15 | 
16 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/11.Event-propagation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Event Propagation</title>
 8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
 9 |     <link
10 |       href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=RocknRoll+One&display=swap"
11 |       rel="stylesheet"
12 |     />
13 |     <link rel="stylesheet" href="styles.css" />
14 |   </head>
15 | 
16 |   <body>
17 |     <header>
18 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
19 |       <nav>
20 |         <ul class="nav-inline">
21 |           <!-- <li class="nav-item">our burgers</li> -->
22 |           <!-- <li class="nav-item">history</li> -->
23 |         </ul>
24 |       </nav>
25 |     </header>
26 |     <img src="burger.jpg" 
27 |     id="headerImage"  />
28 | 
29 |     <section class="recipes">
30 |       <h3>Home cooking time</h3>
31 |       <p>Some of our chefs recipes you can try at home</p>
32 |       <button>SEE ALL</button>
33 |       <div class="recipes_container">
34 |         <article>
35 |           <span class="add">&#9734;</span>
36 |           <img src="burger.jpg" alt="" />
37 |           <h4 >Ultimate Vegan</h4>
38 |           <div class="recipe_info">
39 |             <span>2 people</span> ~ <span>30 mins</span> ~
40 |             <span>457 calories</span>
41 |           </div>
42 |         </article>
43 |         <article>
44 |           <span class="add">&#9734;</span>
45 |           <img src="burger.jpg" alt="" />
46 |           <h4>Spicy Bean Burger</h4>
47 |           <div class="recipe_info">
48 |             <span>4 people</span> ~ <span>40 mins</span> ~
49 |             <span>624 calories</span>
50 |           </div>
51 |         </article>
52 |       </div>
53 |     </section>
54 | 
55 |     <script src="elements.js"></script>
56 |     <script src="events.js"></script>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/11.Event-propagation/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: 'RocknRoll One', sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |   margin: 0 auto;
  7 |   color: rgb(89, 88, 88);
  8 | }
  9 | 
 10 | header {
 11 |   display: flex;
 12 |   justify-content: space-between;
 13 |   align-items: center;
 14 |   padding: 0 10px;
 15 | }
 16 | 
 17 | .planet_wrapper {
 18 |   background: #74c69d;
 19 | }
 20 | 
 21 | .green {
 22 |   color: rgb(40, 141, 40);
 23 | }
 24 | 
 25 | .nav-inline {
 26 |   display: flex;
 27 |   list-style: none;
 28 | }
 29 | 
 30 | .nav-item {
 31 |   font-size: 18px;
 32 |   margin: 0 5px;
 33 |   text-transform: uppercase;
 34 |   font-weight: bolder;
 35 |   color: rgb(89, 88, 88);
 36 |   cursor: pointer;
 37 | }
 38 | 
 39 | img {
 40 |   width: 100%;
 41 |   display: block;
 42 | }
 43 | 
 44 | section {
 45 |   text-align: center;
 46 |   padding: 20px 0;
 47 | }
 48 | 
 49 | h3 {
 50 |   font-family: 'Akaya Kanadaka', cursive;
 51 |   font-size: 24px;
 52 |   letter-spacing: 1.5px;
 53 |   text-transform: uppercase;
 54 |   margin: 0;
 55 |   padding: 10px 0;
 56 | }
 57 | 
 58 | .content {
 59 |   display: flex;
 60 |   align-items: center;
 61 |   justify-content: center;
 62 | }
 63 | 
 64 | .content > div {
 65 |   flex: 1;
 66 |   padding: 1rem;
 67 |   font-size: 18px;
 68 | }
 69 | 
 70 | button {
 71 |   background: rgb(40, 141, 40);
 72 |   border: none;
 73 |   border-radius: 3px;
 74 |   padding: 10px 15px;
 75 |   cursor: pointer;
 76 |   font-weight: bolder;
 77 |   color: whitesmoke;
 78 | }
 79 | 
 80 | button:hover {
 81 |   background: rgb(130, 236, 120);
 82 | }
 83 | 
 84 | .info_section p {
 85 |   font-style: italic;
 86 | }
 87 | 
 88 | /* RECIPES SECTION */
 89 | .recipes_container {
 90 |   display: flex;
 91 |   justify-content: space-around;
 92 | }
 93 | 
 94 | .recipes h4 {
 95 |   margin: 10px 0;
 96 | }
 97 | 
 98 | .recipes article {
 99 |   background: #74c69d;
100 |   margin: 10px;
101 | }
102 | 
103 | .recipe_info {
104 |   padding: 20px 0;
105 | }
106 | 
107 | 
108 | .add {
109 |   cursor: pointer;
110 | }


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/12.Running-events-once/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/12.Running-events-once/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/12.Running-events-once/burger2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/12.Running-events-once/burger2.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/12.Running-events-once/elements.js:
--------------------------------------------------------------------------------
 1 | // ========= SECTION HEADING =========
 2 | const sectionHeading = document.createElement('h3');
 3 | const headingText = document.createTextNode(
 4 |   'Helping the planet, one bite at a time...'
 5 | );
 6 | sectionHeading.appendChild(headingText);
 7 | 
 8 | // ========= IMAGE =========
 9 | const imageElement = document.createElement('img');
10 | imageElement.setAttribute('src', 'burger.jpg');
11 | imageElement.setAttribute('alt', 'burger image');
12 | 
13 | // ========= INFO TEXT =========
14 | const infoSectionElement = document.createElement('p');
15 | const infoSectionText = document.createTextNode(
16 |   'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.'
17 | );
18 | infoSectionElement.appendChild(infoSectionText);
19 | 
20 | // ========= BUTTON =========
21 | const buttonElement = document.createElement('button');
22 | const buttonText = document.createTextNode('BUY ONLINE');
23 | // add
24 | // buttonElement.id = 'buy';
25 | buttonElement.appendChild(buttonText);
26 | 
27 | // ========= WRAPPERS =========
28 | const sectionWrapper = document.createElement('section');
29 | const contentWrapper = document.createElement('div');
30 | const imageDivElement = document.createElement('div');
31 | const textDivElement = document.createElement('div');
32 | 
33 | // ========= PUTTING IT ALL TOGETHER =========
34 | textDivElement.appendChild(infoSectionElement);
35 | textDivElement.appendChild(buttonElement);
36 | 
37 | imageDivElement.appendChild(imageElement);
38 | 
39 | contentWrapper.appendChild(imageDivElement);
40 | contentWrapper.appendChild(textDivElement);
41 | 
42 | sectionWrapper.appendChild(sectionHeading);
43 | sectionWrapper.appendChild(contentWrapper);
44 | 
45 | // ========= ADDING CLASSES =========
46 | sectionWrapper.setAttribute('class', 'planet_wrapper');
47 | contentWrapper.setAttribute('class', 'content');
48 | imageDivElement.setAttribute('class', 'image_section');
49 | textDivElement.setAttribute('class', 'info_section');
50 | 
51 | // ADD TO PAGE
52 | document.body.insertBefore(sectionWrapper, document.querySelector('.recipes'));
53 | 
54 | // ========= LOOPING =========
55 | const listItems = document.querySelectorAll('li');
56 | const links = ['our burgers', 'history'];
57 | links.forEach(function (link) {
58 |   const listElement = document.createElement('li');
59 |   const listText = document.createTextNode(link);
60 |   listElement.appendChild(listText);
61 |   listElement.classList.add('nav-item');
62 |   document.querySelector('ul').appendChild(listElement);
63 | });
64 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/12.Running-events-once/events.js:
--------------------------------------------------------------------------------
 1 | const headerImage = document.querySelector('#headerImage');
 2 | function changeImage() {
 3 |   headerImage.setAttribute('src', 'burger2.jpg');
 4 | }
 5 | headerImage.addEventListener('click', changeImage)
 6 | 
 7 | function addToFavourites(e) {
 8 |   e.stopPropagation()
 9 |   alert(`${e.target.parentNode.children[2].innerText}`)
10 | }
11 | 
12 | const addButtons = document.querySelectorAll(".add");
13 | addButtons.forEach(function(button) {
14 |   button.addEventListener('click', addToFavourites)
15 | })
16 | 
17 | function redirect(e) {
18 |   alert('recipe clicked')
19 | }
20 | 
21 | const recipeTitles = document.querySelectorAll("article ");
22 | recipeTitles.forEach(function(title) {
23 |   title.addEventListener('click', redirect)
24 | })


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/12.Running-events-once/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Running Events Once</title>
 8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
 9 |     <link
10 |       href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=RocknRoll+One&display=swap"
11 |       rel="stylesheet"
12 |     />
13 |     <link rel="stylesheet" href="styles.css" />
14 |   </head>
15 | 
16 |   <body >
17 |     <header>
18 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
19 |       <nav>
20 |         <ul class="nav-inline">
21 |           <!-- <li class="nav-item">our burgers</li> -->
22 |           <!-- <li class="nav-item">history</li> -->
23 |         </ul>
24 |       </nav>
25 |     </header>
26 |     <img src="burger.jpg" 
27 |     id="headerImage"  />
28 | 
29 |     <section class="recipes">
30 |       <h3>Home cooking time</h3>
31 |       <p>Some of our chefs recipes you can try at home</p>
32 |       <button>SEE ALL</button>
33 |       <div class="recipes_container">
34 |         <article>
35 |           <span class="add">&#9734;</span>
36 |           <img src="burger.jpg" alt="" />
37 |           <h4 >Ultimate Vegan</h4>
38 |           <div class="recipe_info">
39 |             <span>2 people</span> ~ <span>30 mins</span> ~
40 |             <span>457 calories</span>
41 |           </div>
42 |         </article>
43 |         <article>
44 |           <span class="add">&#9734;</span>
45 |           <img src="burger.jpg" alt="" />
46 |           <h4>Spicy Bean Burger</h4>
47 |           <div class="recipe_info">
48 |             <span>4 people</span> ~ <span>40 mins</span> ~
49 |             <span>624 calories</span>
50 |           </div>
51 |         </article>
52 |       </div>
53 |     </section>
54 | 
55 |     <script src="elements.js"></script>
56 |     <script src="events.js"></script>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/12.Running-events-once/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: 'RocknRoll One', sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |   margin: 0 auto;
  7 |   color: rgb(89, 88, 88);
  8 | }
  9 | 
 10 | header {
 11 |   display: flex;
 12 |   justify-content: space-between;
 13 |   align-items: center;
 14 |   padding: 0 10px;
 15 | }
 16 | 
 17 | .planet_wrapper {
 18 |   background: #74c69d;
 19 | }
 20 | 
 21 | .green {
 22 |   color: rgb(40, 141, 40);
 23 | }
 24 | 
 25 | .nav-inline {
 26 |   display: flex;
 27 |   list-style: none;
 28 | }
 29 | 
 30 | .nav-item {
 31 |   font-size: 18px;
 32 |   margin: 0 5px;
 33 |   text-transform: uppercase;
 34 |   font-weight: bolder;
 35 |   color: rgb(89, 88, 88);
 36 |   cursor: pointer;
 37 | }
 38 | 
 39 | img {
 40 |   width: 100%;
 41 |   display: block;
 42 | }
 43 | 
 44 | section {
 45 |   text-align: center;
 46 |   padding: 20px 0;
 47 | }
 48 | 
 49 | h3 {
 50 |   font-family: 'Akaya Kanadaka', cursive;
 51 |   font-size: 24px;
 52 |   letter-spacing: 1.5px;
 53 |   text-transform: uppercase;
 54 |   margin: 0;
 55 |   padding: 10px 0;
 56 | }
 57 | 
 58 | .content {
 59 |   display: flex;
 60 |   align-items: center;
 61 |   justify-content: center;
 62 | }
 63 | 
 64 | .content > div {
 65 |   flex: 1;
 66 |   padding: 1rem;
 67 |   font-size: 18px;
 68 | }
 69 | 
 70 | button {
 71 |   background: rgb(40, 141, 40);
 72 |   border: none;
 73 |   border-radius: 3px;
 74 |   padding: 10px 15px;
 75 |   cursor: pointer;
 76 |   font-weight: bolder;
 77 |   color: whitesmoke;
 78 | }
 79 | 
 80 | button:hover {
 81 |   background: rgb(130, 236, 120);
 82 | }
 83 | 
 84 | .info_section p {
 85 |   font-style: italic;
 86 | }
 87 | 
 88 | /* RECIPES SECTION */
 89 | .recipes_container {
 90 |   display: flex;
 91 |   justify-content: space-around;
 92 | }
 93 | 
 94 | .recipes h4 {
 95 |   margin: 10px 0;
 96 | }
 97 | 
 98 | .recipes article {
 99 |   background: #74c69d;
100 |   margin: 10px;
101 | }
102 | 
103 | .recipe_info {
104 |   padding: 20px 0;
105 | }
106 | 
107 | 
108 | .add {
109 |   cursor: pointer;
110 | }


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/13.Preventing-default-behaviour-and the-passive-option/burger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/13.Preventing-default-behaviour-and the-passive-option/burger.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/13.Preventing-default-behaviour-and the-passive-option/burger2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/13.Preventing-default-behaviour-and the-passive-option/burger2.jpg


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/13.Preventing-default-behaviour-and the-passive-option/elements.js:
--------------------------------------------------------------------------------
 1 | // ========= SECTION HEADING =========
 2 | const sectionHeading = document.createElement('h3');
 3 | const headingText = document.createTextNode(
 4 |   'Helping the planet, one bite at a time...'
 5 | );
 6 | sectionHeading.appendChild(headingText);
 7 | 
 8 | // ========= IMAGE =========
 9 | const imageElement = document.createElement('img');
10 | imageElement.setAttribute('src', 'burger.jpg');
11 | imageElement.setAttribute('alt', 'burger image');
12 | 
13 | // ========= INFO TEXT =========
14 | const infoSectionElement = document.createElement('p');
15 | const infoSectionText = document.createTextNode(
16 |   'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.'
17 | );
18 | infoSectionElement.appendChild(infoSectionText);
19 | 
20 | // ========= BUTTON =========
21 | const buttonElement = document.createElement('button');
22 | const buttonText = document.createTextNode('BUY ONLINE');
23 | // add
24 | // buttonElement.id = 'buy';
25 | buttonElement.appendChild(buttonText);
26 | 
27 | // ========= WRAPPERS =========
28 | const sectionWrapper = document.createElement('section');
29 | const contentWrapper = document.createElement('div');
30 | const imageDivElement = document.createElement('div');
31 | const textDivElement = document.createElement('div');
32 | 
33 | // ========= PUTTING IT ALL TOGETHER =========
34 | textDivElement.appendChild(infoSectionElement);
35 | textDivElement.appendChild(buttonElement);
36 | 
37 | imageDivElement.appendChild(imageElement);
38 | 
39 | contentWrapper.appendChild(imageDivElement);
40 | contentWrapper.appendChild(textDivElement);
41 | 
42 | sectionWrapper.appendChild(sectionHeading);
43 | sectionWrapper.appendChild(contentWrapper);
44 | 
45 | // ========= ADDING CLASSES =========
46 | sectionWrapper.setAttribute('class', 'planet_wrapper');
47 | contentWrapper.setAttribute('class', 'content');
48 | imageDivElement.setAttribute('class', 'image_section');
49 | textDivElement.setAttribute('class', 'info_section');
50 | 
51 | // ADD TO PAGE
52 | document.body.insertBefore(sectionWrapper, document.querySelector('.recipes'));
53 | 
54 | // ========= LOOPING =========
55 | const listItems = document.querySelectorAll('li');
56 | const links = ['our burgers', 'history'];
57 | links.forEach(function (link) {
58 |   const listElement = document.createElement('li');
59 |   const listText = document.createTextNode(link);
60 |   listElement.appendChild(listText);
61 |   listElement.classList.add('nav-item');
62 |   document.querySelector('ul').appendChild(listElement);
63 | });
64 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/13.Preventing-default-behaviour-and the-passive-option/events.js:
--------------------------------------------------------------------------------
 1 | const headerImage = document.querySelector('#headerImage');
 2 | function changeImage() {
 3 |   headerImage.setAttribute('src', 'burger2.jpg');
 4 | }
 5 | headerImage.addEventListener('click', changeImage)
 6 | 
 7 | function addToFavourites(e) {
 8 |   e.stopPropagation()
 9 |   alert(`${e.target.parentNode.children[2].innerText}`)
10 | }
11 | 
12 | const addButtons = document.querySelectorAll(".add");
13 | addButtons.forEach(function(button) {
14 |   button.addEventListener('click', addToFavourites, {once: true})
15 | })
16 | 
17 | function redirect(e) {
18 |   alert('recipe clicked')
19 | }
20 | 
21 | const recipeTitles = document.querySelectorAll("article ");
22 | recipeTitles.forEach(function(title) {
23 |   title.addEventListener('click', redirect)
24 | })
25 | 
26 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/13.Preventing-default-behaviour-and the-passive-option/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Prevent Default Behaviour & The Passive Option</title>
 8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
 9 |     <link
10 |       href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=RocknRoll+One&display=swap"
11 |       rel="stylesheet"
12 |     />
13 |     <link rel="stylesheet" href="styles.css" />
14 |   </head>
15 | 
16 |   <body >
17 |     <header>
18 |       <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
19 |       <nav>
20 |         <ul class="nav-inline">
21 |           <!-- <li class="nav-item">our burgers</li> -->
22 |           <!-- <li class="nav-item">history</li> -->
23 |         </ul>
24 |       </nav>
25 |     </header>
26 |     <img src="burger.jpg" 
27 |     id="headerImage"  />
28 | 
29 |     <section class="recipes">
30 |       <h3>Home cooking time</h3>
31 |       <p>Some of our chefs recipes you can try at home</p>
32 |       <button>SEE ALL</button>
33 |       <div class="recipes_container">
34 |         <article>
35 |           <span class="add">&#9734;</span>
36 |           <img src="burger.jpg" alt="" />
37 |           <h4 >Ultimate Vegan</h4>
38 |           <div class="recipe_info">
39 |             <span>2 people</span> ~ <span>30 mins</span> ~
40 |             <span>457 calories</span>
41 |           </div>
42 |         </article>
43 |         <article>
44 |           <span class="add">&#9734;</span>
45 |           <img src="burger.jpg" alt="" />
46 |           <h4>Spicy Bean Burger</h4>
47 |           <div class="recipe_info">
48 |             <span>4 people</span> ~ <span>40 mins</span> ~
49 |             <span>624 calories</span>
50 |           </div>
51 |         </article>
52 |       </div>
53 |     </section>
54 | 
55 |     <script src="elements.js"></script>
56 |     <script src="events.js"></script>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/13.Preventing-default-behaviour-and the-passive-option/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   font-family: 'RocknRoll One', sans-serif;
  3 | }
  4 | 
  5 | body {
  6 |   margin: 0 auto;
  7 |   color: rgb(89, 88, 88);
  8 | }
  9 | 
 10 | header {
 11 |   display: flex;
 12 |   justify-content: space-between;
 13 |   align-items: center;
 14 |   padding: 0 10px;
 15 | }
 16 | 
 17 | .planet_wrapper {
 18 |   background: #74c69d;
 19 | }
 20 | 
 21 | .green {
 22 |   color: rgb(40, 141, 40);
 23 | }
 24 | 
 25 | .nav-inline {
 26 |   display: flex;
 27 |   list-style: none;
 28 | }
 29 | 
 30 | .nav-item {
 31 |   font-size: 18px;
 32 |   margin: 0 5px;
 33 |   text-transform: uppercase;
 34 |   font-weight: bolder;
 35 |   color: rgb(89, 88, 88);
 36 |   cursor: pointer;
 37 | }
 38 | 
 39 | img {
 40 |   width: 100%;
 41 |   display: block;
 42 | }
 43 | 
 44 | section {
 45 |   text-align: center;
 46 |   padding: 20px 0;
 47 | }
 48 | 
 49 | h3 {
 50 |   font-family: 'Akaya Kanadaka', cursive;
 51 |   font-size: 24px;
 52 |   letter-spacing: 1.5px;
 53 |   text-transform: uppercase;
 54 |   margin: 0;
 55 |   padding: 10px 0;
 56 | }
 57 | 
 58 | .content {
 59 |   display: flex;
 60 |   align-items: center;
 61 |   justify-content: center;
 62 | }
 63 | 
 64 | .content > div {
 65 |   flex: 1;
 66 |   padding: 1rem;
 67 |   font-size: 18px;
 68 | }
 69 | 
 70 | button {
 71 |   background: rgb(40, 141, 40);
 72 |   border: none;
 73 |   border-radius: 3px;
 74 |   padding: 10px 15px;
 75 |   cursor: pointer;
 76 |   font-weight: bolder;
 77 |   color: whitesmoke;
 78 | }
 79 | 
 80 | button:hover {
 81 |   background: rgb(130, 236, 120);
 82 | }
 83 | 
 84 | .info_section p {
 85 |   font-style: italic;
 86 | }
 87 | 
 88 | /* RECIPES SECTION */
 89 | .recipes_container {
 90 |   display: flex;
 91 |   justify-content: space-around;
 92 | }
 93 | 
 94 | .recipes h4 {
 95 |   margin: 10px 0;
 96 | }
 97 | 
 98 | .recipes article {
 99 |   background: #74c69d;
100 |   margin: 10px;
101 | }
102 | 
103 | .recipe_info {
104 |   padding: 20px 0;
105 | }
106 | 
107 | 
108 | .add {
109 |   cursor: pointer;
110 | }
111 | 
112 | /* FORM SECTION */
113 | .signup {
114 |   padding: 10px;
115 |   background: rgb(249, 230, 205);
116 | }
117 | 
118 | form {
119 |   display: flex;
120 |   justify-content: center;
121 | }
122 | 
123 | form > div {
124 |   padding: 20px 10px;
125 | }
126 | 
127 | input {
128 |   border: none;
129 |   border-radius: 3px;
130 | }
131 | 
132 | input[type=submit] {
133 |   background: #74c69d;
134 |   cursor: pointer;
135 | }


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/14.Removing-event-listeners/events.js:
--------------------------------------------------------------------------------
1 | const add = document.querySelector('#add');
2 | const cancel = document.querySelector('#cancel');
3 | const output = document.querySelector('p');
4 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/14.Removing-event-listeners/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Removing Event Listeners</title>
 8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
 9 |     <link
10 |       href="https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&family=RocknRoll+One&display=swap"
11 |       rel="stylesheet"
12 |     />
13 |     <link rel="stylesheet" href="styles.css" />
14 |   </head>
15 | 
16 |   <body>
17 |     <button id="add">add</button>
18 |     <button id="cancel">cancel</button>
19 |     <span>Score:</span><p>0</p>
20 |     <script src="events.js"></script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/14.Removing-event-listeners/styles.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   font-family: 'RocknRoll One', sans-serif;
 3 | }
 4 | 
 5 | 
 6 | button {
 7 |   background: rgb(116, 203, 116);
 8 |   border: none;
 9 |   border-radius: 3px;
10 |   padding: 10px 15px;
11 |   cursor: pointer;
12 |   font-weight: bolder;
13 |   color: whitesmoke;
14 | }
15 | 
16 | button:hover {
17 |   background: rgb(130, 236, 120);
18 | }
19 | 
20 | #cancel {
21 |   background: rgb(237, 126, 126);
22 | }
23 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/15.HTML-collection-or-NodeList/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>HTMLCollection Or NodeList?</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <ul>
12 |       <li class="list-item">item1</li>
13 |       <li class="list-item">item2</li>
14 |       <li class="list-item">item3</li>
15 |       <li class="active">item4</li>
16 |     </ul>
17 | 
18 |     <script src="script.js"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/15.HTML-collection-or-NodeList/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/04.Events-And-The-DOM/15.HTML-collection-or-NodeList/script.js


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/16.Mini-challenge-create-a-dark-mode-button/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Mini Challenge: Build a Dark Mode Button</title>
 8 |     <link rel="stylesheet" href="styles.css" />
 9 |   </head>
10 | 
11 |   <body>
12 |     <header>
13 |       <h1>Night Or Day</h1>
14 |       <button>&#9789;</button>
15 |       <!-- <button>&#9788;</button> -->
16 |     </header>
17 |     <hr />
18 | 
19 |     <main>
20 |       <article>
21 |         <h3>New this week</h3>
22 |         <p>
23 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
24 |           molestiae at culpa similique ratione quibusdam! Iusto, tempore.
25 |           Voluptate quibusdam non omnis odio animi ducimus ipsa dolor? Dolores
26 |           at sunt ipsa.
27 |         </p>
28 |       </article>
29 |     </main>
30 |     <aside>
31 |       <section>
32 |         <h3>Tags</h3>
33 |         <ul>
34 |           <li>seasonal</li>
35 |           <li>new</li>
36 |           <li>hot</li>
37 |           <li>sale</li>
38 |         </ul>
39 |       </section>
40 |       <section>
41 |         <h3>Categories</h3>
42 |         <ul>
43 |           <li>shoes</li>
44 |           <li>jeans</li>
45 |           <li>hats</li>
46 |           <li>accessories</li>
47 |         </ul>
48 |       </section>
49 |     </aside>
50 | 
51 |     <script src="script.js"></script>
52 |   </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/16.Mini-challenge-create-a-dark-mode-button/script.js:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/04.Events-And-The-DOM/16.Mini-challenge-create-a-dark-mode-button/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   color: rgb(62, 62, 62);
 3 |   background: rgb(249, 246, 246);
 4 | }
 5 | 
 6 | .dark {
 7 |   color: rgb(219, 219, 219);
 8 |   background: rgb(44, 36, 36);
 9 | }
10 | 
11 | header {
12 |   display: flex;
13 |   justify-content: space-between;
14 |   align-items: center;
15 | }
16 | 
17 | button {
18 |   cursor: pointer;
19 |   height: 50px;
20 |   width: 50px;
21 |   border: none;
22 |   background: none;
23 |   font-size: 30px;
24 | }
25 | 
26 | article,
27 | aside {
28 |   border: 1px solid lightgray;
29 |   border-radius: 5px;
30 |   margin: 10px 0;
31 |   padding: 10px;
32 | }
33 | 


--------------------------------------------------------------------------------
/05.Time-To-Practice/01.Video-player/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="styles.css" />
 8 |     <title>Video Player</title>
 9 |   </head>
10 |   <body>
11 |     <script src="script.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/05.Time-To-Practice/01.Video-player/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/05.Time-To-Practice/01.Video-player/script.js


--------------------------------------------------------------------------------
/05.Time-To-Practice/01.Video-player/styles.css:
--------------------------------------------------------------------------------
 1 | video {
 2 |   width: 100%;
 3 | }
 4 | 
 5 | .controls {
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   align-items: center;
 9 | }
10 | 
11 | div,
12 | progress {
13 |   margin-bottom: 20px;
14 | }
15 | 
16 | progress {
17 |   width: 100%;
18 | }
19 | 
20 | button {
21 |   background: rgb(153, 166, 178);
22 |   color: rgb(45, 45, 45);
23 |   border: none;
24 |   font-size: 20px;
25 |   padding: 10px 15px;
26 |   border-radius: 3px;
27 |   cursor: pointer;
28 |   margin: 0 5px;
29 | }
30 | 
31 | button:hover {
32 |   transform: scale(1.03);
33 | }
34 | 
35 | .round {
36 |   border: 4px solid rgb(153, 166, 178);
37 |   background: none;
38 |   border-radius: 100%;
39 |   width: 100px;
40 |   height: 100px;
41 | }
42 | 
43 | .skip {
44 |   font-size: 36px;
45 |   cursor: pointer;
46 |   background: none;
47 |   color: rgb(153, 166, 178);
48 |   padding: 0;
49 | }
50 | 
51 | .align {
52 |   display: flex;
53 | }
54 | 


--------------------------------------------------------------------------------
/05.Time-To-Practice/01.Video-player/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/05.Time-To-Practice/01.Video-player/video.mp4


--------------------------------------------------------------------------------
/05.Time-To-Practice/02.Shape-drop-game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Shape Drop Game</title>
 8 |     <link rel="preconnect" href="https://fonts.gstatic.com" />
 9 |     <link
10 |       href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap"
11 |       rel="stylesheet"
12 |     />
13 |     <link rel="stylesheet" href="styles.css" />
14 |   </head>
15 |   <body></body>
16 | 
17 |   <script src="script.js"></script>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/05.Time-To-Practice/02.Shape-drop-game/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/05.Time-To-Practice/02.Shape-drop-game/script.js


--------------------------------------------------------------------------------
/05.Time-To-Practice/02.Shape-drop-game/styles.css:
--------------------------------------------------------------------------------
  1 | html {
  2 | 	background: rgb(149, 127, 239);
  3 | 	font-family: "Comfortaa", cursive;
  4 | 	color: rgb(60, 60, 60);
  5 | }
  6 | 
  7 | body {
  8 | 	background: rgb(239, 217, 206);
  9 | 	max-width: 600px;
 10 | 	margin: 0 auto;
 11 | 	height: 100vh;
 12 | }
 13 | 
 14 | header {
 15 | 	background: rgb(222, 192, 241);
 16 | 	text-align: center;
 17 | 	padding: 10px;
 18 | }
 19 | 
 20 | button {
 21 | 	cursor: pointer;
 22 | 	background: none;
 23 | 	border: 2px solid rgb(149, 127, 239);
 24 | 	padding: 5px 10px;
 25 | 	border-radius: 5px;
 26 | }
 27 | 
 28 | .drop-section,
 29 | .drag-section {
 30 | 	display: flex;
 31 | 	justify-content: space-around;
 32 | 	flex-wrap: wrap;
 33 | }
 34 | 
 35 | .drag-section > div {
 36 | 	cursor: pointer;
 37 | 	border: none;
 38 | }
 39 | 
 40 | .drag-section {
 41 | 	margin-bottom: 20px;
 42 | }
 43 | 
 44 | div {
 45 | 	margin: 15px;
 46 | 	border: 2px solid rgb(183, 156, 237);
 47 | 	border-radius: 3px;
 48 | }
 49 | 
 50 | .square {
 51 | 	width: 50px;
 52 | 	height: 50px;
 53 | 	background: rgb(247, 100, 100);
 54 | }
 55 | .square2 {
 56 | 	width: 42px;
 57 | 	height: 42px;
 58 | 	background: rgb(110, 131, 235);
 59 | }
 60 | .rectangle {
 61 | 	width: 80px;
 62 | 	height: 50px;
 63 | 	background: rgb(230, 67, 230);
 64 | }
 65 | .circle {
 66 | 	width: 50px;
 67 | 	height: 50px;
 68 | 	border-radius: 100%;
 69 | 	background: rgb(245, 183, 68);
 70 | }
 71 | .oval {
 72 | 	width: 70px;
 73 | 	height: 50px;
 74 | 	border-radius: 100%;
 75 | 	background: rgb(209, 143, 154);
 76 | }
 77 | .oval2 {
 78 | 	width: 75px;
 79 | 	height: 50px;
 80 | 	border-radius: 100%;
 81 | 	background: rgb(223, 100, 161);
 82 | }
 83 | .pill {
 84 | 	width: 100px;
 85 | 	height: 50px;
 86 | 	border-radius: 25px;
 87 | 	background: rgb(94, 82, 84);
 88 | }
 89 | .pill2 {
 90 | 	width: 110px;
 91 | 	height: 52px;
 92 | 	border-radius: 25px;
 93 | 	background: rgb(163, 104, 231);
 94 | }
 95 | .rectangle2 {
 96 | 	width: 60px;
 97 | 	height: 50px;
 98 | 	background: rgb(137, 228, 230);
 99 | }
100 | .rectangle3 {
101 | 	width: 50px;
102 | 	height: 60px;
103 | 	background: rgb(146, 209, 146);
104 | }
105 | 
106 | .drop {
107 | 	border: 2px solid rgb(183, 156, 237);
108 | 	background: none;
109 | }
110 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/01.For-loops/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>For Loops</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/02.For-in-for-of/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>For...in & For...of</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       // for...in - (object properties)
13 |       const product = {
14 |         sku: 'CSMBLUE',
15 |         name: 'Cool shirt',
16 |         size: 'medium',
17 |         color: 'blue',
18 |       };
19 | 
20 |       // for...of - (iterable objects eg Array, NodeList...)
21 |       const permissions = ['user', 'editor', 'admin'];
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/03.While-loops/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>While Loops</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/04.If-else-statements/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>If Else Statements</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       let user = { name: 'Chris', role: 'admin' };
13 |       if (user) {
14 |         console.log('user logged in...');
15 |       }
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/05.Else-if/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Else If</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       let user = { name: 'Chris', role: 'subscriber' };
13 |       if (user) {
14 |         console.log('user logged in...');
15 |         if (user.role === 'admin') {
16 |           console.log('hey admin!');
17 |         } else {
18 |           console.log('hey user!');
19 |         }
20 |       } else {
21 |         console.log('user logged out');
22 |       }
23 |     </script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/06.The-switch-statement/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>The Switch Statement</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       let user = { name: 'Chris', role: 'user' };
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/07.Conditional-operator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Conditional Operator (ternary)</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <p id="edit"></p>
12 |     <script>
13 |       let user = { name: 'Chris', role: 'admin' };
14 |       let canEdit = false;
15 | 
16 |       if (user.role === 'admin') {
17 |         canEdit = true;
18 |       } else {
19 |         canEdit = false;
20 |       }
21 | 
22 |       document.querySelector('#edit').innerText = canEdit;
23 |     </script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/08.Type-coercion-conversion/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 | 		<title>Type Coercion & Conversion</title>
 8 | 	</head>
 9 | 
10 | 	<body>
11 | 		<script>
12 | 			const number1 = "7";
13 | 			const number2 = 2;
14 | 			const total = number1 + number2;
15 | 			console.log(total);
16 | 		</script>
17 | 	</body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/09.Truthy-falsy/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 | 		<title>Truthy & Falsy</title>
 8 | 	</head>
 9 | 
10 | 	<body>
11 | 		<script></script>
12 | 	</body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/06.Loops-And-Conditionals/10.Optional-chaining/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Optional Chaining</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       let currentUser = { name: 'Chris', role: 'admin' };
13 |       if (currentUser.role === 'admin') {
14 |         console.log(true);
15 |       } else {
16 |         console.log(false);
17 |       }
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/01.The-object-constructor/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>The Object Constructor</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       // Object literal
13 |       let user = {
14 |         first: 'Chris',
15 |         last: 'Dixon',
16 |         occupation: 'web developer',
17 |         loggedIn: true,
18 |         foods: ['pizza', 'mexican', 'indian'],
19 |       };
20 |     </script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/02.Object-constructor-functions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Object Constructor Functions</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/03.Object-prototypes/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Object Prototypes</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       function User(first, last, occupation, lives) {
13 |         this.firstName = first;
14 |         this.lastName = last;
15 |         this.occupation = occupation;
16 |         this.lives = lives;
17 |         this.fullName = function () {
18 |           return this.firstName + ' ' + this.lastName;
19 |         };
20 |       }
21 | 
22 |       const chris = new User('Chris', 'Dixon', 'Dev', 'UK');
23 |       const homer = new User(
24 |         'Homer',
25 |         'Simpson',
26 |         'Safety Inspector',
27 |         'Springfield'
28 |       );
29 | 
30 |       console.log(homer);
31 |     </script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/04.Inheriting-object-prototypes/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Inheriting Object Prototypes</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       function User(first, last, occupation, lives) {
13 |         this.firstName = first;
14 |         this.lastName = last;
15 |         this.occupation = occupation;
16 |         this.lives = lives;
17 |       }
18 | 
19 |       const chris = new User('Chris', 'Dixon', 'Dev', 'UK');
20 |       const homer = new User(
21 |         'Homer',
22 |         'Simpson',
23 |         'Safety Inspector',
24 |         'Springfield'
25 |       );
26 | 
27 |       console.log(homer);
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/05.Copying-object-properties/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Copying Object Properties</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       let baseCharacter = {
13 |         show: 'The Simpsons',
14 |         location: 'Springfield',
15 |         animated: true,
16 |         established: 1989,
17 |       };
18 | 
19 |       let homer = {
20 |         name: 'Homer Simpson',
21 |         children: ['Bart', 'Lisa', 'Maggie'],
22 |         gender: 'Male',
23 |         occupation: 'Springfield Power Plant Safety Inspector',
24 |       };
25 |       console.log(homer);
26 |     </script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/06.CSS-style-objects/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>CSS Style Objects</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <header>
12 |       <h1>No Meat Burgers</h1>
13 |     </header>
14 |     <script>
15 |       const header = document.querySelector('header');
16 |       header.style.display = 'flex';
17 |       header.style.justifyContent = 'space-between';
18 |       header.style.padding = '0 10px';
19 |       header.style.background = 'rgb(116, 203, 116)';
20 |       header.style.color = 'rgb(46, 43, 43)';
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/07.Looping-with-objects/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Looping With Objects</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       function User(first, last, occupation, lives) {
13 |         this.firstName = first;
14 |         this.lastName = last;
15 |         this.occupation = occupation;
16 |         this.lives = lives;
17 |       }
18 | 
19 |       // User.prototype.cool = true;
20 |       // User.prototype.fullName = function () {
21 |       //   return this.firstName + ' ' + this.lastName;
22 |       // };
23 | 
24 |       const homer = new User(
25 |         'Homer',
26 |         'Simpson',
27 |         'Safety Inspector',
28 |         'Springfield'
29 |       );
30 |     </script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/08.Dynamic-objects/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 | 		<title>Dynamic Objects</title>
 8 | 	</head>
 9 | 
10 | 	<body>
11 | 		<ul></ul>
12 | 		<script>
13 | 			function User(first, last, occupation, lives) {
14 | 				this.firstName = first;
15 | 				this.lastName = last;
16 | 				this.occupation = occupation;
17 | 				this.lives = lives;
18 | 			}
19 | 
20 | 			const homer = new User(
21 | 				"Homer",
22 | 				"Simpson",
23 | 				"Safety Inspector",
24 | 				"Springfield"
25 | 			);
26 | 
27 | 			// ADD TO DOM
28 | 			const ul = document.querySelector("ul");
29 | 			for (const [key, value] of Object.entries(homer)) {
30 | 				const li = document.createElement("li");
31 | 				const text = document.createTextNode(`${key}: ${value}`);
32 | 				li.appendChild(text);
33 | 				ul.appendChild(li);
34 | 			}
35 | 		</script>
36 | 	</body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/09.Primitive-reference-types/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Primitive & Reference Types</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/07.Objects-In-More-Depth/10.Comparing-objects/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Comparing Objects</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       const laptop1 = {
13 |         brand: 'Apple',
14 |         model: 'Macbook Pro',
15 |       };
16 | 
17 |       const laptop2 = {
18 |         brand: 'Apple',
19 |         model: 'Macbook Pro',
20 |       };
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/08.Speedy-Chef-Project/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <link rel="preconnect" href="https://fonts.gstatic.com">
 9 | <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500&display=swap" rel="stylesheet">
10 |   <link rel="stylesheet" href="styles.css">
11 |   <title>Speedy Chef! &#127829;</title>
12 | </head>
13 | 
14 | <body>
15 |   <main>
16 |     <section id="stats">
17 |       <h3>Stats</h3>
18 |       <p>Completed orders: <span id="completedOrders"></span></p>
19 |       <p>Completed pizzas: <span id="completedPizzas"></span></p>
20 |       <p>Wasted pizzas: <span id="wastedPizzas"></span></p>
21 |     </section>
22 |     <section id="game_controls">
23 |       <button id="startBtn"">START</button>
24 |       <button id="endBtn"">END</button>
25 |       <span id="gameLength"></span>
26 |     </section>
27 |     <section id="working_on">
28 |       <h3>Working on</h3>
29 |     </section>
30 |     <section id="method">
31 |       <h3>Method: <span id="pizza_name"></span></h3>
32 |       <ul id="pizza_method"></ul>
33 |     </section>
34 |     <section id="oven_wrapper">
35 |       <h3>Oven</h3>
36 |       <div id="oven"></div>
37 |     </section>
38 |     <div id="message_area">
39 |       <h3>Messages for the chef</h3>
40 |       <p id="message"></p>
41 |     </div>
42 |     <section id="kitchen_area">
43 |       <h3>Kitchen</h3>
44 | 
45 |       <div id="kitchen_main">
46 |         <div class="kitchen_left">
47 |           <h4>Currently making: <em><strong><span id="current_pizza"></span></strong></span></em></span></h4>
48 |           <div>
49 |             <button  class="oven_btn">OVEN</button>
50 |             <button id='waste'  class="delete_btn">WASTE</button>
51 |           </div>
52 |           <canvas id="pizza_area" width="250px" height="250px"></canvas>
53 |         </div>
54 |         <div class="kitchen_right">
55 |           <div id="ingredients"></div>
56 |         </div>
57 |       </div>
58 |     </section>
59 |   </main>
60 |   <aside id="orders">
61 |     <h3>Orders</h3>
62 |   </aside>
63 |   <script src="index.js"></script>
64 | </body>
65 | 
66 | </html>


--------------------------------------------------------------------------------
/08.Speedy-Chef-Project/index.js:
--------------------------------------------------------------------------------
  1 | const pizzas = [
  2 |   {
  3 |     name: 'Margherita',
  4 |     method:
  5 |       '1/ Roll the dough base to the required thickness and shape. 2/ Add sauce to the base. 3/ Top with cheese.',
  6 |     requiredSteps: ['ROLL DOUGH', 'PIZZA SAUCE', 'CHEESE'],
  7 |   },
  8 |   {
  9 |     name: 'Pepperoni',
 10 |     method:
 11 |       '1/ Roll the dough base to the required thickness and shape. 2/ Add sauce to the base. 3/ Top with cheese. 4/ Add 12 slices of pepperoni.',
 12 |     requiredSteps: ['ROLL DOUGH', 'PIZZA SAUCE', 'CHEESE', 'PEPPERONI'],
 13 |   },
 14 |   {
 15 |     name: 'Ham and Pineapple',
 16 |     method:
 17 |       '1/ Roll the dough base to the required thickness and shape. 2/ Add sauce to the base. 3/ Top with cheese. 4/ Add 12 pieces of ham. 5/ Add 12 pieces of pineapple.',
 18 |     requiredSteps: ['ROLL DOUGH', 'PIZZA SAUCE', 'CHEESE', 'HAM', 'PINEAPPLE'],
 19 |   },
 20 |   {
 21 |     name: 'Chicken',
 22 |     method:
 23 |       '1/ Roll the dough base to the required thickness and shape. 2/ Add sauce to the base. 3/ Top with cheese. 4/ Add 12 pieces of chicken',
 24 |     requiredSteps: ['ROLL DOUGH', 'PIZZA SAUCE', 'CHEESE', 'CHICKEN'],
 25 |   },
 26 |   {
 27 |     name: 'Vegetarian',
 28 |     method:
 29 |       '1/ Roll the dough base to the required thickness and shape. 2/ Add sauce to the base. 3/ Top with cheese. 4/ Add handful of onions. 5/ Add handful of peppers. 6/ Add small handful of mushrooms. 7/ Add garlic.',
 30 |     requiredSteps: [
 31 |       'ROLL DOUGH',
 32 |       'PIZZA SAUCE',
 33 |       'CHEESE',
 34 |       'ONIONS',
 35 |       'PEPPERS',
 36 |       'MUSHROOMS',
 37 |       'GARLIC',
 38 |     ],
 39 |   },
 40 | ];
 41 | 
 42 | let orders = [
 43 |   {
 44 |     id: 1,
 45 |     pizzas: [
 46 |       {
 47 |         quantity: 1,
 48 |         name: 'Ham and Pineapple',
 49 |       },
 50 |       {
 51 |         quantity: 2,
 52 |         name: 'Pepperoni',
 53 |       },
 54 |     ],
 55 |   },
 56 |   {
 57 |     id: 2,
 58 |     pizzas: [
 59 |       {
 60 |         quantity: 2,
 61 |         name: 'Margherita',
 62 |       },
 63 |       {
 64 |         quantity: 1,
 65 |         name: 'Pepperoni',
 66 |       },
 67 |     ],
 68 |   },
 69 |   {
 70 |     id: 3,
 71 |     pizzas: [
 72 |       {
 73 |         quantity: 2,
 74 |         name: 'Pepperoni',
 75 |       },
 76 |       {
 77 |         quantity: 1,
 78 |         name: 'Margherita',
 79 |       },
 80 |       {
 81 |         quantity: 1,
 82 |         name: 'Ham and Pineapple',
 83 |       },
 84 |     ],
 85 |   },
 86 | ];
 87 | 
 88 | const ingredients = [
 89 |   'ROLL DOUGH',
 90 |   'PIZZA SAUCE',
 91 |   'CHEESE',
 92 |   'PEPPERONI',
 93 |   'HAM',
 94 |   'PINEAPPLE',
 95 |   'ONIONS',
 96 |   'PEPPERS',
 97 |   'MUSHROOMS',
 98 |   'GARLIC',
 99 |   'CHICKEN',
100 | ];
101 | 


--------------------------------------------------------------------------------
/08.Speedy-Chef-Project/styles.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   display: flex;
  3 |   flex-direction: column;
  4 |   background: rgb(224, 209, 180);
  5 |   color: rgb(71, 71, 71);
  6 |   font-size: 16px;
  7 | }
  8 | 
  9 | aside {
 10 |   margin-left: 10px;
 11 |   flex: 1;
 12 |   padding: 10px;
 13 |   border-radius: 3px;
 14 |   overflow: hidden;
 15 | }
 16 | 
 17 | h3 {
 18 |   font-family: 'Dancing Script', cursive;
 19 |   font-size: 28px;
 20 |   background: rgb(255, 169, 71);
 21 |   padding: 5px;
 22 |   /* stop background being full width of section */
 23 |   width: fit-content;
 24 |   margin: 20px auto;
 25 |   transform: rotate(-2deg);
 26 | }
 27 | 
 28 | /* orders ul */
 29 | ul {
 30 |   font-family: courier, monospace;
 31 |   font-size: 14px;
 32 |   padding: 0;
 33 |   border: 1px solid #b7adad;
 34 | }
 35 | 
 36 | /* orders li */
 37 | li {
 38 |   text-indent: 15px;
 39 |   border-bottom: 1px dotted rgb(159, 158, 158);
 40 |   padding: 5px;
 41 |   list-style: none;
 42 | }
 43 | 
 44 | li:last-child {
 45 |   border-bottom: none;
 46 | }
 47 | 
 48 | #kitchen_main {
 49 |   display: flex;
 50 |   flex-direction: column;
 51 | }
 52 | 
 53 | #working_on,
 54 | #method,
 55 | #stats,
 56 | #oven_wrapper,
 57 | #message_area,
 58 | #kitchen_area,
 59 | #game_controls {
 60 |   padding: 10px;
 61 |   border-radius: 3px;
 62 |   background: rgb(241, 241, 241);
 63 | }
 64 | 
 65 | #game_controls {
 66 |   grid-area: game-controls;
 67 | }
 68 | 
 69 | #working_on {
 70 |   grid-area: working_on;
 71 | }
 72 | #method {
 73 |   grid-area: method;
 74 | }
 75 | 
 76 | #oven_wrapper {
 77 |   grid-area: oven_wrapper;
 78 | }
 79 | 
 80 | #message_area {
 81 |   grid-area: message;
 82 | }
 83 | 
 84 | #kitchen_area {
 85 |   grid-area: kitchen;
 86 | }
 87 | 
 88 | main {
 89 |   flex: 3;
 90 |   display: grid;
 91 |   height: 100vh;
 92 |   grid-template-columns: 1fr 1fr 1fr;
 93 |   grid-template-rows: 0.5fr 3fr 1fr 3fr;
 94 |   grid-gap: 10px;
 95 |   grid-template-areas:
 96 |     'game-controls game-controls game-controls'
 97 |     'working_on method oven_wrapper'
 98 |     'message message message'
 99 |     'kitchen kitchen kitchen';
100 | }
101 | 
102 | .order_wrapper {
103 |   cursor: pointer;
104 | }
105 | 
106 | #stats {
107 |   display: none;
108 | }
109 | 
110 | #ingredients span {
111 |   display: inline-block;
112 |   margin: 5px 15px;
113 |   background: hotpink;
114 |   padding: 5px;
115 |   border-radius: 3px;
116 | }
117 | 
118 | .ingredient {
119 |   background: rgb(224, 209, 180);
120 | }
121 | 
122 | button {
123 |   cursor: pointer;
124 |   border: none;
125 |   font-size: 18px;
126 |   border-radius: 3px;
127 |   padding: 10px 20px;
128 |   margin: 5px 10px;
129 | }
130 | 
131 | .oven_btn {
132 |   background: rgb(243, 204, 78);
133 | }
134 | .complete_btn {
135 |   background: rgb(152, 244, 211);
136 | }
137 | .delete_btn {
138 |   background: rgb(246, 124, 124);
139 | }
140 | #pizza_name {
141 |   cursor: pointer;
142 |   font-size: 18px;
143 |   font-style: italic;
144 |   font-weight: bolder;
145 | }
146 | 
147 | #message {
148 |   text-align: center;
149 |   font-size: 2em;
150 |   font-weight: bold;
151 |   min-height: 40px;
152 | }
153 | 
154 | #startBtn {
155 |   background: rgb(165, 217, 165);
156 | }
157 | 
158 | img {
159 |   max-width: 100px;
160 | }
161 | 
162 | .pizzaDiv {
163 |   display: inline-block;
164 |   text-align: center;
165 | }
166 | 
167 | .fade-in {
168 |   animation: fadeIn ease 2s;
169 | }
170 | 
171 | @keyframes fadeIn {
172 |   0% {
173 |     opacity: 0;
174 |   }
175 |   100% {
176 |     opacity: 1;
177 |   }
178 | }
179 | 
180 | .kitchen_right {
181 |   padding-top: 20px;
182 | }
183 | 
184 | @media screen and (min-width: 900px) {
185 |   body {
186 |     flex-direction: row;
187 |   }
188 |   #kitchen_main {
189 |     flex-direction: row;
190 |   }
191 |   .kitchen_left {
192 |     flex: 1;
193 |   }
194 |   .kitchen_right {
195 |     flex: 1;
196 |   }
197 | }
198 | 


--------------------------------------------------------------------------------
/09.Scope-Hoisting-Closures/01.Introduction-to-scope/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 | 		<title>Introduction To Scope</title>
 8 | 	</head>
 9 | 
10 | 	<body>
11 | 		<script>
12 | 			// var, let, const
13 | 			var score = 0;
14 | 
15 | 			function updateScore() {
16 | 				score++;
17 | 				console.log(score);
18 | 			}
19 | 			updateScore();
20 | 		</script>
21 | 	</body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/09.Scope-Hoisting-Closures/02.Nesting-scope/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Nesting Scope</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       var score = 0;
13 | 
14 |       function updateScore() {
15 |         score++;
16 |         var bonus = 10;
17 |         console.log(score + bonus);
18 |       }
19 |       updateScore();
20 |     </script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/09.Scope-Hoisting-Closures/03.Block-function-scope/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Block & Function Scope</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       var score = 0;
13 | 
14 |       function updateScore() {
15 |         score++;
16 |         var bonus = 10;
17 |         console.log('inside function' + bonus3);
18 |         if (bonus) {
19 |           console.log('inside if statement: ' + bonus);
20 |           var numbers = [1, 5, 8, 2];
21 |           var i = 0;
22 |           while (i < numbers.length) {
23 |             var bonus3 = 30;
24 |             console.log(bonus);
25 |             i++;
26 |           }
27 |         }
28 |       }
29 |       updateScore();
30 |     </script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/09.Scope-Hoisting-Closures/04.Hoisting/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Hoisting</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       // EXAMPLE 1
13 |       // =========
14 | 
15 |       let bread = ['flour', 'yeast', 'salt', 'water'];
16 |       let brownies = ['butter', 'chocolate', 'flour', 'eggs', 'sugar'];
17 | 
18 |       console.log(checkAllergies(bread, 'flour'));
19 | 
20 |       // function declaration
21 |       function checkAllergies(recipe, ingredient) {
22 |         const hasIngredient = recipe.includes(ingredient);
23 |         return hasIngredient;
24 |       }
25 |       // function expression
26 |       // const checkAllergies = function (recipe, ingredient) {
27 |       //   const hasIngredient = recipe.includes(ingredient);
28 |       //   return hasIngredient;
29 |       // };
30 | 
31 |       // EXAMPLE 2
32 |       // =========
33 |       console.log(name);
34 |       var name = 'Chris';
35 |     </script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/09.Scope-Hoisting-Closures/05.Temporal-dead-zone/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Temporal Dead Zone</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       console.log(name);
13 |       var name = 'Chris';
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/09.Scope-Hoisting-Closures/06.Closures/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Closures</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/10.Async-Javascript/01.A-little-bit-of-background/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>A Little Bit Of Background</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <button>Let's begin...</button>
12 |     <h3></h3>
13 |     <img src="" alt="" />
14 |     <script>
15 |       // EXAMPLE 1
16 |       const button = document.querySelector('button');
17 |       const heading = document.querySelector('h3');
18 | 
19 |       button.addEventListener('click', function () {
20 |         alert('show me something!');
21 |         heading.innerText = 'HEEEEEEYYYYYY!!!!!!';
22 |       });
23 | 
24 |       // EXAMPLE 2
25 |       // const imageSrc = fetch(
26 |       //   'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Kamenn%C3%A1_l%C3%BAka_03.JPG/2560px-Kamenn%C3%A1_l%C3%BAka_03.JPG'
27 |       // );
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/10.Async-Javascript/02.Callback-functions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Callback Functions</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <ul></ul>
12 |     <script>
13 |       let users = [];
14 |       function getUsersFromDatabase() {
15 |         users = [
16 |           {
17 |             name: 'Chris',
18 |             occupation: 'Developer',
19 |           },
20 |           {
21 |             name: 'Homer',
22 |             occupation: 'Safety Inspector',
23 |           },
24 |         ];
25 |       }
26 |       getUsersFromDatabase();
27 |     </script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/10.Async-Javascript/03.Promises/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 | 		<title>Promises</title>
 8 | 	</head>
 9 | 
10 | 	<body>
11 | 		<script>
12 | 			fetch("https://dog.ceo/api/breeds/image/random");
13 | 		</script>
14 | 	</body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/10.Async-Javascript/04.The-promise-constructor/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>The Promise Constructor</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/10.Async-Javascript/05.Handling-multiple-promises/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Handling Multiple Promises</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       const promise1 = fetch('https://dog.ceo/api/breeds/image/random').then(
13 |         function (response) {
14 |           return response.json();
15 |         }
16 |       );
17 | 
18 |       const promise2 = new Promise(function (resolve, reject) {
19 |         setTimeout(resolve, 2000);
20 |       });
21 |     </script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/10.Async-Javascript/06.Async-await/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Async / Await</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <img src="" alt="" />
12 |     <script>
13 |       // const promise = fetch('https://dog.ceo/api/breeds/image/random').then(
14 |       //   function (response) {
15 |       //     return response.json();
16 |       //   }
17 |       // );
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/10.Async-Javascript/07.Handling-multiple-awaits/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Handling Multiple Awaits</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <script>
12 |       async function setImage() {
13 |         const response = await fetch('https://dog.ceo/api/breeds/image/random');
14 |         const response2 = await fetch(
15 |           'https://dog.ceo/api/breeds/image/random'
16 |         );
17 |         const response3 = await fetch(
18 |           'https://dog.ceo/api/breeds/image/random'
19 |         );
20 |       }
21 |       setImage();
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/10.Async-Javascript/08.Error-handling/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Error Handling</title>
 8 |   </head>
 9 | 
10 |   <body>
11 |     <img src="" alt="" />
12 |     <script>
13 |       async function getImageUrl() {
14 |         const response = await fetch('https://dog.ceo/api/breeds/image/random');
15 |         const image = await response.json();
16 |         return image.message;
17 |       }
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/11.More-Practice/1.Leaving-so-soon/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 		<link rel="stylesheet" href="styles.css" />
 8 | 		<title>Leaving So Soon?</title>
 9 | 	</head>
10 | 	<body>
11 | 		<h1>Leaving so soon?</h1>
12 | 
13 | 		<div id="exit-popup">
14 | 			<div class="exit-content">
15 | 				<span class="close">&#10005;</span>
16 | 				<h3>Leaving so soon?</h3>
17 | 				<p>Drop your email to get a special discount code:</p>
18 | 				<form>
19 | 					<input type="email" />
20 | 					<button type="submit">Send</button>
21 | 				</form>
22 | 			</div>
23 | 		</div>
24 | 
25 | 		<script src="script.js"></script>
26 | 	</body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/11.More-Practice/1.Leaving-so-soon/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/11.More-Practice/1.Leaving-so-soon/script.js


--------------------------------------------------------------------------------
/11.More-Practice/1.Leaving-so-soon/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	min-height: 100vh;
 3 | 	text-align: center;
 4 | 	background: white;
 5 | }
 6 | 
 7 | #exit-popup {
 8 | 	background-color: rgba(0, 0, 0, 0.7);
 9 | 	position: absolute;
10 | 	top: 0;
11 | 	right: 0;
12 | 	bottom: 0;
13 | 	left: 0;
14 | 	display: none;
15 | 	justify-content: center;
16 | 	align-items: center;
17 | 	animation: fadeIn 1s;
18 | }
19 | 
20 | .exit-content {
21 | 	background: white;
22 | 	border-radius: 1rem;
23 | 	min-width: 60vw;
24 | 	padding: 1rem 1rem 2rem 1rem;
25 | }
26 | 
27 | .close {
28 | 	display: flex;
29 | 	justify-content: flex-end;
30 | 	cursor: pointer;
31 | 	color: rgb(224, 91, 91);
32 | }
33 | 
34 | @keyframes fadeIn {
35 | 	0% {
36 | 		opacity: 0;
37 | 	}
38 | 	100% {
39 | 		opacity: 1;
40 | 	}
41 | }
42 | 


--------------------------------------------------------------------------------
/11.More-Practice/2.Image carousel/carousel/carousel.css:
--------------------------------------------------------------------------------
 1 | #carousel {
 2 |   max-width: 1000px;
 3 |   margin: 0 auto;
 4 | }
 5 | 
 6 | .carousel:hover {
 7 |   cursor: pointer;
 8 | }
 9 | 
10 | .large {
11 |   animation: fadeIn 1s;
12 |   width: 100%;
13 |   margin-bottom: 10px;
14 | }
15 | 
16 | .small {
17 |   width: 20%;
18 | }
19 | 
20 | .small:hover {
21 |   opacity: 0.95;
22 | }
23 | 
24 | @keyframes fadeIn {
25 |   0% {
26 |     opacity: 0.8;
27 |   }
28 |   100% {
29 |     opacity: 1;
30 |   }
31 | }
32 | 
33 | #smallImageWrapper {
34 |   display: flex;
35 |   justify-content: space-between;
36 |   align-items: center;
37 | }
38 | 
39 | span {
40 |   color: rgb(57, 57, 57);
41 |   font-size: 2rem;
42 |   cursor: pointer;
43 | }
44 | 


--------------------------------------------------------------------------------
/11.More-Practice/2.Image carousel/carousel/carousel.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/11.More-Practice/2.Image carousel/carousel/carousel.js


--------------------------------------------------------------------------------
/11.More-Practice/2.Image carousel/carousel/images/beach.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/11.More-Practice/2.Image carousel/carousel/images/beach.jpg


--------------------------------------------------------------------------------
/11.More-Practice/2.Image carousel/carousel/images/elephants.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/11.More-Practice/2.Image carousel/carousel/images/elephants.jpg


--------------------------------------------------------------------------------
/11.More-Practice/2.Image carousel/carousel/images/grass.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/11.More-Practice/2.Image carousel/carousel/images/grass.jpg


--------------------------------------------------------------------------------
/11.More-Practice/2.Image carousel/carousel/images/lake.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/11.More-Practice/2.Image carousel/carousel/images/lake.jpg


--------------------------------------------------------------------------------
/11.More-Practice/2.Image carousel/carousel/images/town.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisdixon161/modern-javascript-starter-files/8618321b4bff3b2bd8ab87889c53a6f1f9389fbc/11.More-Practice/2.Image carousel/carousel/images/town.jpg


--------------------------------------------------------------------------------
/11.More-Practice/2.Image carousel/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="UTF-8" />
 5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 		<title>Image Carousel</title>
 8 | 		<link rel="stylesheet" href="carousel/carousel.css" />
 9 | 	</head>
10 | 	<body>
11 | 		<div id="carousel"></div>
12 | 		<script src="carousel/carousel.js"></script>
13 | 	</body>
14 | </html>
15 | 


--------------------------------------------------------------------------------