RGB To Hex Conversion (5 kyu): Codewars (TDD in JavaScript)

Hi! Welcome to Codewars. In this series I’m going to solve TDD katas using JavaScript. If this is your first time here and you want to learn Frontend and JavaScript, start right now by subscribing, and don’t forget to turn on the subtitles. [Music playing] Hi! Let’s solve today kata titled “RGB to Hex Conversion.” The rgb() method is incomplete. Complete the method so that passing in RGB decimal values will result in a hexadecimal representation being returned. The valid decimal values for RGB are 0 - 255. So I have to check the borders.

00:47 - Any (r,g,b) argument values that fall out of that range should be rounded to the closest valid value. OK. For the example, we have… Okay. Draw you attention that if it’s “0” or should be converted to, for example “1”, the result should be returned in 2 hex symbols. Okay, so I need to extend my result to 2 symbols always. Okay, let’s train it. Functional rgb(). “-20” returns “0”. “300” returns “FF”, okay. What I need to do. I should return, let’s say, decToHex®, decToHex… That should be a string value. So, as an input values I have numbers, that should be converted into String. Now let’s implement this function.

01:56 - Function “decToHex”, “c” is an import color. Let’s checks the boundaries first. If this color is greater than 255 then return “FF” string. Else. If this value is lower than 0 then return “00”, otherwise convert this value and return its hexadecimal representation. How to do that. To convert decimal to hex decimal there are four steps. The first one: divide the decimal number by 16 and thread the division as an integer division. Right down the reminder in hexadecimal.

02:50 - Then divide the result again by 16 and through the division as an integer. And then repeat until the result is 0. Then write down the reminders from the last to first. Let’s consider an example. Let’s say I need to convert “188” to its hexadecimal representation. So I need to divide it by 16 and the result is 11.75, so the reminder is 0.75. Multiplied by 16 it will be 12. In hexadecimal it should be “C”. Now, I take the result 11 and again divide it by 16. The result is roughly 0.7.

03:35 - Multiplied by 16 is something like 11 that is “B”. And the result is “BC” returned as a string. In case I should convert “0”. In that case I will get “0” string that should extend to 2 symbols. However in JavaScript will have helper functions that make everything easier. We have “toString” methods that converts to any base, in our case, it’s “16. “ Then we have “padStart” method that can extend our string value to 2 symbols and then everything should be converted into uppercase. Let’s implement this approach. Taking into account that the input value is always of an integer type we can convert it to a hexadecimal value easily. “toString” 16 and add leading zeros. Just if any. And shift to upper case. Let’s try. Yes, that works. [Music playing] My code is available on GitHub. Documentation is available in the Internet. Follow the links if you’re eager to get more.

05:06 - If you like this video give it “thumbs up”, share it with your friends, subscribe to the channel and watch other episodes. Thanks for watching and dive deeper. .