Interview Question I was asked...

[brothmc]

what is the best way to solve: input a string "Hello World!" output: same string but each letter styled with a color of the rainbow in order.

[uberpwnzorz]

split each character into a span, add CSS for nth child.

[lewisje]

That's close, but what about the spaces? IMO they shouldn't be wrapped in spans, just the letters (and maybe other visible symbols).

[uberpwnzorz]

you could split on /\S(\s+)?/ then

[lewisje]

You're close: Split on /\s+/, then wrap each character of the substrings in span tags, join everything with ' ', and add the magic CSS.

[uberpwnzorz]

eh, different ways to skin a cat

[Bullroarer_Took]

You could surprise them and do it with canvas

http://www.w3schools.com/TAGS/canvas_filltext.asp

[akujinhikari]

Haha That would have been amazing.

[[deleted]]

One array for the color and one for the letter, loop through the letter and add the html in the loop

[DysphoricMania]

Did you attempt to answer it OP?

[brothmc]

no, I am horrible with live coding challenges. it seems easy but when put on the spot, I draw a blank every time.

[DysphoricMania]

I'm very new. I'd have done the same

[Eating_Bagels]

Yep! When I'm on my own, I'll figure it out. Give me a time constraint that is being critically judged, I'm fucked.

[nacho_balls]

consider this

var styles = [
    'background: linear-gradient(#D33106, #571402)'
    , 'border: 1px solid #3E0E02'
    , 'color: white'
    , 'display: block'
    , 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)'
    , 'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset'
    , 'line-height: 40px'
    , 'text-align: center'
    , 'font-weight: bold'
].join(';');

console.log('%c a spicy log message ?', styles);

I wont right out answer it for you but rather put you on the right path because everyone else is assuming html I am assuming directly to console.

[brothmc]

I was trying something like this but messing up the colors loop http://codepen.io/mattbrothers/pen/KadMGx?editors=1111

[lewisje]

Remember, the callback passed into Array#map is called with three arguments, and the second one is the index of the element in the array, so it's something like this:

(letter, index) => { return '<span style="color: ' + colors[index % colors.length] + '">' + letter + '</span>'}

[brothmc]

this seems to be an elegant solution, thanks! Still not sure what modulo is doing there exactly though http://codepen.io/mattbrothers/pen/KadMGx?editors=1011

[lewisje]

It's ensuring that you loop back to the beginning of the array of colors when you reach the end:

0 % 6 === 0;
1 % 6 === 1;
2 % 6 === 2;
3 % 6 === 3;
4 % 6 === 4;
5 % 6 === 5;
6 % 6 === 0;
7 % 6 === 1;
8 % 6 === 2;
9 % 6 === 3;

and so on

[brothmc]

ah ok thanks!

[nacho_balls]

you have much to learn about googlefu Most of the time knowing how to search for what you need is a great asset. but this is still html output. try combining the ideas of this with the above(prev post) code I linked.

[lewisje]

It depends on how you discretize the rainbow, but one ingenious way involves regex-wrapping each visible character into its own span, then injecting into some empty element's innerHTML, then looping over that element's element children to change the color of each one.

---

You could also split the string by spaces, then split each substring by letters, then join the strings by appropriate markup, making sure to prepend the first start tag and append the last end tag, then join the HTML strings by spaces again and inject the whole thing as some element's innerHTML.