Skip to content

Commit fa84296

Browse files
Balashov NikitaOlegLustenko
Balashov Nikita
authored and
OlegLustenko
committed
homework-14
1 parent 1d490da commit fa84296

File tree

3 files changed

+342
-0
lines changed

3 files changed

+342
-0
lines changed

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Home work 14</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700" rel="stylesheet">
10+
</head>
11+
12+
<body>
13+
<div class="wraper">
14+
15+
<div class="quizz-block">
16+
17+
<header class="quizz-title">Test of Programming</header>
18+
19+
<ol class="quizz-list">
20+
<li class="question-block">
21+
<header class="question-title">Question title 1.</header>
22+
23+
<main class="question-body">
24+
<label class="answer"><input type="checkbox">Any answer</label>
25+
<label class="answer"><input type="checkbox">Any answer</label>
26+
<label class="answer"><input type="checkbox">Any answer</label>
27+
</main>
28+
</li>
29+
<li class="question-block">
30+
<header class="question-title">Question title 2.</header>
31+
32+
<main class="question-body">
33+
<label class="answer"><input type="checkbox">Any answer</label>
34+
<label class="answer"><input type="checkbox">Any answer</label>
35+
<label class="answer"><input type="checkbox">Any answer</label>
36+
</main>
37+
</li>
38+
<li class="question-block">
39+
<header class="question-title">Question title 3.</header>
40+
41+
<main class="question-body">
42+
<label class="answer"><input type="checkbox">Any answer</label>
43+
<label class="answer"><input type="checkbox">Any answer</label>
44+
<label class="answer"><input type="checkbox">Any answer</label>
45+
</main>
46+
</li>
47+
</ol>
48+
<footer class="quizz-footer">
49+
<span class="check-answers btn-shadow-effect"> Check Answers</span>
50+
</footer>
51+
52+
</div>
53+
54+
</div>
55+
56+
<script src="src/main.js"></script>
57+
</body>
58+
59+
</html>

‎js-core/homeworks/homework-14/src/main.js‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
/*
2+
TASK 0. Найдите числа которые повторяются нечетное количество раз
3+
в массиве
4+
solution([12, 23, 34, 12, 12, 23, 12, 45]) -> [34 45]
5+
solution([4, 4, 100, 5000, 4, 4, 4, 4, 4, 100, 100,]) -> [4 100 5000]
6+
solution([3, 3, 4, 6, 4, 5, 9, 9, 21, 9]) -> [6 5 9 21]
7+
solution([4, 8, 15, 16, 23, 42, 4, 15, 42, 42]) -> [8 16 23 42]
8+
solution([2, 2, 44, 44]) => []
9+
*/
10+
11+
let solution = (arr) => {
12+
let counter = {};
13+
arr.forEach(num => {
14+
counter[num] ? counter[num]++ : counter[num] = 1;
15+
});
16+
const counterKeys = Object.keys(counter);
17+
const counterValues = Object.values(counter);
18+
19+
let output = new Set();
20+
21+
counterValues.forEach((num, index) => {
22+
if(num === 1) {
23+
output.add(counterKeys[index])
24+
}
25+
if(num % 2 !== 0) {
26+
output.add(counterKeys[index]);
27+
}
28+
});
29+
30+
return output;
31+
};
32+
33+
console.log(solution([12, 23, 34, 12, 12, 23, 12, 45]));
34+
console.log(solution([4, 4, 100, 5000, 4, 4, 4, 4, 4, 100, 100,]));
35+
console.log(solution([3, 3, 4, 6, 4, 5, 9, 9, 21, 9]));
36+
console.log(solution([4, 8, 15, 16, 23, 42, 4, 15, 42, 42]));
37+
console.log(solution([2, 2, 44, 44]));
38+
39+
//-----------------------------------------------------------
40+
41+
const someWebpackModule = `module.exports = {
42+
context: %%HOMEDIR%,
43+
entry: {
44+
app: "%%HOMEDIR%%/%%APP_DIR%%/%%APPNAME%%.js"
45+
},
46+
output: {
47+
path: %%HOMEDIR%% + '/app',
48+
filename: "dist/[%%APPNAME%%].js",
49+
library: '[%%APPNAME%%]'
50+
}
51+
}`;
52+
53+
/* TASK - 1
54+
Распарсите строку и замените
55+
%%HOMEDIR%% -> './JavaScript-Basic'
56+
%%APP_DIR%% -> 'fixtures/src'
57+
%%APPNAME%% -> 'app.js'
58+
Вам нужно написать функцию которая в зависимости от разных параметров
59+
будет изменять заданные значения на необходимые вам
60+
Сделайте несколько вызовов данной функции
61+
*
62+
* */
63+
64+
const parseStr = str => {
65+
const correctStr = str.replace(/%%HOMEDIR%./gmi, '"./JavaScript-Basic"').replace(/%%APP_DIR%%/gmi, 'fixtures/src').replace(/%%APPNAME%%/gmi, 'app.js').replace(/module.exports = /, '').replace(/'/gmi, '"').replace(/""/gmi, '"');
66+
return correctStr;
67+
}
68+
69+
console.log(parseStr(someWebpackModule));
70+
71+
/*
72+
TASK - 2
73+
Сделайте разметку как скриншоте используя HTML
74+
вам необходимо использовать тэги(!)
75+
*/
76+
77+
const task2 = true;
78+
79+
80+
/*
81+
TASK 3
82+
JavaScript =>
83+
Создать объект с методами, которые будут динамически генерировать DOM
84+
Это будет тест, который мы будем разрабатывать в следующих заданиях.
85+
Сейчас вам нужно только динамически создать html,
86+
методы должны храниться в одном объекте.
87+
Изначально на странице должен быть только <body>,
88+
вызывая методы объекта нужно создать dom-элементы
89+
*/
90+
91+
const quizz = {
92+
create() {
93+
const wraper = document.createElement('div');
94+
const quizzBlock = document.createElement('div');
95+
const quizTitle = document.createElement('header');
96+
const quizzFooter = document.createElement('footer');
97+
const quizzList = document.createElement('ol');
98+
99+
wraper.setAttribute('class', 'wraper');
100+
quizzBlock.setAttribute('class', 'quizz-block');
101+
quizzList.setAttribute('class', 'quizz-list');
102+
quizTitle.setAttribute('class', 'quizz-title');
103+
quizTitle.textContent = 'Test of Programming';
104+
105+
const questionTitles = ['What is the best program language?', 'What is your name?', 'What is the best car?'];
106+
const answers = [
107+
['JS', 'JavaScript', 'HTML'],
108+
['Vasya', 'Petr', 'Vitya'],
109+
['Lada Sedan', 'Juguli', 'Priora']
110+
];
111+
112+
function fillQuizzList() {
113+
for(let i = 0; i < questionTitles.length; i++) {
114+
const li = document.createElement('li');
115+
const header = document.createElement('header');
116+
const main = document.createElement('main');
117+
118+
li.setAttribute('class', 'question-block');
119+
header.setAttribute('class', 'question-title');
120+
main.setAttribute('class', 'question-body');
121+
header.textContent = questionTitles[i];
122+
123+
for(let j = 0; j < answers[i].length; j++) {
124+
const label = document.createElement('label');
125+
const input = document.createElement('input');
126+
const p = document.createElement('p');
127+
128+
label.setAttribute('class', 'answer');
129+
p.textContent = answers[i][j];
130+
input.setAttribute('type', 'checkbox');
131+
label.appendChild(input);
132+
label.appendChild(p);
133+
main.appendChild(label);
134+
}
135+
136+
li.appendChild(header);
137+
li.appendChild(main);
138+
quizzList.appendChild(li);
139+
}
140+
}
141+
fillQuizzList();
142+
143+
function fillQuizzFooter() {
144+
const span = document.createElement('span');
145+
quizzFooter.setAttribute('class', 'quizz-footer');
146+
span.setAttribute('class', 'check-answers btn-shadow-effect');
147+
span.textContent = 'Check Answers';
148+
quizzFooter.appendChild(span);
149+
}
150+
fillQuizzFooter();
151+
152+
quizzBlock.appendChild(quizTitle);
153+
quizzBlock.appendChild(quizzList);
154+
quizzBlock.appendChild(quizzFooter);
155+
156+
wraper.appendChild(quizzBlock);
157+
158+
document.body.appendChild(wraper);
159+
}
160+
}
161+
162+
quizz.create();

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

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
* {
2+
box-sizing: border-box;
3+
outline: none;
4+
}
5+
6+
body{
7+
margin: 0;
8+
padding: 0;
9+
background-color: #FFECA6;
10+
}
11+
12+
li{
13+
font-size: 20px;
14+
}
15+
16+
input{
17+
cursor: pointer;
18+
}
19+
20+
label{
21+
display: -webkit-inline-flex;
22+
display: -moz-inline-flex;
23+
display: -ms-inline-flex;
24+
display: -o-inline-flex;
25+
display: inline-flex;
26+
flex-direction: row;
27+
}
28+
p{
29+
margin: 0;
30+
}
31+
32+
.wraper{
33+
display: -webkit-flex;
34+
display: -moz-flex;
35+
display: -ms-flex;
36+
display: -o-flex;
37+
display: flex;
38+
justify-content: center;
39+
}
40+
41+
.quizz-title{
42+
font-family: 'Pacifico', cursive;
43+
font-size: 32px;
44+
text-align: center;
45+
}
46+
47+
.quizz-block{
48+
margin-top: 30px;
49+
min-width: 800px;
50+
border: 2px solid #000000;
51+
border-radius: 25px;
52+
}
53+
54+
.quizz-list{
55+
display: -webkit-inline-flex;
56+
display: -moz-inline-flex;
57+
display: -ms-inline-flex;
58+
display: -o-inline-flex;
59+
display: inline-flex;
60+
flex-direction: column;
61+
justify-content: space-around;
62+
padding-top: 30px;
63+
padding-left: 200px;
64+
}
65+
66+
.question-body{
67+
display: -webkit-flex;
68+
display: -moz-flex;
69+
display: -ms-flex;
70+
display: -o-flex;
71+
display: flex;
72+
flex-direction: column;
73+
margin-bottom: 20px;
74+
}
75+
76+
.answer, .check-answers{
77+
cursor: pointer;
78+
}
79+
80+
.question-title, .answer{
81+
font-family: 'Yanone Kaffeesatz' ;
82+
}
83+
84+
.question-title{
85+
font-size: 20px;
86+
font-weight: 700;
87+
margin-bottom: 10px;
88+
}
89+
90+
.answer{
91+
font-size: 18px;
92+
}
93+
94+
.check-answers{
95+
padding: 20px 30px;
96+
border-radius: 15px;
97+
font-size: 26px;
98+
transition: .2s linear;
99+
cursor: pointer;
100+
margin-right: 20px;
101+
font-family: 'Pacifico', cursive;
102+
background-color: #D0FF00;
103+
backface-visibility: hidden;
104+
}
105+
106+
.btn-shadow-effect:hover{
107+
box-shadow: 2px 2px #FFECA6, 4px 4px #212C2F;
108+
top: -4px;
109+
left: -4px;
110+
}
111+
112+
.quizz-footer{
113+
display: -webkit-flex;
114+
display: -moz-flex;
115+
display: -ms-flex;
116+
display: -o-flex;
117+
display: flex;
118+
align-items: center;
119+
justify-content: center;
120+
margin-bottom: 20px;
121+
}

0 commit comments

Comments
 (0)