code-differently · anthonydmays · Oct 3, 2025 · Aug 20, 2025 · Aug 20, 2025 · Aug 20, 2025
diff --git a/lesson_20/benjaminscott/imgs/20120608__HeatLeBron60912p1.webp b/lesson_20/benjaminscott/imgs/20120608__HeatLeBron60912p1.webp
diff --git a/lesson_20/benjaminscott/imgs/240423-lebron-james-lakers-mn-0935-9ce802.webp b/lesson_20/benjaminscott/imgs/240423-lebron-james-lakers-mn-0935-9ce802.webp
diff --git a/lesson_20/benjaminscott/imgs/52fd1bca07a3d.image.jpg b/lesson_20/benjaminscott/imgs/52fd1bca07a3d.image.jpg
diff --git a/lesson_20/benjaminscott/imgs/bron-1024x731.jpg b/lesson_20/benjaminscott/imgs/bron-1024x731.jpg
diff --git a/lesson_20/benjaminscott/imgs/leBron-Dunk.webp b/lesson_20/benjaminscott/imgs/leBron-Dunk.webp
diff --git a/lesson_20/benjaminscott/imgs/lebron.jpeg b/lesson_20/benjaminscott/imgs/lebron.jpeg
diff --git a/lesson_20/benjaminscott/index.html b/lesson_20/benjaminscott/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+         <meta name="viewport" content="width=device-width, initial-scale=1" />
+         <link rel="stylesheet" type="text/css" href="../benjaminscott/style.css">
+         <h1>LeBron James</h1>
+    </head>
+    <body>
+        <!-- Tabbed Component -->
+        <div class="tab">
+            <button class="tablinks" onclick="openBron(event, 'Cleveland')">Cleveland Bron</button>
+            <button class="tablinks" onclick="openBron(event, 'Miami')">Miami Bron</button>
+            <button class="tablinks" onclick="openBron(event, 'LA')">LA Bron</button>
+        </div>
+
+        <div id="Cleveland" class="tabcontent">
+            <h3>Cleveland Bron</h3>
+            <p>LeBron James played in Cleveland from 2003 to 2010 and then again from 2014 to 2018.</p>
+        </div>
+
+        <div id="Miami" class="tabcontent">
+            <h3>Miami Bron</h3>
+            <p>LeBron James played in Miami from 2010 to 2014.</p>
+        </div>
+
+        <div id="LA" class="tabcontent">
+            <h3>LA Bron</h3>
+            <p>LeBron James played in Los Angeles from 2018 to present.</p>
+        </div>
+
+        <!--Accordion Component-->
+        <div>
+            <details class="accordion">
+                <summary>LeBron's Championships</summary>
+                <p>LeBron has won 4 championships.</p>
+                <ul>
+                    <li>Miami Heat (2012)</li>
+                    <li>Miami Heat (2013)</li>
+                    <li>Cleveland Cavaliers (2016)</li>
+                    <li>Los Angeles Lakers (2020)</li>
+                </ul>
+                </details>
+
+                <details class="accordion">
+                    <summary>LeBron's Longevity</summary>
+                    <p>LeBron has played in the NBA for 22 seasons, and is entering his 23rd season.</p>
+                </details>
+        </div>
+
+        <!--Photo Gallery Component-->
+        <div class="gallery">
+            <div class="bronPics">
+                <img src="../benjaminscott/imgs/lebron.jpeg" alt="LeBron James" width="300" height="200">
+            </div>
+            <div class="bronPics">
+                <img src="../benjaminscott/imgs/52fd1bca07a3d.image.jpg" alt="Bron shooting game winner" width="300" height="200">
+            </div>
+            <div class="bronPics">
+                <img src="../benjaminscott/imgs/240423-lebron-james-lakers-mn-0935-9ce802.webp" alt="Bron dribbling the ball" width="300" height="200">
+            </div>
+            <div class="bronPics">
+                <img src="../benjaminscott/imgs/20120608__HeatLeBron60912p1.webp" alt="Bron dribbling the ball in Boston" width="300" height="200">
+            </div>
+            <div class="bronPics">
+                <img src="../benjaminscott/imgs/bron-1024x731.jpg" alt="Bron dunking in Cleveland in first stint" width="300" height="200">
+            </div>
+            <div class="bronPics">
+                <img src="../benjaminscott/imgs/leBron-Dunk.webp" alt="Bron dunking in Cleveland in second stint" width="300" height="200">
+            </div>
+            <a class="prev" onclick="back">&#10094;</a>
+            <a class="next" onclick="forward">&#10095;</a>
+        </div>
+        <script src="../benjaminscott/index.js"></script>
+    </body>
+</html>
diff --git a/lesson_20/benjaminscott/index.js b/lesson_20/benjaminscott/index.js
@@ -0,0 +1,45 @@
+function openBron(evt, bronCity) {
+  var i, tabcontent, tablinks;
+
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
+
+  tablinks = document.getElementsByClassName("tablinks");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].className = tablinks[i].className.replace(" active", "");
+  }
+
+  document.getElementById(bronCity).style.display = "block";
+  evt.currentTarget.className += " active";
+}
+
+const gallery = document.querySelector('.gallery');
+const back = document.querySelector('.prev');
+const forward = document.querySelector('.next');
+
+function updateVisibleImages() {
+  const pics = gallery.querySelectorAll('.bronPics');
+  pics.forEach((pic, idx) => {
+    pic.classList.remove('visible');
+    if (idx < 3) {
+      pic.classList.add('visible');
+    }
+  });
+}
+
+forward.addEventListener('click', () => {
+  const first = gallery.querySelector('.bronPics');
+  gallery.appendChild(first);
+  updateVisibleImages();
+});
+
+back.addEventListener('click', () => {
+  const pics = gallery.querySelectorAll('.bronPics');
+  const last = pics[pics.length - 1];
+  gallery.insertBefore(last, gallery.firstElementChild);
+  updateVisibleImages();
+});
+
+updateVisibleImages();
diff --git a/lesson_20/benjaminscott/style.css b/lesson_20/benjaminscott/style.css
@@ -0,0 +1,103 @@
+.tab {
+    overflow: hidden;
+    background-color: aliceblue;
+}
+
+h1 {
+    text-align: center;
+}
+.tabcontent {
+    display: none;
+    padding: 12px 16px;
+    border: 1px solid black;
+    border-top: none;
+}
+
+.tab button {
+    background-color: yellow;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    font-size: 17px;
+}
+
+.tab button:hover {
+    background-color: lightgray;
+}
+
+.tab button.active {
+    background-color: purple;
+}
+
+.accordion {
+    background-color: purple;
+    color: white;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+    transition: 0.4s;
+}
+
+* {box-sizing:border-box}
+
+.gallery {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  position: relative;
+}
+
+.bronPics {
+  display: none;
+  flex: 0 0 auto;
+}
+
+.bronPics.visible {
+  display: block;
+}
+
+.prev, .next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  margin-top: -22px;
+  padding: 16px;
+  color: black;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+}
+
+.prev {
+    left: 0;
+    border-radius: 3px 0 0 3px;
+}
+
+.next {
+  right: 0;
+  border-radius: 0 3px 3px 0;
+}
+
+.prev:hover, .next:hover {
+  background-color: rgba(0,0,0,0.8);
+}
+
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+
+@keyframes fade {
+  from {opacity: .4}
+  to {opacity: 1}
+}
diff --git a/lesson_20/tictactoe/index.html b/lesson_20/tictactoe/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tic Tac Toe</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Tic Tac Toe</h1>
+    <div id="game">
+        <div class="board">
+            <div class="cell" data-index="0"></div>
+            <div class="cell" data-index="1"></div>
+            <div class="cell" data-index="2"></div>
+            <div class="cell" data-index="3"></div>
+            <div class="cell" data-index="4"></div>
+            <div class="cell" data-index="5"></div>
+            <div class="cell" data-index="6"></div>
+            <div class="cell" data-index="7"></div>
+            <div class="cell" data-index="8"></div>
+        </div>
+        <div id="status"></div>
+        <button id="reset">Reset Game</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/lesson_20/tictactoe/script.js b/lesson_20/tictactoe/script.js
@@ -0,0 +1,55 @@
+const cells = document.querySelectorAll('.cell');
+const statusDiv = document.getElementById('status');
+const resetBtn = document.getElementById('reset');
+let board = Array(9).fill('');
+let currentPlayer = 'X';
+let gameActive = true;
+
+function checkWinner() {
+    const winPatterns = [
+        [0,1,2],[3,4,5],[6,7,8], // rows
+        [0,3,6],[1,4,7],[2,5,8], // cols
+        [0,4,8],[2,4,6]          // diags
+    ];
+    for (let pattern of winPatterns) {
+        const [a, b, c] = pattern;
+        if (board[a] && board[a] === board[b] && board[a] === board[c]) {
+            return board[a];
+        }
+    }
+    return board.includes('') ? null : 'draw';
+}
+
+function updateStatus() {
+    const winner = checkWinner();
+    if (winner === 'X' || winner === 'O') {
+        statusDiv.textContent = `${winner} wins!`;
+        gameActive = false;
+    } else if (winner === 'draw') {
+        statusDiv.textContent = "It's a draw!";
+        gameActive = false;
+    } else {
+        statusDiv.textContent = `${currentPlayer}'s turn`;
+    }
+}
+
+function handleCellClick(e) {
+    const idx = +e.target.dataset.index;
+    if (!gameActive || board[idx]) return;
+    board[idx] = currentPlayer;
+    e.target.textContent = currentPlayer;
+    updateStatus();
+    if (gameActive) currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+}
+
+function resetGame() {
+    board = Array(9).fill('');
+    currentPlayer = 'X';
+    gameActive = true;
+    cells.forEach(cell => cell.textContent = '');
+    updateStatus();
+}
+
+cells.forEach(cell => cell.addEventListener('click', handleCellClick));
+resetBtn.addEventListener('click', resetGame);
+updateStatus();
diff --git a/lesson_20/tictactoe/style.css b/lesson_20/tictactoe/style.css
@@ -0,0 +1,61 @@
+body {
+    font-family: Arial, sans-serif;
+    background: blue;
+    text-align: center;
+}
+
+h1 {
+    margin-top: 30px;
+    color: black;
+}
+
+#game {
+    margin: 40px auto;
+    width: 320px;
+}
+
+.board {
+    display: grid;
+    grid-template-columns: repeat(3, 100px);
+    grid-template-rows: repeat(3, 100px);
+    gap: 5px;
+    margin-bottom: 20px;
+}
+
+.cell {
+    background: #fff;
+    border: 2px solid #333;
+    font-size: 2.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.2s;
+    height: 100px;
+    width: 100px;
+}
+
+.cell:hover {
+    background: #e0e0e0;
+}
+
+#status {
+    font-size: 1.2em;
+    margin-bottom: 15px;
+    min-height: 24px;
+}
+
+#reset {
+    padding: 10px 20px;
+    font-size: 1em;
+    background: red;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+#reset:hover {
+    background: red;
+}