Skip to content

Commit c7908f6

Browse files
bscott519bscott519
authored
feat: adds Benjamin's HTML components and tic tac toe implementation (#672)
* updating main * implemented tabbed component * implemented accordion component * implementing gallery component and added new folders and images * implemented gallery component and tic tac toe stretch part * Delete package.json * Delete package-lock.json * Delete lesson_04/benjaminscott/bscottREADME.md * Delete lesson_06/benjaminscott/jest.config.js * finalized files and folders * Delete lesson_06/benjaminscott/jest.config.json * Delete lesson_06/benjaminscott/stretchfunc.test.ts * Delete lesson_06/benjaminscott/stretchfunc.ts * Delete lesson_06/benjaminscott/tsconfig.json * fixed plusSlides error
1 parent 31133e4 commit c7908f6

File tree

12 files changed

+367
-0
lines changed

12 files changed

+367
-0
lines changed

‎lesson_20/benjaminscott/imgs/20120608__HeatLeBron60912p1.webp‎

25.7 KB
Loading

‎lesson_20/benjaminscott/imgs/240423-lebron-james-lakers-mn-0935-9ce802.webp‎

223 KB
Loading

‎lesson_20/benjaminscott/imgs/52fd1bca07a3d.image.jpg‎

29 KB
Loading

‎lesson_20/benjaminscott/imgs/bron-1024x731.jpg‎

121 KB
Loading

‎lesson_20/benjaminscott/imgs/leBron-Dunk.webp‎

54.9 KB
Loading

‎lesson_20/benjaminscott/imgs/lebron.jpeg‎

8.8 KB
Loading

‎lesson_20/benjaminscott/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 name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="stylesheet" type="text/css" href="../benjaminscott/style.css">
6+
<h1>LeBron James</h1>
7+
</head>
8+
<body>
9+
<!-- Tabbed Component -->
10+
<div class="tab">
11+
<button class="tablinks" onclick="openBron(event, 'Cleveland')">Cleveland Bron</button>
12+
<button class="tablinks" onclick="openBron(event, 'Miami')">Miami Bron</button>
13+
<button class="tablinks" onclick="openBron(event, 'LA')">LA Bron</button>
14+
</div>
15+
16+
<div id="Cleveland" class="tabcontent">
17+
<h3>Cleveland Bron</h3>
18+
<p>LeBron James played in Cleveland from 2003 to 2010 and then again from 2014 to 2018.</p>
19+
</div>
20+
21+
<div id="Miami" class="tabcontent">
22+
<h3>Miami Bron</h3>
23+
<p>LeBron James played in Miami from 2010 to 2014.</p>
24+
</div>
25+
26+
<div id="LA" class="tabcontent">
27+
<h3>LA Bron</h3>
28+
<p>LeBron James played in Los Angeles from 2018 to present.</p>
29+
</div>
30+
31+
<!--Accordion Component-->
32+
<div>
33+
<details class="accordion">
34+
<summary>LeBron's Championships</summary>
35+
<p>LeBron has won 4 championships.</p>
36+
<ul>
37+
<li>Miami Heat (2012)</li>
38+
<li>Miami Heat (2013)</li>
39+
<li>Cleveland Cavaliers (2016)</li>
40+
<li>Los Angeles Lakers (2020)</li>
41+
</ul>
42+
</details>
43+
44+
<details class="accordion">
45+
<summary>LeBron's Longevity</summary>
46+
<p>LeBron has played in the NBA for 22 seasons, and is entering his 23rd season.</p>
47+
</details>
48+
</div>
49+
50+
<!--Photo Gallery Component-->
51+
<div class="gallery">
52+
<div class="bronPics">
53+
<img src="../benjaminscott/imgs/lebron.jpeg" alt="LeBron James" width="300" height="200">
54+
</div>
55+
<div class="bronPics">
56+
<img src="../benjaminscott/imgs/52fd1bca07a3d.image.jpg" alt="Bron shooting game winner" width="300" height="200">
57+
</div>
58+
<div class="bronPics">
59+
<img src="../benjaminscott/imgs/240423-lebron-james-lakers-mn-0935-9ce802.webp" alt="Bron dribbling the ball" width="300" height="200">
60+
</div>
61+
<div class="bronPics">
62+
<img src="../benjaminscott/imgs/20120608__HeatLeBron60912p1.webp" alt="Bron dribbling the ball in Boston" width="300" height="200">
63+
</div>
64+
<div class="bronPics">
65+
<img src="../benjaminscott/imgs/bron-1024x731.jpg" alt="Bron dunking in Cleveland in first stint" width="300" height="200">
66+
</div>
67+
<div class="bronPics">
68+
<img src="../benjaminscott/imgs/leBron-Dunk.webp" alt="Bron dunking in Cleveland in second stint" width="300" height="200">
69+
</div>
70+
<a class="prev" onclick="back">&#10094;</a>
71+
<a class="next" onclick="forward">&#10095;</a>
72+
</div>
73+
<script src="../benjaminscott/index.js"></script>
74+
</body>
75+
</html>

‎lesson_20/benjaminscott/index.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
function openBron(evt, bronCity) {
2+
var i, tabcontent, tablinks;
3+
4+
tabcontent = document.getElementsByClassName("tabcontent");
5+
for (i = 0; i < tabcontent.length; i++) {
6+
tabcontent[i].style.display = "none";
7+
}
8+
9+
tablinks = document.getElementsByClassName("tablinks");
10+
for (i = 0; i < tablinks.length; i++) {
11+
tablinks[i].className = tablinks[i].className.replace(" active", "");
12+
}
13+
14+
document.getElementById(bronCity).style.display = "block";
15+
evt.currentTarget.className += " active";
16+
}
17+
18+
const gallery = document.querySelector('.gallery');
19+
const back = document.querySelector('.prev');
20+
const forward = document.querySelector('.next');
21+
22+
function updateVisibleImages() {
23+
const pics = gallery.querySelectorAll('.bronPics');
24+
pics.forEach((pic, idx) => {
25+
pic.classList.remove('visible');
26+
if (idx < 3) {
27+
pic.classList.add('visible');
28+
}
29+
});
30+
}
31+
32+
forward.addEventListener('click', () => {
33+
const first = gallery.querySelector('.bronPics');
34+
gallery.appendChild(first);
35+
updateVisibleImages();
36+
});
37+
38+
back.addEventListener('click', () => {
39+
const pics = gallery.querySelectorAll('.bronPics');
40+
const last = pics[pics.length - 1];
41+
gallery.insertBefore(last, gallery.firstElementChild);
42+
updateVisibleImages();
43+
});
44+
45+
updateVisibleImages();

‎lesson_20/benjaminscott/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
.tab {
2+
overflow: hidden;
3+
background-color: aliceblue;
4+
}
5+
6+
h1 {
7+
text-align: center;
8+
}
9+
.tabcontent {
10+
display: none;
11+
padding: 12px 16px;
12+
border: 1px solid black;
13+
border-top: none;
14+
}
15+
16+
.tab button {
17+
background-color: yellow;
18+
float: left;
19+
border: none;
20+
outline: none;
21+
cursor: pointer;
22+
padding: 14px 16px;
23+
transition: 0.3s;
24+
font-size: 17px;
25+
}
26+
27+
.tab button:hover {
28+
background-color: lightgray;
29+
}
30+
31+
.tab button.active {
32+
background-color: purple;
33+
}
34+
35+
.accordion {
36+
background-color: purple;
37+
color: white;
38+
cursor: pointer;
39+
padding: 18px;
40+
width: 100%;
41+
border: none;
42+
text-align: left;
43+
outline: none;
44+
font-size: 15px;
45+
transition: 0.4s;
46+
}
47+
48+
* {box-sizing:border-box}
49+
50+
.gallery {
51+
display: flex;
52+
gap: 10px;
53+
justify-content: center;
54+
position: relative;
55+
}
56+
57+
.bronPics {
58+
display: none;
59+
flex: 0 0 auto;
60+
}
61+
62+
.bronPics.visible {
63+
display: block;
64+
}
65+
66+
.prev, .next {
67+
cursor: pointer;
68+
position: absolute;
69+
top: 50%;
70+
width: auto;
71+
margin-top: -22px;
72+
padding: 16px;
73+
color: black;
74+
font-weight: bold;
75+
font-size: 18px;
76+
transition: 0.6s ease;
77+
border-radius: 0 3px 3px 0;
78+
user-select: none;
79+
}
80+
81+
.prev {
82+
left: 0;
83+
border-radius: 3px 0 0 3px;
84+
}
85+
86+
.next {
87+
right: 0;
88+
border-radius: 0 3px 3px 0;
89+
}
90+
91+
.prev:hover, .next:hover {
92+
background-color: rgba(0,0,0,0.8);
93+
}
94+
95+
.fade {
96+
animation-name: fade;
97+
animation-duration: 1.5s;
98+
}
99+
100+
@keyframes fade {
101+
from {opacity: .4}
102+
to {opacity: 1}
103+
}

‎lesson_20/tictactoe/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Tic Tac Toe</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<h1>Tic Tac Toe</h1>
11+
<div id="game">
12+
<div class="board">
13+
<div class="cell" data-index="0"></div>
14+
<div class="cell" data-index="1"></div>
15+
<div class="cell" data-index="2"></div>
16+
<div class="cell" data-index="3"></div>
17+
<div class="cell" data-index="4"></div>
18+
<div class="cell" data-index="5"></div>
19+
<div class="cell" data-index="6"></div>
20+
<div class="cell" data-index="7"></div>
21+
<div class="cell" data-index="8"></div>
22+
</div>
23+
<div id="status"></div>
24+
<button id="reset">Reset Game</button>
25+
</div>
26+
<script src="script.js"></script>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)