Pick a Bone with CSS Selectors | Happy Halloween - CSS Animations

Pick a Bone with CSS Selectors | Happy Halloween

Click the run Button to Run the code
Play around with the CSS selectors while picking a bone with one of them. Even literally.

Live at : https://codepen.io/ashishkhuraishy/full/dgKOyB

Code:-

	//- aside from a simple button include a div for the skeleton, nesting one div element for each bone
	//- ten bones
	- var bones = new Array(10)
	button Pick a bone
	.skeleton
	each bone in bones
	.bone

view raw index.pug hosted with ❤ by GitHub

Pick a Bone with CSS Selectors | Happy HaloWeen

Play around with the CSS selectors while picking a bone with one of them. Even literally.

A Pen by Ashish on CodePen.

License.

view raw pick-a-bone-with-css-selectors-happy-haloween.markdown hosted with ❤ by GitHub

	// target the button to pick each bone as well as the skeleton where each span is included
	// by including the span elements **before** the div making up the bones
	// AND by leveraging the nth-child() selector for these last elements
	// each bone is made "disappearing"
	// this because progressively each element is no longer the nth-child()
	const button = document.querySelector('button');
	const skeleton = document.querySelector('.skeleton');
	// include a variable to keep track of the bones picked
	// this to remove the click listener after all bones are pricked (or maybe one more)
	let bonesPicked = 0;
	const bones = 10;
	const max = bones + 1;
	const pickBone = () => {
	bonesPicked += 1;
	// if all bones have been picked, alter the button's text
	if (bonesPicked === 10) {
	button.textContent = 'picked!';
	}
	// if the maximum number of clicks has been registered, remove the event listener
	// alter the button's text once more
	if (bonesPicked === max) {
	button.textContent = 'happy halloween';
	button.removeEventListener('click', pickBone);
	} else {
	// while there are still bones to be picked, create a span element
	// included it as the first child element of the skeleton container
	const pickedBone = document.createElement('span');
	skeleton.prepend(pickedBone);
	}
	};
	// register the click event and fire the function when pressing the button
	button.addEventListener('click', pickBone);

view raw script.js hosted with ❤ by GitHub

	/* import font(s) */
	@import url("https://fonts.googleapis.com/css?family=Creepster");
	/* detail root variables */
	:root {
	--font: "Creepster", cursive;
	--color-bg: #1d1e22;
	--color-bone: #fffefd;
	--color-text: var(--color-bone);
	--rotation: 0deg;
	}
	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
	body {
	min-height: 100vh;
	width: 100%;
	font-family: var(--font);
	color: var(--color-text);
	background-color: var(--color-bg);
	/* display the button and skeleton one on top of the other */
	display: flex;
	flex-direction: column;
	/* horizontally centered */
	align-items: center;
	padding: 1rem 0 0;
	}
	/*
	style the button as a ghost button,
	swapping its background and color on hover,
	increasing its size when active
	*/
	button {
	font-family: inherit;
	font-size: 2.5rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	border: 2px solid var(--color-bone);
	border-radius: 5px;
	background: none;
	color: var(--color-bone);
	padding: 0.5rem 1rem;
	/* transition for the hover and active states */
	transition: all 0.2s ease-out;
	}
	button:hover {
	background: var(--color-bone);
	color: initial;
	}
	button:active {
	transform: scale(1.1);
	}
	/* separate the skeleton from the preceding button */
	.skeleton {
	margin-top: 10vh;
	position: relative;
	height: 50vh;
	max-height: 500px;
	min-height: 350px;
	width: 50vw;
	max-width: 250px;
	min-width: 205px;
	}
	/* absolute position the different bones in the container, to make up a skeleton */
	.skeleton div {
	position: absolute;
	background: var(--color-bone);
	}
	/*
	target each div through the `nth-child()` pseudo selector
	by later including paragraph elements **before** the div elements, each bone is made "disappearing"
	*/
	/* skeleton's head */
	.skeleton div:nth-child(1) {
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	height: 40%;
	width: 60%;
	border-radius: 50% 50% 10% 10%;
	}
	/* skeleton's eyes */
	.skeleton div:nth-child(1):before,
	.skeleton div:nth-child(1):after {
	position: absolute;
	content: "";
	background: var(--color-bg);
	width: 20%;
	height: 20%;
	border-radius: 50%;
	top: 40%;
	}
	.skeleton div:nth-child(1):before {
	left: 10%;
	}
	.skeleton div:nth-child(1):after {
	right: 10%;
	}
	/* skeleton's neck */
	.skeleton div:nth-child(2) {
	top: 41%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 10%;
	height: 5%;
	}
	/* skeleton's chest */
	.skeleton div:nth-child(3) {
	top: 47%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 60%;
	height: 7%;
	border-radius: 10px;
	}
	.skeleton div:nth-child(4) {
	top: 55%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 65%;
	height: 7%;
	border-radius: 10px;
	}
	.skeleton div:nth-child(5) {
	top: 63%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 10%;
	height: 10%;
	}
	.skeleton div:nth-child(6) {
	top: 74%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 40%;
	height: 10%;
	border-radius: 10px;
	}
	/* skeleton's arms */
	.skeleton div:nth-child(7) {
	top: 50%;
	left: 5%;
	transform: rotate(5deg);
	width: 8%;
	height: 22%;
	border-radius: 10px;
	}
	.skeleton div:nth-child(8) {
	top: 50%;
	right: 5%;
	transform: rotate(-5deg);
	width: 8%;
	height: 22%;
	border-radius: 10px;
	}
	/* skeleton's legs */
	.skeleton div:nth-child(9) {
	top: 86%;
	left: 30%;
	transform: rotate(4deg);
	width: 10%;
	height: 15%;
	border-radius: 10px;
	}
	.skeleton div:nth-child(10) {
	top: 86%;
	right: 30%;
	transform: rotate(-4deg);
	width: 10%;
	height: 15%;
	border-radius: 10px;
	}
	/* style the span elements (included before the div elements) to draw up simple icons for bones */
	.skeleton span {
	display: inline-block;
	background: var(--color-bone);
	width: 10px;
	height: 40px;
	display: inline-block;
	margin: 10px;
	position: relative;
	}
	/* through pseudo element make up both extremities of each bone */
	.skeleton span:before,
	.skeleton span:after {
	position: absolute;
	content: "";
	transform: translate(-50%, -50%);
	background: radial-gradient(circle at 7px 10px, #fff 7px, transparent 7px),
	radial-gradient(circle at 18px 10px, #fff 7px, transparent 7px);
	width: 25px;
	height: 20px;
	left: 50%;
	}
	.skeleton span:before {
	top: 0;
	}
	.skeleton span:after {
	top: 100%;
	}

view raw style.css hosted with ❤ by GitHub

Git Clone this link:- https://gist.github.com/651db900979827b14e12bdb27c9fef69.git

GitHub Direct link:- https://gist.github.com/ashishkhuraishy/651db900979827b14e12bdb27c9fef69

Please provide your feedback

---