Skip to content

Commit 3c85c76

Browse files
adambricelisadambricelis
committed
Remove HTML editing from tutorial
1 parent e14ddf8 commit 3c85c76

File tree

2 files changed

+18
-106
lines changed

2 files changed

+18
-106
lines changed

‎index.html‎

Lines changed: 2 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,12 @@
11
<html>
22
<head>
33
<link rel="stylesheet" type="text/css" href="main.css" />
4-
<script src="main.js"></script>
4+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
5+
<script defer src="main.js"></script>
56
</head>
67

78
<body>
89
<div id="heads-area">
9-
<div class="person-frame-inner">
10-
<img class="ball" src="images/leong.jpg" />
11-
<p>Jason Leong :D</p>
12-
</div>
13-
<div class="person-frame-inner">
14-
<img class="ball" src="images/nathan.jpg" />
15-
<p>Nathan VanSickle</p>
16-
</div>
17-
<div class="person-frame-inner">
18-
<img class="ball" src="images/max_gruber.jpg" />
19-
<p>Max Gruber</p>
20-
</div>
21-
<div class="person-frame-inner">
22-
<img class="ball" src="images/adam_lis.jpg" />
23-
<p>Adam Lis</p>
24-
</div>
25-
<div class="person-frame-inner">
26-
<img class="ball" src="images/cute me.jpg" />
27-
<p>Mackenzie Scott</p>
28-
</div>
29-
<div class="person-frame-inner">
30-
<img class="ball" src="images/jose_chico.PNG" />
31-
<p>Jose Nieves-Diaz</p>
32-
</div>
33-
<div class="person-frame-inner">
34-
<img class="ball" src="images/afrah_taj.jpg" />
35-
<p>Afrah</p>
36-
</div>
37-
<div class="person-frame-inner">
38-
<img class="ball" src="images/bouch_pic.jpg" />
39-
<p>Adam Bouchakour</p>
40-
</div>
41-
<div class="person-frame-inner">
42-
<img class="ball" src="images/lisha_nawani.jpg" />
43-
<p>Lisha Nawani</p>
44-
</div>
45-
<div class="person-frame-inner">
46-
<img class="ball" src="images/unnamed.jpg" />
47-
<p>Carter Scheatzle</p>
48-
</div>
49-
<div class="person-frame-inner">
50-
<img class="ball" src="images/jacob_smearsoll.jpg" />
51-
<p>Jacob Smearsoll</p>
52-
</div>
53-
<div class="person-frame-inner">
54-
<img class="ball" src="images/Olivia Picture.jpg" />
55-
<p>Olivia Maynard</p>
56-
</div>
57-
<div class="person-frame-inner">
58-
<img class="ball" src="images/waite138.jpeg" />
59-
<p>Matt Waite</p>
60-
</div>
61-
<div class="person-frame-inner">
62-
<img class="ball" src="images/friend.jpg" />
63-
<p>Lena</p>
64-
</div>
65-
<div class="person-frame-inner">
66-
<img class="ball" src="images/tran.623.jpg" />
67-
<p>Tommy Tran</p>
68-
</div>
69-
<div class="person-frame-inner">
70-
<img class="ball" src="images/kevin_tan.jpg" />
71-
<p>Kevin Tan</p>
72-
</div>
73-
<div class="person-frame-inner">
74-
<img class="ball" src="images/ari_zeltser.jpg" />
75-
<p>Ari Zeltser</p>
76-
</div>
77-
<div class="person-frame-inner">
78-
<img class="ball" src="images/onlypiconmypc.png" />
79-
<p>Matthew Kundla</p>
80-
</div>
81-
<div class="person-frame-inner">
82-
<img class="ball" src="images/ethan_h.jpg" />
83-
<p>Ethan</p>
84-
</div>
85-
<div class="person-frame-inner">
86-
<img class="ball" src="images/super_paper_mario_for_some_reason.png" />
87-
<p>Super Paper Mario</p>
88-
</div>
89-
<div class="person-frame-inner">
90-
<img class="ball" src="images/ava_scherocman.jpg" />
91-
<p>Ava Scherocman</p>
92-
</div>
93-
<div class="person-frame-inner">
94-
<img class="ball" src="images/john_meyer.jpg" />
95-
<p>John Meyer</p>
96-
</div>
97-
<div class="person-frame-inner">
98-
<img class="ball" src="images/valencia.jpg" />
99-
<p>Valencia Nguyen</p>
100-
</div>
101-
<div class="person-frame-inner">
102-
<img class="ball" src="images/guo.png" />
103-
<p>Chenmeinian Guo</p>
104-
</div>
105-
<div class="person-frame-inner">
106-
<img class="ball" src="images/kevin_dong.jpg" />
107-
<p>Kevin Dong</p>
108-
</div>
10910
</div>
11011
</body>
11112
</html>

‎main.js‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1-
document.addEventListener("DOMContentLoaded", function(event) {
2-
var people = document.getElementsByClassName("person-frame-inner");
3-
for (let person of people) {
4-
person.style["animation-delay"] = -Math.floor(Math.random() * 1000) + "s"
1+
$.ajax({
2+
url: "images/",
3+
success: data => {
4+
$(data).find("a").attr("href", (_i, filename) => {
5+
if (filename.match(/\.(jpe?g|png|gif)$/)) {
6+
$('#heads-area').append(
7+
"<div class=\"person-frame-inner\"><img class=\"ball\" src=\"images/" + filename + "\"/></div>"
8+
);
9+
}
10+
});
11+
12+
let people = document.getElementsByClassName("person-frame-inner");
13+
for (let person of people) {
14+
person.style["animation-delay"] = -Math.floor(Math.random() * 1000) + "s"
15+
}
516
}
6-
});
17+
});

0 commit comments

Comments
 (0)