JS/index.html at main · ZakyB/JS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
<form>
	<div>
		<label for="name">Name</label>
		<input type="text" name="name" id="name">
	</div>
	<div>
		<label for="portes">nombre de portes</label>
		2: <input type="radio" name="portes" id="portes" value = "2">
		4: <input type="radio" name="portes" id="portes" value = "4">

	</div>
	<div>
		<label for="cars">Cars</label>
		<select id="cars" name="cars">
			si je coche bouton 2->afficher voitures deux portes
			sinon afficher les autres
			option null par defaut
			option null selectionner->select en rouge
		</select>
	</div>
	<div>
		<input type="submit" name="person">
	</div>
</form>
<script src ="./jquery-3.6.0.js"></script>
<script>

	const cars = [
		{brand:'Peugeot', make: '208',porte },
		{brand:'Renault', make: 'clio'},
		{brand:'Citroen', make: 'c3'},
		{brand:'Peugeot', make: '3008'},
		{brand:'Citroen', make: 'c4'},
		{brand:'Peugeot', make: '308'},
		{brand:'Peugeot', make: '5008'},
		{brand:'Peugeot', make: '508'}
	];
	//let templateCars ="";
	//const prototype=`<option value="__car__">__car__</option> \n`;
	//const prototypeBrand=`<optgroup label="__brand__"> \n`;
	//let arrayCheck=[];

	//for (var i=0;i<cars.length;i++){
	//	if(!arrayCheck.includes(cars[i].brand)){
	//		arrayCheck.push(cars[i].brand);
	//		templateCars += prototypeBrand.replaceAll("__brand__",cars[i].brand);
	//		for (var t=0;t<cars.length;t++){
	//			if(cars[i].brand==cars[t].brand){
	//				templateCars += prototype.replaceAll("__car__",cars[t].make);
	//			}
	//		}
	//		templateCars += "</optgroup>\n";
	//	}
	//}
	let sortedCars = {};
	cars.forEach(car=> {
		if (sortedCars[car.brand] === undefined){
			sortedCars[car.brand] =[];
		}

		sortedCars[car.brand].push(car.make);
	});
	console.log(sortedCars);

	Object.keys(sortedCars).forEach(brand =>{
		$(`select`).append(`<optgroup label='${brand}'></optgroup>`);

		sortedCars.brand.forEach(car => {
			$(`optgroup[label=${brand}]`).append(
				`<option value='${car.make}'>${brand}'></optgroup>`);
		})
	})

	//$('#cars').append(templateCars);

	let template = `
	<div>
		<label for="age">Age</label>
		<input type="text" name="age" id="age">
	</div>
	`;
	$('#name').parent().after(template);
	let templateDob='';
	for(var i=1980;i<=2001;i++){
		templateDob+=`<option value="${i}">${i}</option> \n`
	}
	console.log(templateDob);
	$('#dob').append(templateDob);
</script>
</html>