functions_pt1_10.5.md

30 min, paper challenge (original, no refactor)

const chooseFriendsgiving = (hasFood, familyThere, within2Miles, noFood) => {
    let decision = "Stay Home";

    if (hasFood && !familyThere) {
        decision = "Friend 1's House";
    } else if (hasFood && familyThere && within2Miles) {
        decision = "Friend 2's House";
    } else if (noFood && !familyThere) {
        decision = "Friend 3's House";
    }

    return decision;
};

// Example usage:
console.log(chooseFriendsgiving(true, false, false, false)); // Visiting Friend 1's House

30 min, paper challenge (refactor)

const friendsGiving = (hasFood, familyThere, within2Miles) => {
  

  if(hasFood && !familyThere){
    return "Visiting Friend 1";
  }
  else if(hasFood && familyThere && within2Miles){
    return "Visiting Friend 2";
  }
  else if(!familyThere && !hasFood){
    return  "Visiting Friend 3";
  }
  else {
    return "Stay Home";
  }
}



console.log(friendsGiving(0,0,0)); /// friendsgiving(false, false, false)

Bubble Generator

const button = document.querySelector('.button');


button.addEventListener('click', () => {
  generateCircle();
});



function generateCircle() {
  let arrayOfColors = ["red", "green", "blue"];
  let color = arrayOfColors[Math.floor(Math.random() * arrayOfColors.length)];

  
  const circle = document.createElement("div");
  circle.style.width = "50px";
  circle.style.height = "50px";
  circle.style.backgroundColor = color;
  circle.style.borderRadius = "50%";
  circle.style.position = "absolute";
  document.body.appendChild(circle);

  let x = Math.random() * window.innerWidth;
  let y = Math.random() * window.innerHeight;

  circle.style.left = x + "px";
  circle.style.top = y + "px";

  let dx = 5;
  let dy = 5;

  function moveCircle() {
    x += dx;
    y += dy;
    circle.style.left = x + "px";
    circle.style.top = y + "px";

    if (x + circle.offsetWidth > window.innerWidth || x < 0) {
      dx = -dx;
    }
    if (y + circle.offsetHeight > window.innerHeight || y < 0) {
      dy = -dy;
    }
  }

  setInterval(moveCircle, 10);
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Button Example</title>
</head>
<body>
  <button class="button" >Click me</button>
  <script src="script.js"></script>
</body>
</html>

Session

/*Function Definition: How to define a function, including its name and parameters.
*/

function sayHello(){
  console.log("1");
  console.log("Hello, World!");
}


/*
Parameters and Arguments: The difference between parameters (variables in the function definition) and arguments (values passed to the function).
*/

function whosOnTheWebsite(name){
  if(name){
    return name;
  }
  else{
    return "we have no name";
  }
}

/*
Function Body: The code block where the function's operations are performed.

Return Statement: How a function returns a value.

Calling (invoking) the Function: How to execute the function with specific arguments.*/

/// invoke/call functions here
// sayHello();
// console.log(sayHelloWithName());
// console.log(sayHelloWithName("Fellow"));

let newName = whosOnTheWebsite("Fellow");

console.log(newName);

CastonPursuit/functions_pt1_10.5.md

30 min, paper challenge (original, no refactor)

30 min, paper challenge (refactor)

Bubble Generator

Session