TP01, TP02 & TP03EX01

2024-02-26 19:17:32 +01:00
commit 2cfb5211c3
28 changed files with 1147 additions and 0 deletions
--- a/TP01/EX3/array.html
+++ b/TP01/EX3/array.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="initial-scale=1,witdh=device-width">  
+
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+
+		<script src="graph.js" type="text/javascript"></script>
+		<script>
+			window.onload = (()=>{
+				let array = Array.from({length: 15}, () => -10 + Math.floor(Math.random() * 21));
+
+
+
+				graph('graph1', array)
+				graph('graph2', array.map(function(nombre){return nombre+3}))
+				graph('graph3', array.slice().sort((a,b) => (a-b)))
+				graph('graph4', array.filter(function(nombre){return (nombre >= 0)}))
+			})
+		</script>
+	</head>
+	<body class="m-6">
+		<main class="container">
+		<section class="columns is-multiline">
+
+			<div class="column is-6">
+				<h2 class="title is-2">Simple Array</h2>
+				<canvas id="graph1" width="500" height="400"></canvas>
+			</div>
+
+			<div class="column is-6">
+				<h2 class="title is-2">Add 3 (using map)</h2>
+				<canvas id="graph2" width="500" height="400"></canvas>
+			</div>
+
+			<div class="column is-6">
+				<h2 class="title is-2">Sorted</h2>
+				<canvas id="graph3" width="500" height="400"></canvas>
+			</div>
+
+			<div class="column is-6">
+				<h2 class="title is-2">Filtered (positives values)</h2>
+				<canvas id="graph4" width="500" height="400"></canvas>
+			</div>
+
+		</section>
+		</main>
+	</body>
+</html>
--- a/TP01/EX3/graph.js
+++ b/TP01/EX3/graph.js
@@ -0,0 +1,34 @@
+"use strict";
+
+const colors = [
+	'#00429d', '#204fa3', '#325da9', '#406aaf', '#4e78b5', '#5a86bb', 
+	'#6694c1', '#73a2c6', '#80b1cc', '#8ebfd1', '#9dced6', '#addcda', 
+	'#c0eade', '#d8f6e1', '#ffffe0'
+]
+
+function graph(canvasId, array) {
+	if (array.length == 0) {
+		throw "array.length == 0"
+	}
+
+	var min = array.reduce(function(a, b) { return (a < b)? a: b; })
+	var max = array.reduce(function(a, b) { return (a < b)? b: a; })
+
+	var canvas = document.getElementById(canvasId)
+	var context = canvas.getContext("2d")
+	context.clearRect(0, 0, canvas.width, canvas.height)
+
+	context.beginPath()
+	context.strokeStyle = "black"
+	context.moveTo(0, canvas.height / 2)
+	context.lineTo(canvas.width, canvas.height / 2)
+	context.stroke()
+
+	array.forEach(function(v, i) {
+
+		context.fillStyle = colors[(i) % colors.length]
+		context.fillRect((i + 0.1) * canvas.width / array.length, canvas.height / 2, 0.8 * canvas.width / array.length, v * canvas.height / (min - max) / 2)
+		context.strokeText(v, (i + 0.4)* canvas.width / array.length, canvas.height /10)
+	})
+}
+
--- a/TP01/EX3/minmax.html
+++ b/TP01/EX3/minmax.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<link rel="stylesheet" href="http://www.iut-fbleau.fr/css/tacit.css">
+	</head>
+	<body class="m-6">
+		<main class="container">
+			<h2 class="title is-2">Random Array</h2>
+			<div id="line"></div>
+
+			<h2 class="title is-2">Min/Max</h2>
+			<p>
+				Min : <span id="min"></span>
+			</p>
+			<p>
+				Max : <span id="max"></span>
+			</p>
+		</main>
+		<script>
+
+			function getRandomArray(size,inf,max)
+			{
+				// TODO
+				let i;
+				let array = [];
+				for (i=0; i<size; i++){
+					let x = Math.floor(Math.random() * (max - inf + 1) + inf);
+					array[i] = x;
+				}
+				return array;
+			}
+
+			function minmax(array)
+			{
+				// TODO
+				if (array.length >= 0){
+					return array.reduce(function(resultat, nombre) {
+						return{
+							'min': Math.min(resultat.min, nombre),
+							'max': Math.max(resultat.max, nombre)
+						};
+					},
+					{
+						'min': Number.MAX_SAFE_INTEGER,
+						'max': Number.MIN_SAFE_INTEGER
+					});
+				}
+			}
+
+			let array = getRandomArray(50,-100,100)
+			let minAndMax = minmax(array)
+
+			document.getElementById("line").textContent = array
+			document.getElementById('min').textContent = minAndMax.min
+			document.getElementById('max').textContent = minAndMax.max
+		</script>
+	</body>
+</html>