DEV Community

Cover image for Part 7: All You Need to Know to Master Web Development With HTML CSS and JavaScript
Blackie
Blackie

Posted on • Updated on

Part 7: All You Need to Know to Master Web Development With HTML CSS and JavaScript

Conquering Control Flow: Your Guide to JavaScript's Decision-Making Power.

Contents

Introduction
Conditional Statements
Loops
Break and Continue
Projects
References and Resources

Unlocking Dynamic JavaScript with Control Flow

Control flow is like a director, guiding your code through various paths and decisions. It's essential for building interactive and responsive programs that adapt to user input and changing conditions. Here's a guide to mastering control flow in JavaScript, packed with examples and use cases:

Key Concepts and Examples

1. Conditional Statements:

  • if/else:

    • Example: "If the user is logged in, display their profile. Else, show the login page."
      if (isLoggedIn) {
        showProfile();
      } else {
        showLoginPage();
      }
    
  • switch/case:

    • Example: "Choose a language based on the user's selection."
      switch (selectedLanguage) {
        case "en":
          setLanguage("English");
          break;
        case "es":
          setLanguage("Spanish");
          break;
        default:
          setLanguage("English"); // Default option
      }
    

2. Loops:

  • for loop:

    • Example: "Count down from 10 to 1, displaying each number."
      for (let i = 10; i >= 1; i--) {
        console.log(i);
      }
    
  • while loop:

    • Example: "Repeat a quiz question until the user answers correctly."
      while (answer !== correctAnswer) {
        askQuestion();
        answer = getUserInput();
      }
    
  • for...of loop:

    • Example: "Display each item in a shopping cart."
      for (const item of cartItems) {
        console.log(item.name, item.price);
      }
    

3. Break and Continue:

  • Break:

    • Example: "Exit a loop when a specific condition is met."
      for (let i = 0; i < 100; i++) {
        if (foundItem) {
          break; // Exit the loop when item is found
        }
        // Continue searching...
      }
    
  • Continue:

    • Example: "Skip to the next iteration of a loop."
      for (let i = 0; i < numbers.length; i++) {
        if (numbers[i] % 2 === 0) {
          continue; // Skip even numbers
        }
        // Process odd numbers...
      }
    

Projects

Project 1: Coin Flipping Game

function playCoinGame() {
  let correctGuesses = 0;
  const totalFlips = 3; // Adjust for desired number of flips

  for (let i = 1; i <= totalFlips; i++) {
    const coinFlip = Math.random() >= 0.5 ? "heads" : "tails";
    console.log(`Flip ${i}: Guess heads or tails?`);

    let userGuess = "";
    while (userGuess !== "heads" && userGuess !== "tails") {
      userGuess = prompt("Enter your guess (heads or tails):").toLowerCase();
      if (userGuess !== "heads" && userGuess !== "tails") {
        console.log("Invalid guess. Please enter heads or tails.");
      }
    }

    if (userGuess === coinFlip) {
      console.log(`Correct! It's ${coinFlip}.`);
      correctGuesses++;
    } else {
      console.log(`Incorrect. It was ${coinFlip}.`);
    }
  }

  console.log(`You guessed ${correctGuesses} out of ${totalFlips} correctly.`);
}

playCoinGame();
Enter fullscreen mode Exit fullscreen mode

Project 2: Text-Based Adventure Game

let currentRoom = "start";

function startRoom() {
  console.log("You are in a dark forest.");
  console.log("There is a path to the north and a cave to the east.");
  let choice = prompt("Do you go north or east?");
  if (choice.toLowerCase() === "north") {
    currentRoom = "north";
  } else if (choice.toLowerCase() === "east") {
    currentRoom = "cave";
  } else {
    console.log("Invalid choice.");
    startRoom();
  }
}

// Add more rooms and choices as needed

startRoom();
Enter fullscreen mode Exit fullscreen mode

Project 3: Password Generator

function generatePassword(length, requirements) {
  let characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+-=[]{};':\"\\|,.<>/?";
  let password = "";

  for (let i = 0; i < length; i++) {
    let randomIndex = Math.floor(Math.random() * characters.length);
    let character = characters[randomIndex];

    // Check requirements (example)
    if (requirements.includes("uppercase") && !/[A-Z]/.test(password)) {
      character = character.toUpperCase();
    }

    password += character;
  }

  return password;
}

const password = generatePassword(12, ["uppercase", "number", "symbol"]);
console.log(password);
Enter fullscreen mode Exit fullscreen mode

References and Resources

Official Documentation:

Tutorials and Articles:

Books:

Videos:

Top comments (0)