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

Question

Фридрих

html , javascript , работа-с-цветом

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

Как создать страницу для добавления новых цветов с возможностью выбора типа цвета и добавления его кода, с уникальным именем и проверкой данных на соответствие определенным правилам при нажатии кнопки Save?

19 февраля 2024 г. 8:58

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

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

Answer 1

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

HTML:
```html
<!DOCTYPE html>
<html>
<head>
    <title>Цвета</title>
</head>
<body>
    <h1>Мои цвета</h1>
    
    <div id="colors"></div>
    
    <h2>Добавить новый цвет</h2>
    <input type="color" id="newColor">
    <button onclick="addColor()">Добавить</button>
    
    <script src="script.js"></script>
</body>
</html>
```

JavaScript (script.js):
```javascript
function addColor() {
    const newColor = document.getElementById("newColor").value;
    const colorsDiv = document.getElementById("colors");
    
    const colorBox = document.createElement("div");
    colorBox.style.backgroundColor = newColor;
    colorBox.style.width = "50px";
    colorBox.style.height = "50px";
    colorsDiv.appendChild(colorBox);
}
```

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

HTML:
```html
<!DOCTYPE html>
<html>
<head>
    <title>Цвета</title>
</head>
<body>
    <h1>Мои цвета</h1>
    
    <input type="text" id="colorName" placeholder="Название цвета">
    <input type="text" id="colorCode" placeholder="Код цвета">
    <select id="colorType">
        <option value="RGB">RGB</option>
        <option value="HEX">HEX</option>
    </select>
    <button onclick="saveColor()">Save</button>
    
    <script src="script.js"></script>
</body>
</html>
```

JavaScript (script.js):
```javascript
function saveColor() {
    const colorName = document.getElementById("colorName").value;
    const colorCode = document.getElementById("colorCode").value;
    const colorType = document.getElementById("colorType").value;
    
    // Проверка данных на соответствие правилам 
    if(colorName && colorCode && (colorType === "RGB" || colorType === "HEX")) {
        // Добавление цвета в базу данных или другое действие
        console.log("Цвет успешно добавлен");
    } else {
        alert("Пожалуйста, заполните все поля и выберите корректный тип цвета");
    }
}
```