BlandineBurteaux/calculatrice.html

## calculatrice.html
<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Calculatrice</title>
		<style>
				* {
					font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
					font-size: 16px;
				}

				table {
					background: #454545;
					padding: 10px;
					border-radius: 10px;
					border-spacing: 5px;
				}

				input, #result {
					background: #eaeaea;
					border: 0;
					height: 20px;
					padding: 2px 5px;
				}

				button {
					background-color: #eaeaea;
					border: 0;
					border-radius: 5px;
					height: 100%;
					width: 100%;
				}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<td colspan="3">
						<input type="text" value="" id="formule" />
					</td>
					<td>
						<div id="result"></div>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="3">
						<button onclick="erase()">Effacer Tout</button>
					</td>
					<td>
						<button onclick="click_touch('/');">/</button>
					</td>
				</tr>
				<tr>
					<td>
						<button onclick="click_touch(7);">7</button>
					</td>
					<td>
						<button onclick="click_touch(8);">8</button>
					</td>
					<td>
						<button onclick="click_touch(9);">9</button>
					</td>
					<td>
						<button onclick="click_touch('*');">*</button>
					</td>
				</tr>
				<tr>
					<td>
						<button onclick="click_touch(4);">4</button>
					</td>
					<td>
						<button onclick="click_touch(5);">5</button>
					</td>
					<td>
						<button onclick="click_touch(6);">6</button>
					</td>
					<td>
						<button onclick="click_touch('-');">-</button>
					</td>
				</tr>
				<tr>
					<td>
						<button onclick="click_touch(1);">1</button>
					</td>
					<td>
						<button onclick="click_touch(2);">2</button>
					</td>
					<td>
						<button onclick="click_touch(3);">3</button>
					</td>
					<td>
						<button onclick="click_touch('+');">+</button>
					</td>
				</tr>
				<tr>
					<td colspan="3">
						<button onclick="click_touch(0);">0</button>
					</td>
					<td>
						<button id="egal" onclick="egal();">=</button>
					</td>
				</tr>
			</tbody>
		</table>

		<script>
			var operators= ['+','-','*','/'];
			var formule_el = document.getElementById("formule");
			var result_el = document.getElementById("result");

			/**
			* @description Cliquer sur une touche
			*
			* @param {String value chiffre|operateur}
			* @returns {void}
			*/
			function click_touch(value){
				// si on a déjà fait un calcul précédemment
				if (result_el.textContent.length > 0)
				{
					// on vide la formule
					formule_el.value = "";

					// si on a cliqué sur un operateur
					if(operators.indexOf(value) != -1){
						// On concate le résultat précédent
						formule_el.value = result_el.textContent;
					}

					// On vide le résultat
					result_el.textContent = "";
				}

				// On concate le chiffre/opérateur
				formule_el.value += value;
			}

			/**
			* @description Clic sur "="
			*
			* @returns {void}
			*/
			function egal(){
				var chiffre = formule_el.value;
				// Si la formule se termine par un opérateur
				if(operators.indexOf(chiffre.charAt(chiffre.length-1 )) !=-1 ){
					//Calculer le résultats avec le résultats par le dernier opérateur
					formule_el.value = formule_el.value + eval(chiffre.substring(0,chiffre.length-1));
				}
				result_el.textContent = eval(formule_el.value);
			}

			/**
			* @description Vider champs formule et résultat
			*
			* @returns {void}
			*/
			function erase(){
				formule_el.value = "";
				result_el.textContent = "";
			}
		</script>
	</body>
</html>
	<!doctype html>
	<html lang="fr">
	<head>
	<meta charset="utf-8">
	<title>Calculatrice</title>
	<style>
	* {
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 16px;
	}

	table {
	background: #454545;
	padding: 10px;
	border-radius: 10px;
	border-spacing: 5px;
	}

	input, #result {
	background: #eaeaea;
	border: 0;
	height: 20px;
	padding: 2px 5px;
	}

	button {
	background-color: #eaeaea;
	border: 0;
	border-radius: 5px;
	height: 100%;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<table>
	<thead>
	<tr>
	<td colspan="3">
	<input type="text" value="" id="formule" />
	</td>
	<td>
	<div id="result"></div>
	</td>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td colspan="3">
	<button onclick="erase()">Effacer Tout</button>
	</td>
	<td>
	<button onclick="click_touch('/');">/</button>
	</td>
	</tr>
	<tr>
	<td>
	<button onclick="click_touch(7);">7</button>
	</td>
	<td>
	<button onclick="click_touch(8);">8</button>
	</td>
	<td>
	<button onclick="click_touch(9);">9</button>
	</td>
	<td>
	<button onclick="click_touch('');"></button>
	</td>
	</tr>
	<tr>
	<td>
	<button onclick="click_touch(4);">4</button>
	</td>
	<td>
	<button onclick="click_touch(5);">5</button>
	</td>
	<td>
	<button onclick="click_touch(6);">6</button>
	</td>
	<td>
	<button onclick="click_touch('-');">-</button>
	</td>
	</tr>
	<tr>
	<td>
	<button onclick="click_touch(1);">1</button>
	</td>
	<td>
	<button onclick="click_touch(2);">2</button>
	</td>
	<td>
	<button onclick="click_touch(3);">3</button>
	</td>
	<td>
	<button onclick="click_touch('+');">+</button>
	</td>
	</tr>
	<tr>
	<td colspan="3">
	<button onclick="click_touch(0);">0</button>
	</td>
	<td>
	<button id="egal" onclick="egal();">=</button>
	</td>
	</tr>
	</tbody>
	</table>

	<script>
	var operators= ['+','-','*','/'];
	var formule_el = document.getElementById("formule");
	var result_el = document.getElementById("result");

	/**
	* @description Cliquer sur une touche
	*
	* @param {String value chiffre\|operateur}
	* @returns {void}
	*/
	function click_touch(value){
	// si on a déjà fait un calcul précédemment
	if (result_el.textContent.length > 0)
	{
	// on vide la formule
	formule_el.value = "";

	// si on a cliqué sur un operateur
	if(operators.indexOf(value) != -1){
	// On concate le résultat précédent
	formule_el.value = result_el.textContent;
	}

	// On vide le résultat
	result_el.textContent = "";
	}

	// On concate le chiffre/opérateur
	formule_el.value += value;
	}

	/**
	* @description Clic sur "="
	*
	* @returns {void}
	*/
	function egal(){
	var chiffre = formule_el.value;
	// Si la formule se termine par un opérateur
	if(operators.indexOf(chiffre.charAt(chiffre.length-1 )) !=-1 ){
	//Calculer le résultats avec le résultats par le dernier opérateur
	formule_el.value = formule_el.value + eval(chiffre.substring(0,chiffre.length-1));
	}
	result_el.textContent = eval(formule_el.value);
	}

	/**
	* @description Vider champs formule et résultat
	*
	* @returns {void}
	*/
	function erase(){
	formule_el.value = "";
	result_el.textContent = "";
	}
	</script>
	</body>
	</html>