Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: разбивает код на модули #4

Closed
wants to merge 1 commit into from
Closed

feat: разбивает код на модули #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 40 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="ru">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
Expand All @@ -16,7 +17,8 @@
<section class="img-filters img-filters--inactive container">
<h2 class="img-filters__title visually-hidden">Фильтр фотографий</h2>
<form class="img-filters__form" action="index.html" method="get" autocomplete="off">
<button type=button class="img-filters__button img-filters__button--active" id="filter-default">По умолчанию</button>
<button type=button class="img-filters__button img-filters__button--active" id="filter-default">По
умолчанию</button>
<button type=button class="img-filters__button" id="filter-random">Случайные</button>
<button type=button class="img-filters__button" id="filter-discussed">Обсуждаемые</button>
</form>
Expand Down Expand Up @@ -46,7 +48,8 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
<!-- Изменение размера изображения -->
<fieldset class="img-upload__scale scale">
<button type="button" class="scale__control scale__control--smaller">Уменьшить</button>
<input type="text" class="scale__control scale__control--value" value="100%" title="Image Scale" name="scale" readonly>
<input type="text" class="scale__control scale__control--value" value="100%" title="Image Scale"
name="scale" readonly>
<button type="button" class="scale__control scale__control--bigger">Увеличить</button>
</fieldset>

Expand All @@ -69,42 +72,48 @@ <h2 class="img-upload__title visually-hidden">Загрузка фотограф
<fieldset class="img-upload__effects effects">
<ul class="effects__list">
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none" value="none" checked>
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none"
value="none" checked>
<label for="effect-none" class="effects__label">
<span class="effects__preview effects__preview--none">Превью фото без эффекта</span>
Оригинал
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome" value="chrome">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome"
value="chrome">
<label for="effect-chrome" class="effects__label">
<span class="effects__preview effects__preview--chrome">Превью эффекта Хром</span>
Хром
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia" value="sepia">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia"
value="sepia">
<label for="effect-sepia" class="effects__label">
<span class="effects__preview effects__preview--sepia">Превью эффекта Сепия</span>
Сепия
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin" value="marvin">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin"
value="marvin">
<label for="effect-marvin" class="effects__label">
<span class="effects__preview effects__preview--marvin">Превью эффекта Марвин</span>
Марвин
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos" value="phobos">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos"
value="phobos">
<label for="effect-phobos" class="effects__label">
<span class="effects__preview effects__preview--phobos">Превью эффекта Фобос</span>
Фобос
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat" value="heat">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat"
value="heat">
<label for="effect-heat" class="effects__label">
<span class="effects__preview effects__preview--heat">Превью эффекта Зной</span>
Зной
Expand Down Expand Up @@ -154,15 +163,18 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
</div>

<!-- Комментарии к изображению -->
<div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span class="social__comment-total-count">125</span> комментариев</div>
<div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span
class="social__comment-total-count">125</span> комментариев</div>
<ul class="social__comments">
<li class="social__comment">
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35" height="35">
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35"
height="35">
<p class="social__text">Мега фото! Просто обалдеть. Как вам так удалось?</p>
</li>
<li class="social__comment">
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35" height="35">
<p class="social__text">Да это фоташоп!!!!!!!!</p>
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35"
height="35">
<p class="social__text">Да это фоташоп!!!!!!!!</p>
</li>
</ul>

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

<!-- Форма для отправки комментария -->
<div class="social__footer">
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35" height="35">
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35"
height="35">
<input type="text" class="social__footer-text" placeholder="Ваш комментарий...">
<button type="button" class="social__footer-btn" name="button">Отправить</button>
</div>
Expand All @@ -186,11 +199,14 @@ <h2 class="big-picture__title visually-hidden">Просмотр фотогра
<footer class="page-footer container">
<div class="page-footer__wrapper">
<div class="page-footer__copyright copyright">
<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>
<p>Сделано в <a class="copyright__link copyright__link--text" href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
<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>
<p>Сделано в <a class="copyright__link copyright__link--text"
href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
</div>
<ul class="page-footer__contacts contacts">
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a></li>
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a>
</li>
<li><a href="https://vk.com/htmlacademy" class="contacts__link contacts__link--vk">VK</a></li>
</ul>
</div>
Expand Down Expand Up @@ -227,12 +243,13 @@ <h2 class="success__title">Изображение успешно загруже
</section>
</template>

<!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
<template id="data-error">
<section class="data-error">
<h2 class="data-error__title">Не удалось загрузить данные</h2>
</section>
</template>
<script src="./js/main.js"></script>
<!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
<template id="data-error">
<section class="data-error">
<h2 class="data-error__title">Не удалось загрузить данные</h2>
</section>
</template>
<script type="module" src="js/main.js"></script>
</body>

</html>
51 changes: 51 additions & 0 deletions js/content-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { descriptionsPhotos, usernames, messages } from './data.js';
import { getRandomInteger } from './util.js';

// Константы
const MIN_LIKES = 15;
const MAX_LIKES = 200;
const MIN_AVATAR_INDEX = 1;
const MAX_AVATAR_INDEX = 6;
const MAX_COMMENTS = 30;

// Создает один комментарий
const createComment = (id) => ({
id,
avatar: `img/avatar-${getRandomInteger(MIN_AVATAR_INDEX, MAX_AVATAR_INDEX)}.svg`,
message: messages[getRandomInteger(0, messages.length - 1)],
name: usernames[getRandomInteger(0, usernames.length - 1)]
});

// Создает массив комментариев
const createComments = (count, startId) => {
const comments = [];
for (let i = 0; i < count; i++) {
comments.push(createComment(startId + i));
}
return comments;
};

// Создает одну фотографию
const createPhoto = (id, nextCommentId) => ({
id,
url: `photos/${id}.jpg`,
description: descriptionsPhotos[id - 1],
likes: getRandomInteger(MIN_LIKES, MAX_LIKES),
comments: createComments(getRandomInteger(0, MAX_COMMENTS), nextCommentId)
});

// Создает массив фотографий
const createPhotos = (count) => {
const photos = [];
let nextCommentId = 1;

for (let i = 1; i <= count; i++) {
const photo = createPhoto(i, nextCommentId);
nextCommentId += photo.comments.length;
photos.push(photo);
}

return photos;
};

export {createPhotos };
53 changes: 53 additions & 0 deletions js/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@

// Временные данные
const descriptionsPhotos = [
'Нет людей — нет проблем!',
'На пляж — это туда.',
'Лазурное море, волшебное море, прекрасное море, хочу тебя понять...',
'Согласия на эту фотографию я не получал',
'Счастливы, потому что не знают, какая участь их ждет.',
'Эта машина такая черная, что даже солнцу стыдно светить на неё.',
'Типичный завтрак в отеле 5 звезд.',
'В этом напитке нет ничего, кроме надежд, разбитых в хлам!',
'Я пыталась его поймать, но он оказался быстрее.',
'Это мы у пляжников спёрли.',
'Поиграла с эстетикой. Проиграла',
'Продам гараж.',
'Рыба с огурцами: еда для тех, кто ненавидит себя и все вокруг!',
'Фото для истинных ценителей неуместного кулинарного юмора.',
'Вот гири к ним привяжу, соседи порадуются.',
'Здесь мы видим небесный лайнер на фоне… ничего!',
'Вам, наверное, интересно зачем я вас здесь собрал?',
'Что древнее: эта тачка или эта стена?',
'Иду к холодильнику в три часа ночи.',
'Вы когда-нибудь видели, как природа отыгралась на пальмах? Теперь видели.',
'Эта еда настолько невзрачна, что даже фотосессия не спасла!',
'Детям до 18 лет запрещено смотреть в левый угол фотографии.',
'Этот краб знает: лучше быть смешным, чем съеденным!',
'Забудь о музыке — послушай, как все вокруг шумят!',
'В последний раз видел такое на "Нашествии 2002"'
];

const usernames = [
'Шерлок Холмс',
'Эркюль Пуаро',
'Джеймс Бонд',
'Лисбет Саландер',
'Нэнси Дрю',
'Квентин Тарантино',
'Дик Трейси',
'Инспектор Гаджет',
'Кристофер Нолан',
'Хантер С. Томпсон'
];

const messages = [
'Всё отлично!',
'В целом всё неплохо. Но не всё.',
'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце концов это просто непрофессионально.',
'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?'
];

export { descriptionsPhotos, usernames, messages };
Loading
Loading