<!DOCTYPE html>
<html>
<head>
<title>Elements Styling</title>
<style type="text/css">
.d-none {
display: none;
}
.styled-checkbox {
display: inline-flex;
cursor: pointer;
}
.styled-checkbox > .checker {
width: 20px;
height: 20px;
border: 1px solid #000;
}
input[type = checkbox]:checked + .checker {
background: gray;
}
.styled-textField {
border: 3px solid red;
border-radius: 10px;
height: 30px;
width: 250px;
background-color: lightgray;
color: white;
padding: 10px 15px;
}
.styled-select {
padding: 10px;
color: blue;
text-transform: uppercase;
width: 300px;
background-color: pink;
}
.styled-select > option {
padding: 30px;
width: 180px;
background-color: red;
}
</style>
</head>
<body>
<label class="styled-checkbox">
<input type="checkbox" name="testCheckbox" class="d-none">
<span class="checker"></span>
</label>
<input type="text" class="styled-textField">
<div id="styled-select_wrapper">
<select class="styled-select d-none">
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
</div>
<script type="text/javascript">
var customSelect = document.getElementById('styled-select_wrapper');
var select = customSelect.querySelector('select');
var options = select.options;
console.log(select, options);
for(var i = 0; i < options.length; i++) {
var customOption = document.createElement('div');
customOption.innerText = options[i].innerText;
customOption.dataset.value = options[i].value;
customOption.dataset.selected = options[i].selected;
customSelect.append(customOption);
}
function ColorsTest() {
this.getMiddleColor = function(color1, color2) {
console.log((color1 + color2));
// 1. Удалить #
// 2. Разделить цвета на 3 части (red, green, blue) по 2 символа
// 3. Посчитать среднее число между каждой из пар color1 и color2
// color1 -> ad67c3 (ad, 67, c3)
// color2 -> fe4a71 (fe, 4a, 71)
// Преобразовать в шестнадцатеричную систему числа попарно:
// (ad + fe) / 2 -> средний красный
// (67 + 4a) / 2 -> средний зеленый
// (c3 + 71) / 2 -> средний синий
// 4. Собрать 3 части в один цвет и добавить #
}
this.hexToRgb = function() {
// 1. Удалить #
// 2. Разделить цвета на 3 части (red, green, blue) по 2 символа
// 3. Преобразовать из строки в десятирричную систему
// 4. rgb( + массив_преобразованных_цве тов + )
}
this.rgbToHex = function() {
// 1. Удалить rgb( в начале и ) в коцне
// 2. Разделить цвета на 3 части по запятой
// 3. Преобразовать из строки в шестнадцатиричную систему
// 4. Собрать 3 части в один цвет и добавить #
}
}
var c = new ColorsTest();
c.getMiddleColor('#fffff', '#000000');
c.rgbToHex('rgb(255, 255, 255)');
</script>
</body>
</html>