0

I have this simple block of code written with OOP. I want to manipulate this sentence so that the last parameter (faveColor), is changed to the actual colour specified. I know I need to write some sort of function to do this but I can't work out how.

I am really confused as to how to go about this in the cleanest possible way. Basically so that the sentence outputs 'Hello, my name is John Doe and my favourite colour is ${red/orange/blue/green} etc. with the color changing for each choice.

 function Person(fullName, faveColour) {
      this.name = fullName;
      this.favouriteColour = faveColour;
      this.greet = function () {
        return `Hello, my name is ${this.name} and my favourite colour is ${this.favouriteColour}`;
      };
    }

const john = new Person('John Doe', 'red');
john.greet();

const jane = new Person('Jane Doe', 'orange');
jane.greet();

const red = '#ff0000';
const orange = '#ffa500';
Josh
  • 45
  • 5
  • 2
    Where are you displaying this string? Browser? Browser's console? Node? – adiga Dec 08 '20 at 19:13
  • Assuming you want to change the text color: Strings don't have colors, but they can sometimes be displayed with color. However, that will depend on how you are displaying the string. Node.js or browser? – Brian McCutchon Dec 08 '20 at 19:13
  • 1
    It doesn't make sense to be giving a string a colour. Strings just store the data. If you want it to output to the console then I don't think it's possible to manually change the colour. If you are putting it in a website, then you could wrap the colour word with `span` tags and apply css styles to them. – Keldan Chapman Dec 08 '20 at 19:14
  • What's wrong with what you have? It seems to manipulate the sentence just fine? If you wanted to be "cleaner" you could make greet an arrow function. – Calculuswhiz Dec 08 '20 at 19:15
  • it works fine If I understood correctly – dippas Dec 08 '20 at 19:16
  • 1
    @KeldanChapman If it's stdout in Node.js, it's definitely possible to color it (at least on some systems/terminals). – Brian McCutchon Dec 08 '20 at 19:17
  • 1
    @BrianMcCutchon you can add CSS to browser's console messages [Colors in JavaScript console](https://stackoverflow.com/questions/7505623) – adiga Dec 08 '20 at 19:18
  • @adiga Wow I didn't know that! Very cool – Keldan Chapman Dec 08 '20 at 19:21

1 Answers1

1

I am assuming you want to display the text in some HTML with specified color.

You could wrap up this.favouriteColour returned in the greet method in a span and add a dynamic style if that is the case.

Refer below :

function Person(fullName, faveColour) {
  this.name = fullName;
  this.favouriteColour = faveColour;
  this.greet = function () {
    return `
    Hello, my name is ${this.name} 
    and my favourite colour is 
    <span style="color:${faveColour}">${this.favouriteColour}</span>`;
  };
}

const john = new Person('John Doe', 'red');


const jane = new Person('Jane Doe', 'orange');


const red = '#ff0000';
const orange = '#ffa500';

const div1 = document.getElementById("app1");
div1.innerHTML = john.greet()


const div2 = document.getElementById("app2");
div2.innerHTML = jane.greet()
    <div id="app1"></div>
    <div id="app2"></div>
Deepak Tomson
  • 57
  • 3
  • This is exactly what I was looking for, thank you. I knew I was missing something very basic! – Josh Dec 08 '20 at 19:44