diff --git a/lesson_20/danielsonadjocy/README.md b/lesson_20/danielsonadjocy/README.md new file mode 100644 index 000000000..b3891648a --- /dev/null +++ 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 + + + +## 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. \ No newline at end of file diff --git a/lesson_20/danielsonadjocy/images/board.png b/lesson_20/danielsonadjocy/images/board.png new file mode 100644 index 000000000..57a2e7f04 Binary files /dev/null and b/lesson_20/danielsonadjocy/images/board.png differ diff --git a/lesson_20/danielsonadjocy/images/camera.jpg b/lesson_20/danielsonadjocy/images/camera.jpg new file mode 100644 index 000000000..3da48a2cf Binary files /dev/null and b/lesson_20/danielsonadjocy/images/camera.jpg differ diff --git a/lesson_20/danielsonadjocy/images/camera2.jpg b/lesson_20/danielsonadjocy/images/camera2.jpg new file mode 100644 index 000000000..5bd44dd82 Binary files /dev/null and b/lesson_20/danielsonadjocy/images/camera2.jpg differ diff --git a/lesson_20/danielsonadjocy/images/light.jpg b/lesson_20/danielsonadjocy/images/light.jpg new file mode 100644 index 000000000..1fe24a7a2 Binary files /dev/null and b/lesson_20/danielsonadjocy/images/light.jpg differ diff --git a/lesson_20/danielsonadjocy/images/light2.jpg b/lesson_20/danielsonadjocy/images/light2.jpg new file mode 100644 index 000000000..984222fa6 Binary files /dev/null and b/lesson_20/danielsonadjocy/images/light2.jpg differ diff --git a/lesson_20/danielsonadjocy/images/thermostat.jpg b/lesson_20/danielsonadjocy/images/thermostat.jpg new file mode 100644 index 000000000..877621cbd Binary files /dev/null and b/lesson_20/danielsonadjocy/images/thermostat.jpg differ diff --git a/lesson_20/danielsonadjocy/index.html b/lesson_20/danielsonadjocy/index.html new file mode 100644 index 000000000..cfb3a2489 --- /dev/null +++ b/lesson_20/danielsonadjocy/index.html @@ -0,0 +1,75 @@ + + + + + + SmartHome Items + + + + + +
+

SmartHome Items

+
+
+
+

Tab Section

+ + + + +
+

Living room devices: lights, TV, thermostat.

+
+
+

Kitchen devices: fridge, oven, lights.

+
+
+

Bedroom devices: lights, speakers.

+
+
+ +
+

Accordion Section

+ +
+

Control your lighting with ease using our smart lights.

+

Lights: Light_1, Light_2

+
+ + +
+

Maintain the perfect temperature in your home with our smart thermostats.

+

Thermostats: LivingRoomThermostat

+
+ + +
+

Keep an eye on your home with our advanced security cameras.

+

Cameras: FrontDoorCam, BackyardCam

+
+ +
+ +
+

Photo Gallery

+
+ +
+ Light + Light 2 + Thermostat + Camera + Camera 2 +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/lesson_20/danielsonadjocy/script.js b/lesson_20/danielsonadjocy/script.js new file mode 100644 index 000000000..65c4284a9 --- /dev/null +++ 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 new file mode 100644 index 000000000..2274aa9eb --- /dev/null +++ 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; + } +} diff --git a/lesson_20/danielsonadjocy/tictaccode.js b/lesson_20/danielsonadjocy/tictaccode.js new file mode 100644 index 000000000..79321b9a9 --- /dev/null +++ b/lesson_20/danielsonadjocy/tictaccode.js @@ -0,0 +1,85 @@ +let board = [] +for (let i = 0; i < 3; i++) { + board[i] = [] + for (let j = 0; j < 3; j++) { + board[i][j] = '' + } +} + +function winner() { + // Check rows + for (let i = 0; i < 3; i++) { + for (let j = 1; j < 3; j++) { + if (board[i][j] !== board[i][0]){ + break + } + if (j === 2 && board[i][0] !== ''){ + return board[i][0] + } + } + } + + // Check columns + for (let j = 0; j < 3; j++) { + for (let i = 1; i < 3; i++) { + if (board[i][j] !== board[0][j]){ + break + } + if (i === 2 && board[0][j] !== '') return board[0][j] + } + } + + // Check diagonals + if (board[1][1] !== '') { + if (board[0][0] === board[1][1] && board[1][1] === board[2][2]) return board[1][1] + if (board[0][2] === board[1][1] && board[1][1] === board[2][0]) return board[1][1] + } + + return null +} + +let currentPlayer = 'X' +let count = 0 +const cells = document.querySelectorAll('.cell') +cells.forEach((cell) => { + cell.addEventListener('click', () => { + const row = cell.getAttribute('data-row') + const col = cell.getAttribute('data-col') + if (board[row][col] === '' && !winner()) { + board[row][col] = currentPlayer + cell.textContent = currentPlayer + cell.classList.add(currentPlayer === 'X' ? 'x' : 'o') + if (winner()) { + document.querySelector('.winner-message').textContent = currentPlayer === 'X' ? "Player 1 wins!" : "Player 2 wins!" + } else { + currentPlayer = currentPlayer === 'X' ? 'O' : 'X' + count++ + if (count === 9) { + document.querySelector('.winner-message').textContent = "It's a draw!" + } else { + document.querySelector('.status').textContent = currentPlayer === 'X' ? "Player 1's turn (X)" : "Player 2's turn (O)" + } + } + } + }) +}) + +document.querySelector('.reset-button').addEventListener('click', () => { + count = 0 + board = [] + for (let i = 0; i < 3; i++) { + board[i] = [] + for (let j = 0; j < 3; j++) { + board[i][j] = '' + } + } + + cells.forEach((cell) => { + cell.textContent = '' + cell.classList.remove('x', 'o') + }) + currentPlayer = 'X' + document.querySelector('.winner-message').textContent = "" + document.querySelector('.status').textContent = "Player 1's turn (X)" + +}) \ No newline at end of file diff --git a/lesson_20/danielsonadjocy/tictactoe.css b/lesson_20/danielsonadjocy/tictactoe.css new file mode 100644 index 000000000..c00a4b59b --- /dev/null +++ b/lesson_20/danielsonadjocy/tictactoe.css @@ -0,0 +1,118 @@ +/* ✅ Basic page layout */ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #e0f7fa, #fce4ec); + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; + color: #333; +} + +header { + text-align: center; + padding: 1rem 0; + background-color: #333; + color: white; +} + +h1 { + margin: 0; + font-size: 2.5rem; +} + +/* ✅ Game info section */ +.game-info { + text-align: center; + margin-top: 1rem; +} + +.status { + font-size: 1.4rem; + font-weight: bold; + margin: 0.5rem 0; + color: #444; +} + +.winner-message { + font-size: 1.6rem; + font-weight: bold; + color: #2e7d32; /* green for winner */ + margin: 0.5rem 0; +} + +/* ✅ Board styling */ +.board { + display: grid; + grid-template-columns: repeat(3, 1fr); + aspect-ratio: 1 / 1; + max-width: 90vmin; + margin: 20px auto; + background-color: black; + gap: 5px; + border: 5px solid black; + box-sizing: border-box; + border-radius: 10px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); +} + +.cell { + background-color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + font-weight: bold; + cursor: pointer; + aspect-ratio: 1 / 1; + user-select: none; + transition: background-color 0.2s, transform 0.1s; +} + +.cell:hover { + background-color: #f0f0f0; +} + +/* ✅ Different colors for X and O */ +.cell.x { + color: #1976d2; /* Blue for X */ +} + +.cell.o { + color: #d32f2f; /* Red for O */ +} + +/* ✅ Reset button styling */ +.reset-button { + display: block; + margin: 20px auto; + padding: 0.75rem 1.5rem; + font-size: 1rem; + font-weight: bold; + background-color: #1976d2; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.2s, transform 0.1s; +} + +.reset-button:hover { + background-color: #1565c0; + transform: translateY(-2px); +} + +.reset-button:active { + transform: translateY(0); +} + +/* ✅ Footer */ +footer { + text-align: center; + padding: 0.5rem 0; + margin-top: auto; + background-color: #333; + color: white; + font-size: 0.9rem; +} diff --git a/lesson_20/danielsonadjocy/tictactoe.html b/lesson_20/danielsonadjocy/tictactoe.html new file mode 100644 index 000000000..04e4ceb24 --- /dev/null +++ b/lesson_20/danielsonadjocy/tictactoe.html @@ -0,0 +1,42 @@ + + + + + + Tic Tac Toe game + + + + + +
+

Tic Tac Toe

+
+
+
+

Player 1's turn (X)

+

+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+ + + +` \ No newline at end of file