Skip to content

Commit 31133e4

Browse files
DaFDE31DaFDE31
authored
feat: adds Danielson's interactive HTML controls demo + tic tac tow (#662)
* feat:initial HTML * feat:code done * feat: images added * feat:stretch started * feat: board set up * feat: working game * feat: reset and winner messages * feat:css done; draw bug fixed * fix: fused base and stretch folders into one * feat: added README for tictactoe
1 parent a9bda5e commit 31133e4

File tree

13 files changed

+592
-0
lines changed

13 files changed

+592
-0
lines changed

‎lesson_20/danielsonadjocy/README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Tic Tac Toe Game
2+
3+
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.
4+
5+
## Features
6+
7+
- **Interactive Game Board**: Clickable cells for easy gameplay.
8+
- **Player Turn Indicator**: Displays whose turn it is.
9+
- **Winner Announcement**: Declares the winner or a draw when the game ends.
10+
- **Reset Button**: Allows players to reset the game and start over.
11+
12+
## Game
13+
<img src="images/board.png">
14+
15+
16+
## How to Play
17+
18+
1. Player 1 (X) starts the game.
19+
3. Players take turns clicking on the cells to place their symbol (X or O).
20+
4. The game ends when:
21+
- A player aligns three symbols in a row, column, or diagonal.
22+
- All cells are filled, resulting in a draw.
23+
5. Click the "Reset Game" button to restart the game.

‎lesson_20/danielsonadjocy/images/board.png‎

194 KB
Loading

‎lesson_20/danielsonadjocy/images/camera.jpg‎

55.5 KB
Loading

‎lesson_20/danielsonadjocy/images/camera2.jpg‎

111 KB
Loading

‎lesson_20/danielsonadjocy/images/light.jpg‎

31.5 KB
Loading

‎lesson_20/danielsonadjocy/images/light2.jpg‎

41.1 KB
Loading

‎lesson_20/danielsonadjocy/images/thermostat.jpg‎

21.1 KB
Loading

‎lesson_20/danielsonadjocy/index.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>SmartHome Items</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="styles.css">
10+
</head>
11+
<body>
12+
<header>
13+
<h1>SmartHome Items</h1>
14+
</header>
15+
<main>
16+
<section class="tab-section">
17+
<h2>Tab Section</h2>
18+
<button class="tab-button active" data-tab="living">Living Room</button>
19+
<button class="tab-button" data-tab="kitchen">Kitchen</button>
20+
<button class="tab-button" data-tab="bedroom">Bedroom</button>
21+
22+
<div class="tab-content active" id="living">
23+
<p>Living room devices: lights, TV, thermostat.</p>
24+
</div>
25+
<div class="tab-content" id="kitchen">
26+
<p>Kitchen devices: fridge, oven, lights.</p>
27+
</div>
28+
<div class="tab-content" id="bedroom">
29+
<p>Bedroom devices: lights, speakers.</p>
30+
</div>
31+
</section>
32+
33+
<section class="accordion-section">
34+
<h2>Accordion Section</h2>
35+
<button class="accordion-button">Lights</button>
36+
<div class="accordion-content">
37+
<p>Control your lighting with ease using our smart lights.</p>
38+
<p>Lights: Light_1, Light_2</p>
39+
</div>
40+
41+
<button class="accordion-button">Thermostats</button>
42+
<div class="accordion-content">
43+
<p>Maintain the perfect temperature in your home with our smart thermostats.</p>
44+
<p>Thermostats: LivingRoomThermostat</p>
45+
</div>
46+
47+
<button class="accordion-button">Security Cameras</button>
48+
<div class="accordion-content">
49+
<p>Keep an eye on your home with our advanced security cameras.</p>
50+
<p>Cameras: FrontDoorCam, BackyardCam</p>
51+
</div>
52+
53+
</section>
54+
55+
<section class="photo-gallery">
56+
<h2>Photo Gallery</h2>
57+
<div class="gallery-controls">
58+
<button class="gallery-back-button gallery-controls">&#10094;</button>
59+
<div class="gallery">
60+
<img src="images/light.jpg" alt="Light">
61+
<img src="images/light2.jpg" alt="Light 2">
62+
<img src="images/thermostat.jpg" alt="Thermostat">
63+
<img src="images/camera.jpg" alt="Camera">
64+
<img src="images/camera2.jpg" alt="Camera 2">
65+
</div>
66+
<button class="gallery-forward-button gallery-controls">&#10095;</button>
67+
</div>
68+
</section>
69+
</main>
70+
<footer>
71+
<p>&copy; 2025: Danielson Adjocy</p>
72+
</footer>
73+
<script src="script.js"></script>
74+
</body>
75+
</html>

‎lesson_20/danielsonadjocy/script.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// ===== TABS =====
2+
const tabButtons = document.querySelectorAll('.tab-button');
3+
const tabContents = document.querySelectorAll('.tab-content');
4+
5+
tabButtons.forEach(button => {
6+
button.addEventListener('click', () => {
7+
tabButtons.forEach(b => b.classList.remove('active'));
8+
tabContents.forEach(c => c.classList.remove('active'));
9+
10+
button.classList.add('active');
11+
const targetId = button.getAttribute('data-tab');
12+
document.getElementById(targetId).classList.add('active');
13+
});
14+
});
15+
16+
// ===== ACCORDION =====
17+
const accordionButtons = document.querySelectorAll('.accordion-button');
18+
19+
accordionButtons.forEach(button => {
20+
button.addEventListener('click', () => {
21+
const content = button.nextElementSibling;
22+
const isOpen = content.style.display === 'block';
23+
24+
// Close all others (optional)
25+
document.querySelectorAll('.accordion-content').forEach(c => c.style.display = 'none');
26+
27+
// Toggle current
28+
content.style.display = isOpen ? 'none' : 'block';
29+
});
30+
});
31+
32+
// ===== GALLERY =====
33+
const gallery = document.querySelector('.gallery');
34+
const galleryImages = gallery.querySelectorAll('img');
35+
const backButton = document.querySelector('.gallery-back-button');
36+
const forwardButton = document.querySelector('.gallery-forward-button');
37+
38+
forwardButton.addEventListener('click', () => {
39+
gallery.appendChild(gallery.firstElementChild); // move first to end
40+
});
41+
42+
backButton.addEventListener('click', () => {
43+
gallery.insertBefore(gallery.lastElementChild, gallery.firstElementChild); // move last to start
44+
});

‎lesson_20/danielsonadjocy/styles.css‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
/* ===== GLOBAL ===== */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
html {
9+
font-family: Arial, sans-serif;
10+
scroll-behavior: smooth;
11+
}
12+
13+
body {
14+
background-color: #f9f9f9;
15+
color: #333;
16+
display: flex;
17+
flex-direction: column;
18+
min-height: 100vh;
19+
line-height: 1.6;
20+
}
21+
22+
/* ===== HEADER ===== */
23+
header {
24+
background: #2c3e50;
25+
color: white;
26+
padding: 1rem;
27+
text-align: center;
28+
}
29+
30+
header h1 {
31+
font-size: 1.8rem;
32+
}
33+
34+
/* ===== MAIN ===== */
35+
main {
36+
flex: 1;
37+
max-width: 900px;
38+
width: 90%;
39+
margin: 2rem auto;
40+
display: flex;
41+
flex-direction: column;
42+
gap: 2rem;
43+
}
44+
45+
section h2 {
46+
margin-bottom: 0.8rem;
47+
font-size: 1.4rem;
48+
color: #2c3e50;
49+
}
50+
51+
/* ===== TABS ===== */
52+
.tab-section {
53+
background: white;
54+
padding: 1rem;
55+
border-radius: 10px;
56+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
57+
}
58+
59+
.tabs {
60+
display: flex;
61+
flex-wrap: wrap;
62+
margin-bottom: 1rem;
63+
}
64+
65+
.tab-button {
66+
background: #ecf0f1;
67+
border: none;
68+
padding: 0.6rem 1rem;
69+
margin-right: 0.5rem;
70+
cursor: pointer;
71+
border-radius: 6px;
72+
transition: background 0.3s;
73+
}
74+
75+
.tab-button.active {
76+
background: #2c3e50;
77+
color: white;
78+
}
79+
80+
.tab-button:hover {
81+
background: #d0d7da;
82+
}
83+
84+
.tab-content {
85+
display: none;
86+
}
87+
88+
.tab-content.active {
89+
display: block;
90+
}
91+
92+
/* ===== ACCORDION ===== */
93+
.accordion-section {
94+
background: white;
95+
padding: 1rem;
96+
border-radius: 10px;
97+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
98+
}
99+
100+
.accordion-button {
101+
width: 100%;
102+
text-align: left;
103+
background: #ecf0f1;
104+
border: none;
105+
padding: 0.8rem;
106+
font-size: 1rem;
107+
cursor: pointer;
108+
margin-top: 0.5rem;
109+
border-radius: 6px;
110+
transition: background 0.3s;
111+
}
112+
113+
.accordion-button:hover {
114+
background: #d0d7da;
115+
}
116+
117+
.accordion-content {
118+
display: none;
119+
padding: 0.8rem;
120+
background: #f7f7f7;
121+
border-left: 3px solid #2c3e50;
122+
border-radius: 0 0 6px 6px;
123+
}
124+
125+
.accordion-content p {
126+
font-size: 0.95rem;
127+
}
128+
129+
/* ===== GALLERY ===== */
130+
.photo-gallery {
131+
background: white;
132+
padding: 1rem;
133+
border-radius: 10px;
134+
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
135+
}
136+
137+
.gallery-controls {
138+
display: flex;
139+
align-items: center;
140+
justify-content: center;
141+
gap: 1rem;
142+
}
143+
144+
.gallery {
145+
display: flex;
146+
overflow: hidden;
147+
width: 100%;
148+
max-width: 600px;
149+
border-radius: 10px;
150+
transition: transform 0.4s ease;
151+
}
152+
153+
.gallery img {
154+
width: 33.33%;
155+
flex-shrink: 0;
156+
object-fit: cover;
157+
}
158+
159+
.gallery-back-button,
160+
.gallery-forward-button {
161+
background: #2c3e50;
162+
color: white;
163+
border: none;
164+
font-size: 1.5rem;
165+
padding: 0.5rem 0.8rem;
166+
border-radius: 50%;
167+
cursor: pointer;
168+
transition: background 0.3s;
169+
}
170+
171+
.gallery-back-button:hover,
172+
.gallery-forward-button:hover {
173+
background: #1a242f;
174+
}
175+
176+
/* ===== FOOTER ===== */
177+
footer {
178+
background: #2c3e50;
179+
color: white;
180+
text-align: center;
181+
padding: 1rem;
182+
font-size: 0.9rem;
183+
}
184+
185+
/* ===== MOBILE ===== */
186+
@media (max-width: 600px) {
187+
header h1 {
188+
font-size: 1.4rem;
189+
}
190+
191+
.tab-button {
192+
width: 100%;
193+
margin-bottom: 0.5rem;
194+
}
195+
196+
.gallery img {
197+
width: 100%;
198+
}
199+
200+
.gallery-back-button,
201+
.gallery-forward-button {
202+
font-size: 1.2rem;
203+
padding: 0.4rem 0.6rem;
204+
}
205+
}

0 commit comments

Comments
 (0)