JS 101

// JS reads this first
let name = "Mikey";        // Step 1: create a variable
name = "Dante";             // Step 2: change the value
console.log(name);          // Step 3: print "Dante"
// This will NOT print "Mikey" — name was changed!

> 2 + 2
< 4
> console.log("Hello World!")
< Hello World!

> console.error("This is an error!")
< ❌ This is an error!

> console.warn("Careful!")
< ⚠️ Careful!

// ✅ let — can be changed
let points = 0;
points = 10;   // OK
// ✅ const — cannot be reassigned
const name = "Mikey";
// name = "Dante";  // ❌ Error! const cannot be changed
// ❌ var — avoid it
var old = "do not use any more";

const greeting = "Hello MyKeyZ!";   // String
const points = 42;                     // Number
const isLoggedIn = false;           // Boolean
const user = null;                  // null — no user yet
let result;                            // undefined until a value is assigned
const cave = { name: "Mikey’s Center", points: 100 }; // Object
console.log(typeof greeting);  // "string"
console.log(typeof points);       // "number"
console.log(typeof null);        // "object" ← well-known JS bug!

const name = "Mikey";
const points = 42;

// ❌ Old way — clumsy
console.log("Hello " + name + "! You have " + points + " points.");

// ✅ Template literal — clean and readable
console.log(`Hello ${name}! You have ${points} points.`);

// Expressions work too
console.log(`Double: ${points * 2} points`);  // Double: 84 points

// Number + string = string (concatenation!)
console.log(1 + "2");    // "12" not 3!
// Other operators force a number
console.log("5" - 2);   // 3
console.log("5" * 2);   // 10
// Convert explicitly — always better!
const input = "42";
const num = Number(input);   // 42 as a number
const text = String(42);        // "42" as text

// && (AND) — both must be true
const canEnter = age >= 16 && hasAccount;

// || (OR) — at least one must be true
const hasAccess = isAdmin || hasPremium;

// ! (NOT) — flips it
const isGuest = !isLoggedIn;

// ?? (Nullish Coalescing) — if null or undefined
const displayName = username ?? "Guest";

const points = 75;

if (points >= 90) {
  console.log("Excellent! 🏆");
} else if (points >= 70) {
  console.log("Well done! ✅");
} else if (points >= 50) {
  console.log("Passed 👍");
} else {
  console.log("Try again 💪");
}
// Output: Well done! ✅

// Long form
let status;
if (isLoggedIn) { status = "Welcome!"; }
else               { status = "Please log in"; }

// Short form (ternary)
const status = isLoggedIn ? "Welcome!" : "Please log in";
const role   = hasPremium   ? "Premium Member" : "Free Member";

const tutorials = ["HTML 101", "CSS 101", "JS 101"];

// Access by index (starts at 0!)
console.log(tutorials[0]);      // "HTML 101"
console.log(tutorials.length); // 3
// Add / remove an element
tutorials.push("Python 101");  // to the end
const last = tutorials.pop(); // remove the last one

const points = [45, 78, 92, 23, 88, 67];

// filter — only points above 70
const good = points.filter(p => p > 70);
console.log(good);  // [78, 92, 88]
// map — double them all
const doubled = points.map(p => p * 2);

// find — first number above 80
const firstBest = points.find(p => p > 80);
console.log(firstBest);  // 92

// Classic for loop
for (let i = 0; i < 5; i++) {
  console.log(`Round ${i}`);
}

// for...of — elegantly through arrays
const colours = ["Red", "Green", "Blue"];
for (const colour of colours) {
  console.log(colour);
}

// forEach — with index
colours.forEach((colour, index) => {
  console.log(`${index}: ${colour}`);
});

function greet(name) {
  return `Hello ${name}! Welcome to the Center.`;
}

console.log(greet("Mikey"));
// Hello Mikey! Welcome to the Center.
function calculateScore(correct, total) {
  const percent = (correct / total) * 100;
  return `${percent.toFixed(1)}%`;
}
console.log(calculateScore(7, 10));  // "70.0%"

// Classic function
function double(n) { return n * 2; }

// Arrow Function — same function, shorter
const double = (n) => { return n * 2; };

// Even shorter — for a one-line return
const double = n => n * 2;

// All three do the same thing!
console.log(double(21));  // 42

// Default Parameter
function greet(name = 'Guest') {
  return `Hello ${name}!`;
}
greet('Mikey');  // 'Hello Mikey!'
greet();         // 'Hello Guest!' — the default kicks in
// Scope — global vs local variable
const appName = "MyKeyZ";   // global — visible everywhere
function showApp() {
  const internal = 'only here';  // local — only in this function
console.log(appName);  // ✅
}
// console.log(internal);  // ❌ Error!

function process(num, operation) {
  return operation(num);
}

const double = n => n * 2;
const square   = n => n * n;

console.log(process(5, double));  // 10
console.log(process(5, square));    // 25
// You already know callbacks! (from chapter 4)
[1,2,3].map(n => n * 10);  // map takes a callback function

// By ID — fastest method
const cave = document.getElementById('cave');

// By CSS selector — most flexible method
const title = document.querySelector('.title');
const firstLink = document.querySelector('nav a');

// All elements
const allButtons = document.querySelectorAll('button');
allButtons.forEach(btn => console.log(btn.textContent));

const title = document.querySelector('h1');

title.textContent = 'Hello Mikey!';        // change the text
title.innerHTML = '<em>Italic</em> and normal'; // set HTML
// Change CSS directly
title.style.color = 'var(--coral)';

// Control classes
const card = document.querySelector('.card');
card.classList.add('active');
card.classList.remove('hidden');
card.classList.toggle('darkmode');  // on/off

const newItem = document.createElement('li');
newItem.textContent = 'New tutorial';
newItem.classList.add('tutorial-item');

const list = document.querySelector('#tutorial-list');
list.appendChild(newItem);  // to the end
list.prepend(newItem);     // to the start
newItem.remove();           // remove

const btn = document.querySelector('#myButton');

// ❌ Not like this — overwrites earlier handlers
btn.onclick = () => console.log("Click 1");
btn.onclick = () => console.log("Click 2");  // overwrites Click 1!
// ✅ Like this — several handlers possible
btn.addEventListener('click', () => console.log("Click 1"));
btn.addEventListener('click', () => console.log("Click 2"));  // both run!

const searchField = document.querySelector('#search');
const list    = document.querySelectorAll('.tutorial-item');

searchField.addEventListener('input', (e) => {
  const searchText = e.target.value.toLowerCase();

  list.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(searchText) ? '' : 'none';
  });
});
// Type, type → filtered live!

// ✅ Event delegation — one listener on the container
document.querySelector('#container').addEventListener('click', (e) => {
  if (e.target.classList.contains('btn')) {
    handler(e.target);
  }
});
// Also works for buttons added later!

const user = {
  name: "Mikey",
  points: 350,
  premium: true,
  cave: "Mikey’s Creative Lab",
};

// Dot notation
console.log(user.name);      // 'Mikey'
// Bracket notation (for dynamic keys)
const field = "name";
console.log(user[field]);     // 'Mikey'
// Add a property
user.badges = ['HTML Master', 'CSS Pro'];

const cave = {
  name: "Mikey’s Center",
  visitors: 0,
  enter() {
    this.visitors++;
    return `Welcome to ${this.name}!`;
  }
};

// Destructuring — unpack properties
const { name, points } = user;

// Spread — copy/extend an object
const extended = { ...user, role: 'admin' };

const user = { name: 'Mikey', points: 350 };

// JS object → JSON string
const json = JSON.stringify(user);
// '{"name":"Mikey","points":350}'
// JSON string → JS object
const data = JSON.parse('{"name":"Mikey","points":350}');
console.log(data.name);  // 'Mikey'
// Nicely formatted (for debugging)
console.log(JSON.stringify(user, null, 2));

console.log('1');
setTimeout(() => console.log('2 (after 1 second)'), 1000);
console.log('3');  // runs BEFORE the '2'!
// Output: 1, 3, 2

async function loadWeather() {
  try {
    const response = await fetch(
      'https://api.open-meteo.com/v1/forecast?latitude=47.42&longitude=9.37&current_weather=true'
    );
    const data = await response.json();
    console.log('Temperature:', data.current_weather.temperature);
  } catch (error) {
    console.error('Error:', error);
  }
}

loadWeather();

// Save — strings only!
localStorage.setItem("username", "Mikey");

// Read
const name = localStorage.getItem("username");

// Delete
localStorage.removeItem("username");

// Objects with JSON
const cave = { name: 'Mikey’s Center', points: 350 };
localStorage.setItem('cave', JSON.stringify(cave));

const loaded = JSON.parse(localStorage.getItem("cave"));
console.log(loaded.name);  // 'Mikey’s Center'

// Load state (or default)
let state = {
  count: JSON.parse(localStorage.getItem("count")) || 0
};

function render() {
  document.querySelector("#display").textContent = state.count;
}

function save() {
  localStorage.setItem("count", JSON.stringify(state.count));
}

document.querySelector("#plus").addEventListener("click", () => {
  state.count++;
  render();
  save();
});

render();  // Show initially