Initial commit

VitalyChy · Mar 9, 2024 · 0f4663b · 0f4663b
commit 0f4663b
Show file tree

Hide file tree

Showing 14 changed files with 251 additions and 0 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -0,0 +1,22 @@
+name: Tests 7-8
+
+on:
+  push:
+    branches:
+      - '**'
+    tags:
+      - '**'
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Check if the repository is private
+        run: exit 1
+        if: ${{github.event.repository.private}}
+      - name: Tests
+        uses: Yandex-Practicum/test-project-action@v1
+        with:
+          project: 'zakrivayuschiy-teg-f'
diff --git a/fonts/Inter-Variable.woff2 b/fonts/Inter-Variable.woff2
diff --git a/fonts/PressStart2P-Regular.woff b/fonts/PressStart2P-Regular.woff
diff --git a/fonts/fonts.css b/fonts/fonts.css
@@ -0,0 +1 @@
+/* В этом файле вы импортируете все шрифты для сайта. Один из них вариативный и требует особенной настройки */
diff --git a/images/README.md b/images/README.md
@@ -0,0 +1 @@
+В этой папке будут храниться изображения для статей, а токже фавиконы и иконка для смартфона
diff --git a/index.html b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Закрывающий тег</title>
+    <link rel="stylesheet" href="./fonts/fonts.css" />
+    <link rel="stylesheet" href="./styles/variables.css" />
+    <link rel="stylesheet" href="./styles/globals.css" />
+    <link rel="stylesheet" href="./styles/style.css" />
+    <link rel="stylesheet" href="./styles/animations.css" />
+    <link rel="stylesheet" href="./styles/themes.css" />
+    <script src="./scripts/set-theme.js"></script>
+  </head>
+  <body class="page">
+    <header class="header">
+      <nav class="theme-menu header__theme-menu">
+        <!-- Не меняйте разметку этого списка, иначе скрипты перестанут работать -->
+        <ul class="theme-menu__list">
+          <li class="theme-menu__item">
+            <button type="button" data-theme="dark" class="theme-menu__button">
+              Темно
+            </button>
+          </li>
+          <li class="theme-menu__item">
+            <button
+              type="button"
+              data-theme="auto"
+              disabled
+              class="theme-menu__button"
+            >
+              Авто
+            </button>
+          </li>
+          <li class="theme-menu__item">
+            <button type="button" data-theme="light" class="theme-menu__button">
+              Светло
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main></main>
+    <script src="./scripts/like.js"></script>
+  </body>
+</html>
diff --git a/scripts/like.js b/scripts/like.js
@@ -0,0 +1,41 @@
+/* этот скрипт использует такие имена классов:
+✦ like-icon — для svg-иконки анимированного сердца
+✦ card__like-button — для кнопки Like рядом с иконкой
+✦ card__icon-button — для кнопки, оборачивающей иконку
+✦ card__icon-button — для кнопки, оборачивающей иконку
+✦ is-liked — для обозначения состояния лайкнутой иконки в виде сердца
+✦ button__text — для обозначения текстового элемента внутри кнопки
+Если эти классы поменять в HTML, скрипт перестанет работать. Будьте аккуратны.
+*/
+
+const likeHeartArray = document.querySelectorAll('.like-icon');
+const likeButtonArray = document.querySelectorAll('.card__like-button');
+const iconButtonArray = document.querySelectorAll('.card__icon-button');
+
+iconButtonArray.forEach((iconButton, index) => {
+  iconButton.onclick = () =>
+    toggleIsLiked(likeHeartArray[index], likeButtonArray[index]);
+});
+
+likeButtonArray.forEach((button, index) => {
+  button.onclick = () => toggleIsLiked(likeHeartArray[index], button);
+});
+
+function toggleIsLiked(heart, button) {
+  heart.classList.toggle('is-liked');
+  setButtonText(heart, button);
+}
+
+function setButtonText(heart, button) {
+  if ([...heart.classList].includes('is-liked')) {
+    setTimeout(
+      () => (button.querySelector('.button__text').textContent = 'Unlike'),
+      500
+    );
+  } else {
+    setTimeout(
+      () => (button.querySelector('.button__text').textContent = 'Like'),
+      500
+    );
+  }
+}
diff --git a/scripts/set-theme.js b/scripts/set-theme.js
@@ -0,0 +1,45 @@
+/* Этот скрипт использует имена классов theme-menu__button, theme-dark, theme-light и theme-auto;
+еще атрибуты disabled и data-theme. Поэтому их нельзя менять в HTML. */
+
+function changeTheme(theme) {
+  document.documentElement.className = '';
+  document.documentElement.classList.add(`theme-${theme}`);
+  localStorage.setItem('theme', theme);
+}
+
+(function initTheme() {
+  const theme = localStorage.getItem('theme');
+  if (theme) {
+    changeTheme(theme);
+  }
+})();
+
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.documentElement;
+  const themeButtons = document.querySelectorAll('.theme-menu__button');
+
+  function setDisabled(theme) {
+    themeButtons.forEach((item) => {
+      if (item.getAttribute('data-theme') === theme) {
+        item.setAttribute('disabled', true);
+      } else {
+        item.removeAttribute('disabled');
+      }
+    });
+  }
+
+  if ([...root.classList].includes('theme-light')) {
+    setDisabled('light');
+  } else if ([...root.classList].includes('theme-dark')) {
+    setDisabled('dark');
+  } else {
+    setDisabled('auto');
+  }
+
+  themeButtons.forEach((button) => {
+    button.onclick = () => {
+      changeTheme(button.getAttribute('data-theme'));
+      setDisabled(button.getAttribute('data-theme'));
+    };
+  });
+});
diff --git a/styles/animations.css b/styles/animations.css
@@ -0,0 +1,14 @@
+/* Опишите в этом файле все keyframes для проекта и стили анимаций иконки Like.
+
+Будьте внимательны! Для корректной работы скриптов на этом сайте нужно, чтобы в HTML некоторые классы были названы особым образом:
+✦ theme-dark — класс тёмной темы
+✦ theme-light — класс светлой темы
+✦ like-icon — для svg-иконки анимированного сердца
+✦ card__like-button — для кнопки Like рядом с иконкой
+✦ card__icon-button — для кнопки, оборачивающей иконку
+✦ card__icon-button — для кнопки, оборачивающей иконку
+✦ is-liked — для обозначения состояния лайкнутой иконки в виде сердца
+✦ button__text — для обозначения текстового элемента внутри кнопки
+
+Кроме этого, не меняйте HTML переключателя тем. Его разметка также гарантирует работу своего скрипта.
+*/
diff --git a/styles/globals.css b/styles/globals.css
@@ -0,0 +1,53 @@
+/* В этом файле уже написаны некоторые базовые стили, которые сбрасывают или преобразуют дефольное браузерное поведение.
+Здесь же лежит утилитарный класс visually-hidden на случай, если нужно скрыть какой-то элемент, но оставить доступным для скринридера.
+Вы можете изменять этот файл или дополнять. Но скорее всего, вам это не потребуется. */
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+}
+
+button,
+input {
+  color: currentColor;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+.visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,20 @@
+/* Здесь вы напишете основную часть стилей страницы.
+
+Будьте внимательны! Для корректной работы скриптов на этом сайте нужно, чтобы в HTML некоторые классы были названы особым образом:
+✦ theme-dark — класс тёмной темы
+✦ theme-light — класс светлой темы
+✦ like-icon — для svg-иконки анимированного сердца
+✦ card__like-button — для кнопки Like рядом с иконкой
+✦ card__icon-button — для кнопки, оборачивающей иконку
+✦ card__icon-button — для кнопки, оборачивающей иконку
+✦ is-liked — для обозначения состояния лайкнутой иконки в виде сердца
+✦ button__text — для обозначения текстового элемента внутри кнопки
+
+Кроме этого, не меняйте HTML переключателя тем. Его разметка также гарантирует работу своего скрипта.
+
+*/
+
+.page {
+  min-inline-size: 320px;
+  min-block-size: 100dvb;
+}
diff --git a/styles/themes.css b/styles/themes.css
@@ -0,0 +1,6 @@
+/* В этом файле вы опишете значения переменных в разных цветовых схемах.
+Придерживайтесь такого именования классов:
+✦ theme-dark — класс тёмной темы
+✦ theme-light — класс светлой темы
+✦ не забудьте описать стили для изменения темы через медизапрос пользовательских предпочтений
+*/
diff --git a/styles/variables.css b/styles/variables.css
@@ -0,0 +1 @@
+/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
diff --git a/svg/README.md b/svg/README.md
@@ -0,0 +1 @@
+В этой папке будут храниться все необходимые SVG-файлы для сайта.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/* В этом файле вы импортируете все шрифты для сайта. Один из них вариативный и требует особенной настройки */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		В этой папке будут храниться изображения для статей, а токже фавиконы и иконка для смартфона
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		В этой папке будут храниться все необходимые SVG-файлы для сайта.