Intro

Yo, what's up, future coding legends! Welcome to the channel! I'm Reyrove, and today we're diving into the essential tools that will supercharge your JavaScript development journey.

Before we get started, smash that like button, subscribe, and drop a comment below with your favorite coding tool—let's build the ultimate dev toolkit together!

Code Editors

Your coding playground where the magic happens:

• Visual Studio Code (VS Code) - Highly customizable and widely used with extensions for JavaScript, TypeScript, ESLint, Prettier, etc.
• Sublime Text - Lightweight and fast editor with many plugins available for JavaScript development.

Package Managers

Tools that help you manage libraries and dependencies in your projects:

• npm (Node Package Manager) - Default package manager for Node.js, manages dependencies for JavaScript projects.
• Yarn - Alternative to npm, known for speed and reliability, manages project dependencies.

Build Tools

Utilities that automate tasks and streamline the building process:

• Webpack - Module bundler that processes and bundles JavaScript files and other assets.
• Parcel - Zero-configuration bundler, fast and easy to use for small to medium-sized projects.

Linters & Formatters

Keep your code clean and consistent:

• ESLint - Linting utility for JavaScript and JSX, catches errors and enforces coding standards.
• Prettier - Opinionionated code formatter, ensures consistent code style across your project.

Debugging Tools

Essential for finding and fixing issues in your code:

• Chrome DevTools - Built into Google Chrome, essential for front-end debugging.
• Node.js Debugger - Command-line debugger for Node.js, integrates with IDEs like VS Code.

Testing Frameworks

Ensure your code works as expected:

• Jest - Comprehensive testing framework developed by Facebook.
• Mocha - Flexible testing framework for Node.js, often used with assertion libraries.

Additional Awesome Tools

• Babel - JavaScript compiler that converts modern JS to backwards-compatible versions.
• TypeScript - Superset of JavaScript that adds static types, helps catch errors early.
• Git - Version control system, essential for collaboration and code management.

Wrap-Up

And that's your JavaScript developer toolkit! These tools will supercharge your coding journey and make you more productive.

Intro

Yo, what's up, future JS legends! Welcome back to the channel! If you're new here, I'm Reyrove, and today we're gonna set up your very own Dev Battlestation so you can code like a pro—without pulling your hair out.

Before we dive in, smash that like button, subscribe, and drop a comment below if you're ready to level up your coding game—trust me, you won't wanna miss what's coming next!

What You Need

Step one: gear check. To build a dev battlestation, you don't need a million-dollar setup—just the essentials:

• Code Editor: VS Code (Free, lightweight, packed with extensions)
• Browser: Chrome or Firefox, for testing code live
• Terminal/Command Line: Friendly and easy, no scary hacker vibes yet
• Extensions: Prettier (tidy code), Live Server (see changes instantly)

Install & Setup VS Code

Step two, download VS Code from the official website.

Once installed:

• Open it and pick a theme you like—Dark mode? Light mode? Make it yours!
• Install Prettier: it auto-formats your code so you don't look like you randomly mashed your keyboard.
• Install Live Server: one click, and your HTML/JS changes appear instantly in the browser. Magic.

Organizing Your Projects

Step three, let's talk organization. Nothing worse than losing your code in a jungle of folders:

• Create a Projects folder somewhere easy to access
• Inside, give each project its own folder: ToDoApp, PortfolioSite, etc.
• Start each project with index.html, style.css, script.js—your holy trinity

Optional Fun Add-ons

If you wanna go full pro gamer-mode on your dev space:

• Dual monitors for split-screen coding and browser testing
• Noise-canceling headphones for focus mode
• A comfy chair... because nobody codes standing up unless you're auditioning for Cirque du Soleil

Wrap-Up

And there you have it—your Dev Battlestation set up like a boss!

Intro

Yo, what's up, future JS legends! Welcome back to the channel! If you're new here, I'm Reyrove, and today we're taking our very first step into the world of JavaScript—writing code that actually talks back to you (without making you rage quit).

Before we dive in, smash that like button, subscribe, and drop a comment below if you're hyped to see your first JS magic happen—trust me, this is where the fun really begins!

Where JavaScript Lives

You've got two main options:

• Inside your HTML file using <script> tags.
• External JavaScript file linked to your HTML.

We'll start simple and keep it all in one HTML file—less jumping around, more fun.

Writing Your First Code

Open index.html. You don't even need to write all the HTML manually—just type ! in VS Code and press Enter. Boom! Your basic HTML boilerplate is ready.

Now, inside the <body> tag, add:

<script>
  console.log('Hello, JS!');
</script>

• console.log = shout into the browser console.

• Open the console to see the magic:

• Chrome: Press F12 or Ctrl + Shift + I (Cmd + Opt + I on Mac)
• Firefox: Press Ctrl + Shift + K (Cmd + Opt + K on Mac)

Check for Hello, JS! in the console.

Make It Interactive

<script>
  alert('Hello, JS! Welcome to your first code.');
</script>

• Refresh the page to see a popup message.

Quick Experiment: Variables

<script>
  let name = 'Reyrove';
  console.log(`Hello, ${name}! You are officially coding in JS!`);
</script>

• Save & check console for a personalized greeting.

• You just combined strings & variables—welcome to basic JS magic! ✨

Wrap-Up

And that's your first JavaScript code running live! You just made the browser do your bidding—how cool is that?

Intro

Yo, what's up, future JavaScript legends! Welcome back! If you're new here, I'm Reyrove, and today we're gonna meet your new BFFs in JS—Variables and Constants.

Before we get started, smash that like button, subscribe, and drop a comment below if you're ready to tame your first JS data! Trust me, it's easier than it sounds.

What Are Variables?

Variables are like little containers in your code that hold information.

In JavaScript, there are three ways to declare variables:

1. let – the modern way, can be updated.
2. const – never changes once set.
3. var – the old-school way, works but has some quirks.

var oldSchool = 'I am a var!';
let modern = 'I can change!';
const forever = 'I stay the same!';
console.log(oldSchool, modern, forever);

Variables in Action

let score = 0;
score = score + 10; // you can update 'let'
console.log('Your score is now ' + score);

var oldScore = 5;
oldScore = oldScore + 5; // also works, but has quirks
console.log('Old school score: ' + oldScore);

const MAX_SCORE = 100;
console.log('The max score you can get is ' + MAX_SCORE);
// MAX_SCORE = 50; // ⚠️ This would throw an error!

• let is flexible.
• var can be tricky with scope (we'll get there later).
• const is your "locked-in" friend.

🎉 This is the basic trio you need to know for most beginner projects!

Quick Demo

Now, let's create a simple greeting using a variable:

let name = 'Reyrove';
console.log('Hello, ' + name + '! Welcome to JS!');

• You can update name anytime with let.

• Try the same with const—your console will scream at you if you try to change it. 😎

Wrap-Up

And that's it! You now know how to use Variables & Constants—plus a peek at the old-school var. Your JS BFFs are officially ready to store your data and make your code dynamic.

Intro

Yo, what's up, coding legends! I'm Reyrove, and today we're diving into JavaScript Data Types—aka the squad that makes your code behave… or misbehave 😎.

Before we jump in, smash that like button, subscribe, and drop a comment with your favorite emoji if you're ready to demystify JS!

Meet the Data Types

Data types are basically the personalities of your values. They tell JS what kind of info it's dealing with, so it doesn't freak out.

Here's the main crew:

1. String – Text: 'Hello World!'
2. Number – Numbers: 42, 3.14
3. Boolean – True/False: true / false
4. Undefined – No value yet
5. Null – Intentionally empty
6. Object – Complex stuff, like arrays or things with properties
7. Symbol – Unique identifiers (advanced flex)

let name = 'Reyrove'; // String
let age = 28;         // Number
let isCoder = true;   // Boolean
let mystery;          // Undefined
let emptyBox = null;  // Null
console.log(name, age, isCoder, mystery, emptyBox);

Strings & Numbers

Strings and numbers love to mingle:

let greeting = 'Hello';
let year = 2025;
console.log(greeting + ', JS in ' + year + '!'); // Concatenation magic

Use typeof to check types:

console.log(typeof greeting); // "string"
console.log(typeof year);     // "number"

Booleans, Null & Undefined

Booleans are your yes/no switches:

let isOnline = true;
let isAdmin = false;
console.log(isOnline, isAdmin);

• undefined = variable exists but has no value yet.

• null = variable is intentionally empty.

let notSure;        // undefined
let emptyBox = null; // empty on purpose
console.log(notSure, emptyBox);

Wrap-Up

And that's your JS squad—Strings, Numbers, Booleans, Null, Undefined, and Objects. Master these, and your code will behave like a well-trained puppy instead of a wild raccoon 🐾.

Intro

Yo, coding legends! I'm Reyrove, and today we're diving into Operators & Expressions in JavaScript—aka the magic tools that make your code calculate, compare, and decide things for you.

Before we dive in, smash that like button, subscribe, and drop a comment with your favorite emoji if you're ready for some JS math magic!

What Are Operators?

Operators are basically symbols that tell JS to do stuff with your values.

We've got a few types:

1. Arithmetic Operators – For math: + - * / %
2. Assignment Operators – To store values: =, +=, -=, *=, /=
3. Comparison Operators – To compare values: ==, ===, !=, !==, >, <, >=, <=
4. Logical Operators – For decisions: &&, ||, !

Example of arithmetic magic:

let x = 10;
let y = 3;

console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.3333…
console.log(x % y); // 1 (remainder!)

Assignment & Shorthand

Assignment operators store values in variables, and you can do shorthand tricks:

let score = 5;
score += 10; // same as score = score + 10
score -= 2;  // same as score = score - 2
console.log(score); // 13

Comparison & Logical Operators

Comparison operators help JS decide true or false:

console.log(5 > 3);  // true
console.log(5 === '5'); // false (strict equality)
console.log(5 == '5');  // true (loose equality)

Logical operators combine conditions:

let isAdult = true;
let hasTicket = false;

console.log(isAdult && hasTicket); // false
console.log(isAdult || hasTicket); // true
console.log(!isAdult);             // false

true && true   // true
true && false  // false
false && true  // false
false && false // false

true || true   // true
true || false  // true
false || true  // true
false || false // false

!true   // false
!false  // true
!!true  // true (double negative)

Quick Demo

Let's do a little math magic combo:

let score = 50;
let bonus = 20;
let premium = true;

// Calculations
let total = score + bonus;
let doubled = total * 2;
let winner = doubled > 100;

// Logical operations
let elite = winner && premium;
let nextLevel = winner || premium;
let basicUser = !premium;

// Results
console.log('Score:', total);
console.log('Doubled:', doubled);
console.log('Winner?', winner);
console.log('Elite?', elite);
console.log('Next Level?', nextLevel);
console.log('Basic?', basicUser);

🎉 Boom! With operators, you can add, compare, combine, and decide all in one line.

Wrap-Up

Boom! You just unlocked the power of JavaScript operators—now you can make your code calculate, compare, and decide things like a pro! 🚀

Intro

Yo, coding legends! I'm Reyrove, and today we're talking Type Conversion in JavaScript—aka the drama of JS trying to decide what type a value really is.

Before we dive in, smash that like button, subscribe, and comment below with your favorite emoji if you've ever been confused by JS trying to be too clever.

What is Type Conversion?

Type conversion is JS changing a value from one type to another. Sometimes it does it automatically—this is called type coercion—and sometimes you do it manually.

Example of automatic type coercion:

console.log('5' - 2); // 3, JS converts '5' to number
console.log('5' + 2); // '52', JS converts 2 to string

Manual Type Conversion

You can tell JS exactly what type you want:

let str = '123';
let num = Number(str); // convert string to number
console.log(num + 1);  // 124

let bool = Boolean(0);  // false
let str2 = String(42);  // '42'

• Number(), String(), Boolean() are your manual type-changing superheroes.

console.log(typeof num);  // number
console.log(typeof str2); // string

Common Type Conversion Drama

Here's where things get funny/weird:

console.log('10' - '4');   // 6 (numbers, coercion happens)
console.log('10' + '4');   // '104' (strings, concatenation)
console.log(true + 1);     // 2 (true becomes 1)
console.log(false + 10);   // 10 (false becomes 0)

Wrap-Up

And that's Type Conversion in JS—sometimes helpful, sometimes chaotic, always drama. 😎

Intro

Yo, coding legends! I'm Reyrove, and today we're diving into Strings in JavaScript—aka everything you thought you knew about text, but JS has other plans.

Before we jump in, smash that like button, subscribe, and comment below with your favorite emoji if you love playing with text in code!

What's a String?

Strings are basically text values. Anything inside quotes—single, double, or backticks—is a string:

let single = 'Hello';
let double = "World";
let template = `JS is cool!`;

let name = 'Reyrove';
console.log(`Hello, ${name}!`); // Hello, Reyrove!

String Methods

Strings come with built-in tools to slice, dice, and manipulate them:

let phrase = 'JavaScript is awesome';

// Length of string
console.log(phrase.length); // 21

// Upper and lower case
console.log(phrase.toUpperCase()); // 'JAVASCRIPT IS AWESOME'
console.log(phrase.toLowerCase()); // 'javascript is awesome'

// Access characters
console.log(phrase[0]); // 'J'

// Slice strings - extracts a section of a string
// First parameter: start index (inclusive)
// Second parameter: end index (exclusive)
console.log(phrase.slice(0, 10)); // 'JavaScript'

// Replace text - replaces text in a string
// First parameter: text to find
// Second parameter: replacement text
console.log(phrase.replace('awesome', 'amazing')); // 'JavaScript is amazing'

Concatenation & Template Literals

Combine strings like a pro:

let firstName = 'Reyrove';
let lastName = 'Coder';

// Old school
console.log(firstName + ' ' + lastName); // 'Reyrove Coder'

// Template literals
console.log(`${firstName} ${lastName} rocks JS!`); // 'Reyrove Coder rocks JS!'

console.log(`Next year, I will be ${2025 + 1} years old.`); // 2026

Wrap-Up

And that's Strings in Depth—manipulate, combine, and slice text like a JS wizard 🪄.

Intro

Yo, coding legends! I'm Reyrove, and today we're diving into Numbers & Math in JavaScript—aka how to crunch numbers like a total JS wizard 🧙‍♂️.

Before we dive in, smash that like button, subscribe, and drop a comment with your favorite math emoji if you love number magic!

Number Basics

In JS, numbers are… just numbers. Whole numbers, decimals, even big numbers—no special types for integers vs floats like some languages.

let age = 25;          // integer
let price = 19.99;     // float
let bigNum = 1e6;      // 1,000,000
console.log(age, price, bigNum);

console.log(typeof age); // 'number'

Math Operators

Math in JS is straightforward—operators you already met:

let x = 10;
let y = 3;

console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.3333…
console.log(x % y); // 1 (remainder!)

Math Object

JS has a Math object with all the magical functions you need:

// Math.round() - Rounds to the nearest integer
console.log(Math.round(4.6));  // 5 (rounds up)
console.log(Math.round(4.4));  // 4 (rounds down)

// Math.floor() - Rounds down to the nearest integer
console.log(Math.floor(4.6));  // 4 (always rounds down)
console.log(Math.floor(4.1));  // 4

// Math.ceil() - Rounds up to the nearest integer
console.log(Math.ceil(4.1));   // 5 (always rounds up)
console.log(Math.ceil(4.6));   // 5

// Math.sqrt() - Returns the square root of a number
console.log(Math.sqrt(16));    // 4 (4 * 4 = 16)
console.log(Math.sqrt(25));    // 5 (5 * 5 = 25)

// Math.pow() - Returns base raised to exponent power
console.log(Math.pow(2, 3));   // 8 (2³ = 2 * 2 * 2)
console.log(Math.pow(5, 2));   // 25 (5² = 5 * 5)

// Math.random() - Returns random number between 0 (inclusive) and 1 (exclusive)
console.log(Math.random());    // random number 0–1 (e.g., 0.723, 0.156, etc.)

Quick Demo

Let's combine everything:

let score = Math.floor(Math.random() * 100); // random score 0–99
console.log(`Your magical score is: ${score}`);

if(score % 2 === 0){
    console.log('Even wizard score! ⚡');
} else {
    console.log('Odd wizard score! 🧙‍♂️');
}

🎉 Boom! You're officially number-crunching like a JS wizard.

Wrap-Up

And that's Numbers & Math in JavaScript—from basic operators to magical Math object powers.

Intro

Yo, coding legends! I'm Reyrove, and today we're diving into Arrays in JavaScript—aka the ultimate way to wrangle lists of data.

Before we jump in, smash that like button, subscribe, and comment below with your favorite emoji if you love keeping things organized in code!

What's an Array?

Arrays are basically lists of values. They can hold numbers, strings, booleans, even other arrays or objects:

let fruits = ['apple', 'banana', 'cherry'];
let mixed = [1, 'hello', true, [2,3]];
console.log(fruits, mixed);

console.log(fruits[0]); // 'apple'
console.log(fruits[2]); // 'cherry'

Array Methods

JS gives you lots of ways to play with arrays:

let numbers = [10, 20, 30, 40];

// Add & remove
numbers.push(50);       // [10,20,30,40,50]
numbers.pop();          // removes 50

// Add at beginning
numbers.unshift(5);     // [5,10,20,30,40]

// Remove first item
numbers.shift();        // removes 5

// Check length
console.log(numbers.length); // 4

// Find index
console.log(numbers.indexOf(30)); // 2

Looping Through Arrays

You can loop through arrays like this:

for(let i = 0; i < numbers.length; i++){
    console.log(numbers[i]);
}

// Using for...of (cooler)
for(let num of numbers){
    console.log(num);
}

Quick Demo

Let's put it together:

let tasks = ['code', 'sleep', 'repeat'];
tasks.push('eat'); 
console.log("Today's tasks:");
for(let task of tasks){
    console.log(`- ${task}`);
}

🎉 Boom! You just mastered arrays basics and can now control your data like a boss.

Wrap-Up

And that's Arrays 101—store, access, and manipulate lists like a pro.

Intro

Yo, coding legends! I'm Reyrove, and today we're talking about Objects in JavaScript—aka the secret sauce behind almost everything in JS.

Before we jump in, smash that like button, subscribe, and comment below with your favorite object in real life—mine's my coffee mug ☕, no contest.

What's an Object?

Objects are like containers that store data in key-value pairs. Think of them like labeled boxes—you give each property a name (the key) and store a value in it.

let person = {
    name: 'Reyrove',
    age: 28,
    isCoder: true
};

Accessing Data

You can grab values in two ways:

console.log(person.name);   // 'Reyrove' (dot notation)
console.log(person['age']); // 28 (bracket notation)

Adding, Changing & Deleting

Objects are flexible—you can add, update, or delete properties on the fly:

// Adding a new property
person.job = 'Developer';       // add
console.log(person.job);        // 'Developer'

// Updating an existing property
person.age = 26;                // update
console.log(person.age);        // 26

// Removing a property
delete person.isCoder;          // remove
console.log(person.isCoder);    // undefined

// Final object state
console.log(person);            // { name: 'Reyrove', age: 26, job: 'Developer' }

Nested Objects & Quick Demo

Objects can hold other objects, too—Inception style:

let user = {
    username: 'coder123',
    contact: {
        email: 'hello@example.com',
        phone: '123-456'
    }
};

console.log(user.contact.email); // 'hello@example.com'

🎯 Boom! Now you can store structured data like a pro.

Wrap-Up

And that's Objects Basics—store, access, and manipulate data in key-value style like a true JS dev.

Intro

Yo, coding legends! I'm Reyrove, and today we're learning how to make JavaScript actually think for itself—with the mighty if, else, and else if statements.

Before we start making decisions, smash that like button, subscribe, and comment below with the toughest decision you've had to make today—mine was coffee or coffee.

The if Statement

If statements let your code run only when a condition is true:

let age = 20;

if(age >= 18){
    console.log("You're an adult!");
}

if...else

When you need an either/or choice:

let isRaining = true;

if(isRaining){
    console.log('Grab an umbrella ☔');
} else {
    console.log('Enjoy the sunshine ☀️');
}

else if

Use else if for multiple possibilities:

let score = 85;

if(score >= 90){
    console.log('Grade: A');
} else if(score >= 75){
    console.log('Grade: B');
} else {
    console.log('Grade: C or lower');
}

Quick Demo

Let's combine them into something real-world:

let hour = 14;

if(hour < 12){
    console.log('Good morning!');
} else if(hour < 18){
    console.log('Good afternoon!');
} else {
    console.log('Good evening!');
}

🎯 Boom—your program just learned how to react differently depending on the situation.

Wrap-Up

And that's if, else, and else if—the decision-making core of your code.

Intro

Yo, coding legends! I'm Reyrove, and today we're gonna switch things up—literally.

If your if/else statements are starting to look like a tangled jungle, the switch statement is here to rescue you.

Before we flip the switch, smash that like button, subscribe, and drop your favorite emoji in the comments—mine's ⚡ because today's gonna be electric.

Why Use switch?

switch is perfect when you're checking the same value against multiple cases—instead of writing a pile of else ifs:

let day = 'Monday';

if(day === 'Monday'){
    console.log('Ugh… coffee first.');
} else if(day === 'Tuesday'){
    console.log('Still coffee.');
} else if(day === 'Friday'){
    console.log('Party time!');
} else {
    console.log('Just another day.');
}

Kinda messy, right? Here's the cooler way…

Basic switch Syntax

let day = 'Friday';

switch(day){
    case 'Monday':
        console.log('Ugh… coffee first.');
        break;
    case 'Tuesday':
        console.log('Still coffee.');
        break;
    case 'Friday':
        console.log('Party time!');
        break;
    default:
        console.log('Just another day.');
}

Grouping Cases

You can group multiple cases together:

let color = 'red';

switch(color){
    case 'red':
    case 'blue':
        console.log('Primary color!');
        break;
    case 'green':
        console.log('Secondary color!');
        break;
    default:
        console.log('Color unknown.');
}

Quick Demo

Real-world example—simple menu system:

let option = 2;

switch(option){
    case 1:
        console.log('Start Game');
        break;
    case 2:
        console.log('Load Game');
        break;
    case 3:
        console.log('Exit');
        break;
    default:
        console.log('Invalid option');
}

Wrap-Up

And that's switch—the clean, organized way to handle multiple conditions without drowning in if/else.

Intro

Yo, coding crew! I'm Reyrove, and today we're tackling loops in JavaScript—aka how to make your code do repetitive work so you don't have to.

Before we start looping around, hit that like button, subscribe, and comment your favorite emoji to describe how you feel about repetition—I'm going with 🔄.

Why Loops?

Loops are all about automation. Instead of copy-pasting code a hundred times, you tell JS: 'Yo, repeat this until I say stop.'

That's efficiency, baby. 🚀

The for Loop

The classic loop. Perfect when you know how many times you want to repeat something:

for(let i = 1; i <= 5; i++){
    console.log('Loop number ' + i);
}

This prints 1 to 5.

The while Loop

Use while when you don't know exactly how many times you'll loop—just as long as a condition is true:

let count = 0;

while(count < 3){
    console.log('Counting… ' + count);
    count++;
}

The for…of Loop

When working with arrays, for…of is the chill, modern way:

let fruits = ['🍎', '🍌', '🍇'];

for(let fruit of fruits){
    console.log(fruit);
}

So much cleaner than messing with indexes.

Quick Demo

Imagine printing a shopping list with a for…of:

let shoppingList = ['Milk', 'Eggs', 'Bread'];

for(let item of shoppingList){
    console.log('Buy: ' + item);
}

🎯 Boom—looping through data like a pro.

Wrap-Up

And that's loops—for, while, and for…of—your ticket to less repetitive, more powerful code.

Intro

What's up, coding wizards? 🧙‍♂️ I'm Reyrove, and today we're diving into functions—the reusable magic spells of JavaScript.

Before we start casting, smash that like button, subscribe, and comment your favorite magic word—I'm going with 'abracadabra!'

What's a Function?

Functions are like little programs inside your program. They let you bundle code together and reuse it anytime—like copy-paste, but smarter.

Think of it like this: instead of explaining how to make coffee every single time, you just say: 'brewCoffee()' ☕.

Declaring a Function

The classic spell:

function greet(){
    console.log('Hello, world!');
}

Now, calling the spell:

greet(); // runs the function

Easy. One word, boom—your code runs.

Functions with Parameters

You can pass in ingredients (called parameters) so your function can do more:

function greet(name){
    console.log('Hello, ' + name + '!');
}

greet('Alice');
greet('Bob');

Now our spell works on anyone we call it on. 🔮

Functions with Return

Sometimes, you don't just want to print—you want your function to return something:

function add(a, b){
    return a + b;
}

let sum = add(5, 10);
console.log(sum); // 15

It's like a spell that gives back a potion you can use later.

Arrow Functions

ES6 (ECMAScript 2015) gave us a cool shortcut called arrow functions. ES6 was a major update to JavaScript that introduced many new features to make coding easier and more powerful.

// Traditional function
function multiply(x, y) {
    return x * y;
}

// Arrow function equivalent
const multiply = (x, y) => x * y;

console.log(multiply(3, 4)); // 12

Key Benefits of Arrow Functions:

• Shorter syntax - Less typing, cleaner code
• Implicit return - No need for return keyword if it's a single expression
• No binding of 'this' - They inherit 'this' from the surrounding context

More Arrow Function Examples:

// No parameters
const sayHello = () => console.log('Hello!');
sayHello(); // Output: Hello!

// Single parameter (parentheses optional)
const double = x => x * 2;
console.log(double(5)); // Output: 10

// Multiple parameters
const add = (a, b) => a + b;
console.log(add(3, 7)); // Output: 10

// Multiple lines need curly braces
const greet = (name) => {
    const message = `Hello, ${name}!`;
    return message;
};
console.log(greet('Alice')); // Output: Hello, Alice!

// Returning an object (requires parentheses)
const createUser = (name, age) => ({ name, age });
console.log(createUser('Bob', 25)); // Output: {name: "Bob", age: 25}

// Using with array methods (common use case)
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(x => x * x);
console.log(squared); // Output: [1, 4, 9, 16, 25]

Less typing, more magic. 🪄

Wrap-Up

And that's functions—your reusable, customizable magic spells in JavaScript.

Intro

Psst… JavaScript has secrets. 🤫 Today, we're talking about scope and hoisting—two things that confuse beginners more than pineapple on pizza.

Before we expose these secrets, like, subscribe, and drop a comment with your favorite conspiracy theory emoji. Mine's 👀.

What Is Scope?

Scope is all about where your variables live—and who can use them.

There are three main types:

• Global scope → variable lives everywhere in your code.
• Function scope → variable lives only inside a function.
• Block scope → with let and const, variables live only inside { }.

Example:

let globalVar = "I'm everywhere!";

function myFunc(){
    let localVar = 'I exist only here!';
    console.log(globalVar); // works
    console.log(localVar);  // works
}

console.log(globalVar); // works
console.log(localVar);  // ❌ error

So yeah… not everything gets to leave the house.

The var Throwback

Remember var from earlier? It's function-scoped, not block-scoped. That's why this happens:

if(true){
    var oldSchool = 'Still here…';
}
console.log(oldSchool); // Works! 😱

Kinda creepy, right? That's why we prefer let and const—they actually respect block scope.

Hoisting Explained

Now, onto hoisting—JS's weird party trick.

JavaScript literally moves declarations to the top of their scope when running code.

Example:

console.log(hoistedVar); // undefined
var hoistedVar = 'Hello!';

JS reads this as:

var hoistedVar;
console.log(hoistedVar); // undefined
hoistedVar = 'Hello!';

Hoisting with Functions

Functions also get hoisted—but only function declarations, not expressions:

sayHi(); // works!

function sayHi(){
    console.log('Hi!');
}

sayBye(); // ❌ error
const sayBye = function(){
    console.log('Bye!');
}

So yeah—declaration spells can be cast early, but function expressions need to be defined first.

Wrap-Up

And there you have it—scope creeps and hoisting surprises uncovered. Now you know why variables sometimes feel like they're playing peekaboo. 👻

Intro

Yo, coding legends! I'm Reyrove, and today we're meeting the DOM—the Document Object Model. Basically, the bridge between JS and HTML.

Alright, squad—we've been living in Console Land long enough. It's time for JavaScript to finally invade the web page.

Before we start hacking into the matrix, hit like, subscribe, and drop your favorite emoji to describe your vibe right now. Mine's 👾.

What Even Is the DOM?

The DOM is like a giant tree that represents your HTML.

Your <html> is the root, <head> and <body> are branches, and everything inside—like <p>, <h1>, <button>—are leaves. 🌳

JavaScript can grab, change, and create these leaves. That's why DOM = power.

Accessing Elements

Let's grab stuff.

<p id="greeting">Hello!</p>

In JS:

let greet = document.getElementById('greeting');
console.log(greet); // <p id="greeting">Hello!</p>

// Or, modern style:
let greet = document.querySelector('#greeting');

So yeah—JS just reached into HTML like 'sup?'.

Changing Stuff

Wanna change text? Easy:

greet.textContent = 'Hi there!';

Wanna style it?

greet.style.color = 'blue';
greet.style.fontSize = '24px';

Boom. DOM invasion complete. 👑

Creating & Adding Elements

You're not limited to just changing stuff—you can spawn new HTML like a boss:

let newPara = document.createElement('p');
newPara.textContent = "I'm new here!";
document.body.appendChild(newPara);

Congrats—you just gave birth to a new <p> on your page. 👶

Quick Demo

Imagine a button that, when clicked, adds new list items:

<button id="addBtn">Add Item</button>
<ul id="list"></ul>

let btn = document.getElementById('addBtn');
let list = document.getElementById('list');
btn.addEventListener('click', () => {
    let li = document.createElement('li'); //li is a variable name - It's short for "list item".
    li.textContent = 'New item!';
    list.appendChild(li);
});

Now your page is alive. 🧟

Wrap-Up

And that's your first look at the DOM invasion—JS finally meeting and controlling HTML.

Intro

Yo, coding legends! I'm Reyrove, and today we're diving into DOM events.

Ever wanted your website to actually react when you click, type, or scroll? That's where events come in. JavaScript can listen to anything you do and fire off code in response.

Before we start clicking everything in sight, like, subscribe, and comment your current keyboard smash. Mine's: asdfghjkl 🤪.

What's an Event?

An event is basically a thing that happens on the page—like a click, a keypress, or your mouse moving around like a lost fly. 🪰

You can tell JS: 'Hey, when this happens, run this function.' Boom—interactivity unlocked.

The Classic Event Listener

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Listener Example</title>
</head>
<body>
    <button id="magicBtn">Click me!</button>
    <p>Open your browser console to see the messages when you click the button.</p>

    <script>
        let btn = document.getElementById('magicBtn');
        
        btn.addEventListener('click', () => {
            console.log('Button was clicked!');
            console.log('You activated the magic! ✨');
        });
    </script>
</body>
</html>

Click it, and JS listens. Easy.

More Event Types

It's not just clicks. Some common ones:

• mouseover → when your mouse enters an element.
• keydown → when you press a key.
• submit → when you submit a form.
• scroll → when you scroll a page.

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keydown Event Example</title>
</head>
<body>
    <p>Press any key on your keyboard and check the console to see what you pressed.</p>

    <script>
        document.addEventListener('keydown', (event) => {
            console.log('You pressed: ' + event.key);
        });
    </script>
</body>
</html>

Now your page snitches on your keyboard.

Passing Event Info

The event itself has juicy details—like which key you pressed, or where your mouse was.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Position Example</title>
</head>
<body>
    <button id="magicBtn">Click anywhere on this button!</button>
    <p>Open your browser console to see the click position coordinates.</p>

    <script>
        let btn = document.getElementById('magicBtn');
        
        btn.addEventListener('click', (event) => {
            console.log(event); // whole event object
            console.log('Clicked at: ', event.clientX, event.clientY);
        });
    </script>
</body>
</html>

Congrats—you're basically tracking user behavior like a tech overlord. 👁️

Removing Events

You can also stop listening:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>One-Time Click Example</title>
</head>
<body>
    <button id="magicBtn">Click me only once!</button>
    <p>This button will only work one time - check the console.</p>

    <script>
        let btn = document.getElementById('magicBtn');
        
        function sayHi(){
            console.log('Hi once!');
            btn.removeEventListener('click', sayHi);
        }
        
        btn.addEventListener('click', sayHi);
    </script>
</body>
</html>

Click once, and then it ghosts you. 🥶

Wrap-Up

And there you have it—DOM events, the secret sauce to making your websites feel alive.

Intro

Yo, coding legends! I'm Reyrove, and today we're making forms that actually work.

Ever filled out a form and the site yelled at you like: 'That's not a valid email, genius!' Yeah… that's form validation. Today we're making forms that actually work—without breaking or letting someone sign up as Banana@Banana. 🍌

Before we dive in, smash like, subscribe, and comment your fakest fake email. Mine's totallynotahacker@js.com.

Basic HTML Form

Let's start with a simple form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Form</title>
</head>
<body>
    <form id="signupForm">
        <input type="text" id="username" placeholder="Username" required>
        <input type="email" id="email" placeholder="Email" required>
        <button type="submit">Sign Up</button>
    </form>
</body>
</html>

Notice those required attributes? HTML does some validation for us. But we can go further with JavaScript.

Handling Form Submit

We catch the form submission with an event listener:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handling Form Submit</title>
</head>
<body>
    <form id="signupForm">
        <input type="text" id="username" placeholder="Username" required>
        <input type="email" id="email" placeholder="Email" required>
        <button type="submit">Sign Up</button>
    </form>

    <script>
        let form = document.getElementById('signupForm');
        form.addEventListener('submit', (event) => {
            event.preventDefault(); // stops refresh
            console.log('Form submitted!');
        });
    </script>
</body>
</html>

Boom—no more instant reload chaos. Now JS is in control.

Adding Validation

Let's say we want the username to be at least 3 characters:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form with JavaScript Validation</title>
</head>
<body>
    <form id="signupForm">
        <input type="text" id="username" placeholder="Username" required>
        <input type="email" id="email" placeholder="Email" required>
        <button type="submit">Sign Up</button>
    </form>

    <script>
        let form = document.getElementById('signupForm');
        let username = document.getElementById('username');
        let email = document.getElementById('email');

        form.addEventListener('submit', (event) => {
            event.preventDefault();

            if(username.value.length < 3){
                alert('Username must be at least 3 characters long.');
                return;
            }

            if(!email.value.includes('@')){
                alert('Please enter a valid email.');
                return;
            }

            console.log('Form passed validation!');
        });
    </script>
</body>
</html>

Now, no more signing up as X. 🚫

Real-Time Validation

You don't have to wait until submit—you can check as the user types:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-time Form Validation</title>
</head>
<body>
    <form id="signupForm">
        <input type="text" id="username" placeholder="Username" required>
        <input type="email" id="email" placeholder="Email" required>
        <button type="submit">Sign Up</button>
    </form>

    <script>
        let form = document.getElementById('signupForm');
        let username = document.getElementById('username');
        let email = document.getElementById('email');

        // Real-time username validation
        username.addEventListener('input', () => {
            if(username.value.length < 3){
                username.style.borderColor = 'red';
            } else {
                username.style.borderColor = 'green';
            }
        });

        // Form submission validation
        form.addEventListener('submit', (event) => {
            event.preventDefault();

            if(username.value.length < 3){
                alert('Username must be at least 3 characters long.');
                return;
            }

            if(!email.value.includes('@')){
                alert('Please enter a valid email.');
                return;
            }

            console.log('Form passed validation!');
        });
    </script>
</body>
</html>

Now your form gives instant feedback. Friendly green, evil red.

Bonus – Custom Messages

You can also add little hints:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sassy Form Validation</title>
</head>
<body>
    <form id="signupForm">
        <input type="text" id="username" placeholder="Username" required>
        <input type="email" id="email" placeholder="Email" required>
        <button type="submit">Sign Up</button>
    </form>

    <script>
        let form = document.getElementById('signupForm');
        let username = document.getElementById('username');
        let email = document.getElementById('email');

        // Real-time username validation
        username.addEventListener('input', () => {
            if(username.value.length < 3){
                username.style.borderColor = 'red';
            } else {
                username.style.borderColor = 'green';
            }
        });

        // Sassy email validation
        email.addEventListener('input', () => {
            if(!email.value.includes('@')){
                email.setCustomValidity('Um, sweetie... emails usually have an @ symbol? Just saying. 🍵');
            } else if(email.value.includes('banana')) {
                email.setCustomValidity('Banana email? Really? That\'s so 2010. 🍌');
            } else if(email.value.includes('example.com')) {
                email.setCustomValidity('Oh wow, example.com... how original. 🙄');
            } else {
                email.setCustomValidity('');
                email.style.borderColor = 'green';
            }
        });

        // Form submission with sassy messages
        form.addEventListener('submit', (event) => {
            event.preventDefault();

            if(username.value.length < 3){
                alert('Three letters? That\'s all I\'m asking. Is it really that hard? 💅');
                return;
            }

            if(!email.value.includes('@')){
                alert('Did you forget the @ or are you just trying to be mysterious? 🔍');
                return;
            }

            // Sassy success messages based on email
            let sassyMessage;
            if(email.value.includes('gmail.com')) {
                sassyMessage = `Well hello ${username.value}! Look at you with that basic Gmail. So predictable. 😏`;
            } else if(email.value.includes('yahoo.com')) {
                sassyMessage = `Hey ${username.value}! Yahoo? Someone's feeling nostalgic. 📻`;
            } else if(email.value.includes('hotmail.com')) {
                sassyMessage = `Whoa ${username.value}! Hotmail? Did you time travel from 1999? 🕰️`;
            } else {
                sassyMessage = `Well hello there ${username.value}! Fancy email you got there. Trying to be different, huh? 😎`;
            }
            
            console.log('Form passed validation!');
            alert(sassyMessage + '\n\nWelcome to the squad! ✨');
        });
    </script>
</body>
</html>

So yeah, you can sass your users if you want. 🤭

Wrap-Up

And that's it—forms and validation, without breaking the page or your user's patience.

Intro

Yo, coding legends! I'm Reyrove, and today we're building our first real JavaScript app!

Ever make a to-do list and then… never do the things? Yeah, same. Today we're building a To-Do List App in JavaScript—but at least this one will work, even if we don't.

Hit like, subscribe, and comment one thing on your to-do list right now. Mine? 'Stop drinking 3 coffees a day.' ☕😂

The Setup

First, we need some HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>
</body>
</html>

That's our little app skeleton—an input, a button, and a list.

Grabbing Elements

In JS, we grab those elements so we can control them:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>
<script>
  let taskInput = document.getElementById('taskInput');
  let addBtn = document.getElementById('addBtn');
  let taskList = document.getElementById('taskList');
</script>
</body>
</html>

Now we're ready to add tasks like a productivity boss.

Adding Tasks

Clicking 'Add' should create a new list item:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>
<script>
  let taskInput = document.getElementById('taskInput');
  let addBtn = document.getElementById('addBtn');
  let taskList = document.getElementById('taskList');

  addBtn.addEventListener('click', () => {
      let taskText = taskInput.value;

      if(taskText.trim() === '') return; // no empty tasks!

      let li = document.createElement('li');
      li.textContent = taskText;

      taskList.appendChild(li);
      taskInput.value = ''; // clear input
  });
</script>
</body>
</html>

Boom. You've officially coded something useful.

Marking Tasks Done

Let's make tasks clickable to mark them as done:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>
<script>
  let taskInput = document.getElementById('taskInput');
  let addBtn = document.getElementById('addBtn');
  let taskList = document.getElementById('taskList');

  addBtn.addEventListener('click', () => {
      let taskText = taskInput.value;

      if(taskText.trim() === '') return; // no empty tasks!

      let li = document.createElement('li');
      li.textContent = taskText;
      
      li.addEventListener('click', () => {
          li.style.textDecoration = 'line-through';
      });

      taskList.appendChild(li);
      taskInput.value = ''; // clear input
  });
</script>
</body>
</html>

Click once, and it's ✅ checked off. Feels good.

Deleting Tasks

Now let's add a delete button for each task:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>
<script>
  let taskInput = document.getElementById('taskInput');
  let addBtn = document.getElementById('addBtn');
  let taskList = document.getElementById('taskList');

  addBtn.addEventListener('click', () => {
      let taskText = taskInput.value;

      if(taskText.trim() === '') return; // no empty tasks!

      let li = document.createElement('li');
      li.textContent = taskText;
      
      li.addEventListener('click', () => {
          li.style.textDecoration = 'line-through';
      });

      let deleteBtn = document.createElement('button');
      deleteBtn.textContent = '❌';
      li.appendChild(deleteBtn);

      deleteBtn.addEventListener('click', (e) => {
          e.stopPropagation(); // Prevent triggering the li click event
          li.remove();
      });

      taskList.appendChild(li);
      taskInput.value = ''; // clear input
  });
</script>
</body>
</html>

Now you can rage-delete your tasks when life gets too real. 💀

Mini Recap

So far: add tasks, mark them done, delete them. Congratulations—you've just made your first JavaScript app. 🎉

Wrap-Up

This is just the beginning—next, we'll learn how to save tasks even after you refresh the page with localStorage.

Intro

Yo, coding legends! I'm Reyrove, and today we're making our apps remember stuff!

You add tasks to your shiny To-Do app… then refresh the page… and boom. Gone. Like your New Year's resolutions. 🥲

Not anymore. Today, we're using JSON and localStorage to make your app remember things like a loyal bestie. Smash like, hit subscribe, and drop a comment: if your browser could remember ONE thing about you forever, what would it be? (Mine: my coffee order ☕).

What's localStorage?

localStorage is like a tiny hard drive inside your browser. It stores data as key-value pairs, and it sticks around even after refresh. Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage Example</title>
</head>
<body>
    <h2>localStorage Demo</h2>
    <p>Open your browser console to see the output.</p>
    <p>Try refreshing the page - the data will persist!</p>

    <script>
        // Store data in localStorage
        localStorage.setItem('username', 'Reyrove');
        
        // Retrieve data from localStorage
        let savedUsername = localStorage.getItem('username');
        
        // Display in console
        console.log(savedUsername); // Reyrove
        
        // Show in alert too
        alert('Saved username: ' + savedUsername);
    </script>
</body>
</html>

Yup—it's that easy.

But Wait… JSON

Problem: localStorage only stores strings.

Solution: JSON—JavaScript Object Notation. It's a way to turn objects into strings and back.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON & localStorage Example</title>
</head>
<body>
    <h2>Storing Objects with JSON</h2>
    <p>Open your browser console to see the output.</p>
    <p>Try refreshing the page - the object data will persist!</p>

    <script>
        // Store object data in localStorage using JSON
        let user = { name: 'Rey', age: 28 };
        localStorage.setItem('user', JSON.stringify(user));
        
        // Retrieve and parse the data back to object
        let savedUser = JSON.parse(localStorage.getItem('user'));
        
        // Display in console
        console.log(savedUser); // Complete object
        console.log(savedUser.name); // Rey
        console.log(savedUser.age); // 28
        
        // Show in alert too
        alert('Saved user: ' + savedUser.name + ', Age: ' + savedUser.age);
    </script>
</body>
</html>

Think of JSON as the suitcase that packs your data neatly.

Saving To-Do List

Let's add this to our To-Do app. Every time we add a task, we save the list:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>
<script>
  let taskInput = document.getElementById('taskInput');
  let addBtn = document.getElementById('addBtn');
  let taskList = document.getElementById('taskList');

  // store tasks
  let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

  function saveTasks() {
      localStorage.setItem('tasks', JSON.stringify(tasks));
  }

  function renderTasks() {
      taskList.innerHTML = ''; // clear existing list
      tasks.forEach((task, index) => {
          let li = document.createElement('li');
          li.textContent = task.text;
          if (task.done) li.style.textDecoration = 'line-through';

          li.addEventListener('click', () => {
              task.done = !task.done;
              saveTasks();
              renderTasks();
          });

          let deleteBtn = document.createElement('button');
          deleteBtn.textContent = '❌';
          li.appendChild(deleteBtn);

          deleteBtn.addEventListener('click', (e) => {
              e.stopPropagation(); // avoid marking done
              tasks.splice(index, 1);
              saveTasks();
              renderTasks();
          });

          taskList.appendChild(li);
      });
  }

  addBtn.addEventListener('click', () => {
      let taskText = taskInput.value;
      if(taskText.trim() === '') return;

      tasks.push({ text: taskText, done: false });
      saveTasks();
      renderTasks();

      taskInput.value = '';
  });

  // Load saved tasks on startup
  renderTasks();
</script>
</body>
</html>

Now we're backing up our life goals. ✅ Every time we add, complete, or delete a task, the whole list is saved in our browser's localStorage. That means our tasks will still be here even after refreshing the page, or coming back later. Kinda like our own mini cloud — except it lives in our browser. ☁️

Loading Data Back

On page load, we grab the data back:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="taskInput" placeholder="Add a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>
<script>
  let taskInput = document.getElementById('taskInput');
  let addBtn = document.getElementById('addBtn');
  let taskList = document.getElementById('taskList');

  let tasks = [];

  function saveTasks() {
      localStorage.setItem('tasks', JSON.stringify(tasks));
  }

  // render ONE task
  function renderTask(task, index) {
      let li = document.createElement('li');
      li.textContent = task.text;
      if (task.done) li.style.textDecoration = 'line-through';

      li.addEventListener('click', () => {
          task.done = !task.done;
          saveTasks();
          refreshList();
      });

      let deleteBtn = document.createElement('button');
      deleteBtn.textContent = '❌';
      li.appendChild(deleteBtn);

      deleteBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          tasks.splice(index, 1);
          saveTasks();
          refreshList();
      });

      taskList.appendChild(li);
  }

  // refresh entire list
  function refreshList() {
      taskList.innerHTML = '';
      tasks.forEach((task, index) => renderTask(task, index));
  }

  addBtn.addEventListener('click', () => {
      let taskText = taskInput.value;
      if(taskText.trim() === '') return;

      let newTask = { text: taskText, done: false };
      tasks.push(newTask);
      saveTasks();
      renderTask(newTask, tasks.length - 1);

      taskInput.value = '';
  });

  // 🔮 Load saved tasks on startup
  let saved = JSON.parse(localStorage.getItem('tasks'));
  if (saved) {
      tasks = saved;
      tasks.forEach((task, index) => renderTask(task, index));
  }
</script>
</body>
</html>

Now your tasks survive refresh. 🪄 Like magic.

Why though?
Every time we add or delete a task, the whole tasks array is saved inside our browser’s localStorage (using JSON.stringify()). Then, when the page reloads, our app grabs that stored data back (with JSON.parse()) and rebuilds the task list by calling renderTask(). So the “magic” is basically our browser remembering stuff for us between refreshes. No server, no database — just the browser’s built-in memory box. 📦

1. The Rendering Logic (Biggest Difference)

This is the core architectural change.

Saving To-Do List (First Code Block)

• Uses a single renderTasks() function.
• This function clears the entire list (taskList.innerHTML = '') and then rebuilds it on every change (add, delete, toggle done).
• Pro: Simple to write. Con: Less efficient for long lists because the browser does more work on each small change.

Loading Data Back (Second Code Block)

• Splits rendering into two functions: renderTask(task, index) and refreshList().
• renderTask(task, index) creates the HTML for just one task (<li>) and wires its event listeners.
• refreshList() is the “full re-render,” looping tasks and calling renderTask for each.
• Key improvement: The addBtn handler appends only the new task via renderTask(newTask, tasks.length - 1) instead of rerendering everything.
• Pro: Slightly more efficient when adding. Con: Slightly more complex code.

Reality check: For a small to-do app, performance differences are negligible. The second approach is just more modular and future-proof.

Updating with Every Change

Whenever you add, delete, or check off a task, just call saveTasks(). That way, localStorage always has your latest data. No excuses left for ignoring your tasks. 😅

Mini Recap

So: localStorage = permanent memory. JSON = translator that lets us store complex data as strings. Together? They're unstoppable.

Wrap-Up

And there you go—you've officially leveled up your app to a REAL app with persistent data.

Intro

Yo, coding legends! I'm Reyrove, and today we're leveling up our JavaScript game!

Would you still text on a rotary phone? 📞 Nah. Same with old-school JavaScript. It works, but ES6+ features are like upgrading from a flip phone to an iPhone. Sleeker, faster, cooler.

Before we flex modern JS, like, subscribe, and drop a comment: what's one old-school thing you still cling to? (Mine? Burnt CDs. Don't judge. 😅)

let & const > var

First up: ditch var. We've already met let and const, but ES6 made them standard.

• let = reassignable variable
• const = locked-in variable
• var = that toxic ex you don't call anymore 🚩

Arrow Functions

Why type function like it's 2005? Use arrow functions:

// Old way
function greet(name) {
  return 'Hello ' + name;
}

// ES6 way - Arrow Function
const greet = (name) => `Hello ${name}`;

// Test both functions
console.log(greet('Rey')); // Hello Rey

Less typing, more swag.

Template Literals

No more messy string + concatenation. Now we use backticks:

let user = 'Rey';
console.log(`Welcome back, ${user}!`);

Cleaner, prettier, and perfect for flexing.

Destructuring

Grabbing data used to be clunky. Now we can destructure:

let user = { name: 'Rey', age: 28 };
let { name, age } = user;
console.log(name, age);

Boom. Instant unpacking. Same works with arrays.

Spread & Rest Operators

Want to copy or merge things? Use the spread (...) operator:

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5]; 
console.log(newArr); // [1, 2, 3, 4, 5]

And rest (...) is for collecting leftovers:

function sum(...nums){
  return nums.reduce((a, b) => a + b);
}
console.log(sum(1,2,3,4)); // 10

Versatile AF.

Default Params & Modules

• Default params:

function greet(name = 'stranger'){
  console.log(`Hey ${name}`);
}
greet(); // Hey stranger

• Modules: split your code into files and import/export like a pro. (No more giant spaghetti scripts 🍝).

Mini Recap

So in short: let & const, arrow functions, template literals, destructuring, spread/rest, default params, and modules. These aren't just tricks—they're the modern standard.

Wrap-Up

And that's ES6+ swag in action. Trust me—learn these, and you'll never look back at old JS again.

Intro

Yo, coding legends! I'm Reyrove, and today we're hunting bugs!

You're coding, everything looks perfect, you run it… BOOM—error. 😭

Welcome to debugging, aka hunting bugs before they hunt you. Stick around, hit like, subscribe, and comment: what's the weirdest bug you've ever faced? (Mine once fixed itself… which is more terrifying than the bug itself 🫠).

Read the Error Message

First rule: don't panic.

Error messages look scary but they're literally telling you what's wrong.

Example:

console.log(myVar);
➡️ 'ReferenceError: myVar is not defined'

Translation: you tried to use something that doesn't exist. Simple.

Console.log is Your BFF

Old-school, but it works:

let x = 10;
console.log('x is:', x);

Sprinkle console.logs like breadcrumbs to see where things break.

Pro tip: You can log multiple things at once:

console.log({ x, y, user });

This gives you a neat object to check.

The Dev Tools

Press F12 (or right-click → Inspect) to open DevTools.

Go to the Console tab for errors, and the Sources tab to pause and step through your code.

Set a breakpoint (click the line number), refresh, and your code will literally freeze so you can see what's happening line by line. Feels like slow-mo Matrix coding 🕶️.

Common Bugs

1. Typos: userNmae instead of userName 🤦
2. Missing brackets/parentheses:

   if (x > 5 { console.log(x); } // nope

3. Wrong scope: variables declared inside a function don't exist outside.
4. Asynchronous chaos: you tried to use data before it was ready.

Pro Debugging Tricks

• Use console.table() to view arrays/objects nicely.
• debugger; in code will auto-pause in DevTools.
• Google the error message—90% chance someone on StackOverflow already cried about it.

Mini Recap

Debugging = Read errors ➝ console.log ➝ DevTools ➝ fix ➝ victory dance. 🎉

Wrap-Up

And that's debugging without tears—you're not breaking your code, your code is training you. 💪

Intro

Woohoo! You survived 23 sessions of JS chaos 🪄. From your first 'Hello JS' to ES6 swag, debugging nightmares, DOM magic, forms, localStorage—you now have all the superpowers to build real apps.

Before we jump in, smash that like, subscribe, and comment what session you loved most. Let's celebrate your JS journey!

Recap

Here's a quick flashback with code snippets of everything you've learned:

Variables & Constants

let username = 'Reyrove'; // You can change it anytime
const maxTasks = 10;      // Constant, cannot be changed

Data Types

const task = { title: 'Learn JS', done: false }; // Object
let score = 100; // Number
let active = true; // Boolean
let name = "Code Master"; // String

Arrays

let tasks = [task]; // Store multiple tasks in an array
tasks.push({ title: 'Practice Loops', done: false });

Functions & ES6 Features

const toggleDone = index => tasks[index].done = !tasks[index].done; // Arrow function + toggle status

DOM & Events

document.getElementById('taskForm').addEventListener('submit', e => e.preventDefault()); // Prevent form reload

localStorage & JSON

localStorage.setItem('tasks', JSON.stringify(tasks)); // Save array of objects in localStorage

All these concepts will power our mega dashboard.

Mega Project – Full Code with Explanation

HTML Structure:

<form id="taskForm">
  <input type="text" id="title" placeholder="Task Title" required />
  <textarea id="desc" placeholder="Task Description" required></textarea>
  <select id="priority">
    <option value="Low">Low</option>
    <option value="Medium">Medium</option>
    <option value="High">High</option>
  </select>
  <button type="submit">Add Task</button>
</form>
<div id="taskList"></div>

Explanation:

• <form> holds input fields for tasks
• <input> for task title
• <textarea> for description
• <select> for priority
• <button> to submit
• <div id="taskList"> where tasks will appear

JS Code:

// Grab DOM elements
const taskForm = document.getElementById('taskForm'); // The form element
const taskList = document.getElementById('taskList'); // Container to display tasks

// Load tasks from localStorage or start with an empty array
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

Explanation:

• getElementById grabs elements to manipulate
• JSON.parse(localStorage.getItem('tasks')) loads saved tasks
• || [] ensures we have an array if nothing is saved

Render Tasks Function:

const renderTasks = () => {
  taskList.innerHTML = ''; // Clear old tasks

  tasks.forEach((task, index) => {
    const { title, desc, priority, done } = task; // Object destructuring

    const taskDiv = document.createElement('div'); // Create task container
    taskDiv.className = `task ${done ? 'done' : ''}`; // Add class 'done' if completed

    taskDiv.innerHTML = `
      <h3>${title}</h3>
      <p>${desc}</p>
      <p><strong>Priority:</strong> ${priority}</p>
      <p><strong>Status:</strong> ${done ? 'Done ✅' : 'Pending ⏳'}</p>
      <button onclick="toggleDone(${index})">Toggle Done</button>
      <button onclick="deleteTask(${index})">Delete</button>
    `;

    taskList.appendChild(taskDiv); // Add task to DOM
  });
};

Explanation:

• Clears the task container every time we render
• Loops through tasks array
• Creates a <div> for each task dynamically
• Destructures task for easy access
• Buttons call functions with index to modify the right task

Add, Toggle, Delete, Save Functions:

const addTask = task => { tasks = [...tasks, task]; saveTasks(); renderTasks(); };
const toggleDone = index => { tasks[index].done = !tasks[index].done; saveTasks(); renderTasks(); };
const deleteTask = index => { tasks.splice(index, 1); saveTasks(); renderTasks(); };
const saveTasks = () => localStorage.setItem('tasks', JSON.stringify(tasks));

Explanation:

• addTask uses spread operator to add tasks
• toggleDone flips the done boolean
• deleteTask removes task from array
• saveTasks stores updated array in localStorage

Form Submission:

taskForm.addEventListener('submit', e => {
  e.preventDefault(); // Stop page reload

  const title = document.getElementById('title').value.trim();
  const desc = document.getElementById('desc').value.trim();
  const priority = document.getElementById('priority').value;

  if(!title || !desc){ alert('Please fill in all fields!'); return; }

  addTask({ title, desc, priority, done: false });
  taskForm.reset(); // Clear form
});

Explanation:

• Prevents default form submission
• Grabs input values
• Validates fields
• Calls addTask
• Resets form

Initial Render:

renderTasks(); // Show saved tasks on page load

Explanation:

• Displays tasks immediately from localStorage

Next Steps

Now that you built this all-in-one JS dashboard, you can:

1. Make more apps: calculators, games, interactive websites
2. Learn frameworks: React, Vue, Node.js
3. Contribute to open source
4. Debug, experiment, and expand features

Your JS skills are your magic wand 🪄. Go break the internet!

Wrap-Up

And that's your complete JavaScript journey—from zero to building a full dashboard!