diff --git a/2-js-basics/1-data-types/README.md b/2-js-basics/1-data-types/README.md index d1c9bef4..cc057a3a 100644 --- a/2-js-basics/1-data-types/README.md +++ b/2-js-basics/1-data-types/README.md @@ -3,6 +3,23 @@ ![JavaScript Basics - Data types](../../sketchnotes/webdev101-js-datatypes.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) +```mermaid +journey + title Your JavaScript Data Types Adventure + section Foundation + Variables & Constants: 5: You + Declaration Syntax: 4: You + Assignment Concepts: 5: You + section Core Types + Numbers & Math: 4: You + Strings & Text: 5: You + Booleans & Logic: 4: You + section Apply Knowledge + Type Conversion: 4: You + Real-world Examples: 5: You + Best Practices: 5: You +``` + Data types are one of the fundamental concepts in JavaScript that you'll encounter in every program you write. Think of data types like the filing system used by ancient librarians in Alexandria – they had specific places for scrolls containing poetry, mathematics, and historical records. JavaScript organizes information in a similar way with different categories for different kinds of data. In this lesson, we'll explore the core data types that make JavaScript work. You'll learn how to handle numbers, text, true/false values, and understand why choosing the correct type is essential for your programs. These concepts might seem abstract at first, but with practice, they'll become second nature. @@ -24,6 +41,38 @@ This lesson covers the basics of JavaScript, the language that provides interact Let's start with variables and the data types that populate them! +```mermaid +mindmap + root((JavaScript Data)) + Variables + let myVar + const PI = 3.14 + var oldStyle + Primitive Types + number + 42 + 3.14 + -5 + string + "Hello" + 'World' + `Template` + boolean + true + false + undefined + null + Operations + Arithmetic + + - * / % + String Methods + concatenation + template literals + Type Conversion + implicit + explicit +``` + ## Variables Variables are fundamental building blocks in programming. Like the labeled jars that medieval alchemists used to store different substances, variables let you store information and give it a descriptive name so you can reference it later. Need to remember someone's age? Store it in a variable called `age`. Want to track a user's name? Keep it in a variable called `userName`. @@ -87,6 +136,34 @@ Creating and **declaring** a variable has the following syntax **[keyword] [name ✅ Try it! You can write JavaScript right in your browser. Open a browser window and navigate to Developer Tools. In the console, you will find a prompt; type `let myVariable = 123`, press return, then type `myVariable`. What happens? Note, you'll learn more about these concepts in subsequent lessons. +### 🧠 **Variables Mastery Check: Getting Comfortable** + +**Let's see how you're feeling about variables:** +- Can you explain the difference between declaring and assigning a variable? +- What happens if you try to use a variable before you declare it? +- When would you choose `let` over `const` for a variable? + +```mermaid +stateDiagram-v2 + [*] --> Declared: let myVar + Declared --> Assigned: myVar = 123 + Assigned --> Reassigned: myVar = 456 + Assigned --> [*]: Variable ready! + Reassigned --> [*]: Updated value + + note right of Declared + Variable exists but + has no value (undefined) + end note + + note right of Assigned + Variable contains + the value 123 + end note +``` + +> **Quick tip**: Think of variables as labeled storage boxes. You create the box (`let`), put something in it (`=`), and can later replace the contents if needed! + ## Constants Sometimes you need to store information that should never change during program execution. Think of constants like the mathematical principles that Euclid established in ancient Greece – once proven and documented, they remained fixed for all future reference. @@ -174,6 +251,28 @@ let myVariable = 123; Variables can store all types of numbers, including decimals or negative numbers. Numbers also can be used with arithmetic operators, covered in the [next section](#arithmetic-operators). +```mermaid +flowchart LR + A["🔢 Numbers"] --> B["➕ Addition"] + A --> C["➖ Subtraction"] + A --> D["✖️ Multiplication"] + A --> E["➗ Division"] + A --> F["📊 Remainder %"] + + B --> B1["1 + 2 = 3"] + C --> C1["5 - 3 = 2"] + D --> D1["4 * 3 = 12"] + E --> E1["10 / 2 = 5"] + F --> F1["7 % 3 = 1"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` + ### Arithmetic Operators Arithmetic operators allow you to perform mathematical calculations in JavaScript. These operators follow the same principles mathematicians have used for centuries – the same symbols that appeared in the works of scholars like Al-Khwarizmi, who developed algebraic notation. @@ -192,6 +291,24 @@ There are several types of operators to use when performing arithmetic functions ✅ Try it! Try an arithmetic operation in your browser's console. Do the results surprise you? +### 🧮 **Math Skills Check: Calculating with Confidence** + +**Test your arithmetic understanding:** +- What's the difference between `/` (division) and `%` (remainder)? +- Can you predict what `10 % 3` equals? (Hint: it's not 3.33...) +- Why might the remainder operator be useful in programming? + +```mermaid +pie title "JavaScript Number Operations Usage" + "Addition (+)" : 35 + "Subtraction (-)" : 20 + "Multiplication (*)" : 20 + "Division (/)" : 15 + "Remainder (%)" : 10 +``` + +> **Real-world insight**: The remainder operator (%) is super useful for checking if numbers are even/odd, creating patterns, or cycling through arrays! + ### Strings In JavaScript, textual data is represented as strings. The term "string" comes from the concept of characters strung together in sequence, much like the way scribes in medieval monasteries would connect letters to form words and sentences in their manuscripts. @@ -214,6 +331,30 @@ let myString = 'This is a string value stored in a variable'; Remember to use quotes when writing a string, or else JavaScript will assume it's a variable name. +```mermaid +flowchart TD + A["📝 Strings"] --> B["Single Quotes"] + A --> C["Double Quotes"] + A --> D["Template Literals"] + + B --> B1["'Hello World'"] + C --> C1['"Hello World"'] + D --> D1["`Hello \${name}`"] + + E["String Operations"] --> F["Concatenation"] + E --> G["Template Insertion"] + E --> H["Length & Methods"] + + F --> F1["'Hello' + ' ' + 'World'"] + G --> G1["`Hello \${firstName} \${lastName}`"] + H --> H1["myString.length"] + + style A fill:#e3f2fd + style E fill:#fff3e0 + style D fill:#e8f5e8 + style G fill:#e8f5e8 +``` + ### Formatting Strings String manipulation allows you to combine text elements, incorporate variables, and create dynamic content that responds to program state. This technique enables you to construct text programmatically. @@ -259,6 +400,37 @@ You can achieve your formatting goals with either method, but template literals ✅ When would you use a template literal vs. a plain string? +### 🔤 **String Mastery Check: Text Manipulation Confidence** + +**Evaluate your string skills:** +- Can you explain why `'1' + '1'` equals `'11'` instead of `2`? +- Which string method do you find more readable: concatenation or template literals? +- What happens if you forget the quotes around a string? + +```mermaid +stateDiagram-v2 + [*] --> PlainText: "Hello" + [*] --> Variable: name = "Alice" + PlainText --> Concatenated: + " " + name + Variable --> Concatenated + PlainText --> Template: `Hello ${name}` + Variable --> Template + Concatenated --> Result: "Hello Alice" + Template --> Result + + note right of Concatenated + Traditional method + More verbose + end note + + note right of Template + Modern ES6 syntax + Cleaner & more readable + end note +``` + +> **Pro tip**: Template literals are generally preferred for complex string building because they're more readable and handle multi-line strings beautifully! + ### Booleans Booleans represent the simplest form of data: they can only hold one of two values – `true` or `false`. This binary logic system traces back to the work of George Boole, a 19th-century mathematician who developed Boolean algebra. @@ -280,8 +452,82 @@ let myFalseBool = false; ✅ A variable can be considered 'truthy' if it evaluates to a boolean `true`. Interestingly, in JavaScript, [all values are truthy unless defined as falsy](https://developer.mozilla.org/docs/Glossary/Truthy). +```mermaid +flowchart LR + A["🔘 Boolean Values"] --> B["true"] + A --> C["false"] + + D["Truthy Values"] --> D1["'hello'"] + D --> D2["42"] + D --> D3["[]"] + D --> D4["{}"] + + E["Falsy Values"] --> E1["false"] + E --> E2["0"] + E --> E3["''"] + E --> E4["null"] + E --> E5["undefined"] + E --> E6["NaN"] + + style B fill:#e8f5e8 + style C fill:#ffebee + style D fill:#e3f2fd + style E fill:#fff3e0 +``` + +### 🎯 **Boolean Logic Check: Decision Making Skills** + +**Test your boolean understanding:** +- Why do you think JavaScript has "truthy" and "falsy" values beyond just `true` and `false`? +- Can you predict which of these is falsy: `0`, `"0"`, `[]`, `"false"`? +- How might booleans be useful in controlling program flow? + +```mermaid +pie title "Common Boolean Use Cases" + "Conditional Logic" : 40 + "User State" : 25 + "Feature Toggles" : 20 + "Validation" : 15 +``` + +> **Remember**: In JavaScript, only 6 values are falsy: `false`, `0`, `""`, `null`, `undefined`, and `NaN`. Everything else is truthy! + --- +## 📊 **Your Data Types Toolkit Summary** + +```mermaid +graph TD + A["🎯 JavaScript Data Types"] --> B["📦 Variables"] + A --> C["🔢 Numbers"] + A --> D["📝 Strings"] + A --> E["🔘 Booleans"] + + B --> B1["let mutable"] + B --> B2["const immutable"] + + C --> C1["42, 3.14, -5"] + C --> C2["+ - * / %"] + + D --> D1["'quotes' or \"quotes\""] + D --> D2["`template literals`"] + + E --> E1["true or false"] + E --> E2["truthy vs falsy"] + + F["⚡ Key Concepts"] --> F1["Type matters for operations"] + F --> F2["JavaScript is dynamically typed"] + F --> F3["Variables can change types"] + F --> F4["Naming is case-sensitive"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` + ## GitHub Copilot Agent Challenge 🚀 Use the Agent mode to complete the following challenge: @@ -308,3 +554,61 @@ Take a look at [this list of JavaScript exercises](https://css-tricks.com/snippe ## Assignment [Data Types Practice](assignment.md) + +## 🚀 Your JavaScript Data Types Mastery Timeline + +### ⚡ **What You Can Do in the Next 5 Minutes** +- [ ] Open your browser console and create 3 variables with different data types +- [ ] Try the challenge: `let age = 1; let Age = 2; age == Age` and figure out why it's false +- [ ] Practice string concatenation with your name and favorite number +- [ ] Test what happens when you add a number to a string + +### 🎯 **What You Can Accomplish This Hour** +- [ ] Complete the post-lesson quiz and review any confusing concepts +- [ ] Create a mini calculator that adds, subtracts, multiplies, and divides two numbers +- [ ] Build a simple name formatter using template literals +- [ ] Explore the differences between `==` and `===` comparison operators +- [ ] Practice converting between different data types + +### 📅 **Your Week-Long JavaScript Foundation** +- [ ] Complete the assignment with confidence and creativity +- [ ] Create a personal profile object using all data types learned +- [ ] Practice with [JavaScript exercises from CSS-Tricks](https://css-tricks.com/snippets/javascript/) +- [ ] Build a simple form validator using boolean logic +- [ ] Experiment with array and object data types (preview of coming lessons) +- [ ] Join a JavaScript community and ask questions about data types + +### 🌟 **Your Month-Long Transformation** +- [ ] Integrate data type knowledge into larger programming projects +- [ ] Understand when and why to use each data type in real applications +- [ ] Help other beginners understand JavaScript fundamentals +- [ ] Build a small application that manages different types of user data +- [ ] Explore advanced data type concepts like type coercion and strict equality +- [ ] Contribute to open source JavaScript projects with documentation improvements + +### 🧠 **Final Data Types Mastery Check-in** + +**Celebrate your JavaScript foundation:** +- Which data type surprised you the most in terms of its behavior? +- How comfortable do you feel explaining variables vs. constants to a friend? +- What's the most interesting thing you discovered about JavaScript's type system? +- Which real-world application can you imagine building with these fundamentals? + +```mermaid +journey + title Your JavaScript Confidence Journey + section Today + Confused: 3: You + Curious: 4: You + Excited: 5: You + section This Week + Practicing: 4: You + Understanding: 5: You + Building: 5: You + section Next Month + Problem Solving: 5: You + Teaching Others: 5: You + Real Projects: 5: You +``` + +> 💡 **You've built the foundation!** Understanding data types is like learning the alphabet before writing stories. Every JavaScript program you'll ever write will use these fundamental concepts. You now have the building blocks to create interactive websites, dynamic applications, and solve real-world problems with code. Welcome to the wonderful world of JavaScript! 🎉 diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md index d273ae73..e85f5568 100644 --- a/2-js-basics/2-functions-methods/README.md +++ b/2-js-basics/2-functions-methods/README.md @@ -3,6 +3,23 @@ ![JavaScript Basics - Functions](../../sketchnotes/webdev101-js-functions.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) +```mermaid +journey + title Your JavaScript Functions Adventure + section Foundation + Function Syntax: 5: You + Calling Functions: 4: You + Parameters & Arguments: 5: You + section Advanced Concepts + Return Values: 4: You + Default Parameters: 5: You + Function Composition: 4: You + section Modern JavaScript + Arrow Functions: 5: You + Anonymous Functions: 4: You + Higher-Order Functions: 5: You +``` + ## Pre-Lecture Quiz [Pre-lecture quiz](https://ff-quizzes.netlify.app) @@ -18,6 +35,39 @@ In this lesson, you'll learn how to create your own functions, pass information > You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)! +```mermaid +mindmap + root((JavaScript Functions)) + Basic Concepts + Declaration + function name() {} + const name = () => {} + Calling + functionName() + Parentheses required + Parameters + Input Values + function(param1, param2) + Default values + Arguments + Values passed in + Can be any type + Return Values + Output Data + return statement + Exit function + Use Results + Store in variables + Chain functions + Advanced Patterns + Higher-Order + Functions as parameters + Callbacks + Anonymous + No name needed + Inline definition +``` + ## Functions A function is a self-contained block of code that performs a specific task. It encapsulates logic that you can execute whenever needed. @@ -61,6 +111,30 @@ displayGreeting(); When you run this line, it executes all the code inside your `displayGreeting` function, displaying "Hello, world!" in your browser's console. You can call this function repeatedly. +### 🧠 **Function Fundamentals Check: Building Your First Functions** + +**Let's see how you're feeling about basic functions:** +- Can you explain why we use curly braces `{}` in function definitions? +- What happens if you write `displayGreeting` without the parentheses? +- Why might you want to call the same function multiple times? + +```mermaid +flowchart TD + A["✏️ Define Function"] --> B["📦 Package Code"] + B --> C["🏷️ Give it a Name"] + C --> D["📞 Call When Needed"] + D --> E["🔄 Reuse Anywhere"] + + F["💡 Benefits"] --> F1["No code repetition"] + F --> F2["Easy to maintain"] + F --> F3["Clear organization"] + F --> F4["Easier testing"] + + style A fill:#e3f2fd + style E fill:#e8f5e8 + style F fill:#fff3e0 +``` + > **Note:** You've been using **methods** throughout these lessons. `console.log()` is a method – essentially a function that belongs to the `console` object. The key difference is that methods are attached to objects, while functions stand independently. Many developers use these terms interchangeably in casual conversation. ### Function best practices @@ -107,6 +181,29 @@ displayGreeting('Christopher'); JavaScript takes the string `'Christopher'`, assigns it to the `name` parameter, and creates the personalized message "Hello, Christopher!" +```mermaid +flowchart LR + A["🎯 Function Call"] --> B["📥 Parameters"] + B --> C["⚙️ Function Body"] + C --> D["📤 Result"] + + A1["displayGreeting('Alice')"] --> A + B1["name = 'Alice'"] --> B + C1["Template literal\n\`Hello, \${name}!\`"] --> C + D1["'Hello, Alice!'"] --> D + + E["🔄 Parameter Types"] --> E1["Strings"] + E --> E2["Numbers"] + E --> E3["Booleans"] + E --> E4["Objects"] + E --> E5["Functions"] + + style A fill:#e3f2fd + style C fill:#e8f5e8 + style D fill:#fff3e0 + style E fill:#f3e5f5 +``` + ## Default values What if we want to make some parameters optional? That's where default values come in handy! @@ -133,6 +230,35 @@ displayGreeting('Christopher', 'Hi'); In the first call, JavaScript uses the default "Hello" since we didn't specify a salutation. In the second call, it uses our custom "Hi" instead. This flexibility makes functions adaptable to different scenarios. +### 🎛️ **Parameters Mastery Check: Making Functions Flexible** + +**Test your parameter understanding:** +- What's the difference between a parameter and an argument? +- Why are default values useful in real-world programming? +- Can you predict what happens if you pass more arguments than parameters? + +```mermaid +stateDiagram-v2 + [*] --> NoParams: function greet() {} + [*] --> WithParams: function greet(name) {} + [*] --> WithDefaults: function greet(name, greeting='Hi') {} + + NoParams --> Static: Same output always + WithParams --> Dynamic: Changes with input + WithDefaults --> Flexible: Optional customization + + Static --> [*] + Dynamic --> [*] + Flexible --> [*] + + note right of WithDefaults + Most flexible approach + Backwards compatible + end note +``` + +> **Pro tip**: Default parameters make your functions more user-friendly. Users can get started quickly with sensible defaults, but still customize when needed! + ## Return values Our functions so far have just been printing messages to the console, but what if you want a function to calculate something and give you back the result? @@ -166,6 +292,46 @@ const greetingMessage = createGreetingMessage('Christopher'); Now `greetingMessage` contains "Hello, Christopher" and we can use it anywhere in our code – to display it on a webpage, include it in an email, or pass it to another function. +```mermaid +flowchart TD + A["🔧 Function Processing"] --> B{"return statement?"} + B -->|Yes| C["📤 Return Value"] + B -->|No| D["📭 Return undefined"] + + C --> E["💾 Store in Variable"] + C --> F["🔗 Use in Expression"] + C --> G["📞 Pass to Function"] + + D --> H["⚠️ Usually not useful"] + + I["📋 Return Value Uses"] --> I1["Calculate results"] + I --> I2["Validate input"] + I --> I3["Transform data"] + I --> I4["Create objects"] + + style C fill:#e8f5e8 + style D fill:#ffebee + style I fill:#e3f2fd +``` + +### 🔄 **Return Values Check: Getting Results Back** + +**Evaluate your return value understanding:** +- What happens to code after a `return` statement in a function? +- Why is returning values often better than just printing to console? +- Can a function return different types of values (string, number, boolean)? + +```mermaid +pie title "Common Return Value Types" + "Strings" : 30 + "Numbers" : 25 + "Objects" : 20 + "Booleans" : 15 + "Arrays" : 10 +``` + +> **Key insight**: Functions that return values are more versatile because the caller decides what to do with the result. This makes your code more modular and reusable! + ## Functions as parameters for functions Functions can be passed as parameters to other functions. While this concept may seem complex initially, it's a powerful feature that enables flexible programming patterns. @@ -218,10 +384,65 @@ setTimeout(() => { The `()` is where parameters would go (empty in this case), then comes the arrow `=>`, and finally the function body in curly braces. This provides the same functionality with more concise syntax. +```mermaid +flowchart LR + A["📝 Function Styles"] --> B["Traditional"] + A --> C["Arrow"] + A --> D["Anonymous"] + + B --> B1["function name() {}"] + B --> B2["Hoisted"] + B --> B3["Named"] + + C --> C1["const name = () => {}"] + C --> C2["Concise syntax"] + C --> C3["Modern style"] + + D --> D1["function() {}"] + D --> D2["No name"] + D --> D3["One-time use"] + + E["⏰ When to Use"] --> E1["Traditional: Reusable functions"] + E --> E2["Arrow: Short callbacks"] + E --> E3["Anonymous: Event handlers"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` + ### When to use each strategy When should you use each approach? A practical guideline: if you'll use the function multiple times, give it a name and define it separately. If it's for one specific use, consider an anonymous function. Both arrow functions and traditional syntax are valid choices, though arrow functions are prevalent in modern JavaScript codebases. +### 🎨 **Function Styles Mastery Check: Choosing the Right Syntax** + +**Test your syntax understanding:** +- When might you prefer arrow functions over traditional function syntax? +- What's the main advantage of anonymous functions? +- Can you think of a situation where a named function is better than an anonymous one? + +```mermaid +quadrantChart + title Function Choice Decision Matrix + x-axis Simple --> Complex + y-axis One-time use --> Reusable + quadrant-1 Arrow Functions + quadrant-2 Named Functions + quadrant-3 Anonymous Functions + quadrant-4 Traditional Functions + + Event Handlers: [0.3, 0.2] + Utility Functions: [0.7, 0.8] + Callbacks: [0.2, 0.3] + Class Methods: [0.8, 0.7] + Mathematical Operations: [0.4, 0.6] +``` + +> **Modern trend**: Arrow functions are becoming the default choice for many developers because of their concise syntax, but traditional functions still have their place! + --- @@ -255,3 +476,103 @@ It's worth [reading up a little more on arrow functions](https://developer.mozil ## Assignment [Fun with Functions](assignment.md) + +--- + +## 🧰 **Your JavaScript Functions Toolkit Summary** + +```mermaid +graph TD + A["🎯 JavaScript Functions"] --> B["📋 Function Declaration"] + A --> C["📥 Parameters"] + A --> D["📤 Return Values"] + A --> E["🎨 Modern Syntax"] + + B --> B1["function name() {}"] + B --> B2["Descriptive naming"] + B --> B3["Reusable code blocks"] + + C --> C1["Input data"] + C --> C2["Default values"] + C --> C3["Multiple parameters"] + + D --> D1["return statement"] + D --> D2["Exit function"] + D --> D3["Pass data back"] + + E --> E1["Arrow functions: () =>"] + E --> E2["Anonymous functions"] + E --> E3["Higher-order functions"] + + F["⚡ Key Benefits"] --> F1["Code reusability"] + F --> F2["Better organization"] + F --> F3["Easier testing"] + F --> F4["Modular design"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` + +--- + +## 🚀 Your JavaScript Functions Mastery Timeline + +### ⚡ **What You Can Do in the Next 5 Minutes** +- [ ] Write a simple function that returns your favorite number +- [ ] Create a function with two parameters that adds them together +- [ ] Try converting a traditional function to arrow function syntax +- [ ] Practice the challenge: explain the difference between functions and methods + +### 🎯 **What You Can Accomplish This Hour** +- [ ] Complete the post-lesson quiz and review any confusing concepts +- [ ] Build the math utilities library from the GitHub Copilot challenge +- [ ] Create a function that uses another function as a parameter +- [ ] Practice writing functions with default parameters +- [ ] Experiment with template literals in function return values + +### 📅 **Your Week-Long Function Mastery** +- [ ] Complete the "Fun with Functions" assignment with creativity +- [ ] Refactor some repetitive code you've written into reusable functions +- [ ] Build a small calculator using only functions (no global variables) +- [ ] Practice arrow functions with array methods like `map()` and `filter()` +- [ ] Create a collection of utility functions for common tasks +- [ ] Study higher-order functions and functional programming concepts + +### 🌟 **Your Month-Long Transformation** +- [ ] Master advanced function concepts like closures and scope +- [ ] Build a project that heavily uses function composition +- [ ] Contribute to open source by improving function documentation +- [ ] Teach someone else about functions and different syntax styles +- [ ] Explore functional programming paradigms in JavaScript +- [ ] Create a personal library of reusable functions for future projects + +### 🏆 **Final Functions Champion Check-in** + +**Celebrate your function mastery:** +- What's the most useful function you've created so far? +- How has learning about functions changed the way you think about code organization? +- Which function syntax do you prefer and why? +- What real-world problem would you solve by writing a function? + +```mermaid +journey + title Your Function Confidence Evolution + section Today + Confused by Syntax: 3: You + Understanding Basics: 4: You + Writing Simple Functions: 5: You + section This Week + Using Parameters: 4: You + Returning Values: 5: You + Modern Syntax: 5: You + section Next Month + Function Composition: 5: You + Advanced Patterns: 5: You + Teaching Others: 5: You +``` + +> 🎉 **You've mastered one of programming's most powerful concepts!** Functions are the building blocks of larger programs. Every application you'll ever build will use functions to organize, reuse, and structure code. You now understand how to package logic into reusable components, making you a more efficient and effective programmer. Welcome to the world of modular programming! 🚀 diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index c7f447a4..b3f78640 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -4,6 +4,23 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) +```mermaid +journey + title Your JavaScript Decision-Making Adventure + section Foundation + Boolean Values: 5: You + Comparison Operators: 4: You + Logical Thinking: 5: You + section Basic Decisions + If Statements: 4: You + If-Else Logic: 5: You + Switch Statements: 4: You + section Advanced Logic + Logical Operators: 5: You + Complex Conditions: 4: You + Ternary Expressions: 5: You +``` + Have you ever wondered how applications make smart decisions? Like how a navigation system chooses the fastest route, or how a thermostat decides when to turn on the heat? This is the fundamental concept of decision-making in programming. Just as Charles Babbage's Analytical Engine was designed to follow different sequences of operations based on conditions, modern JavaScript programs need to make choices based on varying circumstances. This ability to branch and make decisions is what transforms static code into responsive, intelligent applications. @@ -22,6 +39,39 @@ The ability to make decisions and control program flow is a fundamental aspect o > You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)! +```mermaid +mindmap + root((Decision Making)) + Boolean Logic + true/false + Comparison results + Logical expressions + Conditional Statements + if statements + Single condition + Code execution + if-else + Two paths + Alternative actions + switch + Multiple options + Clean structure + Operators + Comparison + === !== < > <= >= + Value relationships + Logical + && || ! + Combine conditions + Advanced Patterns + Ternary + ? : syntax + Inline decisions + Complex Logic + Nested conditions + Multiple criteria +``` + ## A Brief Recap on Booleans Before exploring decision-making, let's revisit Boolean values from our previous lesson. Named after mathematician George Boole, these values represent binary states – either `true` or `false`. There's no ambiguity, no middle ground. @@ -56,6 +106,61 @@ Comparison operators enable these evaluations. They compare values and return Bo ✅ Check your knowledge by writing some comparisons in your browser's console. Does any returned data surprise you? +```mermaid +flowchart LR + A["🔢 Values"] --> B["⚖️ Comparison"] + B --> C["✅ Boolean Result"] + + D["5"] --> E["< 6"] + E --> F["true"] + + G["10"] --> H["=== '10'"] + H --> I["false"] + + J["'hello'"] --> K["!== 'world'"] + K --> L["true"] + + M["📋 Operator Types"] --> M1["Equality: === !=="] + M --> M2["Relational: < > <= >="] + M --> M3["Strict vs Loose"] + + style A fill:#e3f2fd + style C fill:#e8f5e8 + style M fill:#fff3e0 +``` + +### 🧠 **Comparison Mastery Check: Understanding Boolean Logic** + +**Test your comparison understanding:** +- Why do you think `===` (strict equality) is generally preferred over `==` (loose equality)? +- Can you predict what `5 === '5'` returns? How about `5 == '5'`? +- What's the difference between `!==` and `!=`? + +```mermaid +stateDiagram-v2 + [*] --> Comparison: Two values + Comparison --> StrictEqual: === or !== + Comparison --> Relational: < > <= >= + + StrictEqual --> TypeCheck: Check type AND value + Relational --> NumberCompare: Convert to numbers + + TypeCheck --> BooleanResult: true or false + NumberCompare --> BooleanResult + + note right of StrictEqual + Preferred approach + No type conversion + end note + + note right of Relational + Useful for ranges + Numerical comparisons + end note +``` + +> **Pro tip**: Always use `===` and `!==` for equality checks unless you specifically need type conversion. This prevents unexpected behavior! + ## If Statement The `if` statement is like asking a question in your code. "If this condition is true, then do this thing." It's probably the most important tool you'll use for making decisions in JavaScript. @@ -84,6 +189,24 @@ if (currentMoney >= laptopPrice) { Since `1000 >= 800` evaluates to `true`, the code inside the block executes, displaying "Getting a new laptop!" in the console. +```mermaid +flowchart TD + A["🚀 Program Start"] --> B{"💰 currentMoney >= laptopPrice?"} + B -->|true| C["🎉 'Getting a new laptop!'"] + B -->|false| D["⏭️ Skip code block"] + C --> E["📋 Continue program"] + D --> E + + F["📊 If Statement Structure"] --> F1["if (condition) {"] + F1 --> F2[" // code to run if true"] + F2 --> F3["}"] + + style B fill:#fff3e0 + style C fill:#e8f5e8 + style D fill:#ffebee + style F fill:#e3f2fd +``` + ## If..Else Statement But what if you want your program to do something different when the condition is false? That's where `else` comes in – it's like having a backup plan. @@ -107,6 +230,35 @@ Now since `500 >= 800` is `false`, JavaScript skips the first block and runs the ✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the currentMoney and laptopPrice variables to change the returned `console.log()`. +### 🎯 **If-Else Logic Check: Branching Paths** + +**Evaluate your conditional logic understanding:** +- What happens if `currentMoney` exactly equals `laptopPrice`? +- Can you think of a real-world scenario where if-else logic would be useful? +- How might you extend this to handle multiple price ranges? + +```mermaid +flowchart TD + A["🔍 Evaluate Condition"] --> B{"Condition True?"} + B -->|Yes| C["📤 Execute IF block"] + B -->|No| D["📥 Execute ELSE block"] + + C --> E["✅ One path taken"] + D --> E + + F["🌐 Real-world Examples"] --> F1["User login status"] + F --> F2["Age verification"] + F --> F3["Form validation"] + F --> F4["Game state changes"] + + style B fill:#fff3e0 + style C fill:#e8f5e8 + style D fill:#e3f2fd + style F fill:#f3e5f5 +``` + +> **Key insight**: If-else ensures exactly one path is taken. This guarantees your program always has a response to any condition! + ## Switch Statement Sometimes you need to compare one value against multiple options. While you could chain several `if..else` statements, this approach becomes unwieldy. The `switch` statement provides a cleaner structure for handling multiple discrete values. @@ -157,8 +309,50 @@ console.log(`Today is ${dayName}`); In this example, JavaScript sees that `dayNumber` is `2`, finds the matching `case 2`, sets `dayName` to "Tuesday", and then breaks out of the switch. The result? "Today is Tuesday" gets logged to the console. +```mermaid +flowchart TD + A["📥 switch(expression)"] --> B["🔍 Evaluate once"] + B --> C{"Match case 1?"} + C -->|Yes| D["📋 Execute case 1"] + C -->|No| E{"Match case 2?"} + E -->|Yes| F["📋 Execute case 2"] + E -->|No| G{"Match case 3?"} + G -->|Yes| H["📋 Execute case 3"] + G -->|No| I["📋 Execute default"] + + D --> J["🛑 break"] + F --> K["🛑 break"] + H --> L["🛑 break"] + + J --> M["✅ Exit switch"] + K --> M + L --> M + I --> M + + style A fill:#e3f2fd + style B fill:#fff3e0 + style M fill:#e8f5e8 +``` + ✅ Test your understanding of this code and the following code by running it in a browser console. Change the values of the variable a to change the returned `console.log()`. +### 🔄 **Switch Statement Mastery: Multiple Options** + +**Test your switch understanding:** +- What happens if you forget a `break` statement? +- When would you use `switch` instead of multiple `if-else` statements? +- Why is the `default` case useful even if you think you've covered all possibilities? + +```mermaid +pie title "When to Use Each Decision Structure" + "Simple if-else" : 40 + "Complex if-else chains" : 25 + "Switch statements" : 20 + "Ternary operators" : 15 +``` + +> **Best practice**: Use `switch` when comparing one variable against multiple specific values. Use `if-else` for range checks or complex conditions! + ## Logical Operators and Booleans Complex decisions often require evaluating multiple conditions simultaneously. Just as Boolean algebra allows mathematicians to combine logical expressions, programming provides logical operators to connect multiple Boolean conditions. @@ -176,6 +370,35 @@ These operators let you combine conditions in useful ways: - OR (`||`) means at least one condition must be true - NOT (`!`) flips true to false (and vice versa) +```mermaid +flowchart LR + A["🔗 Logical Operators"] --> B["&& AND"] + A --> C["|| OR"] + A --> D["! NOT"] + + B --> B1["Both must be true"] + B --> B2["true && true = true"] + B --> B3["true && false = false"] + + C --> C1["At least one true"] + C --> C2["true || false = true"] + C --> C3["false || false = false"] + + D --> D1["Flips the value"] + D --> D2["!true = false"] + D --> D3["!false = true"] + + E["🌍 Real Examples"] --> E1["Age >= 18 && hasLicense"] + E --> E2["isWeekend || isHoliday"] + E --> E3["!isLoggedIn"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` + ## Conditions and Decisions with Logical Operators Let's see these logical operators in action with a more realistic example: @@ -196,6 +419,35 @@ if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) { In this example: we calculate a 20% discount price (640), then evaluate whether our available funds cover either the full price OR the discounted price. Since 600 meets the discounted price threshold of 640, the condition evaluates to true. +### 🧮 **Logical Operators Check: Combining Conditions** + +**Test your logical operator understanding:** +- In the expression `A && B`, what happens if A is false? Does B even get evaluated? +- Can you think of a situation where you'd need all three operators (&&, ||, !) together? +- What's the difference between `!user.isActive` and `user.isActive !== true`? + +```mermaid +stateDiagram-v2 + [*] --> EvaluateA: A && B + EvaluateA --> CheckB: A is true + EvaluateA --> ReturnFalse: A is false + CheckB --> ReturnTrue: B is true + CheckB --> ReturnFalse: B is false + + [*] --> EvaluateC: A || B + EvaluateC --> ReturnTrue: A is true + EvaluateC --> CheckD: A is false + CheckD --> ReturnTrue: B is true + CheckD --> ReturnFalse: B is false + + note right of EvaluateA + Short-circuit evaluation: + If A is false, B is never checked + end note +``` + +> **Performance tip**: JavaScript uses "short-circuit evaluation" - in `A && B`, if A is false, B isn't even evaluated. Use this to your advantage! + ### Negation Operator Sometimes it's easier to think about when something is NOT true. Like instead of asking "Is the user logged in?", you might want to ask "Is the user NOT logged in?" The exclamation mark (`!`) operator flips the logic for you. @@ -245,6 +497,28 @@ if (firstNumber > secondNumber) { Both approaches produce identical results. The ternary operator offers conciseness, while the traditional if-else structure may be more readable for complex conditions. +```mermaid +flowchart LR + A["🤔 Ternary Operator"] --> B["condition ?"] + B --> C["valueIfTrue :"] + C --> D["valueIfFalse"] + + E["📝 Traditional If-Else"] --> F["if (condition) {"] + F --> G[" return valueIfTrue"] + G --> H["} else {"] + H --> I[" return valueIfFalse"] + I --> J["}"] + + K["⚡ When to Use"] --> K1["Simple assignments"] + K --> K2["Short conditions"] + K --> K3["Inline decisions"] + K --> K4["Return statements"] + + style A fill:#e3f2fd + style E fill:#fff3e0 + style K fill:#e8f5e8 +``` + --- @@ -293,3 +567,103 @@ Go through Josh Comeau's wonderful [operator lookup](https://joshwcomeau.com/ope ## Assignment [Operators](assignment.md) + +--- + +## 🧠 **Your Decision-Making Toolkit Summary** + +```mermaid +graph TD + A["🎯 JavaScript Decisions"] --> B["🔍 Boolean Logic"] + A --> C["📊 Conditional Statements"] + A --> D["🔗 Logical Operators"] + A --> E["⚡ Advanced Patterns"] + + B --> B1["true/false values"] + B --> B2["Comparison operators"] + B --> B3["Truthiness concepts"] + + C --> C1["if statements"] + C --> C2["if-else chains"] + C --> C3["switch statements"] + + D --> D1["&& (AND)"] + D --> D2["|| (OR)"] + D --> D3["! (NOT)"] + + E --> E1["Ternary operator"] + E --> E2["Short-circuit evaluation"] + E --> E3["Complex conditions"] + + F["💡 Key Principles"] --> F1["Clear readable conditions"] + F --> F2["Consistent comparison style"] + F --> F3["Proper operator precedence"] + F --> F4["Efficient evaluation order"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` + +--- + +## 🚀 Your JavaScript Decision-Making Mastery Timeline + +### ⚡ **What You Can Do in the Next 5 Minutes** +- [ ] Practice comparison operators in your browser console +- [ ] Write a simple if-else statement that checks your age +- [ ] Try the challenge: rewrite an if-else using a ternary operator +- [ ] Test what happens with different "truthy" and "falsy" values + +### 🎯 **What You Can Accomplish This Hour** +- [ ] Complete the post-lesson quiz and review any confusing concepts +- [ ] Build the comprehensive grade calculator from the GitHub Copilot challenge +- [ ] Create a simple decision tree for a real-world scenario (like choosing what to wear) +- [ ] Practice combining multiple conditions with logical operators +- [ ] Experiment with switch statements for different use cases + +### 📅 **Your Week-Long Logic Mastery** +- [ ] Complete the operators assignment with creative examples +- [ ] Build a mini quiz application using various conditional structures +- [ ] Create a form validator that checks multiple input conditions +- [ ] Practice Josh Comeau's [operator lookup](https://joshwcomeau.com/operator-lookup/) exercises +- [ ] Refactor existing code to use more appropriate conditional structures +- [ ] Study short-circuit evaluation and performance implications + +### 🌟 **Your Month-Long Transformation** +- [ ] Master complex nested conditions and maintain code readability +- [ ] Build an application with sophisticated decision-making logic +- [ ] Contribute to open source by improving conditional logic in existing projects +- [ ] Teach someone else about different conditional structures and when to use each +- [ ] Explore functional programming approaches to conditional logic +- [ ] Create a personal reference guide for conditional best practices + +### 🏆 **Final Decision-Making Champion Check-in** + +**Celebrate your logical thinking mastery:** +- What's the most complex decision logic you've successfully implemented? +- Which conditional structure feels most natural to you and why? +- How has learning about logical operators changed your problem-solving approach? +- What real-world application would benefit from sophisticated decision-making logic? + +```mermaid +journey + title Your Logical Thinking Evolution + section Today + Boolean Confusion: 3: You + If-Else Understanding: 4: You + Operator Recognition: 5: You + section This Week + Complex Conditions: 4: You + Switch Mastery: 5: You + Logical Combinations: 5: You + section Next Month + Advanced Patterns: 5: You + Performance Awareness: 5: You + Teaching Others: 5: You +``` + +> 🧠 **You've mastered the art of digital decision-making!** Every interactive application relies on conditional logic to respond intelligently to user actions and changing conditions. You now understand how to make your programs think, evaluate, and choose appropriate responses. This logical foundation will power every dynamic application you build! 🎉 diff --git a/2-js-basics/4-arrays-loops/README.md b/2-js-basics/4-arrays-loops/README.md index 9330e048..55592bbf 100644 --- a/2-js-basics/4-arrays-loops/README.md +++ b/2-js-basics/4-arrays-loops/README.md @@ -3,6 +3,23 @@ ![JavaScript Basics - Arrays](../../sketchnotes/webdev101-js-arrays.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) +```mermaid +journey + title Your Arrays & Loops Adventure + section Array Fundamentals + Creating Arrays: 5: You + Accessing Elements: 4: You + Array Methods: 5: You + section Loop Mastery + For Loops: 4: You + While Loops: 5: You + Modern Syntax: 4: You + section Data Processing + Array + Loops: 5: You + Real-world Applications: 4: You + Performance Optimization: 5: You +``` + ## Pre-Lecture Quiz [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/13) @@ -20,6 +37,46 @@ By the end of this lesson, you'll understand how to accomplish complex data task > You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)! +```mermaid +mindmap + root((Data Processing)) + Arrays + Structure + [ ] square brackets + Zero-based indexing + Dynamic sizing + Operations + push/pop + shift/unshift + indexOf/includes + Types + Numbers [1,2,3] + Strings ["a","b"] + Mixed [1,"a",true] + Loops + For Loops + Counting iterations + Array processing + Predictable flow + While Loops + Condition-based + Unknown iterations + User input + Modern Syntax + for...of + forEach + Functional methods + Applications + Data Analysis + Statistics + Filtering + Transformations + User Interfaces + Lists + Menus + Galleries +``` + ## Arrays Think of arrays as a digital filing cabinet - instead of storing one document per drawer, you can organize multiple related items in a single, structured container. In programming terms, arrays let you store multiple pieces of information in one organized package. @@ -58,6 +115,36 @@ const scores = [95, 87, 92, 78, 85]; - Just separate each item with a comma - easy! - Arrays are perfect for keeping related information together +```mermaid +flowchart LR + A["📦 Arrays"] --> B["Create [ ]"] + A --> C["Store Multiple Items"] + A --> D["Access by Index"] + + B --> B1["const arr = []"] + B --> B2["const arr = [1,2,3]"] + + C --> C1["Numbers"] + C --> C2["Strings"] + C --> C3["Booleans"] + C --> C4["Mixed Types"] + + D --> D1["arr[0] = first"] + D --> D2["arr[1] = second"] + D --> D3["arr[2] = third"] + + E["📊 Array Index"] --> E1["Index 0: First"] + E --> E2["Index 1: Second"] + E --> E3["Index 2: Third"] + E --> E4["Index n-1: Last"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` + ### Array Indexing Here's something that might seem unusual at first: arrays number their items starting from 0, not 1. This zero-based indexing has its roots in how computer memory works - it's been a programming convention since the early days of computing languages like C. Each spot in the array gets its own address number called an **index**. @@ -151,6 +238,37 @@ const hasApple = fruits.includes("apple"); // Returns true ✅ Try it yourself! Use your browser's console to create and manipulate an array of your own creation. +### 🧠 **Array Fundamentals Check: Organizing Your Data** + +**Test your array understanding:** +- Why do you think arrays start counting from 0 instead of 1? +- What happens if you try to access an index that doesn't exist (like `arr[100]` in a 5-element array)? +- Can you think of three real-world scenarios where arrays would be useful? + +```mermaid +stateDiagram-v2 + [*] --> EmptyArray: const arr = [] + EmptyArray --> WithItems: Add elements + WithItems --> Accessing: Use indexes + Accessing --> Modifying: Change values + Modifying --> Processing: Use methods + + WithItems --> WithItems: push(), unshift() + Processing --> Processing: pop(), shift() + + note right of Accessing + Zero-based indexing + arr[0] = first element + end note + + note right of Processing + Built-in methods + Dynamic operations + end note +``` + +> **Real-world insight**: Arrays are everywhere in programming! Social media feeds, shopping carts, photo galleries, playlist songs - they're all arrays behind the scenes! + ## Loops Think of the famous punishment from Charles Dickens' novels where students had to write lines repeatedly on a slate. Imagine if you could simply instruct someone to "write this sentence 100 times" and have it done automatically. That's exactly what loops do for your code. @@ -159,6 +277,42 @@ Loops are like having a tireless assistant who can repeat tasks without error. W JavaScript provides several types of loops to choose from. Let's examine each one and understand when to use them. +```mermaid +flowchart TD + A["🔄 Loop Types"] --> B["For Loop"] + A --> C["While Loop"] + A --> D["For...of Loop"] + A --> E["forEach Method"] + + B --> B1["Known iterations"] + B --> B2["Counter-based"] + B --> B3["for(init; condition; increment)"] + + C --> C1["Unknown iterations"] + C --> C2["Condition-based"] + C --> C3["while(condition)"] + + D --> D1["Modern ES6+"] + D --> D2["Array iteration"] + D --> D3["for(item of array)"] + + E --> E1["Functional style"] + E --> E2["Array method"] + E --> E3["array.forEach(callback)"] + + F["⏰ When to Use"] --> F1["For: Counting, indexes"] + F --> F2["While: User input, searching"] + F --> F3["For...of: Simple iteration"] + F --> F4["forEach: Functional programming"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` + ### For Loop The `for` loop is like setting a timer - you know exactly how many times you want something to happen. It's super organized and predictable, which makes it perfect when you're working with arrays or need to count things. @@ -193,6 +347,33 @@ for (let i = 0; i < testScores.length; i++) { ✅ Run this code in a browser console. What happens when you make small changes to the counter, condition, or iteration expression? Can you make it run backwards, creating a countdown? +### 🗓️ **For Loop Mastery Check: Controlled Repetition** + +**Evaluate your for loop understanding:** +- What are the three parts of a for loop, and what does each one do? +- How would you loop through an array backwards? +- What happens if you forget the increment part (`i++`)? + +```mermaid +flowchart TD + A["🚀 Start For Loop"] --> B["Initialize: let i = 0"] + B --> C{"Condition: i < array.length?"} + C -->|true| D["Execute code block"] + D --> E["Increment: i++"] + E --> C + C -->|false| F["✅ Exit loop"] + + G["📋 Common Patterns"] --> G1["for(let i=0; i G2["for(let i=n-1; i>=0; i--)"] + G --> G3["for(let i=0; i **Loop wisdom**: For loops are perfect when you know exactly how many times you need to repeat something. They're the most common choice for array processing! + ### While Loop The `while` loop is like saying "keep doing this until..." - you might not know exactly how many times it'll run, but you know when to stop. It's perfect for things like asking a user for input until they give you what you need, or searching through data until you find what you're looking for. @@ -232,6 +413,40 @@ if (attempts >= maxAttempts) { - **Demonstrates** practical use case with user input and attempt limiting - **Includes** safety mechanisms to prevent endless execution +### ♾️ **While Loop Wisdom Check: Condition-Based Repetition** + +**Test your while loop comprehension:** +- What's the main danger when using while loops? +- When would you choose a while loop over a for loop? +- How can you prevent infinite loops? + +```mermaid +flowchart LR + A["🔄 While vs For"] --> B["While Loop"] + A --> C["For Loop"] + + B --> B1["Unknown iterations"] + B --> B2["Condition-driven"] + B --> B3["User input, searching"] + B --> B4["⚠️ Risk: infinite loops"] + + C --> C1["Known iterations"] + C --> C2["Counter-driven"] + C --> C3["Array processing"] + C --> C4["✅ Safe: predictable end"] + + D["🛡️ Safety Tips"] --> D1["Always modify condition variable"] + D --> D2["Include escape conditions"] + D --> D3["Set maximum iteration limits"] + + style A fill:#e3f2fd + style B fill:#fff3e0 + style C fill:#e8f5e8 + style D fill:#ffebee +``` + +> **Safety first**: While loops are powerful but require careful condition management. Always ensure your loop condition will eventually become false! + ### Modern Loop Alternatives JavaScript offers modern loop syntax that can make your code more readable and less error-prone. @@ -279,6 +494,32 @@ prices.forEach(price => console.log(`Price: $${price}`)); ✅ Why would you choose a for loop vs. a while loop? 17K viewers had the same question on StackOverflow, and some of the opinions [might be interesting to you](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript). +### 🎨 **Modern Loop Syntax Check: Embracing ES6+** + +**Assess your modern JavaScript understanding:** +- What are the advantages of `for...of` over traditional for loops? +- When might you still prefer traditional for loops? +- What's the difference between `forEach` and `map`? + +```mermaid +quadrantChart + title Loop Selection Guide + x-axis Traditional --> Modern + y-axis Simple --> Complex + quadrant-1 Modern Complex + quadrant-2 Traditional Complex + quadrant-3 Traditional Simple + quadrant-4 Modern Simple + + Traditional For: [0.2, 0.7] + While Loop: [0.3, 0.6] + For...of: [0.8, 0.3] + forEach: [0.9, 0.4] + Array Methods: [0.8, 0.8] +``` + +> **Modern trend**: ES6+ syntax like `for...of` and `forEach` is becoming the preferred approach for array iteration because it's cleaner and less error-prone! + ## Loops and Arrays Combining arrays with loops creates powerful data processing capabilities. This pairing is fundamental to many programming tasks, from displaying lists to calculating statistics. @@ -342,6 +583,34 @@ console.log(`Lowest: ${lowestGrade}`); ✅ Experiment with looping over an array of your own making in your browser's console. +```mermaid +flowchart TD + A["📦 Array Data"] --> B["🔄 Loop Processing"] + B --> C["📈 Results"] + + A1["[85, 92, 78, 96, 88]"] --> A + + B --> B1["Calculate total"] + B --> B2["Find min/max"] + B --> B3["Count conditions"] + B --> B4["Transform data"] + + C --> C1["Average: 87.8"] + C --> C2["Highest: 96"] + C --> C3["Passing: 5/5"] + C --> C4["Letter grades"] + + D["⚡ Processing Patterns"] --> D1["Accumulation (sum)"] + D --> D2["Comparison (min/max)"] + D --> D3["Filtering (conditions)"] + D --> D4["Mapping (transformation)"] + + style A fill:#e3f2fd + style B fill:#fff3e0 + style C fill:#e8f5e8 + style D fill:#f3e5f5 +``` + --- ## GitHub Copilot Agent Challenge 🚀 @@ -371,3 +640,107 @@ Arrays in JavaScript have many methods attached to them, that are extremely usef ## Assignment [Loop an Array](assignment.md) + +--- + +## 📊 **Your Arrays & Loops Toolkit Summary** + +```mermaid +graph TD + A["🎯 Arrays & Loops Mastery"] --> B["📦 Array Fundamentals"] + A --> C["🔄 Loop Types"] + A --> D["🔗 Data Processing"] + A --> E["🎨 Modern Techniques"] + + B --> B1["Creation: [ ]"] + B --> B2["Indexing: arr[0]"] + B --> B3["Methods: push, pop"] + B --> B4["Properties: length"] + + C --> C1["For: Known iterations"] + C --> C2["While: Condition-based"] + C --> C3["For...of: Direct access"] + C --> C4["forEach: Functional"] + + D --> D1["Statistics calculation"] + D --> D2["Data transformation"] + D --> D3["Filtering & searching"] + D --> D4["Real-time processing"] + + E --> E1["Arrow functions"] + E --> E2["Method chaining"] + E --> E3["Destructuring"] + E --> E4["Template literals"] + + F["💡 Key Benefits"] --> F1["Efficient data handling"] + F --> F2["Reduced code repetition"] + F --> F3["Scalable solutions"] + F --> F4["Cleaner syntax"] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 + style F fill:#fce4ec +``` + +--- + +## 🚀 Your Arrays & Loops Mastery Timeline + +### ⚡ **What You Can Do in the Next 5 Minutes** +- [ ] Create an array of your favorite movies and access specific elements +- [ ] Write a for loop that counts from 1 to 10 +- [ ] Try the modern array methods challenge from the lesson +- [ ] Practice array indexing in your browser console + +### 🎯 **What You Can Accomplish This Hour** +- [ ] Complete the post-lesson quiz and review any challenging concepts +- [ ] Build the comprehensive grade analyzer from the GitHub Copilot challenge +- [ ] Create a simple shopping cart that adds and removes items +- [ ] Practice converting between different loop types +- [ ] Experiment with array methods like `push`, `pop`, `slice`, and `splice` + +### 📅 **Your Week-Long Data Processing Journey** +- [ ] Complete the "Loop an Array" assignment with creative enhancements +- [ ] Build a to-do list application using arrays and loops +- [ ] Create a simple statistics calculator for numerical data +- [ ] Practice with [MDN array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) +- [ ] Build a photo gallery or music playlist interface +- [ ] Explore functional programming with `map`, `filter`, and `reduce` + +### 🌟 **Your Month-Long Transformation** +- [ ] Master advanced array operations and performance optimization +- [ ] Build a complete data visualization dashboard +- [ ] Contribute to open source projects involving data processing +- [ ] Teach someone else about arrays and loops with practical examples +- [ ] Create a personal library of reusable data processing functions +- [ ] Explore algorithms and data structures built on arrays + +### 🏆 **Final Data Processing Champion Check-in** + +**Celebrate your array and loop mastery:** +- What's the most useful array operation you've learned for real-world applications? +- Which loop type feels most natural to you and why? +- How has understanding arrays and loops changed your approach to organizing data? +- What complex data processing task would you like to tackle next? + +```mermaid +journey + title Your Data Processing Evolution + section Today + Array Confusion: 3: You + Loop Basics: 4: You + Index Understanding: 5: You + section This Week + Method Mastery: 4: You + Efficient Processing: 5: You + Modern Syntax: 5: You + section Next Month + Complex Algorithms: 5: You + Performance Optimization: 5: You + Teaching Others: 5: You +``` + +> 📦 **You've unlocked the power of data organization and processing!** Arrays and loops are the foundation of almost every application you'll ever build. From simple lists to complex data analysis, you now have the tools to handle information efficiently and elegantly. Every dynamic website, mobile app, and data-driven application relies on these fundamental concepts. Welcome to the world of scalable data processing! 🎉 diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md index f032795c..11bf54fb 100644 --- a/3-terrarium/1-intro-to-html/README.md +++ b/3-terrarium/1-intro-to-html/README.md @@ -1,5 +1,22 @@ # Terrarium Project Part 1: Introduction to HTML +```mermaid +journey + title Your HTML Learning Journey + section Foundation + Create HTML file: 3: Student + Add DOCTYPE: 4: Student + Structure document: 5: Student + section Content + Add metadata: 4: Student + Include images: 5: Student + Organize layout: 5: Student + section Semantics + Use proper tags: 4: Student + Enhance accessibility: 5: Student + Build terrarium: 5: Student +``` + ![Introduction to HTML](../../sketchnotes/webdev101-html.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) @@ -9,6 +26,36 @@ In this lesson, you'll create the HTML structure for a virtual terrarium interfa By the end of this lesson, you'll have a working HTML page displaying plant images in organized columns, ready for styling in the next lesson. Don't worry if it looks basic at first – that's exactly what HTML should do before CSS adds the visual polish. +```mermaid +mindmap + root((HTML Fundamentals)) + Structure + DOCTYPE Declaration + HTML Element + Head Section + Body Content + Elements + Tags & Attributes + Self-closing Tags + Nested Elements + Block vs Inline + Content + Text Elements + Images + Containers (div) + Lists + Semantics + Meaningful Tags + Accessibility + Screen Readers + SEO Benefits + Best Practices + Proper Nesting + Valid Markup + Descriptive Alt Text + Organized Structure +``` + ## Pre-Lecture Quiz [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/15) @@ -54,6 +101,24 @@ code index.html Every HTML document follows a specific structure that browsers need to understand and display correctly. Think of this structure like a formal letter – it has required elements in a particular order that help the recipient (in this case, the browser) process the content properly. +```mermaid +flowchart TD + A[""] --> B[""] + B --> C[""] + C --> D[""] + C --> E["<meta charset>"] + C --> F["<meta viewport>"] + B --> G["<body>"] + G --> H["<h1> Heading"] + G --> I["<div> Containers"] + G --> J["<img> Images"] + + style A fill:#e1f5fe + style B fill:#f3e5f5 + style C fill:#fff3e0 + style G fill:#e8f5e8 +``` + Let's start by adding the essential foundation that every HTML document needs. ### The DOCTYPE Declaration and Root Element @@ -75,6 +140,14 @@ The first two lines of any HTML file serve as the document's "introduction" to t > 📚 **Learn More**: The DOCTYPE declaration prevents browsers from entering "quirks mode," which was used to support very old websites. Modern web development uses the simple `<!DOCTYPE html>` declaration to ensure [standards-compliant rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). +### 🔄 **Pedagogical Check-in** +**Pause and Reflect**: Before continuing, make sure you understand: +- ✅ Why every HTML document needs a DOCTYPE declaration +- ✅ What the `<html>` root element contains +- ✅ How this structure helps browsers render pages correctly + +**Quick Self-Test**: Can you explain in your own words what "standards-compliant rendering" means? + ## Adding Essential Document Metadata The `<head>` section of an HTML document contains crucial information that browsers and search engines need, but that visitors don't see directly on the page. Think of it as the "behind-the-scenes" information that helps your webpage work properly and appear correctly across different devices and platforms. @@ -217,12 +290,56 @@ Now add the plant images organized in two columns between your `<body></body>` t > 📝 **HTML Element Types**: `<div>` elements are "block-level" and take up full width, while `<span>` elements are "inline" and only take up necessary width. What do you think would happen if you changed all these `<div>` tags to `<span>` tags? +### 🔄 **Pedagogical Check-in** +**Structure Understanding**: Take a moment to review your HTML structure: +- ✅ Can you identify the main containers in your layout? +- ✅ Do you understand why each image has a unique ID? +- ✅ How would you describe the purpose of the `plant-holder` divs? + +**Visual Inspection**: Open your HTML file in a browser. You should see: +- A basic list of plant images +- Images organized in two columns +- Simple, unstyled layout + +**Remember**: This plain appearance is exactly what HTML should look like before CSS styling! + With this markup added, the plants will appear on screen, though they won't look polished yet – that's what CSS is for in the next lesson! For now, you have a solid HTML foundation that properly organizes your content and follows accessibility best practices. ## Using Semantic HTML for Accessibility Semantic HTML means choosing HTML elements based on their meaning and purpose, not just their appearance. When you use semantic markup, you're communicating the structure and meaning of your content to browsers, search engines, and assistive technologies like screen readers. +```mermaid +flowchart TD + A[Need to add content?] --> B{What type?} + B -->|Main heading| C["<h1>"] + B -->|Subheading| D["<h2>, <h3>, etc."] + B -->|Paragraph| E["<p>"] + B -->|List| F["<ul>, <ol>"] + B -->|Navigation| G["<nav>"] + B -->|Article| H["<article>"] + B -->|Section| I["<section>"] + B -->|Generic container| J["<div>"] + + C --> K[Screen readers announce as main title] + D --> L[Creates proper heading hierarchy] + E --> M[Provides proper text spacing] + F --> N[Enables list navigation shortcuts] + G --> O[Identifies navigation landmarks] + H --> P[Marks standalone content] + I --> Q[Groups related content] + J --> R[Use only when no semantic tag fits] + + style C fill:#4caf50 + style D fill:#4caf50 + style E fill:#4caf50 + style F fill:#4caf50 + style G fill:#2196f3 + style H fill:#2196f3 + style I fill:#2196f3 + style J fill:#ff9800 +``` + This approach makes your websites more accessible to users with disabilities and helps search engines better understand your content. It's a fundamental principle of modern web development that creates better experiences for everyone. ### Adding a Semantic Page Title @@ -282,6 +399,41 @@ Insert this markup above the last `</div>` tag (before the closing tag of the pa > 🤔 **Notice Something?**: Even though you added this markup, you don't see anything new on the page! This perfectly illustrates how HTML provides structure while CSS provides appearance. These `<div>` elements exist but have no visual styling yet – that's coming in the next lesson! +```mermaid +gitgraph + commit id: "HTML Document" + branch head + checkout head + commit id: "<title>" + commit id: "<meta charset>" + commit id: "<meta viewport>" + checkout main + branch body + checkout body + commit id: "<h1>My Terrarium</h1>" + branch containers + checkout containers + commit id: "<div id='page'>" + commit id: "Left Container (7 plants)" + commit id: "Right Container (7 plants)" + commit id: "Terrarium Structure" + checkout body + merge containers + checkout main + merge head + merge body + commit id: "Complete HTML Page" +``` + +### 🔄 **Pedagogical Check-in** +**HTML Structure Mastery**: Before moving forward, ensure you can: +- ✅ Explain the difference between HTML structure and visual appearance +- ✅ Identify semantic vs. non-semantic HTML elements +- ✅ Describe how proper markup benefits accessibility +- ✅ Recognize the complete document tree structure + +**Testing Your Understanding**: Try opening your HTML file in a browser with JavaScript disabled and CSS removed. This shows you the pure semantic structure you've created! + --- ## GitHub Copilot Agent Challenge @@ -346,6 +498,66 @@ HTML has been the foundation of the web for over 30 years, evolving from a simpl - What new HTML features are being proposed for future versions? - How does semantic HTML contribute to web accessibility and SEO? +## 🎯 Your HTML Mastery Timeline + +```mermaid +timeline + title HTML Learning Progression + + section Foundation (5 minutes) + Document Structure: DOCTYPE declaration + : HTML root element + : Head vs Body understanding + + section Metadata (10 minutes) + Essential Meta Tags: Character encoding + : Viewport configuration + : Browser compatibility + + section Content Creation (15 minutes) + Image Integration: Proper file paths + : Alt text importance + : Self-closing tags + + section Layout Organization (20 minutes) + Container Strategy: Div elements for structure + : Class and ID naming + : Nested element hierarchy + + section Semantic Mastery (30 minutes) + Meaningful Markup: Heading hierarchy + : Screen reader navigation + : Accessibility best practices + + section Advanced Concepts (1 hour) + HTML5 Features: Modern semantic elements + : ARIA attributes + : Performance considerations + + section Professional Skills (1 week) + Code Organization: File structure patterns + : Maintainable markup + : Team collaboration + + section Expert Level (1 month) + Modern Web Standards: Progressive enhancement + : Cross-browser compatibility + : HTML specification updates +``` + +### 🛠️ Your HTML Toolkit Summary + +After completing this lesson, you now have: +- **Document Structure**: Complete HTML5 foundation with proper DOCTYPE +- **Semantic Markup**: Meaningful tags that enhance accessibility and SEO +- **Image Integration**: Proper file organization and alt text practices +- **Layout Containers**: Strategic use of divs with descriptive class names +- **Accessibility Awareness**: Understanding of screen reader navigation +- **Modern Standards**: Current HTML5 practices and deprecated tag knowledge +- **Project Foundation**: Solid base for CSS styling and JavaScript interactivity + +**Next Steps**: Your HTML structure is ready for CSS styling! The semantic foundation you've built will make the next lesson much easier to understand. + ## Assignment diff --git a/3-terrarium/2-intro-to-css/README.md b/3-terrarium/2-intro-to-css/README.md index 74776dcc..a2d3c337 100644 --- a/3-terrarium/2-intro-to-css/README.md +++ b/3-terrarium/2-intro-to-css/README.md @@ -1,5 +1,26 @@ # Terrarium Project Part 2: Introduction to CSS +```mermaid +journey + title Your CSS Styling Journey + section Foundation + Link CSS file: 3: Student + Understand cascade: 4: Student + Learn inheritance: 4: Student + section Selectors + Element targeting: 4: Student + Class patterns: 5: Student + ID specificity: 5: Student + section Layout + Position elements: 4: Student + Create containers: 5: Student + Build terrarium: 5: Student + section Polish + Add visual effects: 5: Student + Responsive design: 5: Student + Glass reflections: 5: Student +``` + ![Introduction to CSS](../../sketchnotes/webdev101-css.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) @@ -11,6 +32,41 @@ Today, we'll transform your terrarium from functional to polished. You'll learn By the end of this lesson, you'll see how strategic CSS styling can dramatically improve your project. Let's add some style to your terrarium. +```mermaid +mindmap + root((CSS Fundamentals)) + Cascade + Specificity Rules + Inheritance + Priority Order + Conflict Resolution + Selectors + Element Tags + Classes (.class) + IDs (#id) + Combinators + Box Model + Margin + Border + Padding + Content + Layout + Positioning + Display Types + Flexbox + Grid + Visual Effects + Colors + Shadows + Transitions + Animations + Responsive Design + Media Queries + Flexible Units + Viewport Meta + Mobile First +``` + ## Pre-Lecture Quiz [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/17) @@ -87,6 +143,28 @@ h1 { ✅ **Knowledge Check**: Which color displays in your web app? Why does that color win? Can you think of scenarios where you might want to override styles? +```mermaid +flowchart TD + A["Browser encounters h1 element"] --> B{"Check for inline styles"} + B -->|Found| C["style='color: red'"] + B -->|None| D{"Check for ID rules"} + C --> E["Apply red color (1000 points)"] + D -->|Found| F["#heading { color: green }"] + D -->|None| G{"Check for class rules"} + F --> H["Apply green color (100 points)"] + G -->|Found| I[".title { color: blue }"] + G -->|None| J{"Check element rules"} + I --> K["Apply blue color (10 points)"] + J -->|Found| L["h1 { color: purple }"] + J -->|None| M["Use browser default"] + L --> N["Apply purple color (1 point)"] + + style C fill:#ff6b6b + style F fill:#51cf66 + style I fill:#339af0 + style L fill:#9775fa +``` + > 💡 **CSS Priority Order (highest to lowest):** > 1. **Inline styles** (style attribute) > 2. **IDs** (#myId) @@ -126,6 +204,21 @@ Open your browser's developer tools (F12), navigate to the Elements tab, and ins > > **Non-Inheritable Properties Include**: `margin`, `padding`, `border`, `width`, `height`, `position` +### 🔄 **Pedagogical Check-in** +**CSS Foundation Understanding**: Before moving to selectors, ensure you can: +- ✅ Explain the difference between cascade and inheritance +- ✅ Predict which style will win in a specificity conflict +- ✅ Identify which properties inherit from parent elements +- ✅ Connect CSS files to HTML properly + +**Quick Test**: If you have these styles, what color will an `<h1>` inside a `<div class="special">` be? +```css +div { color: blue; } +.special { color: green; } +h1 { color: red; } +``` +*Answer: Red (element selector directly targets h1)* + ## Mastering CSS Selectors CSS selectors are your way of targeting specific elements for styling. They work like giving precise directions - instead of saying "the house," you might say "the blue house with the red door on Maple Street." @@ -285,6 +378,23 @@ Once you understand positioning, many layout challenges become manageable. Need ### The Five Position Values +```mermaid +quadrantChart + title CSS Positioning Strategy + x-axis Document Flow --> Removed from Flow + y-axis Static Position --> Precise Control + quadrant-1 Absolute + quadrant-2 Fixed + quadrant-3 Static + quadrant-4 Sticky + + Static: [0.2, 0.2] + Relative: [0.3, 0.6] + Absolute: [0.8, 0.8] + Fixed: [0.9, 0.7] + Sticky: [0.5, 0.9] +``` + | Position Value | Behavior | Use Case | |----------------|----------|----------| | `static` | Default flow, ignores top/left/right/bottom | Normal document layout | @@ -330,12 +440,46 @@ Our terrarium uses a strategic combination of positioning types to create the de - How does the layout change if `.plant-holder` uses `absolute` instead of `relative`? - What occurs when you switch `.plant` to `relative` positioning? +### 🔄 **Pedagogical Check-in** +**CSS Positioning Mastery**: Pause to verify your understanding: +- ✅ Can you explain why plants need absolute positioning for drag-and-drop? +- ✅ Do you understand how relative containers create positioning context? +- ✅ Why do the side containers use absolute positioning? +- ✅ What would happen if you removed position declarations entirely? + +**Real-World Connection**: Think about how CSS positioning mirrors real-world layout: +- **Static**: Books on a shelf (natural order) +- **Relative**: Moving a book slightly but keeping its spot +- **Absolute**: Placing a bookmark at an exact page number +- **Fixed**: A sticky note that stays visible as you flip pages + ## Building the Terrarium with CSS Now we'll build a glass jar using only CSS - no images or graphics software required. Creating realistic-looking glass, shadows, and depth effects using positioning and transparency demonstrates CSS's visual capabilities. This technique mirrors how architects in the Bauhaus movement used simple geometric forms to create complex, beautiful structures. Once you understand these principles, you'll recognize the CSS techniques behind many web designs. +```mermaid +flowchart LR + A[Jar Top] --> E[Complete Terrarium] + B[Jar Walls] --> E + C[Dirt Layer] --> E + D[Jar Bottom] --> E + F[Glass Effects] --> E + + A1["50% width<br/>5% height<br/>Top position"] --> A + B1["60% width<br/>80% height<br/>Rounded corners<br/>0.5 opacity"] --> B + C1["60% width<br/>5% height<br/>Dark brown<br/>Bottom layer"] --> C + D1["50% width<br/>1% height<br/>Bottom position"] --> D + F1["Subtle shadows<br/>Transparency<br/>Z-index layering"] --> F + + style E fill:#d1e1df,stroke:#3a241d + style A fill:#e8f5e8 + style B fill:#e8f5e8 + style C fill:#8B4513 + style D fill:#e8f5e8 +``` + ### Creating the Glass Jar Components Let's build the terrarium jar piece by piece. Each part uses absolute positioning and percentage-based sizing for responsive design: @@ -416,6 +560,18 @@ We're using `rem` units for border-radius, which scale relative to the root font - Adjust the dirt color from `#3a241d` to `#8B4513` – what visual impact does this have? - Modify the `z-index` of the dirt to 2 – what happens to the layering? +### 🔄 **Pedagogical Check-in** +**CSS Visual Design Understanding**: Confirm your grasp of visual CSS: +- ✅ How do percentage-based dimensions create responsive design? +- ✅ Why does opacity create the glass transparency effect? +- ✅ What role does z-index play in layering elements? +- ✅ How do border-radius values create the jar shape? + +**Design Principle**: Notice how we're building complex visuals from simple shapes: +1. **Rectangles** → **Rounded rectangles** → **Jar components** +2. **Flat colors** → **Opacity** → **Glass effect** +3. **Individual elements** → **Layered composition** → **3D appearance** + --- ## GitHub Copilot Agent Challenge 🚀 @@ -468,6 +624,73 @@ Practice these concepts with these engaging, hands-on games: For comprehensive CSS fundamentals, complete this Microsoft Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) +## 🎯 Your CSS Mastery Timeline + +```mermaid +timeline + title CSS Learning Progression + + section Foundation (10 minutes) + File Connection: Link CSS to HTML + : Understand cascade rules + : Learn inheritance basics + + section Selectors (15 minutes) + Targeting Elements: Element selectors + : Class patterns + : ID specificity + : Combinators + + section Box Model (20 minutes) + Layout Fundamentals: Margin and padding + : Border properties + : Content sizing + : Box-sizing behavior + + section Positioning (25 minutes) + Element Placement: Static vs relative + : Absolute positioning + : Z-index layering + : Responsive units + + section Visual Design (30 minutes) + Styling Mastery: Colors and opacity + : Shadows and effects + : Transitions + : Transform properties + + section Responsive Design (45 minutes) + Multi-Device Support: Media queries + : Flexible layouts + : Mobile-first approach + : Viewport optimization + + section Advanced Techniques (1 week) + Modern CSS: Flexbox layouts + : CSS Grid systems + : Custom properties + : Animation keyframes + + section Professional Skills (1 month) + CSS Architecture: Component patterns + : Maintainable code + : Performance optimization + : Cross-browser compatibility +``` + +### 🛠️ Your CSS Toolkit Summary + +After completing this lesson, you now have: +- **Cascade Understanding**: How styles inherit and override each other +- **Selector Mastery**: Precise targeting with elements, classes, and IDs +- **Positioning Skills**: Strategic element placement and layering +- **Visual Design**: Creating glass effects, shadows, and transparency +- **Responsive Techniques**: Percentage-based layouts that adapt to any screen +- **Code Organization**: Clean, maintainable CSS structure +- **Modern Practices**: Using relative units and accessible design patterns + +**Next Steps**: Your terrarium now has both structure (HTML) and style (CSS). The final lesson will add interactivity with JavaScript! + ## Assignment [CSS Refactoring](assignment.md) diff --git a/3-terrarium/3-intro-to-DOM-and-closures/README.md b/3-terrarium/3-intro-to-DOM-and-closures/README.md index c92bcce3..a3142d97 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -1,5 +1,22 @@ # Terrarium Project Part 3: DOM Manipulation and JavaScript Closures +```mermaid +journey + title Your JavaScript DOM Journey + section Foundation + Understand DOM: 3: Student + Learn closures: 4: Student + Connect elements: 4: Student + section Interaction + Setup drag events: 4: Student + Track coordinates: 5: Student + Handle movement: 5: Student + section Polish + Add cleanup: 4: Student + Test functionality: 5: Student + Complete terrarium: 5: Student +``` + ![DOM and a closure](../../sketchnotes/webdev101-js.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) @@ -9,6 +26,36 @@ We'll also explore JavaScript closures, which might sound intimidating initially Here's what we're building: a terrarium where users can drag and drop plants anywhere they want. You'll learn the DOM manipulation techniques that power everything from drag-and-drop file uploads to interactive games. Let's make your terrarium come alive. +```mermaid +mindmap + root((DOM & JavaScript)) + DOM Tree + Element Selection + Property Access + Event Handling + Dynamic Updates + Events + Pointer Events + Mouse Events + Touch Events + Event Listeners + Closures + Private Variables + Function Scope + Memory Persistence + State Management + Drag & Drop + Position Tracking + Coordinate Math + Event Lifecycle + User Interaction + Modern Patterns + Event Delegation + Performance + Cross-Device + Accessibility +``` + ## Pre-Lecture Quiz [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/19) @@ -19,6 +66,36 @@ The Document Object Model (DOM) is how JavaScript communicates with your HTML el DOM manipulation transforms static pages into interactive websites. Every time you see a button change color on hover, content update without page refresh, or elements you can drag around, that's DOM manipulation at work. +```mermaid +flowchart TD + A["Document"] --> B["HTML"] + B --> C["Head"] + B --> D["Body"] + C --> E["Title"] + C --> F["Meta Tags"] + D --> G["H1: My Terrarium"] + D --> H["Div: Page Container"] + H --> I["Div: Left Container"] + H --> J["Div: Right Container"] + H --> K["Div: Terrarium"] + I --> L["Plant Elements 1-7"] + J --> M["Plant Elements 8-14"] + + L --> N["img#plant1"] + L --> O["img#plant2"] + M --> P["img#plant8"] + M --> Q["img#plant9"] + + style A fill:#e1f5fe + style B fill:#f3e5f5 + style D fill:#e8f5e8 + style H fill:#fff3e0 + style N fill:#ffebee + style O fill:#ffebee + style P fill:#ffebee + style Q fill:#ffebee +``` + ![DOM tree representation](./images/dom-tree.png) > A representation of the DOM and the HTML markup that references it. From [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -35,6 +112,33 @@ A [JavaScript closure](https://developer.mozilla.org/docs/Web/JavaScript/Closure In our terrarium, closures help each plant remember its own position independently. This pattern appears throughout professional JavaScript development, making it a valuable concept to understand. +```mermaid +flowchart LR + A["dragElement(plant1)"] --> B["Creates Closure"] + A2["dragElement(plant2)"] --> B2["Creates Closure"] + + B --> C["Private Variables"] + B2 --> C2["Private Variables"] + + C --> D["pos1, pos2, pos3, pos4"] + C --> E["pointerDrag function"] + C --> F["elementDrag function"] + C --> G["stopElementDrag function"] + + C2 --> D2["pos1, pos2, pos3, pos4"] + C2 --> E2["pointerDrag function"] + C2 --> F2["elementDrag function"] + C2 --> G2["stopElementDrag function"] + + H["Plant 1 remembers its position"] --> B + H2["Plant 2 remembers its position"] --> B2 + + style B fill:#e8f5e8 + style B2 fill:#e8f5e8 + style C fill:#fff3e0 + style C2 fill:#fff3e0 +``` + > 💡 **Understanding Closures**: Closures are a significant topic in JavaScript, and many developers use them for years before fully grasping all the theoretical aspects. Today, we're focusing on practical application - you'll see closures naturally emerge as we build our interactive features. Understanding will develop as you see how they solve real problems. ![DOM tree representation](./images/dom-tree.png) @@ -118,6 +222,16 @@ dragElement(document.getElementById('plant14')); > 💡 **Pro Tip**: Notice how we're calling `dragElement()` for each plant individually. This approach ensures that each plant gets its own independent dragging behavior, which is essential for smooth user interaction. +### 🔄 **Pedagogical Check-in** +**DOM Connection Understanding**: Before moving to drag functionality, verify you can: +- ✅ Explain how `document.getElementById()` locates HTML elements +- ✅ Understand why we use unique IDs for each plant +- ✅ Describe the purpose of the `defer` attribute in script tags +- ✅ Recognize how JavaScript and HTML connect through the DOM + +**Quick Self-Test**: What would happen if two elements had the same ID? Why does `getElementById()` return only one element? +*Answer: IDs should be unique; if duplicated, only the first element is returned* + --- ## Building the Drag Element Closure @@ -165,6 +279,34 @@ For our terrarium, each plant needs to remember its current position coordinates > 🎯 **Learning Goal**: You don't need to master every aspect of closures right now. Focus on seeing how they help us organize code and maintain state for our dragging functionality. +```mermaid +stateDiagram-v2 + [*] --> Ready: Page loads + Ready --> DragStart: User presses down (pointerdown) + DragStart --> Dragging: Mouse/finger moves (pointermove) + Dragging --> Dragging: Continue moving + Dragging --> DragEnd: User releases (pointerup) + DragEnd --> Ready: Reset for next drag + + state DragStart { + [*] --> CapturePosition + CapturePosition --> SetupListeners + SetupListeners --> [*] + } + + state Dragging { + [*] --> CalculateMovement + CalculateMovement --> UpdatePosition + UpdatePosition --> [*] + } + + state DragEnd { + [*] --> RemoveListeners + RemoveListeners --> CleanupState + CleanupState --> [*] + } +``` + ### Creating the dragElement Function Now let's build the main function that will handle all the dragging logic. Add this function below your plant element declarations: @@ -212,6 +354,19 @@ You might wonder why we use `onpointerdown` instead of the more familiar `onclic > 💡 **Future-Proofing**: Pointer events are the modern way to handle user interactions. Instead of writing separate code for mouse and touch, you get both for free. Pretty neat, right? +### 🔄 **Pedagogical Check-in** +**Event Handling Understanding**: Pause to confirm your grasp of events: +- ✅ Why do we use pointer events instead of mouse events? +- ✅ How do closure variables persist between function calls? +- ✅ What role does `preventDefault()` play in smooth dragging? +- ✅ Why do we attach listeners to the document instead of individual elements? + +**Real-World Connection**: Think about drag-and-drop interfaces you use daily: +- **File uploads**: Dragging files into a browser window +- **Kanban boards**: Moving tasks between columns +- **Image galleries**: Rearranging photo order +- **Mobile interfaces**: Swiping and dragging on touchscreens + --- ## The pointerDrag Function: Capturing the Start of a Drag @@ -315,6 +470,30 @@ function elementDrag(e) { - **`offsetTop` and `offsetLeft`**: Get the element's current position on the page - **Subtraction logic**: Moves the element by the same amount the mouse moved +```mermaid +sequenceDiagram + participant User + participant Mouse + participant JavaScript + participant Plant + + User->>Mouse: Start drag at (100, 50) + Mouse->>JavaScript: pointerdown event + JavaScript->>JavaScript: Store initial position (pos3=100, pos4=50) + JavaScript->>JavaScript: Setup move/up listeners + + User->>Mouse: Move to (110, 60) + Mouse->>JavaScript: pointermove event + JavaScript->>JavaScript: Calculate: pos1=10, pos2=10 + JavaScript->>Plant: Update: left += 10px, top += 10px + Plant->>Plant: Render at new position + + User->>Mouse: Release at (120, 65) + Mouse->>JavaScript: pointerup event + JavaScript->>JavaScript: Remove listeners + JavaScript->>JavaScript: Reset for next drag +``` + **Here's the movement calculation breakdown:** 1. **Measures** the difference between old and new mouse positions 2. **Calculates** how much to move the element based on mouse movement @@ -398,6 +577,19 @@ Now test your interactive terrarium! Open your `index.html` file in a web browse 🥇 **Achievement**: You've created a fully interactive web application using core concepts that professional developers use daily. That drag-and-drop functionality uses the same principles behind file uploads, kanban boards, and many other interactive interfaces. +### 🔄 **Pedagogical Check-in** +**Complete System Understanding**: Verify your mastery of the full drag system: +- ✅ How do closures maintain independent state for each plant? +- ✅ Why is the coordinate calculation math necessary for smooth movement? +- ✅ What would happen if we forgot to clean up event listeners? +- ✅ How does this pattern scale to more complex interactions? + +**Code Quality Reflection**: Review your complete solution: +- **Modular design**: Each plant gets its own closure instance +- **Event efficiency**: Proper setup and cleanup of listeners +- **Cross-device support**: Works on desktop and mobile +- **Performance conscious**: No memory leaks or redundant calculations + ![finished terrarium](./images/terrarium-final.png) --- @@ -471,6 +663,73 @@ We used pointer events for maximum flexibility, but web development offers multi > 🎯 **Learning Strategy**: The best way to solidify these concepts is through practice. Try building variations of draggable interfaces – each project will teach you something new about user interaction and DOM manipulation. +## 🎯 Your JavaScript DOM Mastery Timeline + +```mermaid +timeline + title DOM & JavaScript Learning Progression + + section Foundation (15 minutes) + DOM Understanding: Element selection methods + : Tree structure navigation + : Property access patterns + + section Event Handling (20 minutes) + User Interaction: Pointer event basics + : Event listener setup + : Cross-device compatibility + : Event prevention techniques + + section Closures (25 minutes) + Scope Management: Private variable creation + : Function persistence + : State management patterns + : Memory efficiency + + section Drag System (30 minutes) + Interactive Features: Coordinate tracking + : Position calculation + : Movement mathematics + : Cleanup procedures + + section Advanced Patterns (45 minutes) + Professional Skills: Event delegation + : Performance optimization + : Error handling + : Accessibility considerations + + section Framework Understanding (1 week) + Modern Development: Virtual DOM concepts + : State management libraries + : Component architectures + : Build tool integration + + section Expert Level (1 month) + Advanced DOM APIs: Intersection Observer + : Mutation Observer + : Custom Elements + : Web Components +``` + +### 🛠️ Your JavaScript Toolkit Summary + +After completing this lesson, you now have: +- **DOM Mastery**: Element selection, property manipulation, and tree navigation +- **Event Expertise**: Cross-device interaction handling with pointer events +- **Closure Understanding**: Private state management and function persistence +- **Interactive Systems**: Complete drag-and-drop implementation from scratch +- **Performance Awareness**: Proper event cleanup and memory management +- **Modern Patterns**: Code organization techniques used in professional development +- **User Experience**: Creating intuitive, responsive interfaces + +**Professional Skills Gained**: You've built features using the same techniques as: +- **Trello/Kanban boards**: Card dragging between columns +- **File upload systems**: Drag-and-drop file handling +- **Image galleries**: Photo arrangement interfaces +- **Mobile apps**: Touch-based interaction patterns + +**Next Level**: You're ready to explore modern frameworks like React, Vue, or Angular that build upon these fundamental DOM manipulation concepts! + ## Assignment [Work a bit more with the DOM](assignment.md)