Welcome, Architect!

This interactive hub brings the "Unabridged Learning Guide" to life. Instead of just reading, you'll run code, visualize concepts, and build your understanding hands-on. Use the navigation on the left to explore the modules. Each section contains interactive examples designed to transform theory into practical skill. Let's begin building.

Module 0: Revisiting Conditionals

Interactive Truthy/Falsy Checker

Enter a JavaScript value (e.g., `0`, `""`, `[]`, `'hello'`) to see if it's truthy or falsy.

Result will appear here.

Switch Statement Visualizer

Select a user role to see how a `switch` statement, including "fall-through," directs the program's flow.

Permissions will be displayed here.

Module 1: Automating Repetition

`for` Loop Execution Visualizer

Set the number of iterations and press "Run" to see a step-by-step trace of how a `for` loop executes.

Module 2: The Art of Reusability

Hoisting: Declaration vs. Expression

Click the buttons to see why a function declaration can be called *before* it's defined, but a function expression cannot. This demonstrates "hoisting."

Function Declaration

callDeclaredFunction();

function callDeclaredFunction() {
  return "I was hoisted!";
}

Function Expression

try {
  callExpressedFunction();
} catch (e) {
  return e.name;
}

const callExpressedFunction = () => {
  return "I was not hoisted!";
};

Module 3: Architecting Data

Interactive Array Playground

Use the buttons to manipulate the array. This demonstrates how common array methods work.

['Alex', 'Jane', 'Peter']

Module 4: Take-Home Assignment

The To-Do List Manager

Objective: To build a complete mini-application using arrays, objects, functions, and loops. This is a significant step towards building real applications.

1. Setup

Create a file todo.js.

2. The Data Structure

Your to-do list will be stored in an array of objects. Each object will represent a single task. 

const todoList = [
    { id: 1, task: 'Buy groceries', completed: false },
    { id: 2, task: 'Finish Week 4 assignment', completed: true }
];
let nextId = 3;

3. The Functions

  • displayTasks(): Loops through the todoList and prints each task to the console, indicating if it's complete (e.g., "[x] Buy groceries").
  • addTask(taskText): Creates a new task object, adds it to the todoList, and increments `nextId`.
  • markTaskComplete(taskId): Finds the task with the matching `id` and changes its `completed` status to `true`.

4. Bonus Challenge

Create a function deleteTask(taskId) that removes a task object from the array based on its `id`. This will require you to research array methods like findIndex() and splice().

5. Submission

Submit your todo.js file via a Pull Request to your personal assignments repository, following the professional branching workflow.