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')
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();Your problem is your code is trying to use variables that haven't been declared.
The first error is in Task 2, the last else tries to log using the non-existent variables 'message' and 'style'. I assume that was from the exercise and you just forgot to update those like you did with the other conditions.
The other error is in Task 4. When you execute Task 4 you pass it 5 values, but your function declaration for Task 4 doesn't contain any of those input variables.
Task 4 should read as the below to work:
// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate(color, background, fontSize, txt, reason) {
consoleStyler(color, background, fontSize, txt);
celebrateStyler(reason);
}