htmlacademy-javascript · keksobot · Jun 23, 2026 · Jun 18, 2026 · Jun 19, 2026 · Jun 23, 2026
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="ru">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -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>
@@ -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>
 
@@ -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>
                         Зной
@@ -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>
 
@@ -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>
@@ -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>
@@ -227,12 +243,15 @@ <h2 class="success__title">Изображение успешно загруже
     </section>
   </template>
 
-    <!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
-    <template id="data-error">
-      <section class="data-error">
-        <h2 class="data-error__title">Не удалось загрузить данные</h2>
-      </section>
-    </template>
+  <!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
+  <template id="data-error">
+    <section class="data-error">
+      <h2 class="data-error__title">Не удалось загрузить данные</h2>
+    </section>
+  </template>
+
+  <script src="js/main.js"></script>
 
 </body>
+
 </html>
diff --git a/js/function.js b/js/function.js
@@ -1,45 +1,30 @@
-
-
 //Функция для проверки длины строки
+const checkString = (string, length) => string.length <= length;
 
-let checksString = function (string, length) {
-  if (string.length <= length) {
-    return true;
-  }
-  return false;
-};
 //Функция для проверки, является ли строка палиндромом
 
-let isPalindrome = function (string) {
-  let normalized = string
+const isPalindrome = (string) => {
+  const normalized = string
     .replaceAll(' ', '')
     .toLowerCase();
   let reversed = '';
   for (let i = normalized.length - 1; i >= 0; i--) {
-    let char = normalized[i];
-    reversed += char;
+    reversed += normalized[i];
   }
   return normalized === reversed;
 };
 
 //Функция извлечения цифр
-let extractDigits = function (string) {
+const extractDigits = (string) => {
   if (typeof string === 'number') {
     string = string.toString();
   }
  let digits = '';
  for (let i = 0; i < string.length; i++) {
    let char = string[i];
    if (char >= '0' && char <= '9') {
       digits += char;
     }
   }
-  if (digits === '') {
-    return NaN;
-  }
-  let result = parseInt(digits);
-  if (result < 0) {
-    result = result * -1;
-  }
-  return result;
+  return parseInt(digits, 10);
 };
diff --git a/js/main.js b/js/main.js
@@ -1,0 +1,82 @@
+const NAMES = [
+  'Артём',
+  'Борис',
+  'Владимир',
+  'Григорий',
+  'Денис',
+  'Анастасия',
+  'Валерия',
+  'Елена',
+  'Ирина',
+  'Ксения'
+];
+
+const DESCRIPTIONS = [
+  'Впечатления, которые остаются навсегда.',
+  'Каждый кадр - часть летней истории.',
+  'Простые вещи - самые важные.',
+  'Отдых - это искусство жить.',
+  'Вдохновение в каждом дне.',
+  'Уют в простых вещах.',
+  'Счастье в мелочах вокруг.',
+  'Эмоции, которые остаются навсегда.',
+  'Вкус к жизни в каждом дне.',
+  'Любовь к жизни в деталях.'
+];
+
+const MESSAGES = [
+  'Всё отлично!В целом всё неплохо.Но не всё.',
+  'Когда вы делаете фотографию, хорошо бы убирать палец из кадра.',
+  'В конце концов это просто непрофессионально.',
+  'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
+  'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
+  'Лица у людей на фотке перекошены, как будто их избивают.',
+  'Как можно было поймать такой неудачный момент ?!'
+];
+
+const SIMILAR_ARRAY_COUNT = 25;
+const id = 25;
+const likes = {
+  MIN: 15,
+  MAX: 200
+};
+const COMMENTS = 30;
+const Avatar = {
+  MIN: 1,
+  MAX: 6
+};
+const CommetsId = {
+  MIN: 10000,
+  MAX: 1_000_000
+};
+
+const getRandomInteger = (a, b) => {
+  const lower = Math.ceil(Math.min(a, b));
+  const upper = Math.floor(Math.max(a, b));
+  const result = Math.random() * (upper - lower + 1) + lower;
+  return Math.floor(result);
+};
+
+const getRandomArrayElement = (elements) =>
+  elements[getRandomInteger(0, elements.length - 1)];
+
+const getComment = () => ({
+  id: getRandomInteger(CommetsId.MIN, CommetsId.MAX),
+  name: getRandomArrayElement(NAMES),
+  message: getRandomArrayElement(MESSAGES),
+  avatar: `./img/avatar-${getRandomInteger(Avatar.MIN, Avatar.MAX)}.svg`
+});
+
+const createArray = (i) => ({
+  description: getRandomArrayElement(DESCRIPTIONS),
+  id: i,
+  url: `./pictures/${i}.jpg`,
+  likes: getRandomInteger(Likes.MIN, Likes.MAX),
+  comments: Array.from({ length: getRandomInteger(0, COMMENTS) }, getComment)
+});
+
+const similarArray = Array.from({ length: SIMILAR_ARRAY_COUNT }, (_, i) => createArray(i + 1));
+
+console.log(similarArray);
+
+