Skip to content

Commit f3d9241

Browse files
szimmerman10szimmerman10
authored
Create search.html
1 parent 6cab03e commit f3d9241

File tree

1 file changed

+260
-0
lines changed

1 file changed

+260
-0
lines changed

‎navigation/search.html‎

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

0 commit comments

Comments
 (0)