Build a Advanced Color Palette Converter Web App in Browser Using Vanilla Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a advanced color palette converter web app in browser using vanilla javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"/>

<div class="container">
    <h1>Color Converter</h1>
    <div class="colors"><label for="color">name, hex, rgb, hsl, hwb, cmyk, ncol</label><input id="color" type="text" value="red" placeholder="Anter a color" />
        <div id="colorError">Not a legal color value</div>
        <table id="resultTable">
            <tbody>
                <tr>
                    <td id="nameName">Name</td>
                    <td id="name">Red</td>
                </tr>
                <tr>
                    <td id="rgbName">Rgb</td>
                    <td id="rgb">rgb(255, 0, 0)</td>
                </tr>
                <tr>
                    <td id="hexName">Hex</td>
                    <td id="hex">#ff0000</td>
                </tr>
                <tr>
                    <td id="hslName">Hsl</td>
                    <td id="hsl">hsl(0, 100%, 50%)</td>
                </tr>
                <tr>
                    <td id="hwbName">Hwb</td>
                    <td id="hwb">hwb(0, 0%, 0%)</td>
                </tr>
                <tr>
                    <td id="cmykName">Cmyk</td>
                    <td id="cmyk">cmyk(0%, 100%, 100%, 0%)</td>
                </tr>
                <tr>
                    <td id="ncolName">Ncol</td>
                    <td id="ncol">R0, 0%, 0%</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="currentColor"></div>
    <div class="note">Check out more colorful pens by <a href="https://codepen.io/DerkJanS/" target="_blank">Derk Jan Speelman</a> <a href="https://codepen.io/collection/DENVMv/" target="_blank">here</a>.</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://www.w3schools.com/lib/w3color.js"></script>

 

 

style.css

 

 

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 html {
     background: #f1f1f1;
     letter-spacing: 0.76px;
     text-rendering: optimizeLegibility;
     font-family: 'Source Sans Pro', sans-serif;
     -webkit-text-size-adjust: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
 .container {
     background: #fff;
     margin: 30px auto;
     width: 100%;
     max-width: 640px;
     padding: 20px;
     overflow: hidden;
     border-radius: 3px;
     border: 1px solid #e6e6e6;
     box-shadow: 0 10px 25px -10px rgba(0, 0, 0, .33);
}
 .container:after {
     display: table;
     content: '';
     clear: both;
}
 h1 {
     margin-bottom: 15px;
     text-align: center;
}
 table {
     width: 100%;
}
 table td:first-child {
     padding-right: 10px;
     width: 55px;
     font-style: italic;
     font-weight: bold;
}
 table td em {
     color: #aaa;
}
 label, input {
     outline: 0;
}
 label {
     display: inline-block;
     color: #aaa;
     margin-bottom: 3px;
     font-style: italic;
}
 input {
     display: block;
     background: #eee;
     margin-bottom: 15px;
     padding: 5px 10px;
     width: 100%;
     line-height: inherit;
     font-size: inherit;
     border: 0;
}
 .colors, #currentColor {
     display: inline-block;
     margin: 0 -1px;
     min-height: 220px;
     width: 50%;
     vertical-align: middle;
     transition: 350ms min-height cubic-bezier(0.4, 0, 0.2, 1);
}
 #resultTable, #currentColor {
     opacity: 1;
     pointer-events: auto;
     transition: 350ms opacity cubic-bezier(0.4, 0, 0.2, 1);
}
 #resultTable.hidden, #currentColor.hidden {
     opacity: 0;
     pointer-events: none;
}
 .colors {
     padding-right: 20px;
}
 .colors #colorError {
     display: none;
}
 #currentColor {
     background: red;
}
 .note {
     margin-top: 20px;
}

 

See also  Build a Wikipedia Page Viewer Search Engine in Browser Using Vanilla Javascript Full Project For Beginners

 

script.js

 

 

// Make sure to include https://www.w3schools.com/lib/w3color.js

var color, name, rgb, hex, hsl, hwb, cmyk, ncol;

$('#color').on('keyup', function() {
  color = w3color($(this).val());
  
  if(color.valid) {
    name = color.toName();
    hex  = color.toHexString();
    cmyk = color.toCmykString();
    ncol = color.toNcolString();
    
    if(name == '') name = '<em>No name</em>';
    
    $('#name').html(name);
    $('#hex').html(hex);
    $('#cmyk').html(cmyk);
    $('#ncol').html(ncol);
    
    if(color.opacity == 1) {
      rgb  = color.toRgbString();
      hsl  = color.toHslString();
      hwb  = color.toHwbString();
      
      $('#rgbName').text('Rgb');
      $('#hslName').text('Hsl');
      $('#hwbName').text('Hwb');
    } else {
      rgb  = color.toRgbaString();
      hsl  = color.toHslaString();
      hwb  = color.toHwbaString();
      
      $('#rgbName').text('Rgba');
      $('#hslName').text('Hsla');
      $('#hwbName').text('Hwba');
    }
      
    $('#rgb').html(rgb);
    $('#hsl').html(hsl);
    $('#hwb').html(hwb);
      
    $('#currentColor').css('background', rgb);
    
    $('#colorError').css('display', 'none');
    $('#resultTable, #currentColor').removeClass('hidden');
    $('.colors, #currentColor').css('min-height', '220px');
  } else {
    $('#colorError').css('display', 'block');
    $('#resultTable, #currentColor').addClass('hidden');
    $('.colors, #currentColor').css('min-height', '0');
  }
  
});

Leave a Reply