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

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

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.

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

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:

  1. Create a new variable named message, and assign the following to it on the very first line inside the consoleStyler() function body.:
"%c" + txt;
  1. Create a style variable and assign the following to it on the next line:
`color: ${color};`
  1. Next, update the style variable (using the += operator) with the following code:
`background: ${background};`
  1. Then, update the style variable (again, using the += operator) with the following code:
`font-size: ${fontSize};`
  1. 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.

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

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…

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

have you ever heard of console.log?

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:

  1. Create a new variable named message, and assign the following to it on the very first line inside the consoleStyler() function body.:
"%c" + txt;
  1. Create a style variable and assign the following to it on the next line:
`color: ${color};`
  1. Next, update the style variable (using the += operator) with the following code:
`background: ${background};`
  1. Then, update the style variable (again, using the += operator) with the following code:
`font-size: ${fontSize};`
  1. 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:

  1. A new variable, named fontStyle, assigning it this code:
"color: tomato; font-size: 50px";
  1. On the next line, an if statement, verifying that reason == "birthday".
  2. Inside the body of the if block, code the following:
console.log(`%cHappy birthday`, fontStyle);
  1. On the next line, add an else if, and inside the parentheses, check that
reason == "champions"
  1. Inside the else if block, add this code:
console.log(`%cCongrats on the title!`, fontStyle);
  1. 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

  1. Invoke the consoleStyler() function, with the following arguments:
  • '#1d5c63'
  • '#ede6db'
  • '40px'
  • 'Congrats!'
  1. Next, invoke the celebrateStyler() function, with the following argument:
  • 'birthday'

Task 4: Insert a congratulatory and custom message

  1. Code another function, named styleAndCelebrate().
    The function declaration’s body should consist of two function invocations:
consoleStyler(color, background, fontSize, txt);  
celebrateStyler(reason);
  1. 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();

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

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

consoleStyler is still missing a console.log

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?

YOu should log the variables not the function itself

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?

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

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

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…

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

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

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