Skip to content

Commit 8d6cd0a

Browse files
szimmerman10szimmerman10
authored
Create index.html
1 parent 185d15f commit 8d6cd0a

File tree

1 file changed

+261
-0
lines changed

1 file changed

+261
-0
lines changed

‎search/index.html‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
6+
<style>
7+
.filterDiv {
8+
float: left;
9+
background-color: #ffffff;
10+
color: #000000;
11+
margin: 2px;
12+
text-align: center;
13+
display: none;
14+
font-family: Helvetica;
15+
overflow: hidden;
16+
}
17+
18+
19+
.filterDiv img {
20+
width: 100%;
21+
}
22+
23+
24+
.filterDiv img:hover {
25+
opacity: 0.3;
26+
}
27+
28+
@media all and (max-width: 800px) {
29+
.filterDiv { width:100%; }
30+
.btn { width:48%; font-size: 3.5vw;}
31+
}
32+
33+
@media all and ( min-width: 800px) and (max-width: 1200px) {
34+
.filterDiv { width:48%; }
35+
.btn { width:32%; font-size: 2.5vw;}
36+
}
37+
38+
@media all and ( min-width: 1200px) and ( max-width: 1710px){
39+
.filterDiv { width:32%; }
40+
.btn { width:19.5%; font-size: 1.4vw;}
41+
}
42+
43+
@media all and ( min-width: 1710px) {
44+
.filterDiv { width:24%; }
45+
.btn { width:10.5%; font-size: 0.82vw;}
46+
}
47+
48+
.show {
49+
display: block;
50+
}
51+
52+
.container {
53+
margin-top: 20px;
54+
overflow: hidden;
55+
}
56+
57+
/* Style the buttons */
58+
.btn {
59+
border: none;
60+
outline-style: solid;
61+
outline-width: 1px;
62+
padding: 20px 16px;
63+
background-color: #eff1f2;
64+
cursor: pointer;
65+
font-family: Helvetica;
66+
}
67+
68+
69+
70+
71+
72+
73+
.btn:hover {
74+
background-color: #cfd4d8;
75+
}
76+
77+
.btn:hover + .hide {
78+
background-color: #cfd4d8;
79+
}
80+
81+
.btn.active {
82+
background-color: #a7b1b7;
83+
}
84+
</style>
85+
86+
<body>
87+
88+
<h2 style="font-family: Helvetica">STEMcoding Activities</h2>
89+
90+
<div id="myBtnContainer">
91+
<button class="btn active" onclick="filterSelection('all')"> <b>Show all</b></button>
92+
<button class="btn" onclick="filterSelection('astronomy')"> Astronomy</button>
93+
<button class="btn" onclick="filterSelection('mechanics')"> Classical mechanics</button>
94+
<button class="btn" onclick="filterSelection('data')"> Data science</button>
95+
<button class="btn" onclick="filterSelection('discrete')"> Discrete math</button>
96+
<button class="btn" onclick="filterSelection('electro')"> Electromagnetism</button>
97+
<button class="btn" onclick="filterSelection('env')"> Environmental science</button>
98+
<button class="btn" onclick="filterSelection('math')"> Math</button>
99+
<button class="btn" onclick="filterSelection('physics')"> Physics</button>
100+
</div>
101+
102+
103+
104+
<div class="container">
105+
106+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/milestones/apollo/apollo.html" target="_blank">
107+
<div class="filterDiv mechanics astronomy physics"><img src="apollo.png" alt="Apollo Moon Landing"></div></a>
108+
109+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/milestones/bellicosebirds/bellicosebirds.html" target="_blank">
110+
<div class="filterDiv mechanics physics"><img src="birds.png" alt="Bellicose Birds"></div></a>
111+
112+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/milestones/birdlauncher/birdlauncher.html" target="_blank">
113+
<div class="filterDiv mechanics physics"><img src="birdslaunch.png" alt="Bird Launcher"></div></a>
114+
115+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/milestones/bonk/bonk.html" target="_blank">
116+
<div class="filterDiv mechanics physics"><img src="bonk.png" alt="Bonk.io Clone"></div></a>
117+
118+
<a href="http://go.osu.edu/earthdaycoding" target="_blank">
119+
<div class="filterDiv env math data"><img src="earth.png" alt="Earth Day"></div></a>
120+
121+
<a href="https://www.asc.ohio-state.edu/orban.14/physics_coding/units.html" target="_blank">
122+
<div class="filterDiv electro physics"><img src="electro.png" alt="Electromagnetism: Unit System"></div></a>
123+
124+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/escape/escape.html" target="_blank">
125+
<div class="filterDiv astronomy physics"><img src="black.png" alt="Escape velocity and Newtonian Black Holes"></div></a>
126+
127+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/exoplanet3/exoplanet.html" target="_blank">
128+
<div class="filterDiv astronomy physics"><img src="exo.png" alt="Exoplanets"></div></a>
129+
130+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/mercury/mercury.html" target="_blank">
131+
<div class="filterDiv mechanics astronomy physics math">Hidden Figures: Project Mercury</div></a>
132+
133+
<a href="http://www.asc.ohio-state.edu/orban.14/stemcoding/laserdefense/laserdefense.html" target="_blank">
134+
<div class="filterDiv math">Laser Defense</div></a>
135+
136+
<a href="http://www.asc.ohio-state.edu/orban.14/stemcoding/laserdefense2/laserdefense2.html" target="_blank">
137+
<div class="filterDiv math">Laser Defense with Auto Targeting</div></a>
138+
139+
<a href="https://www.asc.ohio-state.edu/orban.14/physics_coding/mechanics/2lunarlander/lunarlanderpre.html" target="_blank">
140+
<div class="filterDiv mechanics astronomy physics">Lunar Descent</div></a>
141+
142+
<a href="https://www.asc.ohio-state.edu/orban.14/physics_coding/bfield.html" target="_blank">
143+
<div class="filterDiv electro physics">Magnetic Force</div></a>
144+
145+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/flower/flower.html" target="_blank">
146+
<div class="filterDiv math">Mathematical Flower</div></a>
147+
148+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/milestones/movetheblob/movetheblob.html" target="_blank">
149+
<div class="filterDiv mechanics physics">Move the Blob</div></a>
150+
151+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/stars/stars.html" target="_blank">
152+
<div class="filterDiv astronomy physics data math">Night Sky Simulator</div></a>
153+
154+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/eccentricity/eccentricity.html" target="_blank">
155+
<div class="filterDiv astronomy physics">Orbital Motion: Eccentricity</div></a>
156+
157+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/kepler/kepler.html" target="_blank">
158+
<div class="filterDiv astronomy physics">Orbital Motion: Kepler's 2nd Law</div></a>
159+
160+
<a href="https://www.asc.ohio-state.edu/orban.14/physics_coding/accelerator.html" target="_blank">
161+
<div class="filterDiv electro physics">Particle Accelerator</div></a>
162+
163+
<a href="https://www.asc.ohio-state.edu/orban.14/physics_coding/potential.html" target="_blank">
164+
<div class="filterDiv electro physics">Particle Accelerator with Potential</div></a>
165+
166+
<a href="https://www.asc.ohio-state.edu/orban.14/math_coding/pi_graphical2/index.html" target="_blank">
167+
<div class="filterDiv math">Pi: Graphical Estimation</div></a>
168+
169+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/pi_day_parallel/index.html" target="_blank">
170+
<div class="filterDiv math">Pi: Parallel Processing</div></a>
171+
172+
<a href="https://www.asc.ohio-state.edu/orban.14/math_coding/pi_day2/index.html" target="_blank">
173+
<div class="filterDiv math">Pi: Series Estimate</div></a>
174+
175+
<a href="https://www.asc.ohio-state.edu/orban.14/processing_fall2016/intro/planetoids.html" target="_blank">
176+
<div class="filterDiv mechanics astronomy physics">Planetoids Game</div></a>
177+
178+
<a href="https://www.asc.ohio-state.edu/orban.14/physics_coding/momentum.html" target="_blank">
179+
<div class="filterDiv mechanics astronomy physics">Planetoids with Momentum</div></a>
180+
181+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/milestones/spring/spring.html" target="_blank">
182+
<div class="filterDiv mechanics astronomy physics">Planetoids with a Spring</div></a>
183+
184+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/milestones/torque/torque.html" target="_blank">
185+
<div class="filterDiv mechanics astronomy physics">Planetoids with Torque</div></a>
186+
187+
<a href="https://www.asc.ohio-state.edu/orban.14/physics_coding/repulsion.html" target="_blank">
188+
<div class="filterDiv electro physics">Point Charge Repulsion</div></a>
189+
190+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/milestones/pong/pong.html" target="_blank">
191+
<div class="filterDiv mechanics physics">Pong</div></a>
192+
193+
<a href="https://www.asc.ohio-state.edu/orban.14/stemcoding/RCcircuit2/RCcircuits.html" target="_blank">
194+
<div class="filterDiv electro physics">RC Circuits</div></a>
195+
196+
<a href="https://www.asc.ohio-state.edu/orban.14/physics_coding/gravity/gravity.html" target="_blank">
197+
<div class="filterDiv astronomy physics">Slingshot With Gravity</div></a>
198+
199+
<a href="http://www.asc.ohio-state.edu/orban.14/stemcoding/datascience/objecttracker/part1/" target="_blank">
200+
<div class="filterDiv data mechanics physics math">STEMcoding Object Tracker</div></a>
201+
202+
<a href="http://www.asc.ohio-state.edu/orban.14/stemcoding/thai21/part1/thai21.html" target="_blank">
203+
<div class="filterDiv discrete math">Thai 21</div></a>
204+
205+
<a href="https://www.asc.ohio-state.edu/orban.14/physics_coding/sound.html" target="_blank">
206+
<div class="filterDiv electro physics math">Wave Interference</div></a>
207+
208+
</div>
209+
210+
211+
212+
213+
214+
215+
<script>
216+
filterSelection("all")
217+
function filterSelection(c) {
218+
var x, i;
219+
x = document.getElementsByClassName("filterDiv");
220+
if (c == "all") c = "";
221+
for (i = 0; i < x.length; i++) {
222+
w3RemoveClass(x[i], "show");
223+
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
224+
}
225+
}
226+
227+
function w3AddClass(element, name) {
228+
var i, arr1, arr2;
229+
arr1 = element.className.split(" ");
230+
arr2 = name.split(" ");
231+
for (i = 0; i < arr2.length; i++) {
232+
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
233+
}
234+
}
235+
236+
function w3RemoveClass(element, name) {
237+
var i, arr1, arr2;
238+
arr1 = element.className.split(" ");
239+
arr2 = name.split(" ");
240+
for (i = 0; i < arr2.length; i++) {
241+
while (arr1.indexOf(arr2[i]) > -1) {
242+
arr1.splice(arr1.indexOf(arr2[i]), 1);
243+
}
244+
}
245+
element.className = arr1.join(" ");
246+
}
247+
248+
// Add active class to the current button (highlight it)
249+
var btnContainer = document.getElementById("myBtnContainer");
250+
var btns = btnContainer.getElementsByClassName("btn");
251+
for (var i = 0; i < btns.length; i++) {
252+
btns[i].addEventListener("click", function(){
253+
var current = document.getElementsByClassName("active");
254+
current[0].className = current[0].className.replace(" active", "");
255+
this.className += " active";
256+
});
257+
}
258+
</script>
259+
260+
</body>
261+
</html>

0 commit comments

Comments
 (0)