Coursera Help ! i’m stuck when update update the style variable using the += operator

Rahmad · August 17, 2022, 5:29am

function consoleStyler(color,background,fontSize,txt) {
    message = "%c" + txt;
    style = `color: ${color};`
}

Help me ! i’m stuck and didn’t know how update update the style variable using the += operator with this following code = background: ${background};

nibble · August 17, 2022, 5:56am

Hi @Rahmad

Welcome to FCC. If you are working on FCC challenge it is better to provide a link to the challenge description. If you are not, my understanding of your problem is that you want to use += to set the value of style to background: ${background}. If that is correct, then it is possible only if the initial value of style is an empty string. If that is the case then you can do the following:

styles += 'background: ' + background + ';'
// OR  styles += `background:  ${background};`

But if styles can take an initial value other than an empty string, then it is not possible to get background: ${background}; using +=. You will just need to reassign styles like so:

styles = `background:  ${background};`

I hope that helps.

Rahmad · August 17, 2022, 6:16am

Hi @nibble thanks for your reply,

first thing first i’ve been doin’ coursera challenge right now and i’ve been update my code like you did but still doesn’t work in coursera challenge…
this is my update:

function consoleStyler(color,background,fontSize,txt) {
    message = "%c" + txt
    style = `color: ${color};`
    style += `background: ${background};`
    style += `font-size: ${fontSize};`
}

and this is the reply from coursera challenge when i submit my code :
Failed Test 1: Not logging the consoleStyler() variables

Rahmad · August 17, 2022, 6:20am

Hi @nibble
this is the task from the challange :

Task 1: Build a function-based console log message generator

In this exercise, your task is to code a function named consoleStyler, which accepts four parameters:

color
background
fontSize
txt

Inside the body of the consoleStyler() function declaration, you need to do the following:

Create a new variable named message, and assign the following to it on the very first line inside the consoleStyler() function body.:

"%c" + txt;

Create a style variable and assign the following to it on the next line:

`color: ${color};`

Next, update the style variable (using the += operator) with the following code:

`background: ${background};`

Then, update the style variable (again, using the += operator) with the following code:

`font-size: ${fontSize};`

Finally, console log the message and style variables inside the consoleStyler function declaration.

Hint: Be sure to use backticks (``) when updating your variable styles and not single (‘’) or double (“”) quotes.

ilenia · August 17, 2022, 6:38am

you are missing this one - you don’t do anything with the values inside the function

Rahmad · August 17, 2022, 7:04am

Hi @ilenia ,
I’ve been put the value inside the function and still doesn’t work…

function consoleStyler(color,background,fontSize,txt) {
message = "%c" + txt
    style = `color: ${color};`
    style += `background: ${background};`
    style += `font-size: ${fontSize};`
}
consoleStyler('#1d5c63','#ede6db','40px','congrats!');

because this challenge have 4 task and i’ve been pas task 2 but task 1,3 and 4 still failed…

ilenia · August 17, 2022, 7:05am

you need to log them, right now they can’t be seen outside the function

have you ever heard of console.log?

Rahmad · August 17, 2022, 7:08am

this is the task challenge i’ve been working on :

Task 1: Build a function-based console log message generator

In this exercise, your task is to code a function named consoleStyler, which accepts four parameters:

color
background
fontSize
txt

Inside the body of the consoleStyler() function declaration, you need to do the following:

Create a new variable named message, and assign the following to it on the very first line inside the consoleStyler() function body.:

"%c" + txt;

Create a style variable and assign the following to it on the next line:

`color: ${color};`

Next, update the style variable (using the += operator) with the following code:

`background: ${background};`

Then, update the style variable (again, using the += operator) with the following code:

`font-size: ${fontSize};`

Finally, console log the message and style variables inside the consoleStyler function declaration.

Hint: Be sure to use backticks (``) when updating your variable styles and not single (‘’) or double (“”) quotes.

Task 2: Build another console log message generator.

Your task is to code another function, and name it celebrateStyler(). The function accepts a single parameter, reason, which should be of string data type.

Inside the function declaration’s body, code the following:

A new variable, named fontStyle, assigning it this code:

"color: tomato; font-size: 50px";

On the next line, an if statement, verifying that reason == "birthday".
Inside the body of the if block, code the following:

console.log(`%cHappy birthday`, fontStyle);

On the next line, add an else if, and inside the parentheses, check that

reason == "champions"

Inside the else if block, add this code:

console.log(`%cCongrats on the title!`, fontStyle);

Add an else block, with the following code inside of it:

console.log(message, style);

Task 3: Run both the consoleStyler and the celebrateStyler functions

Invoke the consoleStyler() function, with the following arguments:

'#1d5c63'
'#ede6db'
'40px'
'Congrats!'

Next, invoke the celebrateStyler() function, with the following argument:

'birthday'

Task 4: Insert a congratulatory and custom message

Code another function, named styleAndCelebrate().
The function declaration’s body should consist of two function invocations:

consoleStyler(color, background, fontSize, txt);  
celebrateStyler(reason);

Next, invoke the new function, using the following arguments:

'ef7c8e'
'fae8e0'
'30px'
'You made it!'
'champions'

and this is my code :

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


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

ilenia · August 17, 2022, 7:09am

You don’t need to send it again, as I quoted before, you are missing this

Rahmad · August 17, 2022, 7:11am

I’m sorry @ilenia, i learn javascript program and understand console.log too…

please check my reply above and correct me if i still wrong

ilenia · August 17, 2022, 7:12am

consoleStyler is still missing a console.log

Rahmad · August 17, 2022, 7:15am

function consoleStyler(color,background,fontSize,txt) {
    message = "%c" + txt
    style = `color: ${color};`
    style += `background: ${background};`
    style += `font-size: ${fontSize};`
    console.log(message,style)
}

how about this?

ilenia · August 17, 2022, 7:16am

YOu should log the variables not the function itself

Rahmad · August 17, 2022, 7:17am

function consoleStyler(color,background,fontSize,txt) {
    message = "%c" + txt
    style = `color: ${color};`
    style += `background: ${background};`
    style += `font-size: ${fontSize};`
    console.log(message,style)
}

like this right?

ilenia · August 17, 2022, 7:17am

I don’t have the testing environment available myself, you should know

Rahmad · August 17, 2022, 7:20am

thank you very much @ilenia , i pass the challenge now …

Rahmad · August 17, 2022, 7:24am

thanks for the reply @ilenia
i’m a beginner at programming and still learning javascript now
can you advice me some tips to become the expert of programming…

ilenia · August 17, 2022, 7:24am

keep practicing and asking for help, and build your own projects and contribute to open source

fazalali555 · August 19, 2022, 7:04am

I’m Still stuck, could you please help me?

fazalali555 · August 19, 2022, 7:07am

Your code could not be executed. Error: SyntaxError: Unexpected token ‘;’
at Object. (/home/coder/project/autograde/grader.js:135:43)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
at internal/main/run_main_module.js:17:47