ТЗ - Необходимо создать HTML-страницу, на которой будет расположена форма для создания цветов и ниже три примера уже готовых цветов. В форму должно входить два поля ввода (название цвета и код цвета) и одно поле с выпадающим списком. В создаваемых цветах должна отображаться вся информация, введенная в форму. А также необходимо установить валидацию для формы. <body> <div id="formm"> <form> <label for='name'><span>Название цвета:</span><span id="mod1">Поле обязательно</span></label><br> <input type='text' id="namme"/><br><br> <label><span>Тип цвета:</span><br> <select id='typpe'> <option>RGB</option> <option>RGBA</option> <option>HEX</option> </select> </label><br><br> <label for='codde'><span>Код цвета:</span><span id="mod2">Поле обязательно</span></label><br> <input type='text' id="codde"/><br><br> <input id="btn" type="button" value='Создать' onclick="createCub()"> </form> <h3 style="text-align:center"><b>Все цвета</b></h3> </div> <div id='col'> <div id="cub" style="background:green"
ТЗ - Необходимо создать HTML-страницу, на которой будет расположена форма для создания цветов и ниже три примера уже готовых цветов. В форму должно входить два поля ввода (название цвета и код цвета) и одно поле с выпадающим списком. В создаваемых цветах должна отображаться вся информация, введенная в форму. А также необходимо установить валидацию для формы.
HTML
<body>
<div id="formm">
<form>
<label for='name'><span>Название цвета:</span><span id="mod1">Поле обязательно</span></label><br>
<input type='text' id="namme"/><br><br>
<label><span>Тип цвета:</span><br>
<select id='typpe'>
<option>RGB</option>
<option>RGBA</option>
<option>HEX</option>
</select>
</label><br><br>
<label for='codde'><span>Код цвета:</span><span id="mod2">Поле обязательно</span></label><br>
<input type='text' id="codde"/><br><br>
<input id="btn" type="button" value='Создать' onclick="createCub()">
</form>
<h3 style="text-align:center"><b>Все цвета</b></h3>
</div>
<div id='col'>
<div id="cub" style="background:green"><div id="cub1">
<p>Green</p>
<p>RGB</p>
<p>0, 128, 0</p>
</div></div>
<div id="cub" style="background:blue"><div id="cub1">
<p>Blue</p>
<p>RGBA</p>
<p>0, 0, 255, 0.1</p>
</div></div>
<div id='cub' style="background:red"><div id="cub1">
<p>Red</p>
<p>HEX</p>
<p>#FF0000</p>
</div></div>
</div>
</body>
CSS
select, input{
width:200px;
margin:auto;
color:#8B0000;
border:1px solid #CD5C5C;
}
#formm, #col{
width: 100%;
}
form{
text-align:center;
border:1px solid #CD5C5C;
width: 300px;
margin:auto;
height:210px;
border-radius:9px;
padding-top:10px;
background:#FFA07A;
color:#8B0000;
}
#cub{
width:31.7%;
height:150px;
margin-left:1%;
display:inline-block;
margin-top: 10px;
}
#cub1{
opacity: 0.5;
width:70%;
height:70%;
background:#fff;
margin:5% auto;
}
p{
text-align:center;
font-size:18px;
}
#btn{
color:#800000;
font-size:14px;
background:#CD5C5C;
}
#btn:hover{
font-size:15px;
background:#FF6347;
}
span{
float: left;
margin-left: 10%;
}
#mod1, #mod2{
color:red;
font-size:16px;
display: none;
}
JS
function createCub(){
/*Сбрасываю параметры и задаю переменные*/
mod1.style.display = "none"
mod2.style.display = "none"
var a = document.getElementById('namme').value;
var b = document.getElementById('typpe').value;
var c = document.getElementById('codde').value;
var cm = c.split(" ");
var R = cm[0];
var G =cm[1];
var B =cm[2];
var A =cm[3];
/*Проверка на наличие строки*/
if(a.length < 1){return mod1.style.display = "flex";}
if(c.length < 1){return mod2.style.display = "flex";}
/*Проверка на правильность ввода RGBA*/
if(b == "RGBA" && cm.length !== 4){
mod2.innerHTML = ("Неверное кол-во чисел");
return mod2.style.display = "flex";
}
if(b == "RGBA" && (cm[3] > 1 || cm[3] < 0)){
mod2.innerHTML = ("4 числo не верно");
return mod2.style.display = "flex";
}
if(b == "RGBA" && (cm[0] > 255 || cm[0] < 0)){
mod2.innerHTML = ("1 числo не верно");
return mod2.style.display = "flex"}
if(b == "RGBA" && (cm[1] > 255 || cm[1] < 0)){
mod2.innerHTML = ("2 числo не верно");
return mod2.style.display = "flex";
}
if(b == "RGBA" && (cm[2] > 255 || cm[2] < 0)){
mod2.innerHTML = ("3 числo не верно");
return mod2.style.display = "flex";
}
/*Проверка на правильность ввода RGB*/
if(b == "RGB" && cm.length !== 3){
mod2.innerHTML = ("Неверное кол-во чисел");
return mod2.style.display = "flex";
}
if(b == "RGB" && (cm[0] > 255 || cm[0] < 0)){
mod2.innerHTML = ("1 числo не верно");
return mod2.style.display = "flex"}
if(b == "RGB" && (cm[1] > 255 || cm[1] < 0)){
mod2.innerHTML = ("2 числo не верно");
return mod2.style.display = "flex";
}
if(b == "RGB" && (cm[2] > 255 || cm[2] < 0)){
mod2.innerHTML = ("3 числo не верно");
return mod2.style.display = "flex";
}
/*Проверка на правильность ввода HEX*/
if(b == "HEX" && (c[0] !== "#")){
mod2.innerHTML = ("HEX должен начинаться с '#'");
return mod2.style.display = "flex";
}
if(b == "HEX" && c.length !== 7){
mod2.innerHTML = ("Неверное кол-во символов");
return mod2.style.display = "flex";
}
/*Создание цвета*/
if(typeof newColor == 'undefined')
newColor = 1;
newColor++;
var v = document.getElementById("col");
var d = document.createElement('div');
d.id = "cub";
if(b == "HEX"){
d.style.backgroundColor = c;
v.appendChild(d);
}
if(b == "RGB"){
d.style.backgroundColor = "rgb("+R+" "+G+" "+B+")";
v.appendChild(d);
}
if(b == "RGBA"){
d.style.backgroundColor = "rgba("+R+" "+G+" "+B+" "+A+")";
v.appendChild(d);
}
var dd = document.createElement('div');
dd.id = "cub1";
d.appendChild(dd);
var textt = document.createElement('p');
textt.innerHTML = a;
dd.appendChild(textt);
var textt1 = document.createElement('p');
textt1.innerHTML = b;
dd.appendChild(textt1);
var textt2 = document.createElement('p');
textt2.innerHTML = c;
dd.appendChild(textt2);
}
Итог
Ознакомиться с работай данного кода можно ТУТ.