Simple Fixed Footer

INFORMATION & CODE

The code creates a simple colour converter webpage. The user enters a hexadecimal colour such as #ff0000, and the JavaScript automatically converts it into RGB and HSL values. The page also includes copy buttons so each colour value can be copied to the clipboard.

The HTML provides the structure of the page. The .colorWrapper contains the heading and three text inputs for HEX, RGB, and HSL values. The HEX input starts with #000000, while the RGB and HSL inputs start with their corresponding black-colour values. Each input has a copy button containing a Font Awesome copy icon. The page also imports Google Fonts, Font Awesome, jQuery, and the external styles.css stylesheet.

The CSS controls the appearance and layout. The body uses Flexbox to centre the converter on the page, while .colorWrapper uses CSS Grid to arrange the colour fields and buttons. The inputs are styled with large text, padding, borders, and rounded corners. The heading uses the imported pixel-style font and various visual effects. The wrapper initially has a black background, but the JavaScript later changes this background to whatever colour the user enters.

The main part of the JavaScript listens for changes to the HEX input. When the user enters a colour, the code removes the #, expands three-character HEX codes such as #f00 into six-character codes, and converts each pair of hexadecimal digits into a decimal RGB value. For example, #ff0000 becomes rgb(255,0,0). The resulting RGB value is then displayed in the RGB input.

The rgbToHsl() function converts the RGB values into HSL. It first normalises the RGB values to a range between 0 and 1, determines the maximum and minimum components, and then calculates the hue, saturation, and lightness using the standard RGB-to-HSL conversion formula. The result is placed in the HSL input, for example hsl(0,100%,50%) for red.

After conversion, the script changes the .colorWrapper background using the generated RGB value. This means that entering a different HEX colour should immediately change the converter's background to that colour. There is also code intended to change the heading colour.

The copy-to-clipboard functionality finds all elements with the .trace-btn class and all inputs with the .color-selected class. When a copy button is clicked, its position is used to find the corresponding input. The input's value is then copied using the browser's modern navigator.clipboard.writeText() API, followed by an alert confirming that the value was copied.

To use the converter, save the HTML as something such as index.html, place the CSS in styles.css, and add the JavaScript either inside a <script> element or in a separate .js file. Open the HTML file in a modern web browser, enter a HEX colour such as #3498db into the first field, and the RGB and HSL fields should update automatically. You can then click the copy button beside any value to copy it.

HTML


                <!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Fixed Footer</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="colorWrapper">
      <h2 id="heading">Color Converter</h2>
      <br>
      <br>
      <input type="text" placeholder="hex" id="hex" class="color-selected" value="#000000">
      <button class="trace-btn"><i class="fas fa-copy" style="font-size: 24px"></i></button>
      <input type="text" placeholder="rgb" id="rgb" class="color-selected" value="rgb(0, 0, 0)">
      <button class="trace-btn"><i class="fas fa-copy" style="font-size: 24px"></i></button>
      <input type="text" placeholder="hsl" id="hsl" class="color-selected" value="hsl(0, 0%, 0%)">
      <button class="trace-btn"><i class="fas fa-copy" style="font-size: 24px"></i></button>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                      * {
        box-sizing: border-box;
        font-family: "Press Start 2P", VT323, cursive;
      }

      body {
        height: 98.5vh;
        width: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        font-size: 16px;
        line-height: 1.5;
      }
                  
      .colorWrapper {
        position: relative;
        display: grid;
        grid-template-columns: 400px 100px;
        gap: 4px;
        width: 83%;
        padding: 20px;
        margin: 50px auto;
        background: #000000;
        border: 4px solid rgba(0,0,0,.15);
        filter: grayscale(100%);
      }

      #heading {
        position: relative;
        left: 50px;
        margin: 32px 0;
        font-size: 48px;
        font-weight: 900;
        mix-blend-mode: difference;
        filter: invert(100%); 
        text-align: center;
      }

      input {
        font-size: 24px;
        padding: 20px;
        font-family: courier;
        font-weight: bold;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        border: 4px solid rgba(0,0,0,.15);
        display: block;
        margin: 50px 20px 50px 15px;
        width: 85%;
        max-width: 334px;
        background: rgba(255,255,255,0.9);
        overflow: hidden;
        text-overflow: ellipsis;
      }

      input:focus {
        outline: 0;
        border: 4px solid rgba(0,0,0,.3);
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
      }

      .trace-btn {
        position: relative;
        top: 50px;
        left: 4px;
        width: 76px;
        height: 76px;
        border: 4px solid rgba(0,0,0,.3);
        border-radius: 5px;
      }

JAVASCRIPT


                      $(window).load(function(){
	      /* For quick copy-paste */
        $('input').focus(function(){this.select();});
    
	      /* Change color on every key input. */
	      $('#hex').bind('blur keydown', function (event) {
		      var el = this;
		      setTimeout(function () {
			      var rgb = [],
			        $input = $(el),
			        fail = false,
			        original = $input.val(),
			
			      hex = (original+'').replace(/#/, '');
			
			      if (original.length === 1 && original !== '#') { $input.val('#' + original); }
			      if (hex.length == 3) hex = hex + hex;

			     
            for (var i = 0; i < 6; i+=2) {
			        rgb.push(parseInt(hex.substr(i,2),16));
			        fail = fail || rgb[rgb.length - 1].toString() === 'NaN';
			      }

			      $('#rgb').val(fail ? '' : 'rgb(' + rgb.join(',') + ')');
			      $('#hsl').val(fail ? '' : 'hsl(' + rgbToHsl.apply(null, rgb).join(',') + ')');

			      $('.colorWrapper').css('backgroundColor', $('#rgb').val());
            $('#heading').css('color', $(val()));
	        }, 13);
	      });

        /* Function to convert rgb-to-hsl. */
	
	      function rgbToHsl(r, g, b){
		      r /= 255, g /= 255, b /= 255;
		      var max = Math.max(r, g, b), min = Math.min(r, g, b);
		      var h, s, l = (max + min) / 2;

		      if (max == min) { h = s = 0; } 
		        else {
			        var d = max - min;
			        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

			        switch (max){
				        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
				        case g: h = (b - r) / d + 2; break;
				        case b: h = (r - g) / d + 4; break;
			        }
			
			        h /= 6;
		        }
		
		        return [(h*100+0.5)|0, ((s*100+0.5)|0) + '%', ((l*100+0.5)|0) + '%'];
    
	        }
        });


        $(document).ready(function() {
 
          if ( !("placeholder" in document.createElement("input")) ) {
            $("input[placeholder], textarea[placeholder]").each(function() {
              var val = $(this).attr("placeholder");
              if ( this.value == "" ) {
                this.value = val;
              }
              $(this).focus(function() {
                if ( this.value == val ) {
                this.value = "";
              }
              }).blur(function() {
               if ( $.trim(this.value) == "" ) {
                 this.value = val;
               }
             })
           });
 
          // Clear default placeholder values on form submit
          $('form').submit(function() {
            $(this).find("input[placeholder], textarea[placeholder]").each(function() {
              if ( this.value == $(this).attr("placeholder") ) {
                this.value = "";
              }
            });
          });
        }
      });

      /**
      * COPY TO CLIPBOARD LOGIC
      * Copies the content of the textarea to the system clipboard
      */
      function colorCodeCopyButtons() {
        const copyButtons = document.querySelectorAll('.trace-btn');
        const codeAreas = document.querySelectorAll('.color-selected');

        copyButtons.forEach((btn, index) => {
          btn.addEventListener('click', () => {
            const targetArea = codeAreas[index];
            if (!targetArea) return;

              // Use the modern Clipboard API
              navigator.clipboard.writeText(targetArea.value)
              .then(() => {
              // Visual feedback instead of a disruptive alert is usually better, 
              // but keeping the alert to match your original design.
              alert('The code has been copied to clipboard!');
            })
            .catch(err => {
              console.error('Failed to copy: ', err);
            });
          });
        });
      }

      // Initialize the copy buttons on page load
      document.addEventListener('DOMContentLoaded', colorCodeCopyButtons);

MENU

INFORMATION & CODE

HTML

CSS

JAVASCRIPT

PREVIEW

Color Converter