Build an Email Masker - Build an Email Masker

Tell us what’s happening:

Poor preparation for such a complex problem. The only way to solve this at this point in my training is to review successful results and try to understand what’s happening.

Your code so far

function maskEmail(email) {
  
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Challenge Information:

Build an Email Masker - Build an Email Masker

Start small.

You’ve created a function :white_check_mark: Perfect first step.
It takes email as an argument :white_check_mark:

Next,

  1. Inside the function, you should mask the email and append the domain name to it. Remember that you can use methods like slice, repeat, indexOf or even replace to help you.

This is a bit more complicated. Break it down into simpler steps.

  1. Inside your function log email to console so you can see what’s coming in
  2. call your function with test input so you can confirm it’s working so far
  3. try using slice in the console.log() that you’ve added to modify email

Search for “javascript slice” if you need a reminder on how to use it.

Tell us what’s happening:

I’ve already previously stated that the preparation for such a complex problem at this point in the training was lacking. I had to google results and use ChatGPT to show me the solution and how it was doing this. At this point I think I understand everything except “username[0]”. I’ve tried to delete or change the “[0]” and it does strange things that I can’t comprehend. I’ve deleted the return since you don’t want a result posted. Please help me understand what the “[0]” is doing.

Your code so far

function maskEmail(email) {
  let atIndex = email.indexOf("@");
  console.log(atIndex);
  let username = email.slice(0, atIndex);
  console.log(username);
  let domain = email.slice(atIndex);
  console.log(domain);

  let maskedUsername =
    username[0] +
    "*".repeat(username.length - 2) +
    username[username.length - 1];
    console.log(maskedUsername);


}

let email = "apple.pie@example.com";
console.log(maskEmail(email));
email = "freecodecamp@example.com";
console.log(maskEmail(email));
email = "info@test.dev";
console.log(maskEmail(email));
email = "user@domain.org";
console.log(maskEmail(email));

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Challenge Information:

Build an Email Masker - Build an Email Masker

I figured it out. domain[0] is pulling the first letter from the domain string.

1 Like

please do not create multiple posts for the same challenge

At some point here always must be a leap in difficulty that will challenge you.

You might need to experiment or look up documentation outside freeCodeCamp. Experimentation and research are key programming skills.

The challenge even mentions to use some methods:

Remember that you can use methods like slice, repeat, indexOf or even replace to help you.

What knowledge do you think you were lacking?

Personally, I think this particular leap in difficulty is unreasonable. It’s only by finding other people’s solutions to this challenge that I have any idea how to solve it. For one thing, I don’t think we were ever taught that variables can be used as arguments in methods. We’re taught that they accept numbers as arguments, so without having seen someone else’s answer I wouldn’t have known how to repeat the asterisk up until the last character before the @ symbol.

I think the user should be walked through a task of this complexity, right through to the solution, as would have been done in the previous JavaScript curriculum. Then we’d be ready to have our skills tested. Lectures followed by multiple-choice quizzes don’t really build an understanding.

That’s just my two cents.

So you agree with what the OP has written here?

After reviewing the functions section, I can see what you mean. Would it help if User Story 4 was reworded here?

  1. Call the maskEmail function with the email variable and output the result to the console.

What if it said:

  1. Call the maskEmail function with the email variable as an argument and output the result to the console.

Would that make it more clear that the function can take the variable as an argument?

Additionally, I agree with you, it should be added to the first introduction of functions, an example where a variable is passed as an argument, just to make it clear.

You use often functions with variables up to this points, and methods are also functions

what would you suggest be done to make this more clear?

I was thinking more in methods. For example, I used as part of my answer…

.repeat(symbolIndex - 2)

…where symbolIndex is a variable I created in my function. I would not have known that the variable could be used as an argument in a method like this if I hadn’t seen someone post their answer on the forum.

I don’t think we were taught that methods are functions, because the lessons on methods came before the lessons on functions. Don’t forget that a lot of people coming to the JavaScript curriculum have, like me, no programming experience besides HTML and CSS, so all of that terminology is new.

In the section where we’re introduced to, say, string methods, I think it could be taught that, in addition to numbers, variables can also be used as arguments. For example, the lesson How Can You Repeat a String x Number of Times? gives the impression that only numbers are used in the .repeat() method.

would you be willing to leave this feedback in a GitHub Issue?

I’d have to create a Github account, but I can do that if it would be helpful.

How do you think would be best to present it? Would I post an issue about the Build An Email Masker exercise that this forum thread is about, saying that we were not instructed about using variables as arguments, or were you thinking an issue about the lesson How Can You Repeat a String x Number of Times? stating that some instruction should be included about using variables as arguments?

you can bring up both of them at the same time, they are connected

Ok, done. I created a new issue. :+1: