Как создать веб-страницу, где есть набор цветов и форма для добавления нового цвета с использованием элементов input и JavaScript?

Question

Мартин

javascript , регулярные-выражения

Как создать веб-страницу, где есть набор цветов и форма для добавления нового цвета с использованием элементов input и JavaScript?

Как создать веб-страницу с палитрой цветов и формой для добавления нового цвета, учитывая следующие характеристики каждого цвета: уникальное название, тип (RGB, RGBA или HEX) и код цвета? Как реализовать проверку введенных данных по различным правилам при нажатии на кнопку Save?

19 февраля 2024 г. 9:08

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для создания веб-страницы с палитрой цветов и формой для добавления нового цвета можно использовать следующий HTML-код:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Palette</title>
</head>
<body>
  <h1>Color Palette</h1>

  <div id="colorPalette">
    <!-- Здесь будут отображаться добавленные цвета -->
  </div>

  <h2>Add New Color</h2>
  
  <form id="colorForm">
    <label for="colorName">Color Name:</label>
    <input type="text" id="colorName" required>
    
    <label for="colorType">Color Type:</label>
    <select id="colorType">
      <option value="RGB">RGB</option>
      <option value="RGBA">RGBA</option>
      <option value="HEX">HEX</option>
    </select>
    
    <label for="colorCode">Color Code:</label>
    <input type="text" id="colorCode" required>
    
    <button type="submit">Save</button>
  </form>

  <script src="script.js"></script>
</body>
</html>
```

Затем создадим файл `script.js`, где будет описана логика добавления нового цвета и проверка введенных данных:

```js
const colorForm = document.getElementById('colorForm');
const colorPalette = document.getElementById('colorPalette');

colorForm.addEventListener('submit', function(event) {
  event.preventDefault();
  
  const colorName = document.getElementById('colorName').value;
  const colorType = document.getElementById('colorType').value;
  const colorCode = document.getElementById('colorCode').value;
  
  if (validateColorInput(colorName, colorType, colorCode)) {
    const newColor = document.createElement('div');
    newColor.style.backgroundColor = colorCode;
    newColor.textContent = colorName;
    
    colorPalette.appendChild(newColor);
    
    colorForm.reset();
  } else {
    alert('Please enter valid color data');
  }
});

function validateColorInput(name, type, code) {
  if (name.trim() === '' || code.trim() === '') {
    return false;
  }
  
  if (type === 'RGB' && !code.match(/^rgb\(\d{1,3},\s?\d{1,3},\s?\d{1,3}\)$/)) {
    return false;
  } else if (type === 'RGBA' && !code.match(/^rgba\(\d{1,3},\s?\d{1,3},\s?\d{1,3},\s?0?\.\d+\)$/)) {
    return false;
  } else if (type === 'HEX' && !code.match(/^#[0-9A-Fa-f]{6}$/)) {
    return false;
  }
  
  return true;
}
```

В данном скрипте, при нажатии на кнопку "Save", происходит проверка введенных данных на соответствие требуемым форматам цветов (RGB, RGBA, HEX) с помощью регулярных выражений. Если данные проходят проверку, новый цвет добавляется на страницу в палитру. Если данные не проходят проверку, выводится сообщение об ошибке.

Таким образом, вы можете создать веб-страницу с палитрой цветов и формой для добавления новых цветов с использованием элементов input и JavaScript.