code-differently · anthonydmays · Oct 3, 2025 · Sep 28, 2025 · Sep 28, 2025 · Sep 28, 2025
diff --git a/lesson_20/danielsonadjocy/README.md b/lesson_20/danielsonadjocy/README.md
@@ -0,0 +1,23 @@
+# Tic Tac Toe Game
+
+This creates a Tic Tac Toe game where two players can take turns marking boxes and trying to get three of there symbols in a row.
+
+## Features
+
+- **Interactive Game Board**: Clickable cells for easy gameplay.
+- **Player Turn Indicator**: Displays whose turn it is.
+- **Winner Announcement**: Declares the winner or a draw when the game ends.
+- **Reset Button**: Allows players to reset the game and start over.
+
+## Game
+<img src="images/board.png">
+
+
+## How to Play
+
+1. Player 1 (X) starts the game.
+3. Players take turns clicking on the cells to place their symbol (X or O).
+4. The game ends when:
+   - A player aligns three symbols in a row, column, or diagonal.
+   - All cells are filled, resulting in a draw.
+5. Click the "Reset Game" button to restart the game.
diff --git a/lesson_20/danielsonadjocy/images/board.png b/lesson_20/danielsonadjocy/images/board.png
diff --git a/lesson_20/danielsonadjocy/images/camera.jpg b/lesson_20/danielsonadjocy/images/camera.jpg
diff --git a/lesson_20/danielsonadjocy/images/camera2.jpg b/lesson_20/danielsonadjocy/images/camera2.jpg
diff --git a/lesson_20/danielsonadjocy/images/light.jpg b/lesson_20/danielsonadjocy/images/light.jpg
diff --git a/lesson_20/danielsonadjocy/images/light2.jpg b/lesson_20/danielsonadjocy/images/light2.jpg
diff --git a/lesson_20/danielsonadjocy/images/thermostat.jpg b/lesson_20/danielsonadjocy/images/thermostat.jpg
diff --git a/lesson_20/danielsonadjocy/index.html b/lesson_20/danielsonadjocy/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>SmartHome Items</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <header>
+            <h1>SmartHome Items</h1>
+        </header>
+        <main>
+            <section class="tab-section">
+                <h2>Tab Section</h2>
+                <button class="tab-button active" data-tab="living">Living Room</button>
+                <button class="tab-button" data-tab="kitchen">Kitchen</button>
+                <button class="tab-button" data-tab="bedroom">Bedroom</button>
+
+                <div class="tab-content active" id="living">
+                    <p>Living room devices: lights, TV, thermostat.</p>
+                </div>
+                <div class="tab-content" id="kitchen">
+                    <p>Kitchen devices: fridge, oven, lights.</p>
+                </div>
+                <div class="tab-content" id="bedroom">
+                    <p>Bedroom devices: lights, speakers.</p>
+                </div>
+            </section>
+
+            <section class="accordion-section">
+                <h2>Accordion Section</h2>
+                <button class="accordion-button">Lights</button>
+                <div class="accordion-content">
+                    <p>Control your lighting with ease using our smart lights.</p>
+                    <p>Lights: Light_1, Light_2</p>
+                </div>
+
+                <button class="accordion-button">Thermostats</button>
+                <div class="accordion-content">
+                    <p>Maintain the perfect temperature in your home with our smart thermostats.</p>
+                    <p>Thermostats: LivingRoomThermostat</p>
+                </div>
+
+                <button class="accordion-button">Security Cameras</button>
+                <div class="accordion-content">
+                    <p>Keep an eye on your home with our advanced security cameras.</p>
+                    <p>Cameras: FrontDoorCam, BackyardCam</p>
+                </div>
+
+           </section>
+
+           <section class="photo-gallery">
+               <h2>Photo Gallery</h2>
+               <div class="gallery-controls">
+                    <button class="gallery-back-button gallery-controls">&#10094;</button>
+                    <div class="gallery">
+                        <img src="images/light.jpg" alt="Light">
+                        <img src="images/light2.jpg" alt="Light 2">
+                        <img src="images/thermostat.jpg" alt="Thermostat">
+                        <img src="images/camera.jpg" alt="Camera">
+                        <img src="images/camera2.jpg" alt="Camera 2">
+                    </div>
+                    <button class="gallery-forward-button gallery-controls">&#10095;</button>
+            </div>
+           </section>
+        </main>
+        <footer>
+            <p>&copy; 2025: Danielson Adjocy</p>
+        </footer>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/lesson_20/danielsonadjocy/script.js b/lesson_20/danielsonadjocy/script.js
@@ -0,0 +1,44 @@
+// ===== TABS =====
+const tabButtons = document.querySelectorAll('.tab-button');
+const tabContents = document.querySelectorAll('.tab-content');
+
+tabButtons.forEach(button => {
+  button.addEventListener('click', () => {
+    tabButtons.forEach(b => b.classList.remove('active'));
+    tabContents.forEach(c => c.classList.remove('active'));
+
+    button.classList.add('active');
+    const targetId = button.getAttribute('data-tab');
+    document.getElementById(targetId).classList.add('active');
+  });
+});
+
+// ===== ACCORDION =====
+const accordionButtons = document.querySelectorAll('.accordion-button');
+
+accordionButtons.forEach(button => {
+  button.addEventListener('click', () => {
+    const content = button.nextElementSibling;
+    const isOpen = content.style.display === 'block';
+
+    // Close all others (optional)
+    document.querySelectorAll('.accordion-content').forEach(c => c.style.display = 'none');
+
+    // Toggle current
+    content.style.display = isOpen ? 'none' : 'block';
+  });
+});
+
+// ===== GALLERY =====
+const gallery = document.querySelector('.gallery');
+const galleryImages = gallery.querySelectorAll('img');
+const backButton = document.querySelector('.gallery-back-button');
+const forwardButton = document.querySelector('.gallery-forward-button');
+
+forwardButton.addEventListener('click', () => {
+  gallery.appendChild(gallery.firstElementChild); // move first to end
+});
+
+backButton.addEventListener('click', () => {
+  gallery.insertBefore(gallery.lastElementChild, gallery.firstElementChild); // move last to start
+});
diff --git a/lesson_20/danielsonadjocy/styles.css b/lesson_20/danielsonadjocy/styles.css
@@ -0,0 +1,205 @@
+/* ===== GLOBAL ===== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: Arial, sans-serif;
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: #f9f9f9;
+  color: #333;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  line-height: 1.6;
+}
+
+/* ===== HEADER ===== */
+header {
+  background: #2c3e50;
+  color: white;
+  padding: 1rem;
+  text-align: center;
+}
+
+header h1 {
+  font-size: 1.8rem;
+}
+
+/* ===== MAIN ===== */
+main {
+  flex: 1;
+  max-width: 900px;
+  width: 90%;
+  margin: 2rem auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+section h2 {
+  margin-bottom: 0.8rem;
+  font-size: 1.4rem;
+  color: #2c3e50;
+}
+
+/* ===== TABS ===== */
+.tab-section {
+  background: white;
+  padding: 1rem;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.tab-button {
+  background: #ecf0f1;
+  border: none;
+  padding: 0.6rem 1rem;
+  margin-right: 0.5rem;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.3s;
+}
+
+.tab-button.active {
+  background: #2c3e50;
+  color: white;
+}
+
+.tab-button:hover {
+  background: #d0d7da;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* ===== ACCORDION ===== */
+.accordion-section {
+  background: white;
+  padding: 1rem;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.accordion-button {
+  width: 100%;
+  text-align: left;
+  background: #ecf0f1;
+  border: none;
+  padding: 0.8rem;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-top: 0.5rem;
+  border-radius: 6px;
+  transition: background 0.3s;
+}
+
+.accordion-button:hover {
+  background: #d0d7da;
+}
+
+.accordion-content {
+  display: none;
+  padding: 0.8rem;
+  background: #f7f7f7;
+  border-left: 3px solid #2c3e50;
+  border-radius: 0 0 6px 6px;
+}
+
+.accordion-content p {
+  font-size: 0.95rem;
+}
+
+/* ===== GALLERY ===== */
+.photo-gallery {
+  background: white;
+  padding: 1rem;
+  border-radius: 10px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.gallery-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.gallery {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  max-width: 600px;
+  border-radius: 10px;
+  transition: transform 0.4s ease;
+}
+
+.gallery img {
+  width: 33.33%;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+
+.gallery-back-button,
+.gallery-forward-button {
+  background: #2c3e50;
+  color: white;
+  border: none;
+  font-size: 1.5rem;
+  padding: 0.5rem 0.8rem;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.gallery-back-button:hover,
+.gallery-forward-button:hover {
+  background: #1a242f;
+}
+
+/* ===== FOOTER ===== */
+footer {
+  background: #2c3e50;
+  color: white;
+  text-align: center;
+  padding: 1rem;
+  font-size: 0.9rem;
+}
+
+/* ===== MOBILE ===== */
+@media (max-width: 600px) {
+  header h1 {
+    font-size: 1.4rem;
+  }
+
+  .tab-button {
+    width: 100%;
+    margin-bottom: 0.5rem;
+  }
+
+  .gallery img {
+    width: 100%;
+  }
+
+  .gallery-back-button,
+  .gallery-forward-button {
+    font-size: 1.2rem;
+    padding: 0.4rem 0.6rem;
+  }
+}