ReferenceError: color is not defined

I am learning the concepts of Functional Programming and came across an exercise that has me pretty stumped. When I go to Invoke consoleStyler() in Task 4, it gives me a Reference Error: color is not defined. I followed the step by step instructions on the course to get this current code as well as played around with it myself and I can’t seem to satisfy the error. Could someone explain to me why I am getting this error? I genuinely would like to understand what I am doing wrong.

// Task 1: Build a function-based console log message generator
function consoleStyler(color, background, fontSize, txt) {
    var message = "%c" + txt;
    var style = `color: ${color};`
    style += `background: ${background};`
    style += `font-size: ${fontSize};`
    console.log(message, style);
}

// Task 2: Build another console log message generator
function celebrateStyler(reason) {
    var fontStyle = "color: tomato; font-size: 50px";
    if (reason == "birthday") {
        console.log(`%cHappy Birthday`, fontStyle);
    } else if (reason == "champions") {
        console.log(`%cCongrats on the title!`, fontStyle);
    } else {
        console.log(message, style);
    }
}

// Task 3: Run both the consoleStyler and the celebrateStyler functions
consoleStyler('#1d5c63', '#ede6db', '4px', 'Congrats!');
celebrateStyler('birthday');

// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate() {
    consoleStyler(color, background, fontSize, txt);
    celebrateStyler(reason);
}
// Call styleAndCelebrate
styleAndCelebrate('ef7c8e', 'fae8e0', '30px', 'You made it!', 'Champions')

Answer

I’ve moved the consoleStyler and celebrateStyler functions with your input params inside the styleAndCelebrate(). The reason it wasn’t working before was because due to scoping, styleAndCelebrate() didn’t know that value of the params inside its function. Hope this helps.

// Task 1: Build a function-based console log message generator
function consoleStyler(color, background, fontSize, txt) {
  var message = "%c" + txt;
  var style = `color: ${color};`
  style += `background: ${background};`
  style += `font-size: ${fontSize};`
  console.log(message, style);
}

// Task 2: Build another console log message generator
function celebrateStyler(reason, txt) {
  var message = "%c" + txt;
  var fontStyle = "color: tomato; font-size: 50px";
  if (reason == "birthday") {
    console.log(`%cHappy Birthday`, fontStyle);
  } else if (reason == "champions") {
    console.log(`%cCongrats on the title!`, fontStyle);
  } else {
    console.log(message, fontStyle);
  }
}

// Task 3: Run both the consoleStyler and the celebrateStyler functions


// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate() {
  consoleStyler('#1d5c63', '#ede6db', '4px', 'Congrats!');
  celebrateStyler('champions');
}
// Call styleAndCelebrate
styleAndCelebrate();