Skip to content

Commit 71d11db

Browse files
keksobotkeksobot
authored
Merge pull request #5 from n4lla0326/module4-task1
2 parents 69dc2ff + adba055 commit 71d11db

3 files changed

Lines changed: 129 additions & 43 deletions

File tree

‎index.html‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="ru">
3+
34
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width,initial-scale=1">
@@ -16,7 +17,8 @@
1617
<section class="img-filters img-filters--inactive container">
1718
<h2 class="img-filters__title visually-hidden">Фильтр фотографий</h2>
1819
<form class="img-filters__form" action="index.html" method="get" autocomplete="off">
19-
<button type=button class="img-filters__button img-filters__button--active" id="filter-default">По умолчанию</button>
20+
<button type=button class="img-filters__button img-filters__button--active" id="filter-default">По
21+
умолчанию</button>
2022
<button type=button class="img-filters__button" id="filter-random">Случайные</button>
2123
<button type=button class="img-filters__button" id="filter-discussed">Обсуждаемые</button>
2224
</form>
@@ -46,7 +48,8 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
4648
<!-- Изменение размера изображения -->
4749
<fieldset class="img-upload__scale scale">
4850
<button type="button" class="scale__control scale__control--smaller">Уменьшить</button>
49-
<input type="text" class="scale__control scale__control--value" value="100%" title="Image Scale" name="scale" readonly>
51+
<input type="text" class="scale__control scale__control--value" value="100%" title="Image Scale"
52+
name="scale" readonly>
5053
<button type="button" class="scale__control scale__control--bigger">Увеличить</button>
5154
</fieldset>
5255

@@ -69,42 +72,48 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
6972
<fieldset class="img-upload__effects effects">
7073
<ul class="effects__list">
7174
<li class="effects__item">
72-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none" value="none" checked>
75+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none"
76+
value="none" checked>
7377
<label for="effect-none" class="effects__label">
7478
<span class="effects__preview effects__preview--none">Превью фото без эффекта</span>
7579
Оригинал
7680
</label>
7781
</li>
7882
<li class="effects__item">
79-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome" value="chrome">
83+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome"
84+
value="chrome">
8085
<label for="effect-chrome" class="effects__label">
8186
<span class="effects__preview effects__preview--chrome">Превью эффекта Хром</span>
8287
Хром
8388
</label>
8489
</li>
8590
<li class="effects__item">
86-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia" value="sepia">
91+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia"
92+
value="sepia">
8793
<label for="effect-sepia" class="effects__label">
8894
<span class="effects__preview effects__preview--sepia">Превью эффекта Сепия</span>
8995
Сепия
9096
</label>
9197
</li>
9298
<li class="effects__item">
93-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin" value="marvin">
99+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin"
100+
value="marvin">
94101
<label for="effect-marvin" class="effects__label">
95102
<span class="effects__preview effects__preview--marvin">Превью эффекта Марвин</span>
96103
Марвин
97104
</label>
98105
</li>
99106
<li class="effects__item">
100-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos" value="phobos">
107+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos"
108+
value="phobos">
101109
<label for="effect-phobos" class="effects__label">
102110
<span class="effects__preview effects__preview--phobos">Превью эффекта Фобос</span>
103111
Фобос
104112
</label>
105113
</li>
106114
<li class="effects__item">
107-
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat" value="heat">
115+
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat"
116+
value="heat">
108117
<label for="effect-heat" class="effects__label">
109118
<span class="effects__preview effects__preview--heat">Превью эффекта Зной</span>
110119
Зной
@@ -154,15 +163,18 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
154163
</div>
155164

156165
<!-- Комментарии к изображению -->
157-
<div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span class="social__comment-total-count">125</span> комментариев</div>
166+
<div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span
167+
class="social__comment-total-count">125</span> комментариев</div>
158168
<ul class="social__comments">
159169
<li class="social__comment">
160-
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35" height="35">
170+
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35"
171+
height="35">
161172
<p class="social__text">Мега фото! Просто обалдеть. Как вам так удалось?</p>
162173
</li>
163174
<li class="social__comment">
164-
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35" height="35">
165-
<p class="social__text">Да это фоташоп!!!!!!!!</p>
175+
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35"
176+
height="35">
177+
<p class="social__text">Да это фоташоп!!!!!!!!</p>
166178
</li>
167179
</ul>
168180

@@ -171,7 +183,8 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
171183

172184
<!-- Форма для отправки комментария -->
173185
<div class="social__footer">
174-
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35" height="35">
186+
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35"
187+
height="35">
175188
<input type="text" class="social__footer-text" placeholder="Ваш комментарий...">
176189
<button type="button" class="social__footer-btn" name="button">Отправить</button>
177190
</div>
@@ -186,11 +199,14 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
186199
<footer class="page-footer container">
187200
<div class="page-footer__wrapper">
188201
<div class="page-footer__copyright copyright">
189-
<a class="copyright__link copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
190-
<p>Сделано в <a class="copyright__link copyright__link--text" href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
202+
<a class="copyright__link copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img
203+
src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
204+
<p>Сделано в <a class="copyright__link copyright__link--text"
205+
href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
191206
</div>
192207
<ul class="page-footer__contacts contacts">
193-
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a></li>
208+
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a>
209+
</li>
194210
<li><a href="https://vk.com/htmlacademy" class="contacts__link contacts__link--vk">VK</a></li>
195211
</ul>
196212
</div>
@@ -227,12 +243,15 @@ <h2 class="success__title">Изображение успешно загруже
227243
</section>
228244
</template>
229245

230-
<!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
231-
<template id="data-error">
232-
<section class="data-error">
233-
<h2 class="data-error__title">Не удалось загрузить данные</h2>
234-
</section>
235-
</template>
246+
<!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
247+
<template id="data-error">
248+
<section class="data-error">
249+
<h2 class="data-error__title">Не удалось загрузить данные</h2>
250+
</section>
251+
</template>
252+
253+
<script src="js/main.js"></script>
236254

237255
</body>
256+
238257
</html>

‎js/function.js‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,21 @@
1-
2-
31
//Функция для проверки длины строки
2+
const checkString = (string, length) => string.length <= length;
43

5-
let checksString = function (string, length) {
6-
if (string.length <= length) {
7-
return true;
8-
}
9-
return false;
10-
};
114
//Функция для проверки, является ли строка палиндромом
125

13-
let isPalindrome = function (string) {
14-
let normalized = string
6+
const isPalindrome = (string) => {
7+
const normalized = string
158
.replaceAll(' ', '')
169
.toLowerCase();
1710
let reversed = '';
1811
for (let i = normalized.length - 1; i >= 0; i--) {
19-
let char = normalized[i];
20-
reversed += char;
12+
reversed += normalized[i];
2113
}
2214
return normalized === reversed;
2315
};
2416

2517
//Функция извлечения цифр
26-
let extractDigits = function (string) {
18+
const extractDigits = (string) => {
2719
if (typeof string === 'number') {
2820
string = string.toString();
2921
}
@@ -34,12 +26,5 @@ let extractDigits = function (string) {
3426
digits += char;
3527
}
3628
}
37-
if (digits === '') {
38-
return NaN;
39-
}
40-
let result = parseInt(digits);
41-
if (result < 0) {
42-
result = result * -1;
43-
}
44-
return result;
29+
return parseInt(digits, 10);
4530
};

‎js/main.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
const NAMES = [
2+
'Артём',
3+
'Борис',
4+
'Владимир',
5+
'Григорий',
6+
'Денис',
7+
'Анастасия',
8+
'Валерия',
9+
'Елена',
10+
'Ирина',
11+
'Ксения'
12+
];
13+
14+
const DESCRIPTIONS = [
15+
'Впечатления, которые остаются навсегда.',
16+
'Каждый кадр - часть летней истории.',
17+
'Простые вещи - самые важные.',
18+
'Отдых - это искусство жить.',
19+
'Вдохновение в каждом дне.',
20+
'Уют в простых вещах.',
21+
'Счастье в мелочах вокруг.',
22+
'Эмоции, которые остаются навсегда.',
23+
'Вкус к жизни в каждом дне.',
24+
'Любовь к жизни в деталях.'
25+
];
26+
27+
const MESSAGES = [
28+
'Всё отлично!В целом всё неплохо.Но не всё.',
29+
'Когда вы делаете фотографию, хорошо бы убирать палец из кадра.',
30+
'В конце концов это просто непрофессионально.',
31+
'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
32+
'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
33+
'Лица у людей на фотке перекошены, как будто их избивают.',
34+
'Как можно было поймать такой неудачный момент ?!'
35+
];
36+
37+
const SIMILAR_ARRAY_COUNT = 25;
38+
const id = 25;
39+
const likes = {
40+
MIN: 15,
41+
MAX: 200
42+
};
43+
const COMMENTS = 30;
44+
const Avatar = {
45+
MIN: 1,
46+
MAX: 6
47+
};
48+
const CommetsId = {
49+
MIN: 10000,
50+
MAX: 1_000_000
51+
};
52+
53+
const getRandomInteger = (a, b) => {
54+
const lower = Math.ceil(Math.min(a, b));
55+
const upper = Math.floor(Math.max(a, b));
56+
const result = Math.random() * (upper - lower + 1) + lower;
57+
return Math.floor(result);
58+
};
59+
60+
const getRandomArrayElement = (elements) =>
61+
elements[getRandomInteger(0, elements.length - 1)];
62+
63+
const getComment = () => ({
64+
id: getRandomInteger(CommetsId.MIN, CommetsId.MAX),
65+
name: getRandomArrayElement(NAMES),
66+
message: getRandomArrayElement(MESSAGES),
67+
avatar: `./img/avatar-${getRandomInteger(Avatar.MIN, Avatar.MAX)}.svg`
68+
});
69+
70+
const createArray = (i) => ({
71+
description: getRandomArrayElement(DESCRIPTIONS),
72+
id: i,
73+
url: `./pictures/${i}.jpg`,
74+
likes: getRandomInteger(Likes.MIN, Likes.MAX),
75+
comments: Array.from({ length: getRandomInteger(0, COMMENTS) }, getComment)
76+
});
77+
78+
const similarArray = Array.from({ length: SIMILAR_ARRAY_COUNT }, (_, i) => createArray(i + 1));
79+
80+
console.log(similarArray);
81+
82+

0 commit comments

Comments
 (0)