freeCodeCamp-Build a Wikipedia Viewer

freecodecamp-build-a-wikipedia-viewer.markdown

freeCodeCamp-Build a Wikipedia Viewer

A Pen by GILLES Annthomy on CodePen.

License.

index.html

	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="page-header text-center">
					<i class="fa fa-wikipedia-w fa-5x fa-inverse" aria-hidden="true"></i>
				</div>
				<form>
					<input type="text" id="searchTerm" autocomplete="off" />
					<div class="after"></div>
					<input type="submit" />
				</form>
				<h4>&nbsp;</h4>
				<p>Click search, Enter to submit</p>
				<div class="list-group message">
				</div>
			</div>
		</div>
	</div>
	<footer class="footer">
		<div class="container text-center">
			<span class="text-muted">By Annthomy GILLES</span>
		</div>
	</footer>

script.js

$(document).ready(function () {
	var s = $('input'),
		f = $('form'),
		a = $('.after'),
		m = $('ul');

	s.focus(function () {
		if (f.hasClass('open')) return;
		f.toggleClass('in');
		setTimeout(function () {
			f.toggleClass('open');
			f.removeClass('in');
		}, 1300);
	});

	a.on('click', function (e) {
		e.preventDefault();
		if (!f.hasClass('open')) return;
		s.val('');
		f.toggleClass('close'); // j'ai changé les addClass en toggleClass
		f.removeClass('open');
		setTimeout(function () {
			f.removeClass('close');
		}, 1300);
	});

	f.submit(function (e) {
		e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire
		e.stopImmediatePropagation();
		var search = $("#searchTerm").val();
		var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + search + "&limit=10&format=json&callback=?";
		if (search === '') {
			f.addClass('explode');
			setTimeout(function () {
				s.val('');
				f.removeClass('explode');
				m.removeClass('show');
			}, 400);
		} else {
			$.ajax({
				type: "GET",
				url: url,
				contentType: "application/json;charset=utf-8",
				async: true,
				dataType: "jsonp",
				success: function (data) {
					$('.list-group').empty(); // Vide la liste, au cas où il y aurait eu de précédentes requêtes.
					var title = data[1];
					var definition = data[2];
					var link = data[3];
					for (var i = 0; i < title.length; i++) {
						$(".list-group").append(
							"<a href=\"" + link[i] + "\" target=\"_blank\" class=\"list-group-item\"><h1 class=\"text-primary\">" + title[i] + "</h1><p class=\"text-muted\">" + definition[i] + "</p></a>");
					}
				}
			});
		}
	});
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

style.css

body {
	background-color: #001f3f;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
}

p {
	text-align: center;
	color: #fff;
	font-size: 14px;
}

.vcenter {
	display: inline-block;
	vertical-align: middle;
	float: none;
}

h4 {
	color: #fff;
	text-align: center;
	letter-spacing: 0.5px;
	transform: scale(0);
	transition: all 0.3s;
	position: relative;
	top: -25px;
	margin: 0;
	font-weight: normal;
}

h4.show {
	animation: alert 0.18s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes alert {
	0% {
		transform: scale(0);
	}
	80% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

form {
	transition: all 0.15s;
}

form.explode {
	transform: scale(1.4);
	opacity: 0;
}

html {
	padding-top: 100px;
}

form {
	width: 36px;
	height: 36px;
	margin: 0 auto;
	display: block;
	box-sizing: border-box;
	position: relative;
}

input[type="submit"] {
	display: none !important;
}

input {
	width: 100%;
}

input {
	background: none;
	border: 3px solid #fff;
	border-radius: 26px;
	box-sizing: border-box;
	padding: 5px 15px 7px;
	font-size: 14px;
	color: #fff;
	z-index: 2;
	position: relative;
}

input:focus {
	outline: none;
}

.after {
	width: 36px;
	height: 36px;
	position: absolute;
	top: 1px;
	right: 0;
	z-index: 1;
}

form.open .after {
	cursor: pointer;
}

.after:before,
.after:after {
	content: '';
	width: 13px;
	height: 3px;
	background-color: #fff;
	border-radius: 3px;
	position: absolute;
	transform-origin: 100% 100%;
}

.after:after {
	bottom: -3px;
	right: -3px;
	transform: rotate(45deg);
}

.after:before {
	top: -3px;
	right: -3px;
	transform: rotate(-45deg);
	opacity: 0;
}

form,
form .after,
form .after:before,
form .after:after {
	animation-duration: 1.1s;
	animation-fill-mode: forwards;
}

form.in {
	animation-name: expand;
}

form.in .after:before {
	animation-name: beforemagic;
}

form.in .after:after {
	animation-name: aftermagic;
}

form.close,
form.close .after,
form.close .after:before,
form.close .after:after {
	animation-direction: reverse;
}

form.close {
	animation-name: expand;
}

form.close .after:before {
	animation-name: beforemagic;
}

form.close .after:after {
	animation-name: aftermagic;
}


/* Hold final focused state
 ****************************/

form.open {
	width: 250px;
	color: #fff;
}

form.open .after {
	z-index: 3;
}

form.open .after:before {
	width: 20px;
	top: 9px;
	right: 13px;
	opacity: 1;
}

form.open .after:after {
	width: 20px;
	bottom: 10px;
	right: 15px;
}

@keyframes aftermagic {
	0% {}
	10% {
		width: 24px;
		bottom: -10px;
		right: -10px;
	}
	15% {
		opacity: 1;
	}
	35% {
		width: 13px;
		bottom: -3px;
		right: -3px;
		opacity: 0;
	}
	25% {
		opacity: 0;
	}
	64% {
		opacity: 0;
	}
	65% {
		opacity: 1;
		width: 13px;
		bottom: -2px;
		right: -3px;
	}
	75% {
		width: 30px;
		bottom: 4px;
		right: 10px;
	}
	90% {
		width: 20px;
		bottom: 10px;
		right: 15px;
	}
	100% {
		width: 20px;
		bottom: 10px;
		right: 15px;
	}
}

@keyframes beforemagic {
	0% {}
	50% {
		opacity: 0;
	}
	55% {
		opacity: 1;
		width: 13px;
		top: -4px;
		right: -3px;
	}
	65% {
		width: 30px;
		top: 6px;
		right: 10px;
	}
	80% {
		width: 20px;
		top: 9px;
		right: 13px;
	}
	100% {
		width: 20px;
		top: 9px;
		right: 13px;
		opacity: 1;
	}
}

@keyframes expand {
	0% {
		color: transparent;
	}
	20% {
		width: 36px;
	}
	45% {
		width: 250px;
	}
	99% {
		color: transparent;
	}
	100% {
		width: 250px;
		color: #fff;
	}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />