Skip to content

Commit 4e304e7

Browse files
NataliaButenkoNataliaButenko
committed
homework_16
1 parent e65dd72 commit 4e304e7

File tree

3 files changed

+214
-0
lines changed

3 files changed

+214
-0
lines changed

‎js-core/homeworks/homework-16/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>homework_16</title>
5+
<meta charset="utf-8" />
6+
<style type="text/css">
7+
li {
8+
list-style-type: none;
9+
}
10+
article {
11+
margin-left: 400px;
12+
}
13+
article > h1 {
14+
margin-left: 100px;
15+
}
16+
article > button {
17+
margin-left: 100px;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<script src="index.js"></script>
23+
</body>
24+
</html>

‎js-core/homeworks/homework-16/index.js‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
//Task1
2+
3+
const solution = arr => {
4+
let arrRes = [];
5+
let arrNumber = [];
6+
let arrString = [];
7+
let arr1_2 = [];
8+
let arr3_4 = [];
9+
let arr5_6 = [];
10+
arr.forEach((elemArr) => {
11+
if (elemArr.length === 2) {
12+
elemArr.forEach((elem) => {
13+
if(typeof elem === 'number') {
14+
arrNumber.push(elem);
15+
} else if(typeof elem === 'string') {
16+
arrString.push(elem);
17+
};
18+
});
19+
} else if(elemArr.length === 3) {
20+
for(let i = 0; i < elemArr.length; i++) {
21+
if(i === 0) {
22+
arr1_2.push(elemArr[i]);
23+
} else if(i === 1) {
24+
arr3_4.push(elemArr[i]);
25+
} else if (i === 2) {
26+
arr5_6.push(elemArr[i]);
27+
};
28+
};
29+
for(let i = 0; i< elemArr[1].length; i++) {
30+
if(i === 0) {
31+
arr1_2.push(elemArr[1][i]);
32+
} else if(i === 1) {
33+
arr3_4.push(elemArr[1][i]);
34+
} else if (i === 2) {
35+
arr5_6.push(elemArr[1][i]);
36+
};
37+
};
38+
};
39+
});
40+
if(arr.length === 3) {
41+
arrRes.push(arrNumber);
42+
arrRes.push(arrString);
43+
} else if(arr.length === 2) {
44+
arrRes.push(arr1_2);
45+
arrRes.push(arr3_4);
46+
arrRes.push(arr5_6);
47+
} else if(arr.length === 1) {
48+
arrRes.push([]);
49+
};
50+
return arrRes;
51+
};
52+
53+
54+
console.log(solution([[1, 'a'], [2, 'b'], [3, 'c']]));
55+
console.log(solution([[1, 3, 5], [2, 4, 6]]));
56+
console.log(solution([[]]));
57+
58+
59+
60+
//Task2
61+
const navigation = [
62+
{
63+
name: 'Главная'
64+
},
65+
{
66+
name: 'Каталог',
67+
children: [
68+
{
69+
name: 'Компьютеры',
70+
children: [{name: 'Ноутбуки'}, {name: 'Планшеты'}]
71+
}
72+
]
73+
},
74+
{
75+
name: 'Профиль'
76+
}
77+
];
78+
79+
80+
// const visualArray = arr => {
81+
// let str = '';
82+
// arr.forEach(item => {
83+
// if(item.children) {
84+
// str += `<ul><h1>${item.name}</h1><li>`;
85+
// str += visualArray(item.children);
86+
// str += '</li></ul>';
87+
// } else {
88+
// str += `<h1>${item.name}</h1>`;
89+
// }
90+
// });
91+
// return str;
92+
// };
93+
// document.body.innerHTML = visualArray(navigation);
94+
95+
96+
97+
//Task3
98+
let app = {
99+
questions: [
100+
{
101+
textQuestions:'Какой оператор из этих - выполняет не только математические операции?',
102+
textAnswers: ['*', '-', '+', '/'],
103+
correctAnswer: 2
104+
},
105+
{
106+
textQuestions:'Какие конструкции для циклов есть в javascript?',
107+
textAnswers: ['Только две: for и while', 'Только одна: for', 'Три: for, while и do...while'],
108+
correctAnswer: 2
109+
},
110+
{
111+
textQuestions:'Что такое ECMAScript?',
112+
textAnswers: ['Спецификация языка Javascrip', 'Новый язык программирования', 'Переработанная реализация Javascript'],
113+
correctAnswer: 0
114+
}
115+
],
116+
createContainer() {
117+
let conteiner = document.createElement('article');
118+
conteiner.appendChild(this.createCaption());
119+
conteiner.appendChild(this.createQuestions());
120+
conteiner.appendChild(this.createButton());
121+
return conteiner;
122+
},
123+
createCaption() {
124+
let caption = document.createElement('h1');
125+
caption.textContent = 'Тест по програмированию';
126+
return caption;
127+
},
128+
createQuestions() {
129+
let id = 0;
130+
let list = document.createElement('ol');
131+
this.questions.forEach((questAnswer, qIndex) => {
132+
let question = document.createElement('li');
133+
question.textContent = questAnswer.textQuestions;
134+
let span = document.createElement('span');
135+
question.appendChild(span);
136+
let sectionAnswer = document.createElement('section');
137+
question.appendChild(sectionAnswer);
138+
139+
questAnswer.textAnswers.forEach((elem, aIndex) => {
140+
let idId = id++;
141+
let answer = document.createElement('p');
142+
let input = document.createElement('input');
143+
input.setAttribute('type', 'checkbox');
144+
input.setAttribute('id', `check${qIndex}-${aIndex}`);
145+
let label = document.createElement('label');
146+
label.setAttribute('for', `check${qIndex}-${aIndex}`);
147+
label.textContent = elem;
148+
answer.appendChild(input);
149+
answer.appendChild(label);
150+
151+
sectionAnswer.appendChild(answer);
152+
question.appendChild(sectionAnswer);
153+
list.appendChild(question);
154+
});
155+
156+
});
157+
return list;
158+
},
159+
createButton() {
160+
let button = document.createElement('button');
161+
button.textContent = 'Проверить мои результаты';
162+
return button;
163+
},
164+
render() {
165+
document.body.appendChild(this.createContainer());
166+
}
167+
};
168+
app.render();
169+
170+
let button = document.querySelector('button');
171+
button.onclick = function() {
172+
let questionsLi = document.querySelectorAll('li');
173+
[...questionsLi].forEach((elemLi, indexQuestion) =>{
174+
let possibleAnswer = elemLi.querySelectorAll('input');
175+
[...possibleAnswer].forEach((elem, index) => {
176+
if(elem.checked) {
177+
if(index === app.questions[indexQuestion].correctAnswer) {
178+
let appAnswer = elemLi.childNodes[1];
179+
appAnswer.setAttribute('style', 'color: #11f91d');
180+
appAnswer.textContent = ' Верно';
181+
182+
} else {
183+
let appAnswer = elemLi.childNodes[1];
184+
appAnswer.setAttribute('style', 'color: #f70408');
185+
appAnswer.textContent = ' Неверно';
186+
}
187+
}
188+
})
189+
})
190+
}

‎js-core/homeworks/homework-16/style.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)