-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
45 lines (43 loc) · 4.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width
, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="js.png" sizes="16x16 32x32 48x48">
<title>JS30 Projects</title>
</head>
<body>
<div class="site-wrap">
<h1>JS30 Projects by Reuben George Thomas</h1>
<p> Hey, This is a list of projects I made to practice my vanilla JavaScript skills, by following <a href="https://javascript30.com" target=_blank>WesBos' JS30 course.</a> Please note that these are just to practice javascript, and several of these projects use mouse and physical keyboard input. Responsive Design has not been a huge priority while making them, and although the sites will probably look fine on mobile devices, not all functionality has been translated. Open on a PC for best results.</p>
<h3>All links will open in a new tab<h3>
<div class="list-container">
<div class="flex-item slide-in"><a href="drumkit/index.html" target=_blank>Make some beats with this Drumkit!</a></div>
<div class="flex-item slide-in"><a href="clock/index.html" target=_blank>Check the time on this simple clock!</a></div>
<div class="flex-item slide-in"><a href="cssvariables/index.html" target=_blank>A Demonstration of using Javascript along with CSS Variables to change CSS properties through user input</a></div>
<div class="flex-item slide-in"><a href="flexpanelgallery/index.html" target=_blank>A cool 5 panel gallery made with flexbox, with added CSS transitions!</a></div>
<div class="flex-item slide-in"><a href="typeahead/index.html" target=_blank>A search bar that filters through a list of cities and states for matches based on user input!</a></div>
<div class="flex-item slide-in"><a href="canvas/index.html" target=_blank>A blank canvas for you to draw multicoloured lines all day! Built using HTML5 Canvas</a></div>
<div class="flex-item slide-in"><a href="checkboxes/index.html" target=_blank>A list of checkboxes with a shift-click functionality to select a range, and an 'uncheck all' button</a></div>
<div class="flex-item slide-in"><a href="videoplayer/index.html" target=_blank>A Custom HTML5 Video Player with scrubbing, skipping, volume and playback speed controls</a></div>
<div class="flex-item slide-in"><a href="keydetection/index.html" target=_blank>Enter the secret code word for UNLIMITED UNICORNS AND RAINBOWS!</a></div>
<div class="flex-item slide-in"><a href="slideimage/index.html" target=_blank>A basic article/blog post type website with images that slide in when the page is scrolled</a></div>
<div class="flex-item slide-in"><a href="tapasmenu/index.html" target=_blank>A Tapas Menu with functionality to add, check and uncheck items. localStorage is utilized to preserve the state of the site when reloaded!</a></div>
<div class="flex-item slide-in"><a href="mouseshadow/index.html" target=_blank>A shadow that follows your mouse around!</a></div>
<div class="flex-item slide-in"><a href="photobooth/index.html" target=_blank>A PhotoBooth that captures pictures using your webcam and lets you download them!</a></div>
<div class="flex-item slide-in"><a href="link-highlighting/index.html" target=_blank>A page with a link highlight that dynamically animates its size and sets its position to highlight whatever link is selected</a></div>
<div class="flex-item slide-in"><a href="speechsynthesis/index.html" target=_blank>The VOICEINATOR 5000! A speech synthesis engine with customisable voices, speech rate and speech pitch!</a></div>
<div class="flex-item slide-in"><a href="stickynav/index.html" target=_blank>CHSBRGR.IO - A mockup website with a navbar that sticks to the top, and images that slide into view. Beware, this might make you hungry!</a></div>
<div class="flex-item slide-in"><a href="dropdownmenu/index.html" target=_blank>A dropdown menu with a cool animation!</a></div>
<div class="flex-item slide-in"><a href="clickdrag/index.html" target=_blank>A horizontal div with a click and drag to scroll functionality(for mouse input devices)</a></div>
<div class="flex-item slide-in"><a href="speedcontroller/index.html" target=_blank>A scrub bar to control video playback speed!</a></div>
<div class="flex-item slide-in"><a href="countdowntimer/index.html" target=_blank>A countdown timer with a few preset values and a field for user input. Also shows the end-time of the timer, very useful to give yourself a break and know exactly when to come back!</a></div>
<div class="flex-item slide-in"><a href="whackamole/index.html" target=_blank>GET WHACKING! Fun 30 second Whack-a-mole GAME!</a></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>