Migracode-Barcelona · tanibien · Jan 24, 2026
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -1,14 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
-    <script defer src="slideshow.js"></script>
-  </head>
-  <body>
-    <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
-    <button type="button" id="backward-btn">Backwards</button>
-    <button type="button" id="forward-btn">Forward</button>
-  </body>
-</html>
+<head>
+    <meta charset="UTF-8">
+    <title>Slideshow</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="content">
+        <h1 class="title">Image Carousel</h1>
+
+        <div class="image-wrapper">
+            <img id="carousel-img" src="" alt="cat-pic">
+        </div>
+
+        <button type="button" id="backward-btn">Back</button>
+        <button type="button" id="forward-btn">Forward</button>
+
+        <button type="button" id="auto-back-btn" class="auto-back-btn">Auto Back</button>
+        <button type="button" id="stop-btn">Stop</button>
+        <button type="button" id="auto-forward-btn" class="auto-forward-btn">Auto Forward</button>
+    </div>
+    <script src="slideshow.js"></script>
+</body>
+</html>
diff --git 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
+// 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
@@ -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;
+}