A Pen by aleen42

Developer
Aleen42
Size
11,473 Kb
Views
14,168
  1. A Pen by aleen42 Previews
  2. A Pen by aleen42 HTML Codes
  3. A Pen by aleen42 CSS Codes
  4. A Pen by aleen42 JS Codes

How do I make an a pen by aleen42?

What is a a pen by aleen42? How do you make a a pen by aleen42? This script and codes were developed by Aleen42 on 17 October 2022, Monday.

A Pen by aleen42 Previews
IQ Test

A Pen by aleen42 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by aleen42</title> <link rel='stylesheet prefetch' href='https://rawgit.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://rawgit.com/aleen42/PersonalWiki/master/Programming/JavaScript/Framework/react/slider/slider.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://rawgit.com/aleen42/PersonalWiki/master/Programming/JavaScript/Framework/dynamics/dynamics.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by aleen42 - Script Codes CSS Codes

body {	background-color: #a10000;	font-family: Arial;
}
.content {	width: 100%;
}
.data__preview {	text-align: center;	height: 200px;	line-height: 200px;
}
ul {	list-style: none;
}
.content__item .description {	margin: 20px auto 0 auto;	text-align: left;	line-height: 1.4em;
}
/** algorithms */
.data__item {	display: inline-block;	width: 30px;	height: 30px;	line-height: 30px;	text-align: center;	border: solid #000 1px;	margin: 0 10px;	border-radius: 4px;	font-weight: bold;
}
.button__area {	position: absolute;	right: 10px;
}
.button {	text-align: center;	width: 100px;	height: 30px;	border-radius: 5px;	border: solid #000 1px;	line-height: 30px;	display: inline-block;	margin: 0 5px;	cursor: pointer;	user-select: none;	-webkit-user-select: none;	-moz-user-selec: none;	-ms-user-select: none;	-o-user-select: none;
}
.button--disabled {	border: solid rgba(0, 0, 0, 0.2) 1px;	color: rgba(0, 0, 0, 0.2);	cursor: auto;
}
.item__transition {	-webkit-transition: all 0.2s;	-o-transition: all 0.2s;	transition: all 0.2s;
}
.item--fixed {	background-color: #333;
}
.info__area .info__title {	padding-left: 5px;	border-left: solid 2px #000;
}
.info__area .sort__types {	width: 100%;	height: 268px;
}

A Pen by aleen42 - Script Codes JS Codes

'use strict';
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
HTMLElement.prototype.hasClassName = function (name) {	return new RegExp('(\\s|^)' + name + '(\\s|$)').test(this.className);
};
HTMLElement.prototype.addClass = function (name) {	if (!this.hasClassName(name)) {	this.className += ' ' + name;	}
};
HTMLElement.prototype.removeClass = function (name) {	if (this.hasClassName(name)) {	var reg = new RegExp('(\\s|^)' + name + '(\\s|$)');	this.className = this.className.replace(reg, ' ').trim();	}
};
HTMLElement.prototype.toggleClass = function (name) {	if (this.hasClassName(name)) {	this.removeClass(name);	} else {	this.addClass(name);	}
};
HTMLElement.prototype.findChildrenByClassName = function (className) {	var result = [];	var childNodes = this.childNodes;	var childNodeLen = childNodes.length;	for (var i = 0; i < childNodeLen; i++) {	if (childNodes[i].className === className) {	result.push(childNodes[i]);	}	}	return result;
};
var Slider = function (_React$Component) {	_inherits(Slider, _React$Component);	function Slider(props) {	_classCallCheck(this, Slider);	var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));	_this.state = {	curIndex: _this.props.curIndex	};	_this.handleKeyup = _this.handleKeyup.bind(_this);	_this.navigate = _this.navigate.bind(_this);	_this.dir = '';	return _this;	}	Slider.prototype.handleKeyup = function handleKeyup(ev) {	var keyCode = ev.keyCode || ev.which;	switch (keyCode) {	case 37:	this.navigate('left');	break;	case 39:	this.navigate('right');	break;	}	};	Slider.prototype.componentDidMount = function componentDidMount() {	document.addEventListener('keyup', this.handleKeyup);	};	Slider.prototype.componentWillUnmount = function componentWillUnmount() {	document.removeEventListener('keyup', this.handleKeyup);	};	Slider.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {	return this.state.curIndex !== nextState.curIndex;	};	Slider.prototype.componentDidUpdate = function componentDidUpdate() {	var nextItem = this.refs['item__' + this.state.curIndex];	var nextTitle = nextItem.findChildrenByClassName('title')[0];	var nextDescription = nextItem.findChildrenByClassName('description')[0];	/** set the right properties for the next element to come in */	dynamics.css(nextItem, { opacity: 1, visibility: 'visible' });	dynamics.css(nextTitle, {	opacity: 0,	translateX: this.dir === 'right' ? nextTitle.offsetWidth / 2 : -1 * nextTitle.offsetWidth / 2,	rotateZ: this.dir === 'right' ? 10 : -10	});	/** animate the next title in */	dynamics.animate(nextTitle, { opacity: 1, translateX: 0 }, {	type: dynamics.spring,	duration: 2000,	friction: 600,	complete: function complete() {}	});	/** set the right properties for the next description to come in */	dynamics.css(nextDescription, {	translateX: this.dir === 'right' ? 250 : -250,	opacity: 0	});	/** animate the next description in */	dynamics.animate(nextDescription, { translateX: 0, opacity: 1 }, {	type: dynamics.bezier,	points: [{ "x": 0, "y": 0, "cp": [{ "x": 0.2, "y": 1 }] }, { "x": 1, "y": 1, "cp": [{ "x": 0.3, "y": 1 }] }],	duration: 650	});	};	Slider.prototype.navigate = function navigate(dir) {	this.dir = dir;	var total = this.props.items.length;	var current = this.state.curIndex;	var curItem = this.refs['item__' + current];	var curTitle = curItem.findChildrenByClassName('title')[0];	var curDescription = curItem.findChildrenByClassName('description')[0];	var next = this.dir === 'right' ? (current + 1) % total : current - 1 < 0 ? (current + total - 1) % total : current - 1;	/** animate the current title out */	dynamics.animate(curTitle, {	opacity: 0,	translateX: this.dir === 'right' ? -1 * curTitle.offsetWidth / 2 : curTitle.offsetWidth / 2,	rotateZ: this.dir === 'right' ? -10 : 10	}, {	type: dynamics.spring,	duration: 2000,	friction: 600,	complete: function complete() {	dynamics.css(curItem, {	opacity: 0,	visibility: 'hidden'	});	}	});	/** animate the current description out */	dynamics.animate(curDescription, {	translateX: this.dir === 'right' ? -250 : 250,	opacity: 0	}, {	type: dynamics.bezier,	points: [{ "x": 0, "y": 0, "cp": [{ "x": 0.2, "y": 1 }] }, { "x": 1, "y": 1, "cp": [{ "x": 0.3, "y": 1 }] }],	duration: 450	});	setTimeout(function () {	this.setState({	curIndex: next	});	}.bind(this), 200);	};	Slider.prototype.render = function render() {	var _this2 = this;	var items = [];	this.props.items.forEach(function (ele, index) {	items.push(React.createElement(	'li',	{ key: index, ref: 'item__' + index, className: 'content__item' + (index == _this2.state.curIndex ? ' content__item--current' : '') },	React.createElement('div', { className: 'title', dangerouslySetInnerHTML: { __html: ele.title } }),	React.createElement('div', { className: 'description', dangerouslySetInnerHTML: { __html: ele.description } })	));	});	return React.createElement(	'div',	{ className: 'slider__container' },	React.createElement(	'ul',	{ className: 'slider__contents' },	items,	React.createElement('li', { className: 'slider__button slider__button--left fa fa-angle-left', onClick: function () {	this.navigate('left');	}.bind(this) }),	React.createElement('li', { className: 'slider__button slider__button--right fa fa-angle-right', onClick: function () {	this.navigate('right');	}.bind(this) })	)	);	};	return Slider;
}(React.Component);
Slider.defaultProps = {	items: [{	title: 'item1',	description: 'the item 1 of the slider'	}, {	title: 'item2',	description: 'the item 2 of the slider'	}, {	title: 'item3',	description: 'the item 3 of the slider'	}],	curIndex: 0
};
Slider.propTypes = {	items: React.PropTypes.arrayOf(React.PropTypes.objectOf({	title: React.PropTypes.string,	description: React.PropTypes.string	})),	curIndex: React.PropTypes.number
};
var Sort = function (_React$Component2) {	_inherits(Sort, _React$Component2);	function Sort(props) {	_classCallCheck(this, Sort);	var _this3 = _possibleConstructorReturn(this, _React$Component2.call(this, props));	_this3.state = {	data: _this3.props.data	};	_this3.animationList = [];	_this3.isRunning = false;	/** interfaces */	_this3.swapInterface = _this3.swapInterface.bind(_this3);	_this3.insertInterface = _this3.insertInterface.bind(_this3);	_this3.callback = _this3.callback.bind(_this3);	return _this3;	}	Sort.prototype.componentDidUpdate = function componentDidUpdate() {	/** clear transform */	var len = this.props.data.length;	for (var i = 0; i < len; i++) {	var target = this.refs['item__' + i];	var targetStyle = target.style;	target.toggleClass('item__transition');	targetStyle.transform = 'none';	targetStyle.WebkitTransform = 'none';	setTimeout(function (t) {	return function () {	t.toggleClass('item__transition');	};	}(target), 400);	}	};	Sort.prototype.swapInterface = function swapInterface(arr, replaced, replacement) {	this.animationList.push({	arr: arr,	replaced: replaced,	replacement: replacement,	type: 'swap'	});	};	Sort.prototype.markPosInterface = function markPosInterface(index) {	this.animationList.push({	index: index,	type: 'markPos'	});	};	Sort.prototype.insertInterface = function insertInterface(arr, from, to) {	this.animationList.push({	arr: arr,	from: from,	to: to,	type: 'insert'	});	};	Sort.prototype.callback = function callback() {	var index = 0;	var recursivePreview = function (i) {	var animationList = this.animationList;	if (i >= animationList.length) {	this.isRunning = false;	this.refs['reset__button'].toggleClass('button--disabled');	this.refs['run__button'].toggleClass('button--disabled');	return;	}	/** animation */	var nextStep = i + 1;	var dur = 300;	var data = animationList[i].arr;	switch (animationList[i].type) {	case 'swap':	var replacedIndex = animationList[i].replaced;	var replacementIndex = animationList[i].replacement;	var replacedMoveX = 52 * -(replacedIndex - replacementIndex);	var replacementMoveX = 52 * (replacedIndex - replacementIndex);	var replacedEle = this.refs['item__' + animationList[i].replaced];	var replacementEle = this.refs['item__' + animationList[i].replacement];	var replacedStyle = replacedEle.style;	var replacementStyle = replacementEle.style;	/** move up */	replacementStyle.transform = 'translate(0, -50px)';	replacementStyle.WebkitTransform = 'translate(0, -50px)';	if (Math.abs(replacedIndex - replacementIndex) > 1) {	replacedStyle.transform = 'translate(0, 50px)';	replacedStyle.WebkitTransform = 'translate(0, 50px)';	}	/** move */	setTimeout(function () {	replacementStyle.transform = 'translate(' + replacementMoveX + 'px, -50px)';	replacementStyle.WebkitTransform = 'translate(' + replacementMoveX + 'px, -50px)';	if (Math.abs(replacedIndex - replacementIndex) > 1) {	replacedStyle.transform = 'translate(' + replacedMoveX + 'px, 50px)';	replacedStyle.WebkitTransform = 'translate(' + replacedMoveX + 'px, 50px)';	}	setTimeout(function () {	/** move down */	replacementStyle.transform = 'translate(' + replacementMoveX + 'px, 0)';	replacementStyle.WebkitTransform = 'translate(' + replacementMoveX + 'px, 0)';	replacedStyle.transform = 'translate(' + replacedMoveX + 'px, 0)';	replacedStyle.WebkitTransform = 'translate(' + replacedMoveX + 'px, 0)';	setTimeout(function () {	this.setState({	data: data	});	setTimeout(function () {	recursivePreview(nextStep);	}, 400);	}.bind(this), dur);	}.bind(this), dur);	}.bind(this), dur);	break;	case 'insert':	var fromIndex = animationList[i].from;	var toIndex = animationList[i].to;	var fromMoveX = 52 * (toIndex - fromIndex);	var toMoveX = 52 * (toIndex - fromIndex < 0 ? 1 : -1);	var fromEle = this.refs['item__' + animationList[i].from];	var toEle = this.refs['item__' + animationList[i].to];	var fromStyle = fromEle.style;	var toStyle = toEle.style;	var start = toIndex > fromIndex ? fromIndex + 1 : toIndex;	var end = toIndex > fromIndex ? toIndex : fromIndex - 1;	/** move up */	fromStyle.transform = 'translate(0, -50px)';	fromStyle.WebkitTransform = 'translate(0, -50px)';	/** move */	setTimeout(function () {	fromStyle.transform = 'translate(' + fromMoveX + 'px, -50px)';	fromStyle.WebkitTransform = 'translate(' + fromMoveX + 'px, -50px)';	setTimeout(function () {	/** move down */	fromStyle.transform = 'translate(' + fromMoveX + 'px, 0)';	fromStyle.WebkitTransform = 'translate(' + fromMoveX + 'px, 0)';	for (var i = start; i <= end; i++) {	this.refs['item__' + i].style.transform = 'translate(' + toMoveX + 'px, 0)';	this.refs['item__' + i].style.WebkitTransform = 'translate(' + toMoveX + 'px, 0)';	}	setTimeout(function () {	this.setState({	data: data	});	setTimeout(function () {	recursivePreview(nextStep);	}, 400);	}.bind(this), dur);	}.bind(this), dur);	}.bind(this), dur);	break;	case 'markPos':	this.refs['item__' + animationList[i].index].addClass('item--fixed');	setTimeout(function () {	recursivePreview(nextStep);	}.bind(this), dur);	break;	default:	break;	}	}.bind(this);	recursivePreview(index);	};	Sort.prototype.render = function render() {	var _this4 = this;	var items = [];	this.state.data.forEach(function (ele, index) {	items.push(React.createElement(	'li',	{ className: 'item__transition data__item', key: index, ref: 'item__' + index, style: {	transform: 'none',	WebkitTransform: 'none'	} },	ele	));	});	var sortIndex = 0;	var sortTypesItems = [];	this.props.sortTypes.forEach(function (ele, index) {	if (ele.title === _this4.props.sortType) {	sortIndex = index;	}	sortTypesItems.push({	title: ele.title,	description: ele.description	});	});	return React.createElement(	'div',	null,	React.createElement(	'div',	{ className: 'info__area' },	React.createElement(	'div',	{ className: 'info__title' },	'Sorting Algorithms'	),	React.createElement(	'div',	{ className: 'sort__types' },	React.createElement(Slider, { ref: 'slider', items: sortTypesItems, curIndex: sortIndex })	)	),	React.createElement(	'div',	{ className: 'data__preview' },	React.createElement(	'ul',	null,	items	)	),	React.createElement(	'div',	{ className: 'button__area' },	React.createElement(	'div',	{ className: 'button', ref: 'reset__button', onClick: function () {	if (this.isRunning) {	return;	}	var len = this.props.data.length;	for (var i = 0; i < len; i++) {	this.refs['item__' + i].removeClass('item--fixed');	}	this.setState({	data: this.props.data	});	}.bind(this) },	'Reset'	),	React.createElement(	'div',	{ className: 'button', ref: 'run__button', onClick: function () {	if (this.isRunning) {	return;	}	this.isRunning = true;	this.refs['reset__button'].toggleClass('button--disabled');	this.refs['run__button'].toggleClass('button--disabled');	/** clear the swapping list */	this.animationList = [];	this.props.sortMethods[this.props.sortTypes[this.refs['slider'].state.curIndex].title].call(this, [].concat(this.state.data));	}.bind(this) },	'Run'	)	)	);	};	return Sort;
}(React.Component);
Sort.defaultProps = {	data: [2, 8, 7, 1, 3, 5, 6, 4],	sortMethods: {	bubble: function bubble(arr) {	var arrLen = arr.length;	for (var i = 0; i < arrLen; i++) {	for (var j = 0; j < arrLen - i; j++) {	if (arr[j] > arr[j + 1]) {	var tmp = arr[j];	arr[j] = arr[j + 1];	arr[j + 1] = tmp;	if (Object.prototype.toString.call(this.swapInterface).toLowerCase() === '[object function]') {	this.swapInterface([].concat(arr), j + 1, j);	}	}	}	/** fixed the item */	if (Object.prototype.toString.call(this.markPosInterface).toLowerCase() === '[object function]') {	this.markPosInterface(arrLen - i - 1);	}	}	if (Object.prototype.toString.call(this.callback).toLowerCase() === '[object function]') {	/** callback for previewing when finished */	this.callback();	}	},	quick: function quick(arr) {	var partition = function (arr, p, q) {	var pivot = arr[q];	var m = p;	var n = m - 1;	for (var i = p; i < q; i++) {	if (arr[i] < pivot) {	n++;	if (i !== n) {	var tmp = arr[i];	arr[i] = arr[n];	arr[n] = tmp;	if (Object.prototype.toString.call(this.swapInterface).toLowerCase() === '[object function]') {	this.swapInterface([].concat(arr), i, n);	}	}	}	}	if (n + 1 !== q) {	var tmp = arr[n + 1];	arr[n + 1] = arr[q];	arr[q] = tmp;	if (Object.prototype.toString.call(this.swapInterface).toLowerCase() === '[object function]') {	this.swapInterface([].concat(arr), n + 1, q);	}	/** fixed the item */	if (Object.prototype.toString.call(this.markPosInterface).toLowerCase() === '[object function]') {	this.markPosInterface(n + 1);	}	}	return n + 1;	}.bind(this);	var quickSort = function quickSort(arr, p, q) {	if (p < q) {	var m = partition(arr, p, q);	quickSort(arr, p, m - 1);	quickSort(arr, m + 1, q);	return;	}	};	quickSort(arr, 0, arr.length - 1);	if (Object.prototype.toString.call(this.callback).toLowerCase() === '[object function]') {	/** callback for previewing when finished */	this.callback();	}	},	insert: function insert(arr) {	var arrLen = arr.length;	for (var i = 0; i < arrLen; i++) {	for (var j = 0; j < i;) {	if (arr[i] > arr[j]) {	j++;	} else {	break;	}	}	if (i !== j) {	/** insert */	arr.splice(j, 0, arr[i]);	/** remove te original one */	arr.splice(i + 1, 1);	if (Object.prototype.toString.call(this.insertInterface).toLowerCase() === '[object function]') {	/** callback for previewing when finished */	this.insertInterface([].concat(arr), i, j);	}	}	}	for (var i = 0; i < arrLen; i++) {	/** fixed the item */	if (Object.prototype.toString.call(this.markPosInterface).toLowerCase() === '[object function]') {	this.markPosInterface(i);	}	}	if (Object.prototype.toString.call(this.callback).toLowerCase() === '[object function]') {	/** callback for previewing when finished */	this.callback();	}	},	heap: function heap(arr) {	var arrLen = arr.length;	for (var i = 0; i < arrLen; i++) {	/** build the min heap and extract the minimal item */	for (var j = Math.floor((arrLen - i) / 2) - 1; j >= 0; j--) {	/** loop for each root node */	if (_typeof(arr[2 * j + 1 + i]) !== undefined && arr[j + i] > arr[2 * j + 1 + i]) {	var tmp = arr[j + i];	arr[j + i] = arr[2 * j + 1 + i];	arr[2 * j + 1 + i] = tmp;	if (Object.prototype.toString.call(this.swapInterface).toLowerCase() === '[object function]') {	this.swapInterface([].concat(arr), j + i, 2 * j + 1 + i);	}	}	if (_typeof(arr[2 * j + 2 + i]) !== undefined && arr[j + i] > arr[2 * j + 2 + i]) {	var tmp = arr[j + i];	arr[j + i] = arr[2 * j + 2 + i];	arr[2 * j + 2 + i] = tmp;	if (Object.prototype.toString.call(this.swapInterface).toLowerCase() === '[object function]') {	this.swapInterface([].concat(arr), j + i, 2 * j + 2 + i);	}	}	}	/** fixed the item */	if (Object.prototype.toString.call(this.markPosInterface).toLowerCase() === '[object function]') {	this.markPosInterface(i);	}	}	if (Object.prototype.toString.call(this.callback).toLowerCase() === '[object function]') {	this.callback();	}	}	},	sortType: 'quick',	sortTypes: [{	title: 'bubble',	description: 'The maximal item will be bubbled to the last position each time.'	}, {	title: 'quick',	description: 'Select a pivot each time, and find out items which is less than or greater than the pivor. As you can see in the following case, the <strong>pivot</strong> will be marked with gray background each time, and notice that, once the pivot is marked, it has already worked out two types of items, less ones and greater ones.'	}, {	title: 'insert',	description: 'Find and isnert the item into a proper position each time. As you can see in the following case, it will loop from the start of the array to the end. In each loop, it will take a item and compare it with preceding items. After finishing the process, the item will be inserted into them.'	}, {	title: 'heap',	description: 'Heap is an abstract concept for organizing data in an array. Heap Sorting will generate a minimal heap each time, as followed case shown. After generated, the first item of the array should be the minimal one, which will be marked with gray background.'	}]
};
Sort.propTypes = {	data: React.PropTypes.array,	sortMethods: React.PropTypes.object,	sortType: React.PropTypes.string,	sortTypes: React.PropTypes.arrayOf(React.PropTypes.string)
};
ReactDOM.render(React.createElement(Sort, null), document.querySelector('.content'));
A Pen by aleen42 - Script Codes
A Pen by aleen42 - Script Codes
Home Page Home
Developer Aleen42
Username aleen42
Uploaded October 17, 2022
Rating 3
Size 11,473 Kb
Views 14,168
Do you need developer help for A Pen by aleen42?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aleen42 (aleen42) Script Codes
Name
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!