Color Picker In HTML And JavaScript - CopyAssignment

PHOTO

Sun Apr 09 2023 09:52:27 GMT+0000 (Coordinated Universal Time)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <title>Simple Color Picker</title>
  </head>
  <style>
    .column {
      border: 1px solid;
      min-height: 400px;
      max-width: 600px;
      margin: auto;
      border-radius: 10px;
    }

    .main {
      display: flex;
      flex-direction: column;
      margin-top: 20%;
      border-radius: 5px;
      padding: 10px;
      background-color: white;
    }

    .form-label {
      margin-top: 10px;
    }

    .heading {
      color: red;
      text-align: center;
      margin: 5% auto;
    }
  </style>

  <body>
    <h1 class="heading">Simple Color Picker</h1>

    <div class="column justify-content-md-center">
      <div class="row justify-content-md-center">
        <div class="main">
          <label class="form-label">
            Color Picker:
            <input type="color" id="colorPicker" value="#ffffff" />
          </label>
          <label class="form-label">
            Hex Code: <input cl type="text" id="hexCode" value="#ffffff" />
          </label>
        </div>
      </div>
    </div>

    <script>
      function selectColor() {
        var selectedColor = document.getElementById("colorPicker").value;
        document.querySelector(".column").style.backgroundColor = selectedColor;

        document.getElementById("hexCode").value = selectedColor;
      }
      document
        .getElementById("colorPicker")
        .addEventListener("input", selectColor);
    </script>
  </body>
</html>

COPY

https://copyassignment.com/color-picker-in-html-and-javascript/