Web Development 3

So far, your code runs top to bottom, one line after another. Control flow lets you make decisions and repeat actions. Functions let you package code into reusable chunks. This is where programming starts to feel powerful.

Conditional Statements (if/else)

Conditionals let your code make decisions based on whether something is true or false:

const age = 25;

if (age >= 18) {
  console.log('You are an adult');
} else if (age >= 13) {
  console.log('You are a teenager');
} else {
  console.log('You are a child');
}

// Ternary operator — shorthand for simple if/else
const status = age >= 18 ? 'adult' : 'minor';
console.log(status);  // 'adult'

Loops

Loops repeat code multiple times. Two main types:

// for loop — when you know how many times to repeat
for (let i = 0; i < 5; i++) {
  console.log(`Iteration ${i}`);  // 0, 1, 2, 3, 4
}

// for...of loop — iterate over arrays (much cleaner)
const platforms = ['Reddit', 'Twitter', 'Instagram', 'TikTok'];
for (const platform of platforms) {
  console.log(`Check out ${platform}`);
}

// forEach — array method for iterating
platforms.forEach((platform, index) => {
  console.log(`${index + 1}. ${platform}`);
});

// while loop — when you don't know how many times
let count = 0;
while (count < 3) {
  console.log(`Count: ${count}`);
  count++;
}

Function Declarations

Functions are reusable blocks of code. Define once, use anywhere:

// Function declaration
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Kiarra'));  // 'Hello, Kiarra!'

// Function with multiple parameters
function calculateTotal(price, quantity, taxRate) {
  const subtotal = price * quantity;
  const tax = subtotal * taxRate;
  return subtotal + tax;
}
console.log(calculateTotal(9.99, 3, 0.08));  // 32.3676

// Default parameters
function createUser(name, role = 'viewer') {
  return { name, role };
}
console.log(createUser('Kiarra'));           // { name: 'Kiarra', role: 'viewer' }
console.log(createUser('Jasper', 'admin'));   // { name: 'Jasper', role: 'admin' }

Arrow Functions

Arrow functions are a shorter syntax for writing functions. You'll see them everywhere in modern JavaScript:

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

// Arrow function (same thing)
const double = (n) => {
  return n * 2;
};

// Arrow function (even shorter — implicit return)
const double = (n) => n * 2;

// Arrow function with no parameters
const sayHello = () => 'Hello!';

// Practical example: filtering an array
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens);  // [2, 4, 6, 8, 10]

const doubled = numbers.map(n => n * 2);
console.log(doubled);  // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

When to use which: Use arrow functions for short, simple operations (callbacks, array methods). Use regular function declarations for named functions that form the core of your program.

The DOM (Document Object Model) is the browser's live representation of your HTML page. When JavaScript talks to the DOM, it can read, change, add, or remove any element on the page. This is how web pages become interactive.

Selecting Elements

Before you can change something, you need to find it. These are the methods you'll use 99% of the time:

// Select by ID — returns one element
const header = document.getElementById('main-header');

// Select by CSS selector — returns first match
const firstButton = document.querySelector('.btn');
const navLink = document.querySelector('nav a');

// Select multiple elements — returns a NodeList
const allButtons = document.querySelectorAll('.btn');
const allLinks = document.querySelectorAll('a');

// Loop through a NodeList
allButtons.forEach(button => {
  console.log(button.textContent);
});

Use querySelector and querySelectorAll for almost everything. They accept any CSS selector, so you already know the syntax from writing CSS.

Event Listeners

Events are things that happen on the page: clicks, key presses, form submissions, scrolling, hovering. Event listeners let you run code when those things happen:

const button = document.querySelector('#my-button');

// Listen for a click
button.addEventListener('click', () => {
  console.log('Button was clicked!');
});

// Listen for a click with the event object
button.addEventListener('click', (event) => {
  console.log('Clicked element:', event.target);
  console.log('Mouse position:', event.clientX, event.clientY);
});

// Common events:
// 'click'       — mouse click
// 'submit'      — form submission
// 'keydown'     — key pressed
// 'input'       — input value changed
// 'mouseover'   — mouse enters element
// 'mouseout'    — mouse leaves element
// 'scroll'      — page scrolled
// 'DOMContentLoaded' — page finished loading

// Form submission
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();  // Stop the page from reloading!
  const data = new FormData(form);
  console.log('Name:', data.get('name'));
});

Manipulating Content

Once you've selected an element, you can change anything about it:

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

// Change text
heading.textContent = 'New Heading Text';

// Change HTML (be careful — don't use with user input)
heading.innerHTML = 'New <em>Heading</em> Text';

// Change styles
heading.style.color = '#a78bfa';
heading.style.fontSize = '2rem';

// Add/remove CSS classes (preferred over inline styles)
heading.classList.add('highlighted');
heading.classList.remove('hidden');
heading.classList.toggle('active');  // Add if missing, remove if present

// Change attributes
const link = document.querySelector('a');
link.setAttribute('href', 'https://exocreate.online');
link.getAttribute('href');  // 'https://exocreate.online'

// Create new elements
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This paragraph was created by JavaScript';
newParagraph.classList.add('dynamic-content');
document.querySelector('article').appendChild(newParagraph);

// Remove elements
const oldElement = document.querySelector('.remove-me');
oldElement.remove();

Now you have the tools. This module is about putting them together into real features you'd find on actual websites. Each project combines HTML structure, CSS styling, and JavaScript interactivity.

Show/Hide Patterns

The most common interactive pattern on the web: click something → something else appears or disappears. Modals, dropdowns, mobile menus, accordions — all show/hide.

// Basic show/hide toggle
const toggleBtn = document.querySelector('#toggle-btn');
const content = document.querySelector('#hidden-content');

toggleBtn.addEventListener('click', () => {
  content.classList.toggle('visible');
});

// CSS for smooth animation:
// .hidden-content { max-height: 0; overflow: hidden; transition: max-height 0.3s; }
// .hidden-content.visible { max-height: 500px; }

The key insight: don't use JavaScript to change styles directly. Use JavaScript to toggle CSS classes, and let CSS handle the visual change. This keeps your code clean and your animations smooth.

Form Validation

HTML has built-in validation (required, type="email", minlength), but JavaScript lets you create custom validation with better user feedback:

const form = document.querySelector('#signup-form');
const emailInput = document.querySelector('#email');
const passwordInput = document.querySelector('#password');
const errorDisplay = document.querySelector('#error-message');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const errors = [];

  // Email validation
  const email = emailInput.value.trim();
  if (!email) {
    errors.push('Email is required');
  } else if (!email.includes('@')) {
    errors.push('Please enter a valid email');
  }

  // Password validation
  const password = passwordInput.value;
  if (password.length < 8) {
    errors.push('Password must be at least 8 characters');
  }

  // Show errors or submit
  if (errors.length > 0) {
    errorDisplay.textContent = errors.join('. ');
    errorDisplay.classList.add('visible');
  } else {
    errorDisplay.classList.remove('visible');
    console.log('Form is valid! Submitting...');
    // In a real app, you'd send data to a server here
  }
});

Dark Mode Toggle

Dark mode is a practical feature that teaches you about CSS custom properties, localStorage (remembering user preferences), and class toggling:

// HTML: <button id="theme-toggle">🌙 Dark Mode</button>

const toggle = document.querySelector('#theme-toggle');

// Check for saved preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  document.body.classList.add('dark-mode');
  toggle.textContent = '☀️ Light Mode';
}

toggle.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  const isDark = document.body.classList.contains('dark-mode');

  // Update button text
  toggle.textContent = isDark ? '☀️ Light Mode' : '🌙 Dark Mode';

  // Save preference
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

// CSS uses custom properties for theming:
// body { --bg: #fff; --text: #111; --accent: #7c3aed; }
// body.dark-mode { --bg: #111827; --text: #d1d5db; --accent: #a78bfa; }
// Use: background: var(--bg); color: var(--text);

Dynamic Content Filtering

Content filters let users show/hide items based on categories — like filtering a portfolio by type or a product list by category:

// HTML: buttons with data-filter attribute + items with data-category
const filterBtns = document.querySelectorAll('[data-filter]');
const items = document.querySelectorAll('.portfolio-item');

filterBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const filter = btn.dataset.filter;

    // Update active button
    filterBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    // Show/hide items
    items.forEach(item => {
      if (filter === 'all' || item.dataset.category === filter) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  });
});