Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 86b8f52

Browse files
hw_2
1 parent ebdf372 commit 86b8f52

File tree

6 files changed

+206
-49
lines changed

6 files changed

+206
-49
lines changed

‎01/bo_lesson1‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎02/elena_karpovich/work_2.html‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -25,61 +25,59 @@ <h3>Filter by age</h3>
2525
</div>
2626
<script>
2727

28-
2928
// 1. Сгрупировать пользователей по возрасту и вывести
3029
// в элемент select с value=""
3130

32-
// 2. При віборе соответствующего option осуществить вывод
31+
// 2. При выборе соответствующего option осуществить вывод
3332
// соответствующих пользователей в элемент <div id="res"></div>
3433

34+
const usersSelect = document.getElementById('users-select');
35+
const res = document.getElementById('res');
3536

36-
const usersSelect = document.getElementById('users-select');
37-
const res = document.getElementById('res');
38-
39-
let users = [
40-
{id: 1, name: "John", age: "20"},
41-
{id: 2, name: "Sasha", age: "30"},
42-
{id: 3, name: "Bill", age: "40"},
43-
{id: 4, name: "Ashley", age: "20"},
44-
{id: 5, name: "Rachel", age: "40"},
45-
{id: 6, name: "Tom", age: "30"},
46-
{id: 7, name: "Steve", age: "30"},
47-
{id: 8, name: "Jim", age: "40"},
48-
{id: 9, name: "Willy", age: "20"}
49-
];
37+
let users = [
38+
{id: 1, name: "John", age: "20"},
39+
{id: 2, name: "Sasha", age: "30"},
40+
{id: 3, name: "Bill", age: "40"},
41+
{id: 4, name: "Ashley", age: "20"},
42+
{id: 5, name: "Rachel", age: "40"},
43+
{id: 6, name: "Tom", age: "30"},
44+
{id: 7, name: "Steve", age: "30"},
45+
{id: 8, name: "Jim", age: "40"},
46+
{id: 9, name: "Willy", age: "20"}
47+
];
5048

51-
let usersAges = users.map(function (user) {
52-
return user.age;
53-
});
49+
let usersAges = users.map(function (user) {
50+
return user.age;
51+
});
5452

55-
let unicAge = usersAges.filter(function(age, index) {
56-
return usersAges.indexOf(age) === index;
57-
});
53+
let unicAge = usersAges.filter(function(age, index) {
54+
return usersAges.indexOf(age) === index;
55+
});
5856

59-
unicAge.forEach(function(elem) {
60-
elem = '<option value="' + elem + '">' + elem + '</option>';
61-
usersSelect.innerHTML += elem;
62-
});
57+
unicAge.forEach(function(elem) {
58+
elem = '<option value="' + elem + '">' + elem + '</option>';
59+
usersSelect.innerHTML += elem;
60+
});
6361

64-
let selectedType = "0";
65-
function ageFilter(e) {
66-
selectedType = e.value;
67-
let result = "";
68-
let renderAge = [];
69-
for (let i = 0; i < users.length; i++) {
70-
if (users[i].age === selectedType || selectedType === "0") {
71-
renderAge.push(users[i]);
62+
let selectedType = "0";
63+
function ageFilter(e) {
64+
selectedType = e.value;
65+
let result = "";
66+
let renderAge = [];
67+
for (let i = 0; i < users.length; i++) {
68+
if (users[i].age === selectedType || selectedType === "0") {
69+
renderAge.push(users[i]);
70+
}
7271
}
72+
for (let y=0; y < renderAge.length; y++) {
73+
result += renderUsersArr(renderAge[y]);
74+
}
75+
res.innerHTML = result;
7376
}
74-
for (let y=0; y < renderAge.length; y++) {
75-
result += renderUsersArr(renderAge[y]);
76-
}
77-
res.innerHTML = result;
78-
}
7977

80-
function renderUsersArr(item) {
81-
return '<h4>'+ item.name + ':' + ' ' + item.age +' years</h4>'
82-
}
78+
function renderUsersArr(item) {
79+
return '<h4>'+ item.name + ':' + ' ' + item.age +' years</h4>'
80+
}
8381

8482
</script>
8583

‎02/oleksandr_borysiuk/work_1.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
body{
7+
background: #000;
8+
}
9+
10+
.header{
11+
margin: 0 auto;
12+
text-align: center;
13+
margin-top: 30px;
14+
margin-bottom: 20px;
15+
font-size: 45px;
16+
color: white;
17+
}
18+
.list-group{
19+
width: 67%;
20+
margin: 0 auto;
21+
}
22+
.list-group-item{
23+
height: 50px;
24+
font-size: 25px;
25+
border: 1px solid black;
26+
line-height: 50px;
27+
padding-left: 20px;
28+
margin-bottom: 20px;
29+
list-style-type: none;
30+
background:white;
31+
}
32+

‎02/oleksandr_borysiuk/work_1.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>List of friends</title>
5+
<link rel="stylesheet" type="text/css" href="work_1.css">
6+
<meta charset="utf-8">
7+
</head>
8+
9+
<body>
10+
<div class="container">
11+
<h1 class="header">List of my friends</h1>
12+
13+
<ul id="list" class="list-group">
14+
<li class="list-group-item"></li>
15+
</ul>
16+
</div>
17+
18+
<script>
19+
20+
// Написать функцию map, которая будет принимать в качестве
21+
// аргумента массив arr и функцию, которая в свою очередь будет
22+
// осуществлять преобразование массива arr в вид
23+
// [ "<li class="list-group-item">Tom</li>", ....]
24+
// и выводить элементы массива в ul с id="res"
25+
// Вывод должен осуществляться в отсортированном по алфавиту виде
26+
27+
let usersNames = ["Tom", "Steve", "Bill", "Rita", "Pete", "Ashley", "Richard"];
28+
const list = document.getElementById('list');
29+
30+
// Сигнатура map
31+
function map(list, arr) {
32+
arr = arr.map(function (item) { //мап проходить по кожному з елементів Юзернеймс і перетворює його в лі
33+
return item = '<li class="list-group-item">' + item + '</li>';
34+
});
35+
arr = arr.join(""); //з'єднує масив
36+
console.log(arr);
37+
return list.innerHTML = arr;
38+
}
39+
40+
map(list, usersNames);
41+
42+
</script>
43+
44+
</body>
45+
</html>

‎02/oleksandr_borysiuk/work_2.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>List of friends</title>
6+
<meta charset="utf-8">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
8+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
9+
</head>
10+
11+
<body>
12+
13+
<div class="container">
14+
<h1>Filter</h1>
15+
<div class="row">
16+
17+
<div class="col-sm-3">
18+
<div class="form-group">
19+
<select id="users-select" class="custom-select">
20+
<option>Choose age</option>
21+
</select>
22+
</div>
23+
</div>
24+
25+
<div class="col-sm-5 offset-sm-1">
26+
<h3>Filter by age</h3>
27+
<div id="res"></div>
28+
</div>
29+
30+
</div>
31+
</div>
32+
33+
<script>
34+
35+
// 1. Сгрупировать пользователей по возрасту и вывести
36+
// в элемент select с value=""
37+
38+
// 2. При выборе соответствующего option осуществить вывод
39+
// соответствующих пользователей в элемент <div id="res"></div>
40+
41+
const usersSelect = document.getElementById('users-select');
42+
const res = document.getElementById('res');
43+
44+
let users = [
45+
{ id: 1, name: "John", age: "20" },
46+
{ id: 2, name: "Sasha", age: "30" },
47+
{ id: 3, name: "Bill", age: "40" },
48+
{ id: 4, name: "Ashley", age: "20" },
49+
{ id: 5, name: "Rachel", age: "40" },
50+
{ id: 6, name: "Tom", age: "30" },
51+
{ id: 7, name: "Steve", age: "30" },
52+
{ id: 8, name: "Jim", age: "40" },
53+
{ id: 9, name: "Willy", age: "20" },
54+
{ id: 10, name: "Steve", age: "50" },
55+
{ id: 11, name: "Jack", age: "50" },
56+
{ id: 12, name: "Jack", age: "14" }
57+
];
58+
59+
let usersAges = users.map(function (user) {
60+
return user.age;
61+
});
62+
63+
let unicAge = usersAges.filter(function (age, index) {
64+
return usersAges.indexOf(age) === index;
65+
});
66+
67+
for (var i = 0; i < unicAge.length; i++) {
68+
var option = document.createElement("option");
69+
option.value = unicAge[i];
70+
option.text = unicAge[i];
71+
usersSelect.append(option);
72+
}
73+
74+
usersSelect.addEventListener('change', function () {
75+
res.innerHTML = users.filter(filteredUser =>
76+
filteredUser.age == usersSelect.value).map(filteredUser => filteredUser.name);
77+
usersSelect.value ? res.innerHTML : false;
78+
});
79+
80+
</script>
81+
82+
</body>
83+
84+
</html>

‎02/ruslan_bondar/HOME/work_2.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,12 @@ <h3>Filter by age</h3>
2828
</div>
2929
<script>
3030

31-
3231
// 1. Сгрупировать пользователей по возрасту и вывести
3332
// в элемент select с value=""
3433

35-
// 2. При віборе соответствующего option осуществить вывод
34+
// 2. При выборе соответствующего option осуществить вывод
3635
// соответствующих пользователей в элемент <div id="res"></div>
3736

38-
3937
const usersSelect = document.getElementById('users-select');
4038
const res = document.getElementById('res');
4139

@@ -48,7 +46,10 @@ <h3>Filter by age</h3>
4846
{ id: 6, name: "Tom", age: "30" },
4947
{ id: 7, name: "Steve", age: "30" },
5048
{ id: 8, name: "Jim", age: "40" },
51-
{ id: 9, name: "Willy", age: "20" }
49+
{ id: 9, name: "Willy", age: "20" },
50+
{ id: 10, name: "Steve", age: "50" },
51+
{ id: 11, name: "Jack", age: "50" },
52+
{ id: 12, name: "Jack", age: "14" }
5253
];
5354

5455
let usersAges = users.map(function (user) {
@@ -72,10 +73,8 @@ <h3>Filter by age</h3>
7273
usersSelect.value ? res.innerHTML : false;
7374
});
7475

75-
7676
</script>
7777

78-
7978
</body>
8079

8180
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /