<header>
  <h2 class="title">MouseEvent -> offsetX</h2>
  <p class="description">Визначає горизонтальну позицію курсора відносно елемента для динамічного вибору кольору.</p>
</header>
<main>
  <div class="result">
    <div class="color-bar" id="colorBar">
      <!-- Панель кольорів -->
    </div>
    <p>Вибраний колір: <span id="colorDisplay">#000000</span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.color-bar {
  width: 100%;
  height: 30px;
  background: linear-gradient(to right, red, yellow, green, cyan, blue, magenta);
  margin-bottom: 15px;
  cursor: pointer;
}

#colorDisplay {
  font-weight: bold;
  color: #333;
}

const colorBar = document.getElementById('colorBar');
const colorDisplay = document.getElementById('colorDisplay');

// Функція для отримання кольору на основі позиції offsetX
function getColorFromOffsetX(offset, elementWidth) {
    const ratio = offset / elementWidth;
    const hue = Math.floor(ratio * 360); // Визначаємо відтінок за шкалою 0-360
    return `hsl(${hue}, 100%, 50%)`; // Повертаємо колір у форматі HSL
}

colorBar.addEventListener('mousemove', (event) => {
    const selectedColor = getColorFromOffsetX(event.offsetX, colorBar.offsetWidth);
    colorDisplay.textContent = selectedColor;
    colorDisplay.style.color = selectedColor;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.