<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RGBizer - Your Color Code Convertor</title>
</head>
<body>
 
    <main>
        <div class="main-child">
            <h1>Color Hex to RGB convertor</h1>
            Enter the hexadecimal code of your favarite color in the box below to get rgb() equivalente
            
            <form>
                <label for="hex-code">#</label>
                <input type="text" placeholder="Enter hex code without #" name="hex-code" id="hex-code">
                <input type="submit" value="Run">
            </form>
            <div>
                <p>RGB color is <span id="rgb"></span></p>
            </div>
        </div>
        <div id="preview" class="main-child">
            <p>Color preview</p>
        </div>
    </main>

  </body>
</html>
body {
            box-sizing: border-box;
            margin: 0;
        }

        main {
            display: flex;
            /*height: 46em;  */          
            align-items: center;
            justify-content: center;
            
        }

        .main-child {
            width: 50%;
            height: 100%;
           text-align: center;
        }

        #rgb {
            font-weight: bold;
        }
const formElt = document.querySelector('form');
const hexColor = document.querySelector('input[type="text"]').value ;
const rgbDOM = document.querySelector('#rgb');
const previeWDOM = document.querySelector('#preview');

const hex2decTable = {
  'a': 10, 'b': 11, 'c': 12, 'd': 13, 'e': 14, 'f': 15
};

function colorCode(array) {
  const code = array.reduce((acc, cur) => {
    if ( isNaN(acc) ) acc = hex2decTable[acc];
    if ( isNaN(cur) ) cur = hex2decTable[cur];

    return parseInt(acc) * 16 + parseInt(cur)
  })  

  return code;
}

formElt.addEventListener('submit', e => {

  

  const hexColorArr = hexColor.split('');

  const initRedColorArr = hexColorArr.slice(0,2);
  const initGreenColorArr = hexColorArr.slice(2,4);
  const initBlueColorArr = hexColorArr.slice(4);

  const redCode = colorCode(initRedColorArr);
  const greenCode = colorCode(initGreenColorArr);
  const blueCode = colorCode(initBlueColorArr);

  rgbDOM.innerHTML = 'rgb('+ redCode + ',' + greenCode + ',' + blueCode + ')';
  previeWDOM.style.backgroundColor = '#' + hexColor;
  rgbDOM.style.color = '#' + hexColor;

  e.preventDefault();

})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.