I have a beginner's exercise in JavaScript and the current code looks like this:

// 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', '40px', 'Congrats!');
celebrateStyler('birthday');


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

The second function (task 2) should accept a single parameter, reason, which should be of string data type. If I run the code in VSC, it works. However, in the grading system I get the following:

Failed Test 2: Not logging celebrateStyler() variables

Failed Test 3: Not calling consoleStyler() and celebrateStyler()

I tried different options to declare the parameter as a string (using typeof mostly), but unfortunately I get the same result.

Can you maybe take a look and give me some advice on how to approach the situation using only JS? Thank you for your time!

I have a beginner's exercise in JavaScript and the current code looks like this:

// 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', '40px', 'Congrats!');
celebrateStyler('birthday');


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

Failed Test 2: Not logging celebrateStyler() variables

Failed Test 3: Not calling consoleStyler() and celebrateStyler()

I tried different options to declare the parameter as a string (using typeof mostly), but unfortunately I get the same result.

Can you maybe take a look and give me some advice on how to approach the situation using only JS? Thank you for your time!

Share Improve this question edited Aug 5, 2022 at 11:09 Lajos Arpad 77.4k40 gold badges117 silver badges222 bronze badges asked Aug 5, 2022 at 10:56 Patricia Cosma 231 silver badge7 bronze badges

the celebrateStyler accepts only single parameter, however in task 3 you are executing that function with 4 parameters. – vanowm Commented Aug 5, 2022 at 11:02
I think this should satisfy; if(typeof reason !== 'string') { //return some error } // otherwise run the function – Apak Commented Aug 5, 2022 at 11:04

Add a ment |

6 Answers 6

Sorted by: Reset to default 4

plete solution got 100/100

// 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(reason,fontStyle);
    }
}

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


// // Task 4: Insert a congratulatory and custom message
function styleAndCelebrate(color, background, fontSize, txt ,reason) {
consoleStyler(color, background, fontSize, txt);
celebrateStyler(reason);
}
// Call styleAndCelebrate

styleAndCelebrate('ef7c8e','fae8e0','30px','You made it!','champions');

enter code here

//

Parameter types

Javascript is a weakly typed language, which, in you case means that you cannot enforce a certain type to be the type of a parameter.

Understanding the errors

You get a text that contains "Failed Test : ".

So, the very interesting part is the test name, which hints for the objective.

Not logging celebrateStyler() variables

The expectation in the title of this section shows that there is a test scenario which expects your code to avoid logging the variables. Let's see the function:

// 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); 
    }
}

This function will perform a call on console.log whatever reason is. Yet, you should not do this logging as per the specification if reason is not a string. So, you need to do some type checking and if the parameter is a string, only then perform your logic. I'm doing a sample implementation in the snippet below, which you can of course adjust to your needs:

// Task 2: Build another console log message generator
function celebrateStyler(reason) {
    if (typeof reason === "string") {
        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(reason, fontStyle); 
        }
    } else {
        //If you want to do something with a nonstring reason, this is the right place to do it
    }
}

celebrateStyler('birthday'); //Happy Birthday
celebrateStyler('champions'); //Congrats on the title!
celebrateStyler('Wele Back!'); //Wele Back
celebrateStyler(42); //No logging, because it's not a string

Note that I have changed the connsole.log in your last else block to use the same style. If you dislike this, you can use your own message and style, of course.

Not calling consoleStyler() and celebrateStyler()

This is telling you that styleAndCelebrate should not call the functions mentioned above. As a result, you need to check for the type of reason and if it's not a string, then don't call the methods:

// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate(color, background, fontSize, txt, reason) {
    if (typeof reason === "string") {
        consoleStyler(color, background, fontSize, txt);  
        celebrateStyler(reason);
    }
}

You can find the plete solution here.

// Task 1: Build a function-based console log message generator
function consoleStyler(color,background,fontSize,txt) {
    message = "%c" + txt
    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) {
 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','40px','congrats!');
celebrateStyler('birthday');

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

Hopefully, this will work as expected! Happy coding...

// 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(reason, fontStyle);
    }
    
}

// Task 3: Run both the consoleStyler and the celebrateStyler functions
consoleStyler('#1d5c63', '#ede6db', '40px', 'Congrats!');
celebrateStyler('birthday');
                                    // Task 4: Insert a congratulatory and custom message
function styleAndCelebrate(color, background, fontSize, txt,reason) {
    consoleStyler(color, background, fontSize, txt);  
    celebrateStyler(reason);
}
// Call styleAndCelebrate
styleAndCelebrate('ef7c8e', 'fae8e0', '30px', 'You made it!', 'champions');`enter code here`

Just Copy and paste the console message from the instruction and your all test will simply pass! :)

    // Task 1: Build a function-based console log message generator
    var message;
    var style;
function consoleStyler(color,background,fontSize,txt) {
    message = "%c" + txt;
    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', '40px', 'Congrats!');
       celebrateStyler('birthday')
// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate(color, background, fontSize, txt, reason)
{
    consoleStyler(color, background, fontSize, txt);
    celebrateStyler(reason);
}
// Call styleAndCelebrate
styleAndCelebrate('ef7c8e','fae8e0','30px','You made it!','champions')

// Task 1: Build a function-based console log message generator
var message;
var style;
function consoleStyler(color,background,fontSize,txt) {
    message = "%c" + txt;
    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', '40px', 'Congrats!');
celebrateStyler('birthday')

// Task 4: Insert a congratulatory and custom message
function styleAndCelebrate(color, background, fontSize, txt, reason)
{

    consoleStyler(color, background, fontSize, txt);
    celebrateStyler(reason);
}
// Call styleAndCelebrate
styleAndCelebrate('ef7c8e','fae8e0','30px','You made it!','champions')

The problem everyone facing is that the massage and the style variable must be defined at the scope of the code before the first function most of us were defining these variables at the consoleStyler function.

The problem is we call them on console.log at the celebrateStyler function in the else statement.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to declare the parameter in a JS function to be only string data type? - Stack Overflow