diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml new file mode 100644 index 0000000..3b25a67 --- /dev/null +++ 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 new file mode 100644 index 0000000..350bbbc Binary files /dev/null and b/fonts/Inter-Variable.woff2 differ diff --git a/fonts/PressStart2P-Regular.woff b/fonts/PressStart2P-Regular.woff new file mode 100644 index 0000000..3b471e8 Binary files /dev/null and b/fonts/PressStart2P-Regular.woff differ diff --git a/fonts/fonts.css b/fonts/fonts.css new file mode 100644 index 0000000..14f7475 --- /dev/null +++ b/fonts/fonts.css @@ -0,0 +1 @@ +/* В этом файле вы импортируете все шрифты для сайта. Один из них вариативный и требует особенной настройки */ diff --git a/images/README.md b/images/README.md new file mode 100644 index 0000000..d26d158 --- /dev/null +++ b/images/README.md @@ -0,0 +1 @@ +В этой папке будут храниться изображения для статей, а токже фавиконы и иконка для смартфона diff --git a/index.html b/index.html new file mode 100644 index 0000000..bcab4e5 --- /dev/null +++ b/index.html @@ -0,0 +1,46 @@ + + + + + + Закрывающий тег + + + + + + + + + +
+ +
+
+ + + diff --git a/scripts/like.js b/scripts/like.js new file mode 100644 index 0000000..d4f7c7c --- /dev/null +++ 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 new file mode 100644 index 0000000..f717d02 --- /dev/null +++ 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 new file mode 100644 index 0000000..e40f117 --- /dev/null +++ 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 new file mode 100644 index 0000000..5feb3da --- /dev/null +++ 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 new file mode 100644 index 0000000..9308635 --- /dev/null +++ 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 new file mode 100644 index 0000000..e55e176 --- /dev/null +++ b/styles/themes.css @@ -0,0 +1,6 @@ +/* В этом файле вы опишете значения переменных в разных цветовых схемах. +Придерживайтесь такого именования классов: +✦ theme-dark — класс тёмной темы +✦ theme-light — класс светлой темы +✦ не забудьте описать стили для изменения темы через медизапрос пользовательских предпочтений +*/ diff --git a/styles/variables.css b/styles/variables.css new file mode 100644 index 0000000..d7326c2 --- /dev/null +++ b/styles/variables.css @@ -0,0 +1 @@ +/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */ diff --git a/svg/README.md b/svg/README.md new file mode 100644 index 0000000..5a1b3c2 --- /dev/null +++ b/svg/README.md @@ -0,0 +1 @@ +В этой папке будут храниться все необходимые SVG-файлы для сайта.