Помогите пожалуйста переделать данный код в ООП. Начал только учить js, к тому ООП почти не изучал, а тут такая задача
Код:
<script>
price = 0;
rand = 1;
cof = 0;
color = ["Фамилия:", "", "Имя:", "", "Отчество:", "", "Email:", "", "Пароль:", "", "Цвет: ',' , "Оттенок:", "", "Группа товаров:", "", "Бренд:", "", "Value:", "", "Коф.Цвет", "", "Цена", " "];
surname.onblur = function() {
var surname_ = document.getElementById('surname').value[0];
var isUpperCase = surname_.toUpperCase()===surname_;
if(!!isUpperCase === false){
document.getElementById('surname').placeholder = 'Ошибка';
surname.focus();
}
else {
color[1] = document.getElementById('surname').value + '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
}
};
surname.onfocus = function() {
document.getElementById('surname').value = '';
};
lastname.onblur = function() {
var surname_ = document.getElementById('lastname').value[0];
var isUpperCase = surname_.toUpperCase()===surname_;
if(!!isUpperCase === false){
document.getElementById('lastname').placeholder = 'Ошибка';
lastname.focus();
}
else {
color[3] =document.getElementById('lastname').value + '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
}
};
lastname.onfocus = function() {
document.getElementById('lastname').value = '';
};
fathername.onblur = function() {
var surname_ = document.getElementById('fathername').value[0];
var isUpperCase = surname_.toUpperCase()===surname_;
if(!!isUpperCase === false){
document.getElementById('fathername').placeholder = 'Ошибка';
fathername.focus();
}
else {
color[5] = document.getElementById('fathername').value + '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
}
};
fathername.onfocus = function() {
document.getElementById('fathername').value = '';
};
email.onblur = function validate() {
var reg = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
var address = document.getElementById("email").value;
if(reg.test(address) === false) {
document.getElementById('email').placeholder = 'Введите корректный e-mail';
document.getElementById("email").focus();
}
else {
color[7] = document.getElementById('email').value + '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
}
};
email.onfocus = function() {
document.getElementById('email').value = '';
};
pass.onblur = function() {
var textPass = document.getElementById("pass").value;
var r = /[^A-Z-a-z-0-9]/g;
if (r.test(textPass)) {
document.getElementById('pass').placeholder = " Введено недопустимые символы. Разрешены латинские буквы и цифры";
pass.focus();
}
if (textPass.length < 8) {
document.getElementById('pass').placeholder = " Слишком короткий пароль";
pass.focus();
}
if (textPass.length > 20) {
document.getElementById('pass').placeholder = "Слишком длинный пароль";
pass.focus();
}
else {
color[9] = document.getElementById('pass').value + '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
}
};
pass.onfocus = function() {
document.getElementById('pass').value = '';
};
mas = [[ "Сине-черный", "Сине-желтый", "Сине-красный», [0.3]], [ "Черноно-желтый", "Красно-зеленый", "Красно-черный", [0.05]], [ " желто-белый "," желто-голубой "," желто-черный "], [0.9]];
var buttons = document.getElementsByName("radio1");
length_m = mas.length;
function setColor(event) {
var options = document.getElementsByName("radio1");
var options2 = document.getElementsByName("radio2");
if (options) {
for (var i = 0; i < options.length; i++) {
if (options[i].checked){
o = options[i].value;
document.getElementById('lb1').innerHTML= mas[i][0];
document.getElementById('lb2').innerHTML= mas[i][1];
document.getElementById('lb3').innerHTML= mas[i][2];
options2[0].value = mas[i][0];
options2[1].value = mas[i][1];
options2[2].value = mas[i][2];
k = i;
}
}
}
color[11] = event.target.value+ '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
cof = parseFloat(mas[k][3]);
color[21] = mas[k][3] +'\n';
}
for (var i = 0; i < buttons.length; i++)
buttons[i].addEventListener("change", setColor);
var buttons2 = document.getElementsByName("radio2");
function setColor2(event) {
color[13] = event.target.value.split(',')+'\n';
var str = color.join(' ');
document.getElementById('text').value = str;
}
for (var i = 0; i < buttons.length; i++)
buttons2[i].addEventListener("change", setColor2);
function run1() {
color[15] = document.getElementById("select1").value+ '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
}
function run2() {
color[17] = document.getElementById("select2").value.split('.')[0]+ '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
price = document.getElementById("select2").value.split('.');
color[23] = (parseInt(price[1])*rand)*cof;
}
(function() {
var ros = document.getElementById('select1'),
mir = document.getElementById('select2');
ros.onchange = function(){ mir.selectedIndex = this.selectedIndex;
var index = this.selectedIndex;
if(index === 1){
mir[mir.length] = new Option('Acer','Nokia','SDD');
}
if(index === 2){
mir[mir.length] = new Option('Acer313','3113Nokia','41312SDD');
}
};
})();
function checks() {
var cbx = document.getElementById("flags").getElementsByTagName("input"), mas = [];
for (i=0; i < cbx.length; i++) {
if (cbx[i].type === "checkbox" && cbx[i].checked) {
mas.push(cbx[i].value);
}
}
color[19] = mas + '\n';
var str = color.join(' ');
document.getElementById('text').value = str;
};
function random() {
rand = 2 + Math.random() * (5 + 1 - 2);
rand = Math.floor(rand);
};
</script>