tzi/convert.js

## readme.md

      
    Raw
  

              readme.md
            
          
    Grâce à bl.ocks.org, vous pouvez facilement essayer ce gist
Ceci est un convertisseur d'unité en terrains de tennis.

  
## convert.js
(function(){
	var current_question = 1;
	var questions = document.getElementById( 'questions' );
	var question1 = document.getElementById( 'question1' );
	var question2 = document.getElementById( 'question2' );
	var answer = document.getElementById( 'answer' );
	document.converter.onsubmit = function(){
		if ( current_question == 1 ) {
			var origin = document.converter.value.value;
			if ( document.converter.unit.value == 'm' ) {
				origin += 'm';
				var target = Math.round( ( document.converter.value.value / 23.77 ) * 100 ) / 100;
			} else {
				origin += 'm²';
				var target = Math.round( ( document.converter.value.value / ( 23.77 * 8.23 ) ) * 100 ) / 100;
			}
			answer.innerHTML = '<strong>' + origin + '</strong> correspondent à <strong>' + target + '</strong> terrains de tennis';
		} else {
			var origin = document.converter.reverse_value.value;
			if ( document.converter.reverse_unit.value == 'm' ) {
				var target = Math.round( ( document.converter.reverse_value.value * 23.77 ) * 100 ) / 100;
				target += 'm';
			} else {
				var target = Math.round( ( document.converter.reverse_value.value * ( 23.77 * 8.23 ) ) * 100 ) / 100;
				target += 'm²';
			}
			answer.innerHTML = '<strong>' + origin + '</strong> terrains de tennis correspondent à <strong>' + target + '</strong>';
		}
		questions.style.display = 'none';
		answer.style.display = 'block';
		document.getElementById('convert_button').style.display = 'none';
		document.getElementById('invert').style.display = 'none';
		document.getElementById('another').style.display = 'inline-block';
		return false;
	}
	document.getElementById('convert_button').onclick = function(){
		document.converter.onsubmit();
		return false;
	}
	document.getElementById('another').onclick = function(){
		answer.style.display = 'none';
		questions.style.display = 'block';
		document.getElementById('another').style.display = 'none';
		document.getElementById('convert_button').style.display = 'inline-block';
		document.getElementById('invert').style.display = 'inline-block';
		return false;
	}
	document.getElementById('invert').onclick = function(){
		if ( current_question == 1 ) {
			question1.style.display = 'none';
			question2.style.display = 'block';
		} else {
			question2.style.display = 'none';
			question1.style.display = 'block';
		}
		current_question = ( current_question + 1 ) % 2;
		return false;
	}
})();

## converter.css
body {
	max-width: 560px;
	margin: 0 auto;
	color: #393939;
	background-color: #F7F8FD;
}
#question2,
#answer {
	display: none;
}
h1 {
	display: block;
	padding: 1em 0.5em 2em;
	margin-bottom: 1em;
	text-align: center;
	border-bottom: 1px solid black;
}
strong {
	color: #A68237;
}
body,
h1,
input,
select {
	font-size: 18px;
}
.actions {
	background-color: #A5B7EA;
	padding: 0.5em;
	border-bottom: 1px solid black;
}
.actions a {
	display: inline-block;
	color: #A68237;
	font-size: 36px;
	width: 50px;
	text-align: center;
	border-radius: 2px;
	background-color: #B4C6F7;
}
.actions a,
.actions a:hover,
.actions a:focus,
.actions a:active {
	text-decoration: none;
}
.actions a:hover,
.actions a:focus,
.actions a:active {
	background-color: #C4D3FF;
}
#another {
	display: none;
}
#invert {
	float: right;
}
.footer {
	text-align: center;
	font-size: 12px;
}

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ca fait combien en terrain de tennis ? Le convertisseur utile</title>
		<meta content="width=device-width, initial-scale=1.0" name="viewport">
		<link href="converter.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<form name="converter">
			<div class="actions">
				<a href="javascript:;" id="convert_button" title="Convertir">&#10004;</a>
				<a href="javascript:;" id="invert" alt="Inverser">&#8644;</a>
				<a href="javascript:;" id="another" alt="Recommencer">&#8630;</a>
			</div>
			<div id="questions">
				<h1 id="question1">
					Combien font
					<input type="text" name="value" size="5" value="50" />
					<select name="unit">
						<option value="m">m</option>
						<option value="m2">m²</option>
					</select>
					en terrains de tennis ?
				</h1>
				<h1 id="question2">
					C'est quoi
					<select name="reverse_unit">
						<option value="m">la longueur</option>
						<option value="m2">l'aire</option>
					</select>
					de <input type="text" name="reverse_value" size="5" value="3" />
					terrains de tennis ?
				</h1>
			</div>
		</form>
		<h1 id="answer"></h1>
		<script type="text/javascript" src="convert.js"></script>
		<div class="footer">
			Si vous vous posiez la question, ce convertisseur ne sert à rien.<br>
			Il a été réalisé par <a href="http://zilliox.me">Thomas</a>.
		</div>
	<body>
</html>
	(function(){
	var current_question = 1;
	var questions = document.getElementById( 'questions' );
	var question1 = document.getElementById( 'question1' );
	var question2 = document.getElementById( 'question2' );
	var answer = document.getElementById( 'answer' );
	document.converter.onsubmit = function(){
	if ( current_question == 1 ) {
	var origin = document.converter.value.value;
	if ( document.converter.unit.value == 'm' ) {
	origin += 'm';
	var target = Math.round( ( document.converter.value.value / 23.77 ) * 100 ) / 100;
	} else {
	origin += 'm²';
	var target = Math.round( ( document.converter.value.value / ( 23.77 * 8.23 ) ) * 100 ) / 100;
	}
	answer.innerHTML = '<strong>' + origin + '</strong> correspondent à <strong>' + target + '</strong> terrains de tennis';
	} else {
	var origin = document.converter.reverse_value.value;
	if ( document.converter.reverse_unit.value == 'm' ) {
	var target = Math.round( ( document.converter.reverse_value.value * 23.77 ) * 100 ) / 100;
	target += 'm';
	} else {
	var target = Math.round( ( document.converter.reverse_value.value * ( 23.77 * 8.23 ) ) * 100 ) / 100;
	target += 'm²';
	}
	answer.innerHTML = '<strong>' + origin + '</strong> terrains de tennis correspondent à <strong>' + target + '</strong>';
	}
	questions.style.display = 'none';
	answer.style.display = 'block';
	document.getElementById('convert_button').style.display = 'none';
	document.getElementById('invert').style.display = 'none';
	document.getElementById('another').style.display = 'inline-block';
	return false;
	}
	document.getElementById('convert_button').onclick = function(){
	document.converter.onsubmit();
	return false;
	}
	document.getElementById('another').onclick = function(){
	answer.style.display = 'none';
	questions.style.display = 'block';
	document.getElementById('another').style.display = 'none';
	document.getElementById('convert_button').style.display = 'inline-block';
	document.getElementById('invert').style.display = 'inline-block';
	return false;
	}
	document.getElementById('invert').onclick = function(){
	if ( current_question == 1 ) {
	question1.style.display = 'none';
	question2.style.display = 'block';
	} else {
	question2.style.display = 'none';
	question1.style.display = 'block';
	}
	current_question = ( current_question + 1 ) % 2;
	return false;
	}
	})();
	body {
	max-width: 560px;
	margin: 0 auto;
	color: #393939;
	background-color: #F7F8FD;
	}
	#question2,
	#answer {
	display: none;
	}
	h1 {
	display: block;
	padding: 1em 0.5em 2em;
	margin-bottom: 1em;
	text-align: center;
	border-bottom: 1px solid black;
	}
	strong {
	color: #A68237;
	}
	body,
	h1,
	input,
	select {
	font-size: 18px;
	}
	.actions {
	background-color: #A5B7EA;
	padding: 0.5em;
	border-bottom: 1px solid black;
	}
	.actions a {
	display: inline-block;
	color: #A68237;
	font-size: 36px;
	width: 50px;
	text-align: center;
	border-radius: 2px;
	background-color: #B4C6F7;
	}
	.actions a,
	.actions a:hover,
	.actions a:focus,
	.actions a:active {
	text-decoration: none;
	}
	.actions a:hover,
	.actions a:focus,
	.actions a:active {
	background-color: #C4D3FF;
	}
	#another {
	display: none;
	}
	#invert {
	float: right;
	}
	.footer {
	text-align: center;
	font-size: 12px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Ca fait combien en terrain de tennis ? Le convertisseur utile</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<link href="converter.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<form name="converter">
	<div class="actions">
	<a href="javascript:;" id="convert_button" title="Convertir">✔</a>
	<a href="javascript:;" id="invert" alt="Inverser">⇄</a>
	<a href="javascript:;" id="another" alt="Recommencer">↶</a>
	</div>
	<div id="questions">
	<h1 id="question1">
	Combien font
	<input type="text" name="value" size="5" value="50" />
	<select name="unit">
	<option value="m">m</option>
	<option value="m2">m²</option>
	</select>
	en terrains de tennis ?
	</h1>
	<h1 id="question2">
	C'est quoi
	<select name="reverse_unit">
	<option value="m">la longueur</option>
	<option value="m2">l'aire</option>
	</select>
	de <input type="text" name="reverse_value" size="5" value="3" />
	terrains de tennis ?
	</h1>
	</div>
	</form>
	<h1 id="answer"></h1>
	<script type="text/javascript" src="convert.js"></script>
	<div class="footer">
	Si vous vous posiez la question, ce convertisseur ne sert à rien.<br>
	Il a été réalisé par <a href="http://zilliox.me">Thomas</a>.
	</div>
	<body>
	</html>