Color Changer

Changer color on text input

by Amy Ruddy

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container py-5">
  <div class="container  rounded shadow p-3 bg-dark text-white" id="content">
    <h1>Color Changer</h1>
    <p>Input two values between 0-9 and/or A-F in each textbox and see the resulting color.</p>

    <div class="box"></div>

    <div class="form-row pt-3 m-0">
      <div class="form-group">
        <label for="inputRed">Red</label>
        <input type="text" class="form-control form-control-sm" id="inputRed" placeholder="FF" maxlength="2">
      </div>
      <div class="form-group">
        <label for="inputRed">Green</label>
        <input type="text" class="form-control form-control-sm" id="inputGreen" placeholder="BB" maxlength="2">
      </div>
      <div class="form-group">
        <label for="inputRed">Blue</label>
        <input type="text" class="form-control form-control-sm" id="inputBlue" placeholder="5C" maxlength="2">
      </div>
    </div>

    <p id="hexValue">Hex Value:
      <span>#FFFFFF</span>
    </p>
    <small class='text-muted'>Note: The lower the value (0). the less that color will be used. The higher the value (F), the more that color will be used. <a href="https://en.wikipedia.org/wiki/Web_colors" target="_blank">More info</a>.</small>

  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

CSS

#content {
  max-width: 450px;
}

.box {
  height: 100px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #00003f;
  background-color: #ffffff;
}

label {
  margin-bottom: 0;
}

input {
  min-width: 75px;
  max-width: 75px;
  margin-right: 10px;
}

JavaScript

$('input').keyup(function() {
  // Declare variables
  var r, g, b, rgb;
  // Get values for RGB from the input textbox fields
  r = $('#inputRed').val().toUpperCase();
  g = $('#inputGreen').val().toUpperCase();
  b = $('#inputBlue').val().toUpperCase();

  // Combine/Concatenate  r, b, and b to make a 6-digit hex value
  rgb = r + g + b;

  // Add # to rgb and change the background color of the box and page body based on inputted values
  if (rgb.length == 6) {
    
  }
rgb = "#" + rgb;
    $('.box, body').css("background-color", rgb);
  // Display the "Hex Value:" in the <span>
  $('#hexValue span').text(rgb);

});