-
your name is {users.name}
- {users.email}
+
+
+
Enter a number and get FILM
+
+ setNumber(e.target.value)} />
+ {film}
+ {N}
+
+
);
-}
-const Root = () => {
+};
+
+export default App;
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*
+///////////////////// Redux Test 2 MINI CALCULE////////////////////
+import {React,useState} from "react";
+import './style/app.css';
+import { useDispatch, useSelector } from "react-redux";
+
+const App = () => {
+ const resultat =useSelector((state)=>state.resultats)
+ const operation =useSelector((state)=>state.operation)
+
+ const [nb1,setNb1]=useState(0)
+ const [nb2,setNb2]=useState(0)
+ const dis =useDispatch()
+ const SOMME=()=>{
+ dis({type:'SOMME',payload:[nb1,nb2]})
+ }
+ const SOUSTRA=()=>{
+ dis({type:'SOUSTRA',payload:[nb1,nb2]})
+ }
+ const MULTIP=()=>{
+ dis({type:'MULTIP',payload:[nb1,nb2]})
+ }
+ const DIVIS=()=>{
+ dis({type:'DIVIS',payload:[nb1,nb2]})
+ }
+
+
return (
-
- )
-}
-export default Root;
+ <>
+
+
Mini Calcule
+
setNb1(e.target.value)}/>
+
+
setNb2(e.target.value)} />
+
+
+
+
+
+
+
+
{operation} = {resultat}
+
+
+ )
+}
+export default App
@@ -67,36 +184,114 @@ export default Root;
+/*
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+const App = () => {
+ const [pas, setPas] = useState(0);
+ const nb = useSelector((state) => state.counter);
+ const dis = useDispatch()
+ const Increment = () => {
+ dis({ type: 'INC' })
+ }
+ const Decrement = () => {
+ dis({ type: 'DEC' })
+ }
+ useEffect(() => {
+ dis({ type: 'ADDN', payload: pas })
+ }, [pas])
-*/
+ return (
+
+
+ hello {nb}
+
+
+
+
+ setPas(e.target.value)} />
+
+
+ );
+};
+export default App;
+/*
+//////////// UseEfect
+import React from 'react'
+import EffectHook from './components/effectHook'
+export default function App() {
+ return (
+
+
+
+ )
+}
+*/
+/*
+import TachesGestion from './components/tachesGestion'
+const App = () => {
+ return (
+
+
+
+ )
+}
+export default App
+*/
+//////////////// T3 /////////////
+// Context Api
+/*
+import React from "react";
+import { UserProvider, useUsers } from "./components/contextApi";
+function App() {
+ const {users}=useUsers()
+ return (
+
+
your name is {users.name}
+ {users.email}
+
+ );
+}
+const Root = () => {
+ return (
+
+ )
+}
+export default Root;
+/////////////////
+*/
//////////////// T1 /////////////
- // base 1
+// base 1
-/*
+/*
import M1 from "./components/el1";
import M2 from './components/el2';
import React from "react";
@@ -116,44 +311,43 @@ function test1() {
let age = 19;
return (
-
+
-
+
hello {Name}
{age >= 18 ? "vous êtes adulte" : "petit"}
-
+
{
-
-
+
+
}
);
}
-export default test1;
+export default test1;
/// Methode 2
class test2 extends React.Component{
render(){
- return
k
+ return
k
}
}
export default test2; */
-
//////////////// T2 /////////////
- // base 2
+// base 2
/*
import T from "./components/css-jsx";
import N from "./components/nav";
@@ -214,4 +408,4 @@ const Test1 = () => {
};
export default Test1;
-*/
\ No newline at end of file
+*/
diff --git a/src/app/store.js b/src/app/store.js
new file mode 100644
index 0000000..44889fc
--- /dev/null
+++ b/src/app/store.js
@@ -0,0 +1,138 @@
+///////////////////// Redux Test 3 MINI Game Change my Color !///////////////////
+import {createStore} from 'redux'
+
+const initialeState={color:'',text:'Hello change me !',hestoC:[],hestoT:[]}
+const reducer =(state=initialeState,{type,payload})=>{
+ switch (type){
+ case 'ChangeC':
+ return {...state,color:payload || '',hestoC:[...state.hestoC,payload]}
+ case 'ChangeT' :
+ return {...state,text:payload,hestoT:[...state.hestoT,payload]}
+ default :
+ return state
+ }
+}
+const store =createStore(reducer)
+export default store
+
+
+
+
+
+/*///////////////////// Redux Test 3 MINI Game Number Film////////////////////
+import { createStore } from "redux";
+
+
+const initialeState ={number:0,film :''};
+const reducer = (state=initialeState,{type,payload})=>{
+ if (type==='submit'){
+ const num =Number(payload)
+ fetch(`https://api.themoviedb.org/3/movie/${num}?api_key=0269e1f69afd6ff169f8a6a2d9f0dc4d`)
+ .then(response => response.json()) // Convert the response to JSON
+ .then(data => {
+ return {
+ number: data.id,
+ film: data.original_title,
+ };
+ })
+ .catch(error => {
+ // Handle any errors that may occur during the fetch
+ console.error('Error fetching data:', error);
+ });
+
+
+
+ }
+ return state
+}
+
+const store =createStore(reducer)
+export default store
+
+
+
+
+
+// `https://api.themoviedb.org/3/trending/movie/day?api_key=0269e1f69afd6ff169f8a6a2d9f0dc4d`);
+
+
+
+
+
+
+
+///////////////////// Redux Test 2 MINI CALCULE////////////////////
+/*
+import { createStore } from 'redux';
+
+const initialeState = { operation: '', resultats: '' }
+const reducer = (state = initialeState, { type, payload }) => {
+ switch (type) {
+ case 'SOMME':
+ return { resultats: Number(payload[0]) + Number(payload[1]), operation: payload[0] + "+" + payload[1] }
+ case 'SOUSTRA':
+ return { resultats: Number(payload[0]) - Number(payload[1]), operation: payload[0] + "-" + payload[1] }
+
+ case 'MULTIP':
+ return { resultats: Number(payload[0]) * Number(payload[1]), operation: payload[0] + "*" + payload[1] }
+
+ case 'DIVIS':
+ return { resultats: Number(payload[0]) / Number(payload[1]), operation: payload[0] + "%" + payload[1] }
+
+ }
+ return state
+}
+
+const store = createStore(reducer)
+
+export default store
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+///////////////////// Redux Test 1 ////////////////////
+/*
+import { createStore } from "redux";
+const initialState={counter :0};
+const reducer = (state=initialState,{type,payload})=>{
+ switch (type) {
+ case 'INC' :
+ return {counter : state.counter+1}
+ case 'DEC' :
+ return {counter : state.counter-1}
+ case 'ADDN' :
+ return {counter :state.counter +Number(payload)}
+ default :
+ return state
+ }
+
+
+
+}
+const store =createStore(reducer)
+
+export default store
+
+
+*/
+
+
+
+
+
+
+
+
diff --git a/src/components/AXIOS.jsx b/src/components/AXIOS.jsx
new file mode 100644
index 0000000..a067208
--- /dev/null
+++ b/src/components/AXIOS.jsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+
+export default function AXIOS() {
+ const [users, setUsers] = useState([]);
+ const [todo, setTodo] = useState([]);
+ const [listT, setListT] = useState([]);
+
+ function AfficheU() {
+ fetch('https://jsonplaceholder.typicode.com/users')
+ .then((response) => response.json())
+ .then((don) => setUsers(don));
+ }
+
+ function AfficheT(e) {
+ var id = e.target.value;
+ fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
+ .then((response) => response.json())
+ .then((don) => setTodo([don]));
+ }
+
+ function AfficheLT() {
+ fetch(`https://jsonplaceholder.typicode.com/todos`)
+ .then((response) => response.json())
+ .then((don) => setListT(don)); // Correction ici
+ }
+
+ return (
+
+
+
{' '}
+
+
+ {users.map((e, i) => (
+
+ {' '}
+ le Nom : {e.name}{' '}
+ le Prenom : {e.username}{' '}
+
+ {todo.length > 0 && e.id === todo[0].userId && (
+
+ {todo.map((t, j) => (
+ -
+ Todo: {t.title}
+
+
+ ))}
+
+ )}
+
+ ))}
+
+
+
{' '}
+ {listT.map((e, i) => (
+
+ {' '}
+ Title : {e.title}
+
+ ))}
+
+ );
+}
diff --git a/src/components/AddTodo.jsx b/src/components/AddTodo.jsx
new file mode 100644
index 0000000..1686ac5
--- /dev/null
+++ b/src/components/AddTodo.jsx
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export class AddTodo extends Component {
+ state = {
+ title: ''
+ }
+
+ onSubmit = (e) => {
+ e.preventDefault();
+ this.props.addTodo(this.state.title);
+ this.setState({ title: '' });
+ }
+
+ onChange = (e) => this.setState({ [e.target.name]: e.target.value });
+
+ render() {
+ return (
+
+ )
+ }
+}
+
+// PropTypes
+AddTodo.propTypes = {
+ addTodo: PropTypes.func.isRequired
+}
+
+export default AddTodo
diff --git a/src/components/Affiche_Editer_Chercher.jsx b/src/components/Affiche_Editer_Chercher.jsx
new file mode 100644
index 0000000..b1f84d0
--- /dev/null
+++ b/src/components/Affiche_Editer_Chercher.jsx
@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+
+const Affiche = () => {
+ const [vr, setVr] = useState(false);
+ const [editingId, setEditingId] = useState(null);
+
+ const [cher,setCher]=useState('')
+ const [editedData, setEditedData] = useState({
+ id: "",
+ nom: "",
+ prenom: "",
+ });
+ const [listC ,setListC] = useState([
+ {
+ id: 1,
+ nom: "najam",
+ prenom: "imad",
+ },
+ {
+ id: 2,
+ nom: "lolo",
+ prenom: "lili",
+ },
+ {
+ id: 3,
+ nom: "toto",
+ prenom: "titi",
+ },
+ {
+ id: 4,
+ nom: "roro",
+ prenom: "riri",
+ },
+ {
+ id: 5,
+ nom: "moro",
+ prenom: "moro",
+ },
+ ]);
+ function Liste() {
+ return (
+
+ {listC.map((e, i) => (
+ -
+ {e.id} -- {e.nom} -- {e.prenom} --------------{" "}
+ {" "}
+
+
+ ))}
+
+ );
+ }
+
+ function Supprimer(id) {
+
+ setListC(listC.filter((e)=> e.id!==id))
+ alert( "l'element : " + id +' est supprimer' )
+ }
+
+ function Aediter(item) {
+ setVr(true);
+ setEditingId(item.id);
+ setEditedData({
+ id: item.id,
+ nom: item.nom,
+ prenom: item.prenom,
+ })
+ setListC(listC.filter((e)=> e.id!==item.id))
+
+ }
+ function handleInputChange(e) {
+
+ const { name, value } = e.target;
+ setEditedData((prevData) => ({
+ ...prevData,
+ [name]: value,
+ }));
+
+
+ }
+ function handleEditSubmit() {
+
+ setListC([...listC,editedData])
+
+
+ console.log("Submit Edit", editedData);
+ setVr(false);
+ setEditingId(null);
+ }
+ function CherF(){
+ const lis=listC.filter((e) => e.id===cher) ;
+ return(
+
+
+ { lis.map((e,i)=>(
+ - {e.id} , {e.nom} , {e.prenom}
+ )) }
+
+
+ )
+
+ }
+
+
+ return (
+
+
+ );
+
+};
+
+export default Affiche;
diff --git a/src/components/CRUD.jsx b/src/components/CRUD.jsx
new file mode 100644
index 0000000..55d3b3a
--- /dev/null
+++ b/src/components/CRUD.jsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+const CRUD = () => {
+ const [Matricul, SetMatricul] = useState('');
+ const [nom, Setnom] = useState('');
+ const [Prenom, SetPrenom] = useState('');
+ const [Salaire, SetSalaire] = useState('');
+ const [listClients, SetlistClients] = useState([]);
+ function addClienst(e) {
+ e.preventDefault();
+ const flag = listClients.find((e) => e.Matricul === Matricul);
+
+ if (!flag) {
+ SetlistClients(
+ [
+ ...listClients,
+ { Matricul: Matricul, nom: nom, Prenom: Prenom, Salaire: Salaire }
+ ]);
+ }
+ SetMatricul('');
+ Setnom('');
+ SetPrenom('');
+ SetSalaire('');
+ }
+ function DeleteLigne(mle) {
+ SetlistClients(listClients.filter(el => el.Matricul !== mle.target.value))
+ }
+
+ return (
+
+
+
Gestions des clients
+
+
+
Liste des clients
+
+ | Matricul | nom | Prenom | Salaire |
+
+ {listClients.length===0?aucune données
:listClients.map((e, k) => {
+ return (
+
+ | {e.Matricul} | {e.nom} | {e.Prenom} | {e.Salaire} MAD | |
+
+ );
+ })}
+
+
+
+
+
+ );
+}
+
+export default CRUD;
diff --git a/src/components/MiniCalcule.jsx b/src/components/MiniCalcule.jsx
new file mode 100644
index 0000000..c9823f0
--- /dev/null
+++ b/src/components/MiniCalcule.jsx
@@ -0,0 +1,115 @@
+import { React, useEffect, useState } from "react";
+
+const MiniCalcule = () => {
+ const [Z1, setZ1] = useState(0);
+ const [Z2, setZ2] = useState(0);
+
+ const [op, setop] = useState("");
+ const [resultas, setResultas] = useState(0);
+ const [Addition, setAddition] = useState(-1);
+ const [Soustraction, setSoustraction] = useState(-1);
+ const [Multiplication, setMultiplication] = useState(-1);
+ const [Division, setDivision] = useState(-1);
+ const [nbOp1, setNbOp1] = useState(-1);
+ const [nbOp2, setNbOp2] = useState(-1);
+ const [nbOp3, setNbOp3] = useState(-1);
+ const [nbOp4, setNbOp4] = useState(-1);
+ const [nbOp5, setNbOp5] = useState(-1);
+ useEffect(() => {
+ setAddition(Addition + 1);
+ }, [nbOp1]);
+ useEffect(() => {
+ setSoustraction(Soustraction + 1);
+ }, [nbOp2]);
+ useEffect(() => {
+ setMultiplication(Multiplication + 1);
+ }, [nbOp3]);
+ useEffect(() => {
+ setDivision(Division + 1);
+ }, [nbOp4]);
+ useEffect(() => {
+ setNbOp5(nbOp5 + 1);
+ }, [resultas]);
+
+ function calcul(e) {
+ if (e == "+") {
+ if (Z1 >= 1 && Z2 >= 1) {
+ setNbOp1(nbOp1 + 1);
+
+ setop(Z1 + "+" + Z2);
+ setResultas(Z1 + Z2);
+ } else setResultas("eror");
+ }
+ if (e == "-") {
+ if (Z1 > Z2) {
+ setNbOp2(nbOp2 + 1);
+ setResultas(Z1 - Z2);
+ setop(Z1 + "-" + Z2);
+ } else setResultas("eror Z1 < Z2");
+ }
+ if (e == "*") {
+ if (Z1 > 1 && Z2 > 1) {
+ setNbOp3(nbOp3 + 1);
+ setop(Z1 + "*" + Z2);
+ setResultas(Z1 * Z2);
+ } else setResultas("eror");
+ }
+ if (e == "/") {
+ if (Z1 > 1 && Z2 > 1) {
+ setNbOp4(nbOp4 + 1);
+ setop(Z1 + "/" + Z2);
+ setResultas(Z1 / Z2);
+ } else setResultas("eror division par 0");
+ }
+ }
+
+ return (
+
+ );
+};
+
+export default MiniCalcule;
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
new file mode 100644
index 0000000..bdcfe90
--- /dev/null
+++ b/src/components/TodoList.js
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+
+const TodoList = () => {
+ const [todos, setTodos] = useState([]);
+ const [newTodo, setNewTodo] = useState("");
+
+ const handleAddTodo = () => {
+ if (newTodo.trim() !== "") {
+ setTodos([...todos, { text: newTodo.trim(), checked: false }]);
+ setNewTodo("");
+ }
+ };
+
+ const handleDeleteTodo = (index) => {
+ const newTodos = [...todos];
+ newTodos.splice(index, 1);
+ setTodos(newTodos);
+ };
+
+ const handleToggleTodo = (index) => {
+ const newTodos = [...todos];
+ newTodos[index].checked = !newTodos[index].checked;
+ setTodos(newTodos);
+ };
+
+ return (
+
+
To-Do List
+
setNewTodo(e.target.value)}
+ />
+
+
+
+ );
+};
+
+export default TodoList;
diff --git a/src/components/css-jsx.js b/src/components/css-jsx.js
index a1ab176..9b09b30 100644
--- a/src/components/css-jsx.js
+++ b/src/components/css-jsx.js
@@ -5,8 +5,10 @@ import ReactPlayer from "react-player";
// import C from '../assets/images/camera.png';
const T = (arg) => {
const im = {
- width: '50px',
- heightt: '50px'
+ width: '90px',
+ heightt: '90px'
+
+
}
const v1='https://www.youtube.com/watch?v=45QLb6M_6A0'
diff --git a/src/components/effectHook.jsx b/src/components/effectHook.jsx
new file mode 100644
index 0000000..e75ad1a
--- /dev/null
+++ b/src/components/effectHook.jsx
@@ -0,0 +1,22 @@
+import {React,useEffect,useState} from 'react'
+
+const EffectHook = () => {
+
+ const[num,setnum] = useState(0);
+ const[ver,setver] = useState(false);
+
+
+ useEffect(()=>{
+ setnum(1+num);
+
+ },[ver])
+
+ return (
+
+
+
+
+ )
+}
+
+export default EffectHook
diff --git a/src/index.js b/src/index.js
index a4e3746..cff70b0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,12 +4,17 @@ import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import Store from './app/store'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
-
+
+
+
+
);
diff --git a/src/style/app.css b/src/style/app.css
new file mode 100644
index 0000000..e7bfffd
--- /dev/null
+++ b/src/style/app.css
@@ -0,0 +1,45 @@
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center; /* Add vertical centering */
+ flex-direction: column;
+ text-align: center;
+}
+
+.container2 {
+ display: flex;
+ justify-content: center;
+ align-items: center; /* Add vertical centering */
+ gap: 10px;
+
+}
+.Mini{
+ text-align: center;
+ color: teal;
+ font-size: x-large;
+}
+
+button {
+ width: 200px;
+ height: 20px;
+
+ border: none;
+ background-color: rgb(211, 24, 89);
+ color: white;
+ cursor: pointer;
+}
+input {
+ text-align: center;
+ width: 200px; /* Adjust the width as needed */
+ padding: 10px;
+ border: 2px solid #3498db; /* Border color */
+ border-radius: 5px; /* Rounded corners */
+ font-family: 'Arial', sans-serif; /* Choose your preferred font */
+ font-size: 16px; /* Adjust the font size as needed */
+ outline: none; /* Remove default input outline */
+}
+
+/* Optional: Add some hover effect */
+input:hover {
+ border-color: #2980b9; /* Change border color on hover */
+}