Ex 1 :

import React from "react";

function Ex1() {
const produits = [
{ id: 11, nom: "clé USB", prix: 70, famille: "INFO" },
{ id: 22, nom: "Table", prix: 250, famille: "Mobilier" },
{ id: 33, nom: "Souris", prix: 400, famille: "INFO" },
{ id: 44, nom: "Chaise", prix: 170, famille: "Mobilier" },
{ id: 55, nom: "Pince", prix: 35, famille: "INFO" },
{ id: 66, nom: "Routeur", prix: 300, famille: "INFO" },
];
console.log(produits);
// 1) Ecrire le code JS qui retourne les produits de la famille INFO qui
ont le prix supérieure à 80
//Methode 1: En utilisant filter
const NomINFO = produits.filter(
(produit) => produit.famille === "INFO" && produit.prix > 80
);
console.log("Question 1:", NomINFO);
//Methode 2: En utilisant ForEach
let resultat = [];
produits.forEach((prd) => {
if (prd.famille === "INFO" && prd.prix > 80) resultat.push(prd);
});
console.log("Question 1- forEach:", resultat);

// 2) Ecrire le code JS qui calcule la moyenne des prix des produits

//Methode 1: En utilisant reduce
const Somme = produits.reduce((total, prt) => total + prt.prix, 0);
const Moyenne = Somme / produits.length;
console.log("Question 2:", Moyenne);
//Methode 2: En utilisant forEach
let somme1 = 0;

produits.forEach((prd) => {
somme1 += prd.prix;
});
const Moyenne1 = somme1 / produits.length;
console.log("Question 2- forEach:", Moyenne1);

// 3) Ecrire le code JS qui détermine le nom du produit le plus cher

const prd_max = produits.reduce((prd_m, el) => {
if (el.prix > prd_m.prix) return el;
else return prd_m;
}, produits[0]);
console.log("Question 3: ", prd_max.nom);
//Methode : foreEach à faire
 // 4) Ecrire le code JS qui créée un autre tableau produits2 contenant les
éléments du tableau produits
// en supprimant le produit qui a le ID égal à 33
const produits2 = produits.filter((el) => el.id !== 33);

console.log("Question 4: ", produits2);

return <div>Ex1</div>;
}

export default Ex1;

Ex2

Q5

import PropTypes from "prop-types";

import React, { Component } from "react";

export default class Ex2_Q5 extends Component {

constructor() {
super();
this.state = {
password: "",
confirmePass: "",
message: "",
color: "",
};
}
handelPass = (e) => {
this.setState({ password: e.target.value });
};
handelPassConfirme = (e) => {
this.setState({ confirmePass: e.target.value });
};

handelValidet = () => {
const { password, confirmePass } = this.state;
if (password == confirmePass) {
this.setState({ message: "welcome", color: "green" });
} else {
this.setState({ message: "incorrect", color: "red" });
}
};

render() {
return (
 <div>
<input type="password" onChange={this.handelPass} />
<br></br>
<input type="password" onChange={this.handelPassConfirme} />
<br></br>
<input type="submit" value={"Envoyer"} onClick={this.handelValidet}
/>

<h1 style={{ color: "" + this.state.color }}> {this.state.message}

</h1>
</div>
);
}
}

Q6

import React, { useState } from "react";

export default function Ex2_Q6() {

const [pass, setPass] = useState("");
const [confirmPss, setConfirmPass] = useState("");
const [message, setMessage] = useState("");
const [color, setColor] = useState("");
const handelpass = (e) => {
setPass(e.target.value);
};
const handelpassConfirm = (e) => {
setConfirmPass(e.target.value);
};
const handelValidet = () => {
setMessage((state) => "");
if (pass == confirmPss) {
setMessage((state) => state + "welcome \n");
setColor("green");

if (pass.length < 8) {
setMessage((state) => state + " motpasse faible");
} else if (pass.length > 8) {
if (pass.toUpperCase() !== pass && pass.toLowerCase() !== pass) {
setMessage((state) => state + "password fort");
} else {
setMessage((state) => state + " motpasse moyen");
}
}
} else {
 setMessage("incorrect");
setColor("red");
}
};
return (
<div>
<input type="password" onChange={handelpass} />
<br></br>
<input type="password" onChange={handelpassConfirm} />
<br></br>
<input type="submit" value={"Envoyer"} onClick={handelValidet} />

<h1 style={{ color: "" + color }}> {message} </h1>

</div>
);
}