Ivan icodesido

Dynamic Infographic

This example shows how a dynamic infographic can be realized with archer.

A Pen by Archer on CodePen.

License.

Floating island with waterfall

Floating island with moving clouds and animated waterfall. Created for #codepenchallenge

A Pen by Dejan Lukac on CodePen.

License.

Dinosaur Memory Game🦖

My second ever CodePen challenge pen is a cute dinosaur themed memory game with an obligatory Jurassic Park reference thrown in because how can you not?

Sound effects are my own voice apart from the winning sound and all art is me too (a bit rusty) apart from the blue Triceratops which I traced from a sketch by @KinnaT

Fun to create but became a bit frustrating timing animations and class changes along with timeouts. I could have switched to, for example, transitionend listeners for certain parts but it felt like the code was already outgrowing itself and this isn't really production ready shtuff so I let it be 🧘‍♂️☮

A Pen by Adrian Payne on CodePen.

	const toSpinal = str => str.split(/\s\|_\|(?=[A-Z])/).join('-').toLowerCase()

	console.log(toSpinal("I like potatoes")) //i-like-potatoes
	console.log(toSpinal("ILikeCarrots")) //i-like-carrots
	console.log(toSpinal("ThisIsA_really We1rdString")) //this-is-a-really-we1rd-string

	/* grid props will be ignored by non-supporting browsers *
	.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 1%;
	}

	.grid > .item {
	width: 23%;
	margin: 0 1%;

	async function connect() {

	const
	connection = await asyncDBconnect('http://localhost:1234'),
	session = await asyncGetSession(connection),
	user = await asyncGetUser(session),
	log = await asyncLogAccess(user);

	return true;
	}

	(function() {
	try {
	new Function('async () => {}')();
	} catch (error) {
	// create script tag pointing to legacy-bundle.js;
	return;
	}
	// create script tag pointing to modern-bundle.js;;
	})();

	<div class="infographic-title"><span class="inner-title"><strong>Healthy</strong>Foods<br><span>that babies</span><strong>like most</strong></span></div>
	<ul class="infographic">
	<li href="http://startupsmartup.com/wp-content/themes/divi%20child/images/infographic/info_1.jpg" class="item item1 et_pb_lightbox_image">
	<img src="http://startupsmartup.com/wp-content/themes/divi%20child/images/infographic/info_1.jpg">
	<span class="lowercase">10 foods </span>
	<span class="uppercase">for babies</span>
	<object id="line-svg" type="image/svg+xml" data="http://startupsmartup.com/wp-content/uploads/2015/12/rightarrow-1.svg" height="60" width="60"></object>
	</li>
	<li href="http://startupsmartup.com/wp-content/themes/divi%20child/images/infographic/info_2.jpg" class="item item2 et_pb_lightbox_image">
	<img src="http://startupsmartup.com/wp-content/themes/divi%20child/images/infographic/info_2.jpg">

	<div class="container">
	<svg aria-labelledby="moneytitle" class="money-sm money" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 26.1">
	<title id="moneytitle" lang="en">Monetary Illustration</title>
	<g class="one" fill="#23262C"><path d="M7.9,10.1H5.7V9.4h2.2c0.2,0,0.3-0.1,0.3-0.3S8.1,8.8,7.9,8.8H7V8.5c0-0.2-0.1-0.3-0.3-0.3 c-0.2,0-0.3,0.1-0.3,0.3v0.3H5.4C5.2,8.8,5.1,9,5.1,9.1v1.2c0,0.2,0.1,0.3,0.3,0.3h2.2v0.6H5.4c-0.2,0-0.3,0.1-0.3,0.3 c0,0.2,0.1,0.3,0.3,0.3h0.9v0.3c0,0.2,0.1,0.3,0.3,0.3c0.2,0,0.3-0.1,0.3-0.3v-0.3h0.9c0.2,0,0.3-0.1,0.3-0.3v-1.2 C8.2,10.2,8.1,10.1,7.9,10.1z"/><path d="M10.5,8.3c-0.4-0.7-1-1.4-1.5-1.9C8.7,6,8.4,5.7,8.3,5.4C8.5,5.3,8.6,5.1,8.7,5c0.1-0.1,0.1-0.3,0-0.4 c-0.1-0.1-0.3-0.1-0.4,0c0.1-0.4,0.4-0.9,1-1.4c0.1-0.1,0.2-0.3,0.1-0.4C9.4,2.8,9,2,8.2,2C7.7,2,7.5,2.3,7.5,2.5 C7.4,2.6,7.4,2.6,7.3,2.6C7,2.6,6.8,2.5,6.5,2.3C6.1,2.2,5.8,2,5.4,2h0C4.7,2,4,2.6,4,2.7C3.9,2.8,3.9,2.9,3.9,3 C3.9,3,3.9,3.1,4,3.2C4.4,3.5,4.8,4,5,4.5c0,0,0,0,0,0c-0.1-0.1-0.3-0.1-0.4,0C4.5,4.7,4