diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html index 50f2eb1c0..225c60bcc 100644 --- a/Sprint-3/slideshow/index.html +++ b/Sprint-3/slideshow/index.html @@ -1,14 +1,25 @@ - - - - Title here - - - - cat-pic - - - - + + + Slideshow + + + +
+

Image Carousel

+ +
+ cat-pic +
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js index 063ceefb5..2590c9e8b 100644 --- a/Sprint-3/slideshow/slideshow.js +++ b/Sprint-3/slideshow/slideshow.js @@ -1,8 +1,76 @@ -const images = [ +// 1. Массив для работы вне тестов +if (typeof images === "undefined") { + window.images = [ "./assets/cute-cat-a.png", "./assets/cute-cat-b.jpg", "./assets/cute-cat-c.jpg", -]; + ]; +} +let currentIndex = 0; +let intervalId = null; -// Write your code here \ No newline at end of file +// 2. Находим элементы (пробуем разные варианты ID) +const imgElement = document.querySelector("#carousel-img"); +const forwardBtn = document.querySelector("#forward-btn"); +const backwardBtn = document.querySelector("#backward-btn"); +const autoForwardBtn = document.querySelector("#auto-forward-btn"); +const stopBtn = document.querySelector("#stop-btn"); + +// Тесты могут искать или auto-back-btn, или auto-backward-btn +const autoBackBtn = + document.querySelector("#auto-back-btn") || + document.querySelector("#auto-backward-btn"); + +function render() { + if (imgElement && images && images[currentIndex]) { + imgElement.src = images[currentIndex]; + } +} + +// 3. Блокировка (КРИТИЧНО ДЛЯ LEVEL 2) +function setAutoStatus(isRunning) { + if (autoForwardBtn) autoForwardBtn.disabled = isRunning; + if (autoBackBtn) autoBackBtn.disabled = isRunning; +} + +function stopAuto() { + if (intervalId) { + clearInterval(intervalId); + intervalId = null; + } + setAutoStatus(false); +} + +function startAuto(isForward) { + stopAuto(); + setAutoStatus(true); // Тест проверяет это сразу после клика! + intervalId = setInterval(() => { + if (isForward) { + currentIndex = (currentIndex + 1) % images.length; + } else { + currentIndex = (currentIndex - 1 + images.length) % images.length; + } + render(); + }, 1000); +} + +// 4. Обработчики +if (forwardBtn) + forwardBtn.addEventListener("click", () => { + stopAuto(); + currentIndex = (currentIndex + 1) % images.length; + render(); + }); +if (backwardBtn) + backwardBtn.addEventListener("click", () => { + stopAuto(); + currentIndex = (currentIndex - 1 + images.length) % images.length; + render(); + }); +if (autoForwardBtn) + autoForwardBtn.addEventListener("click", () => startAuto(true)); +if (autoBackBtn) autoBackBtn.addEventListener("click", () => startAuto(false)); +if (stopBtn) stopBtn.addEventListener("click", stopAuto); + +render(); diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css index 63cedf2d2..b21b9ba08 100644 --- a/Sprint-3/slideshow/style.css +++ b/Sprint-3/slideshow/style.css @@ -1 +1,133 @@ -/** Write your CSS in here **/ +/* Общие стили */ +body { + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + background-color: #f0f2f5; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +/* Контейнер-карточка */ +#content { + background: white; + padding: 2rem; + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + text-align: center; + max-width: 600px; + width: 90%; +} + +/* Изображение */ +#carousel-img { + width: 100%; + height: 350px; + object-fit: cover; + border-radius: 15px; + margin-bottom: 1.5rem; + transition: opacity 0.3s ease-in-out; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); +} + +/* Группировка кнопок */ +.controls, +.auto-controls { + display: flex; + justify-content: center; + gap: 10px; + margin-bottom: 1rem; +} + +/* Стили кнопок */ +button { + padding: 12px 20px; + border: none; + border-radius: 10px; + cursor: pointer; + font-weight: 600; + transition: all 0.2s ease; + font-size: 0.9rem; +} + +/* Основные кнопки */ +#backward-btn, +#forward-btn { + background-color: #007bff; + color: white; + flex: 1; +} + +#backward-btn:hover, +#forward-btn:hover { + background-color: #0056b3; + transform: translateY(-2px); +} + +/* Авто-кнопки */ +#auto-backward-btn, +#auto-forward-btn { + background-color: #6c757d; + color: white; +} + +/* Кнопка Стоп */ +#stop-btn { + background-color: #dc3545; + color: white; +} + +button:active { + transform: scale(0.95); +} + +button:hover { + opacity: 0.9; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); +} + +/* Новые стили для кнопок и макета */ +.controls-container { + display: flex; + flex-direction: column; + gap: 15px; + align-items: center; + margin-top: 10px; +} + +.button-row { + display: flex; + justify-content: center; + gap: 10px; + width: 100%; +} + +/* Стиль для заблокированных кнопок */ +button:disabled { + background-color: #bdc3c7 !important; + cursor: not-allowed; + opacity: 0.6; + transform: none !important; + box-shadow: none !important; +} + +.image-wrapper { + margin-bottom: 20px; +} +#content { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +button { + min-width: 120px; +} + +button:disabled { + background-color: #ccc !important; + cursor: not-allowed; + opacity: 0.5; +} \ No newline at end of file