Allen's public fiddles
-
Vanilla JS Robot
pure Javascript version
-
Flippin' device
No-Library (pure JS), HTML, SCSS, JavaScript
-
Flippin' device
No-Library (pure JS), HTML, SCSS, JavaScript
-
Flippin out device
No-Library (pure JS), HTML, SCSS, JavaScript
-
messing with ES6
No-Library (pure JS), HTML, CSS, Babel + JSX
-
mLop5zdb
No-Library (pure JS), HTML, CSS, React
-
CSS close X icon
CSS only close X button using one <a>
-
CSS pencil edit icon
CSS only pencil using one <div>. Also works in IE11
-
3D Cylinder using CSS
Cylinder shape in pure CSS 3D
-
SCSS trashcan
CSS only trashcan using one <div>. Also works in IE11
-
CSS Snow Particles
No-Library (pure JS), HTML, SCSS, JavaScript
-
CSS keyframe blinking
jQuery 1.9.1, HTML, CSS, JavaScript
-
Rotating Cube Particles
CSS only!
-
Rotating Cube
CSS only!
-
Triangle with 3 rounded corners using CSS only + text.
Warning icon with text using only one span or div. Created without using images or SVGs.
-
JSON API: Olympic Medals Tracker
Query JSON of 2014 Sochi Winter Olympics participant country data. Listing country names, sorted alphabetically, and allowing user to select any number of countries to add to their "Favorite Countries". This favorite list is stored in persistent browser storage and can be viewed after closing and re-opening the browser. Table displays medals won by each of user’s selected Favorite Countries, sorted by gold medals, then by total medals. When the user adds a new Favorite Country, that country is inserted into the medal standings in correct sorting location. User can also remove a country from their medal standings watch-list.
-
Keyboard only focus styling
Keyboard user styling is hidden if mouse click user detected
-
SCSS only: Particle Triangles
Mock up showing what our static content can feel like with subtle moving background.
-
Accessible Custom Semantic UI checkboxes and radios
jQuery 3.3.1, HTML, SCSS, JavaScript
-
Add Arrow Key Support
Allow up and down arrow key support for a specified html section. In this example the up+down arrow keys will work for the links.