├── .vscode └── settings.json ├── DOM ├── eventlisener.js ├── index.html └── script.js ├── JS-Basic ├── arraowFunction.js ├── array.js ├── array2.js ├── callbackFun.js ├── clousure.js ├── clousure2.js ├── data-types.js ├── forlopRandom.js ├── function.js ├── hello.html ├── hello.js ├── hellowWorld.html ├── loop.js ├── map-filter-reduce.js ├── promise.js ├── sets.js ├── spread.js ├── variable.html └── variable.js ├── React-Basic ├── dom │ ├── index.html │ └── virtual.js └── helloworld │ ├── index.html │ └── react.js ├── React-Project └── form-app │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Table.css │ ├── Table.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── React-handsOn └── my-app │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── component │ ├── Clock.js │ └── FORM │ │ ├── Form.js │ │ └── form.css │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── es6 ├── Destructuring.js ├── arrowFn.js ├── arrowThis.js ├── class.js ├── component │ ├── index.html │ ├── index.js │ ├── person.js │ └── teacher.js ├── inheritance.js ├── map.js ├── object.js ├── run.html ├── spreadOperator.js ├── this.js ├── thisBind.js └── varLetConst.js ├── incrementApp-Vanila-React ├── index.html ├── react.html ├── react.js └── vanila.js ├── jquery-todo ├── index.html ├── jquery.js └── styles.css ├── js-cheatsheet.js ├── package-lock.json ├── react-practice ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── download.png │ ├── index.html │ └── style.css └── src │ ├── App.js │ ├── components │ ├── CONDITIONAL_RENDERING │ │ ├── HomePage.js │ │ ├── LoginPage.js │ │ └── index.js │ ├── Card.js │ ├── Card2.js │ ├── Card3.js │ ├── CountryApp │ │ ├── Countries.js │ │ ├── Country.js │ │ ├── HomeCountryAPP.js │ │ ├── Search.js │ │ └── Style.css │ ├── CustomHooks │ │ ├── DataFetch.js │ │ └── useFetch.js │ ├── DynamicStyle │ │ ├── DynamicStyle.js │ │ └── style.css │ ├── EVENT_HANDLER │ │ ├── binding.js │ │ └── index.js │ ├── EventBubbling.js │ ├── FAQ │ │ ├── FAQ.js │ │ ├── FAQs.js │ │ ├── data.js │ │ ├── faq.module.css │ │ └── faqs.module.css │ ├── FORM │ │ ├── Form.js │ │ ├── form.css │ │ └── useStateObj.js │ ├── FORM_VALIDATE │ │ └── SignUp.js │ ├── HOOKS │ │ ├── HooksUseState.js │ │ ├── UseReducer │ │ │ ├── UseReducer.js │ │ │ └── reducer.js │ │ ├── UseRefExamp │ │ │ ├── UseRefExam.js │ │ │ └── form.css │ │ └── useEffect │ │ │ ├── DataFetch.js │ │ │ ├── Loader.js │ │ │ └── UseEffectExam.js │ ├── LifeCycle │ │ └── LifeCycle.js │ ├── Pagination │ │ ├── CryptoCard.css │ │ ├── CryptoCard.js │ │ ├── CryptoList.css │ │ ├── CryptoList.js │ │ ├── PagiHOME.js │ │ ├── Pagination.css │ │ └── Pagination.js │ ├── PropDrilling │ │ ├── Componet1.js │ │ ├── Componet2.js │ │ ├── Componet3.js │ │ └── UserContext.js │ ├── PropTypes │ │ ├── PropTyps.js │ │ └── User.js │ ├── ReactBootstrap.js │ ├── RefExample │ │ ├── RefExam.js │ │ └── form.css │ ├── Routing │ │ ├── Navbar.js │ │ ├── Routing.js │ │ ├── data.js │ │ └── pages │ │ │ ├── Blog.js │ │ │ ├── Blogs.js │ │ │ ├── Contact.js │ │ │ ├── Error.js │ │ │ ├── Home.js │ │ │ └── User.js │ ├── STATE_LIFTING │ │ ├── Child.js │ │ └── TODOAPP │ │ │ ├── Home.js │ │ │ ├── NewTodo.js │ │ │ ├── Todo.js │ │ │ └── Todos.js │ ├── State.js │ ├── ToastMessage │ │ └── ToastInTODO.js │ └── Toggle.js │ ├── data.json │ ├── index.css │ └── index.js ├── react-todo └── index.html ├── react-vite ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx └── vite.config.js └── vanilla-todo ├── index.html ├── styles.css └── vanilla.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /DOM/eventlisener.js: -------------------------------------------------------------------------------- 1 | // event listener 2 | 3 | // const headerELement = document.querySelector("#header"); 4 | // headerELement.addEventListener("mouseover", (event) => { // click, dblclick, mousedown, mouseover, mouseenter 5 | // console.log(event); 6 | // }); 7 | 8 | // const inputElement = document.querySelector('input[type="text"]'); 9 | 10 | // inputElement.addEventListener("keypress", (event) => { //input, keypress 11 | // console.log(event); 12 | // }); 13 | 14 | const formELement = document.querySelector('form'); 15 | formELement.addEventListener('submit',(event) => { 16 | event.preventDefault(); // atkano = prevent 17 | console.log(event); 18 | console.log(event.target); 19 | }); -------------------------------------------------------------------------------- /DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM 7 | 8 | 9 | 10 |
11 |
12 |

DOM hi

13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 | 28 | 33 |
34 |
35 | 36 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /DOM/script.js: -------------------------------------------------------------------------------- 1 | // console.dir(document); 2 | // console.log(typeof(document)); 3 | // console.log(document.title); 4 | // console.log(document.head); 5 | // console.log(typeof(document.head)); 6 | 7 | // document.title = "here change"; 8 | // console.log(document.title); 9 | // // console.dir(document.head); 10 | // console.log(document.all[5]); 11 | // console.log(document.links); 12 | 13 | // console.log(document.getElementById('header')); 14 | 15 | let headerELement = document.getElementById('header'); // object 16 | headerELement.textContent = "DOM- document object Model"; 17 | // // headerELement.innerText = "DOM- document object Model"; 18 | 19 | // // console.log(headerELement.textContent); 20 | // // console.log(headerELement.innerText); 21 | // // console.log(headerELement.innerHTML); 22 | 23 | // // select by 24 | // // console.log(headerELement); 25 | // // headerELement.style.fontSize = '50px'; 26 | 27 | // console.log(document.getElementsByClassName('htag')); 28 | 29 | // let items = document.getElementsByTagName('h1'); 30 | // console.log(items); 31 | 32 | // parent/child relation 33 | const grandParent = document.querySelector('.list'); 34 | 35 | // const parent = grandParent.children; 36 | // const child1 = parent[0].children; 37 | // const child = parent[1].children; 38 | 39 | // const childrenOne = document.querySelector('.list'); 40 | // const childrenTwo = childrenOne.nextElementSibling; 41 | // childrenTwo.style.color = 'red'; 42 | // console.log(childrenTwo); 43 | 44 | // CREATEING ELEMENT 45 | const divElement = document.createElement('div'); 46 | divElement.className = "javascript"; 47 | divElement.setAttribute('id', 'js'); 48 | divElement.setAttribute('title', 'red div'); 49 | 50 | grandParent.append(divElement); 51 | 52 | 53 | <<<<<<< HEAD 54 | // console.log(document.getElementsByClassName('htag')); 55 | 56 | // let items = document.getElementsByTagName('h1'); 57 | // console.log(items); 58 | 59 | let header = document.querySelector('.htag'); 60 | header.textContent = "change"; 61 | console.log(header); 62 | ======= 63 | 64 | >>>>>>> 6755e031d1a7a5f98b8f12619fbe8c9023fa8edc 65 | -------------------------------------------------------------------------------- /JS-Basic/arraowFunction.js: -------------------------------------------------------------------------------- 1 | const add = (num1, num2) =>{ 2 | const sum = num1 * num2; 3 | return sum; 4 | } 5 | 6 | console.log(add(4, 5)); -------------------------------------------------------------------------------- /JS-Basic/array.js: -------------------------------------------------------------------------------- 1 | // 2 | let numbers = [5, 65, 8, 9, 7498]; 3 | console.log(numbers[0]); 4 | console.log(numbers[4]); 5 | 6 | numbers[1] = 588; 7 | console.log(numbers); 8 | 9 | numbers.push(8888); 10 | console.log(numbers); 11 | 12 | let removedElement = numbers.pop(); 13 | console.log(removedElement); 14 | console.log(numbers); 15 | 16 | console.log(numbers.length); 17 | 18 | for (let i = 0; i < numbers.length; i++) { 19 | console.log(numbers[i]); 20 | } 21 | 22 | let mixedArray = [1, "hello", true, {name: 'ruhul', cse:15}, [5,6,7]]; 23 | console.log(mixedArray); 24 | 25 | let doubledNumbers = numbers.map(num => num * 2); 26 | console.log(doubledNumbers); 27 | 28 | let oddNumbers = numbers.filter(num => num % 2 !== 0); 29 | console.log(oddNumbers); -------------------------------------------------------------------------------- /JS-Basic/array2.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdruhulkuddus/JavaScript-Learning/c3ba2e02ca2cae674ff0893fc11ad3b94f96a4e5/JS-Basic/array2.js -------------------------------------------------------------------------------- /JS-Basic/callbackFun.js: -------------------------------------------------------------------------------- 1 | // function greetings(name, callback){ 2 | // console.log(`Hello, ${name}`); 3 | // callback(); 4 | // } 5 | // function goodBye(){ 6 | // console.log("Good Bye..!"); 7 | // } 8 | // greetings("ruhul", goodBye); 9 | 10 | 11 | function calculator(number1, number2, callbackFn){ 12 | return callbackFn(number1, number2) 13 | } 14 | 15 | function sum(number1, number2){ 16 | return number1 +number2; 17 | } 18 | 19 | function sub(number1, number2){ 20 | return number1 - number2 21 | } 22 | 23 | function div(number1, number2){ 24 | return number1 / number2 25 | } 26 | 27 | function mul(number1, number2){ 28 | return number1 * number2 29 | } 30 | 31 | const result1 = calculator(1, 2, sum) //output: 3 32 | const result2 = calculator(1, 2, sub) //output: -1 33 | const result3 = calculator(1, 2, div) //output: 0.5 34 | const result4 = calculator(1, 2, mul) //output: 2 35 | 36 | console.log( result1, result2, result3, result4); -------------------------------------------------------------------------------- /JS-Basic/clousure.js: -------------------------------------------------------------------------------- 1 | function closureDemo() 2 | { 3 | var x = 10; 4 | console.log('Parent : '); 5 | return function(){ 6 | var y = 20; 7 | console.log('sum : '+ x + y); 8 | } 9 | } 10 | 11 | closureDemo()(); -------------------------------------------------------------------------------- /JS-Basic/clousure2.js: -------------------------------------------------------------------------------- 1 | function getCapital(capital){ 2 | return function(interest){ 3 | return (capital * interest) / 100; 4 | }; 5 | } 6 | 7 | const business1 = getCapital(500); 8 | console.log(business1); 9 | const profit = business1(25); 10 | console.log(profit); 11 | 12 | function multiply(){ 13 | let value = 1; 14 | function mul(){ 15 | value = value * 2; 16 | return value; 17 | } 18 | return mul; 19 | } 20 | const mul1 = multiply(); 21 | console.log(mul1()); 22 | console.log(mul1()); -------------------------------------------------------------------------------- /JS-Basic/data-types.js: -------------------------------------------------------------------------------- 1 | let person = { 2 | name: 'ruhul', 3 | age: 20, 4 | email: 'ruhul@gmail.com' 5 | }; 6 | 7 | console.log(typeof(person)); -------------------------------------------------------------------------------- /JS-Basic/forlopRandom.js: -------------------------------------------------------------------------------- 1 | let sum = 0; 2 | 3 | for(let i = 0; i < 10; i++){ 4 | sum = sum + Math.random(); 5 | console.log(sum); 6 | } -------------------------------------------------------------------------------- /JS-Basic/function.js: -------------------------------------------------------------------------------- 1 | // named function 2 | 3 | function greet(name){ 4 | return 'Hello, ' + name + ' !'; 5 | } 6 | console.log(greet('RUhul')); 7 | 8 | 9 | // anonymous function 10 | 11 | let greet = function(name){ 12 | return 'Hello, ' + name + '!'; 13 | } 14 | console.log(greet('kuddus')); -------------------------------------------------------------------------------- /JS-Basic/hello.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /JS-Basic/hello.js: -------------------------------------------------------------------------------- 1 | // separation of concern = separate js file 2 | 3 | console.log("hello world"); 4 | 5 | -------------------------------------------------------------------------------- /JS-Basic/hellowWorld.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 13 | 14 | -------------------------------------------------------------------------------- /JS-Basic/loop.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | let arr = [4, 5, 6, 8]; 4 | 5 | //console.log(arr); 6 | // for 7 | for(let i = 0; i < arr.length; i++){ 8 | console.log(arr[i] + "\n"); 9 | } 10 | 11 | 12 | //for in 13 | const numbers = [45, 4, 9, 16, 25]; 14 | 15 | let text = ""; 16 | for(let x in numbers){ 17 | text += numbers[x] + "\n"; 18 | } 19 | console.log(text); 20 | 21 | const person = {fname:"John", lname:"Doe", age:25}; 22 | for(let x in person){ 23 | text += person[x]+" "; 24 | } 25 | console.log(text + "\n"); 26 | 27 | // for of 28 | 29 | const cars = ["BMW", "Volvo", "Mini"]; 30 | for(let x of cars){ 31 | text += x + " "; 32 | } 33 | console.log(text); 34 | 35 | // foreach 36 | 37 | let students = ['John', 'Sara', 'Jack']; 38 | 39 | students.forEach(myFunction); 40 | 41 | function myFunction(item){ 42 | console.log(item); 43 | } -------------------------------------------------------------------------------- /JS-Basic/map-filter-reduce.js: -------------------------------------------------------------------------------- 1 | let arr = [45, 20, 56]; 2 | //console.log(arr); 3 | 4 | let a = arr.map((value, index, array) => { 5 | console.log(value, index, array); 6 | return value + 1; 7 | }) 8 | 9 | console.log(a); 10 | 11 | console.log("filter ----------------------------"); 12 | 13 | let arr2 = [20, 30, 40, 0, 3, 5]; 14 | let a2 = arr2.filter((a) => { 15 | return a < 10; 16 | }) 17 | 18 | console.log(a2, arr2); 19 | 20 | console.log("reduce ----------------------------"); 21 | 22 | let arr3 = [2, 5, 6, 8]; 23 | let newarr = arr3.reduce((a , b) => { 24 | return a + b 25 | }); 26 | console.log(newarr) 27 | const even = arr3.filter(num => num%2 == 0); 28 | console.log(even); -------------------------------------------------------------------------------- /JS-Basic/promise.js: -------------------------------------------------------------------------------- 1 | const meetingTime = "10:00 AM"; 2 | const reachTime = "10:00 AM"; 3 | const promise = new Promise((resolve, reject)=>{ 4 | if(meetingTime === reachTime){ 5 | resolve("Promise resolved") 6 | } 7 | else{ 8 | reject("Promise Rejected") 9 | } 10 | }) 11 | 12 | console.log(promise) 13 | 14 | // function fetchData() { 15 | // return new Promise((resolve, reject) => { 16 | // setTimeout(() => { 17 | // const data = 'Fetched data'; 18 | // resolve(data); 19 | // }, 1000); 20 | // }); 21 | // } 22 | 23 | // fetchData() 24 | // .then((result) => { 25 | // console.log(result); 26 | // }) 27 | // .catch((error) => { 28 | // console.error(error); 29 | // }); 30 | 31 | const promise1 = Promise.resolve(50); 32 | const promise2 = Promise.resolve(60); 33 | const promise3 = Promise.reject(0); 34 | 35 | const promisesWithoutReject = [promise1, promise2, promise3]; 36 | Promise.all(promisesWithoutReject) 37 | .then(result => console.log(result)) 38 | .catch(error => console.log(error)); 39 | 40 | -------------------------------------------------------------------------------- /JS-Basic/sets.js: -------------------------------------------------------------------------------- 1 | const letters = new Set(["a","b", "c"]); 2 | 3 | console.log(letters); 4 | 5 | letters.add(2); 6 | letters.add('o'); 7 | 8 | console.log(letters); 9 | 10 | const numbers = new Set(); 11 | numbers.add(4); 12 | numbers.add(4); 13 | numbers.add(6); 14 | 15 | console.log(numbers); 16 | -------------------------------------------------------------------------------- /JS-Basic/spread.js: -------------------------------------------------------------------------------- 1 | let numbers = [1,5,3,5]; 2 | 3 | // let moreNumbers = [...numbers, 5, 8]; 4 | let moreNumbers = [ 5, 8, ...numbers]; 5 | console.log(moreNumbers); 6 | 7 | let name = "ruhul kuddus"; 8 | 9 | let separet = [...name].join(' '); 10 | console.log(separet) 11 | 12 | const fruits = ['apple', 'banan']; 13 | const vegetable = ['gog', 'korola']; 14 | const food = [...fruits, ...vegetable, 'egg', 'dim']; 15 | console.log(food); 16 | 17 | const numberss = [1, 2, 3, 4, 5, 6]; 18 | const[one, two, ...rest] = numberss; 19 | console.log(one); 20 | console.log(rest); -------------------------------------------------------------------------------- /JS-Basic/variable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /JS-Basic/variable.js: -------------------------------------------------------------------------------- 1 | let name = "Ruhul"; 2 | 3 | console.log(name); 4 | 5 | const ruhulID = 708; 6 | console.log(ruhulID); 7 | 8 | let undefinedValue; 9 | console.log(undefinedValue); // Output: undefined 10 | 11 | 12 | let num = 42; 13 | 14 | 15 | let str = 'Hello, World!'; 16 | console.log(str); 17 | 18 | let isTrue = true; 19 | let isFalse = false; 20 | console.log(isTrue); 21 | 22 | let nullValue = null; 23 | console.log(nullValue); 24 | 25 | const mySymbol = Symbol('description'); 26 | console.log(mySymbol); -------------------------------------------------------------------------------- /React-Basic/dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /React-Basic/dom/virtual.js: -------------------------------------------------------------------------------- 1 | let array = []; 2 | increment = 0; 3 | let container = document.querySelector('.container'); 4 | 5 | //fast 6 | while (increment < 10000) { 7 | array.push(++increment); 8 | 9 | } 10 | // batch update 11 | container.innerHTML = array.join(' '); 12 | 13 | //slow 14 | 15 | while (increment < 10000) { 16 | 17 | // container.innerHTML += array.join(' '+ increment++); 18 | 19 | } 20 | -------------------------------------------------------------------------------- /React-Basic/helloworld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Hello World!

10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /React-Basic/helloworld/react.js: -------------------------------------------------------------------------------- 1 | import React, { Children } from "react"; 2 | 3 | // const element = React.createElement('h1', nul, 'hell'); 4 | // console.log(element); 5 | 6 | // { 7 | // type: 'h1', 8 | // props: { 9 | // className: 'heading' 10 | // Children: 'hello world' 11 | // } 12 | // } -------------------------------------------------------------------------------- /React-Project/form-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /React-Project/form-app/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /React-Project/form-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "form-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.3.1", 10 | "react-dom": "^18.3.1", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-Project/form-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdruhulkuddus/JavaScript-Learning/c3ba2e02ca2cae674ff0893fc11ad3b94f96a4e5/React-Project/form-app/public/favicon.ico -------------------------------------------------------------------------------- /React-Project/form-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /React-Project/form-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdruhulkuddus/JavaScript-Learning/c3ba2e02ca2cae674ff0893fc11ad3b94f96a4e5/React-Project/form-app/public/logo192.png -------------------------------------------------------------------------------- /React-Project/form-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdruhulkuddus/JavaScript-Learning/c3ba2e02ca2cae674ff0893fc11ad3b94f96a4e5/React-Project/form-app/public/logo512.png -------------------------------------------------------------------------------- /React-Project/form-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /React-Project/form-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-Project/form-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-Project/form-app/src/App.js: -------------------------------------------------------------------------------- 1 | class App extends Component { 2 | render() { 3 | const characters = [ 4 | { 5 | name: 'Charlie', 6 | job: 'Janitor', 7 | }, 8 | { 9 | name: 'Mac', 10 | job: 'Bouncer', 11 | }, 12 | { 13 | name: 'Dee', 14 | job: 'Aspring actress', 15 | }, 16 | { 17 | name: 'Dennis', 18 | job: 'Bartender', 19 | }, 20 | ] 21 | 22 | return ( 23 |
24 | 25 | 26 | ) 27 | } 28 | } -------------------------------------------------------------------------------- /React-Project/form-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /React-Project/form-app/src/Table.css: -------------------------------------------------------------------------------- 1 | .Table{ 2 | margin: auto; 3 | text-align: center; 4 | } 5 | 6 | table{ 7 | margin: auto; 8 | padding: 5px; 9 | /* background-color: darkcyan; */ 10 | } 11 | table tr td{ 12 | padding: 10px; 13 | margin-top: 15px; 14 | border-bottom: 2px solid #cccc; 15 | } -------------------------------------------------------------------------------- /React-Project/form-app/src/Table.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const TableHeader = () => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | 15 | const TableBody = props => { 16 | const rows = props.characterData.map((row, index) => { 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | }); 25 | 26 | return {rows}; 27 | } 28 | 29 | const Table = (props) => { 30 | const { characterData, removeCharacter } = props; 31 | return ( 32 |
NameJobRemove
{row.name}{row.job}
33 | 34 | 35 |
36 | ); 37 | } 38 | 39 | export default Table; -------------------------------------------------------------------------------- /React-Project/form-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-Project/form-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( , document.getElementById('root')); 8 | 9 | 10 | // If you want to start measuring performance in your app, pass a function 11 | // to log results (for example: reportWebVitals(console.log)) 12 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 13 | reportWebVitals(); 14 | -------------------------------------------------------------------------------- /React-Project/form-app/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /React-Project/form-app/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /React-Project/form-app/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /React-handsOn/my-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /React-handsOn/my-app/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /React-handsOn/my-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.3.1", 10 | "react-dom": "^18.3.1", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-handsOn/my-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdruhulkuddus/JavaScript-Learning/c3ba2e02ca2cae674ff0893fc11ad3b94f96a4e5/React-handsOn/my-app/public/favicon.ico -------------------------------------------------------------------------------- /React-handsOn/my-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /React-handsOn/my-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdruhulkuddus/JavaScript-Learning/c3ba2e02ca2cae674ff0893fc11ad3b94f96a4e5/React-handsOn/my-app/public/logo192.png -------------------------------------------------------------------------------- /React-handsOn/my-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdruhulkuddus/JavaScript-Learning/c3ba2e02ca2cae674ff0893fc11ad3b94f96a4e5/React-handsOn/my-app/public/logo512.png -------------------------------------------------------------------------------- /React-handsOn/my-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /React-handsOn/my-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /React-handsOn/my-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /React-handsOn/my-app/src/App.js: -------------------------------------------------------------------------------- 1 | // import logo from './logo.svg'; 2 | import "./App.css"; 3 | import React from "react"; 4 | import FORM from "./component/FORM/Form"; 5 | // function App() { 6 | // return ( 7 | //
8 | //
9 | // logo 10 | //

11 | // Now starting react, i'm comming DOM Bhai... Khela hobe.. 12 | //

13 | // 19 | // Learn React 20 | // 21 | //
22 | //
23 | // ); 24 | // } 25 | 26 | // export default App; 27 | 28 | import Clock from "./component/Clock"; 29 | 30 | function App() { 31 | return ( 32 |
33 | 34 | 35 | {/* form */} 36 |
37 |
38 | ); 39 | } 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /React-handsOn/my-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /React-handsOn/my-app/src/component/Clock.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class Clock extends React.Component{ 4 | state ={ date: new Date()}; 5 | 6 | componentDidMount(){ 7 | this.clocktimer = setInterval(() => this.tick(), 1000); 8 | } 9 | componentWillUnmount(){ 10 | clearInterval(this.clocktimer) 11 | } 12 | tick(){ 13 | this.setState({ 14 | date: new Date() 15 | }); 16 | } 17 | render(){ 18 | return( 19 |

20 | Time - {this.state.date.toLocaleTimeString(this.props.locale) } 21 |

22 | ); 23 | } 24 | } 25 | 26 | 27 | export default Clock; 28 | 29 | 30 | 31 | // element render 32 | 33 | // const index = 0; 34 | // setInterval(() => { 35 | // const element = ( 36 | //

37 | // Today - {new Date().toLocaleDateString() }

38 | // Time - {new Date().toLocaleTimeString() } 39 | //

40 | // ); 41 | // ReactDOM.render(element, document.getElementById('root')); 42 | // }, 1*1000); 43 | 44 | //componet render 45 | 46 | // class Clock extends React.Component{ 47 | // render(){ 48 | // return( 49 | //

50 | // Time - {new Date().toLocaleTimeString(this.props.locale) } 51 | //

52 | // ); 53 | // } 54 | // } 55 | 56 | 57 | // export default Clock; -------------------------------------------------------------------------------- /React-handsOn/my-app/src/component/FORM/Form.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react' 2 | import style from "./form.css"; 3 | 4 | 5 | export default function FORM() { 6 | 7 | const [name, setName] = useState(""); 8 | const [email, setEmail] = useState(""); 9 | 10 | const handleNameChange = (e)=>{ 11 | setName(e.target.value); 12 | } 13 | const handleEmailChange = (e)=>{ 14 | setEmail(e.target.value); 15 | } 16 | const handleSubmit = (e)=>{ 17 | console.log("Form is submitted"); 18 | console.log(name, email); 19 | e.preventDefault(); 20 | } 21 | 22 | 23 | return ( 24 |
25 |

Register

26 | 27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 |
38 | 39 |
40 | ) 41 | } 42 | -------------------------------------------------------------------------------- /React-handsOn/my-app/src/component/FORM/form.css: -------------------------------------------------------------------------------- 1 | /* .formGroup{ 2 | margin-bottom: 50px; 3 | color: #f00505; 4 | } */ 5 | button { 6 | padding: 5px; 7 | border: none; 8 | border-radius: 5px; 9 | background: green; 10 | color: white; 11 | margin: 10px 0 0 100px; 12 | font-size: 1rem; 13 | } 14 | 15 | input { 16 | margin: 5px; 17 | font-size: 1rem; 18 | padding: 5px; 19 | width: 250px; 20 | } -------------------------------------------------------------------------------- /React-handsOn/my-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /React-handsOn/my-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import reportWebVitals from './reportWebVitals'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | // If you want to start measuring performance in your app, pass a function 14 | // to log results (for example: reportWebVitals(console.log)) 15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 16 | reportWebVitals(); 17 | -------------------------------------------------------------------------------- /React-handsOn/my-app/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /React-handsOn/my-app/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /React-handsOn/my-app/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /es6/Destructuring.js: -------------------------------------------------------------------------------- 1 | const objct = { 2 | name : '', 3 | role : '', 4 | age : '' 5 | } 6 | 7 | // const name = objct.name; 8 | // const role = objct.role; 9 | 10 | const {name, role} = objct; -------------------------------------------------------------------------------- /es6/arrowFn.js: -------------------------------------------------------------------------------- 1 | // const square = function(number){ 2 | // return number * number; 3 | // }; 4 | 5 | const square = number => number * number; 6 | 7 | console.log(square(5)); 8 | 9 | const jobs = [ 10 | { 11 | id:1, isActive: true 12 | }, 13 | {id:2, isActive: true}, 14 | { 15 | id:3, isActive: false 16 | } 17 | ]; 18 | const activeJobs = jobs.filter(function (job){ return job.isActive; }); 19 | const jobsActive = jobs.filter( job => {return job.isActive}) 20 | console.log(jobsActive); 21 | -------------------------------------------------------------------------------- /es6/arrowThis.js: -------------------------------------------------------------------------------- 1 | // arrow function dont rebind this keyword 2 | 3 | // const person = { 4 | // talk(){ 5 | // var self = this; 6 | // setTimeout(() => { 7 | // console.log("this", this); 8 | // }, 1000); 9 | 10 | // } 11 | // } 12 | // person.talk(); 13 | 14 | // function Person() { 15 | // this.age = 0; 16 | 17 | // setInterval(() => { 18 | // this.age++; // `this` correctly refers to the `Person` instance 19 | // console.log(this.age); // Correctly increments age 20 | // }, 1000); 21 | // } 22 | 23 | // let p = new Person(); 24 | 25 | -------------------------------------------------------------------------------- /es6/class.js: -------------------------------------------------------------------------------- 1 | class Person{ 2 | constructor(name){ 3 | this.name = name; 4 | } 5 | 6 | walk(){ 7 | console.log("walk"); 8 | } 9 | } 10 | 11 | -------------------------------------------------------------------------------- /es6/component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /es6/component/index.js: -------------------------------------------------------------------------------- 1 | import { Teacher } from "./teacher"; 2 | 3 | const teac = new Teacher("ruhul", "MSc"); 4 | teac.display(); -------------------------------------------------------------------------------- /es6/component/person.js: -------------------------------------------------------------------------------- 1 | export class Person{ 2 | constructor(name){ 3 | this.name = name; 4 | } 5 | 6 | walk(){ 7 | console.log("walk"); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /es6/component/teacher.js: -------------------------------------------------------------------------------- 1 | import { Person } from "./person"; 2 | 3 | export class Teacher extends Person { 4 | constructor(name, degree) { 5 | super(name); 6 | this.degree = degree; 7 | } 8 | display(){ 9 | console.log(this.name, this.degree); 10 | } 11 | 12 | tech(){ 13 | console.log("teach"); 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /es6/inheritance.js: -------------------------------------------------------------------------------- 1 | class Person { 2 | constructor(name) { 3 | this.name = name; 4 | } 5 | 6 | walk() { 7 | console.log("walk"); 8 | } 9 | } 10 | 11 | class Teacher extends Person { 12 | constructor(name, degree) { 13 | super(name); 14 | this.degree = degree; 15 | } 16 | display(){ 17 | console.log(this.name, this.degree); 18 | } 19 | 20 | tech(){ 21 | console.log("teach"); 22 | } 23 | } 24 | 25 | const person = new Person('mosh'); 26 | person.walk(); 27 | const teac = new Teacher("ruhul", "MSc"); 28 | teac.display(); -------------------------------------------------------------------------------- /es6/map.js: -------------------------------------------------------------------------------- 1 | const colors = ['red', 'green', 'yellow']; 2 | 3 | const see = colors.map(color => `
  • ${color}
    • `); 4 | 5 | console.log(see); -------------------------------------------------------------------------------- /es6/object.js: -------------------------------------------------------------------------------- 1 | const person = { 2 | name: 'ruhul', 3 | job: { 4 | function(){} 5 | }, 6 | talk(){} 7 | }; 8 | 9 | person['name'] = ''; 10 | const targetMember = 'name'; 11 | // person.job(); 12 | person[targetMember.value] = 'tot'; 13 | console.log(person.job); -------------------------------------------------------------------------------- /es6/run.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /es6/spreadOperator.js: -------------------------------------------------------------------------------- 1 | const array1 = [1,2,3]; 2 | const array2 = [1,2,3]; 3 | 4 | // const combined1 = array1.concat(array2); 5 | // const combined = [...array1, ...array2]; 6 | // const combined = [...array1, 'b', ...array2, 'c']; 7 | // samely can add object 8 | 9 | // console.log(combined); 10 | 11 | const obj1 = { 12 | location : 'feni', 13 | home : 'par' 14 | } 15 | 16 | const obj2 = { 17 | location : 'dom', 18 | home : 'par' 19 | } 20 | 21 | const combine = {...obj1, ...obj2, degree : 'cse'}; 22 | console.log(combine); -------------------------------------------------------------------------------- /es6/this.js: -------------------------------------------------------------------------------- 1 | const person = { 2 | name: 'ruhul', 3 | talk(){ 4 | console.log(this) 5 | } 6 | }; 7 | 8 | person.talk(); 9 | const talk = person.talk; //reference 10 | talk(); -------------------------------------------------------------------------------- /es6/thisBind.js: -------------------------------------------------------------------------------- 1 | const person = { 2 | name: 'ruhul', 3 | talk(){ 4 | console.log(this) 5 | } 6 | }; 7 | 8 | person.talk(); 9 | const talk = person.talk.bind(person); //reference 10 | talk(); -------------------------------------------------------------------------------- /es6/varLetConst.js: -------------------------------------------------------------------------------- 1 | // var -> function 2 | // let -> block 3 | // const -> blcok 4 | 5 | function sayHello(){ 6 | for(let i = 0; i < 5; i++){ 7 | console.log(i); 8 | } 9 | } 10 | sayHello(); 11 | 12 | const x = 10; 13 | x = 1; -------------------------------------------------------------------------------- /incrementApp-Vanila-React/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap demo 7 | 8 | 9 | 10 |
    11 |
    12 |

    13 | 14 |
    15 |
    16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /incrementApp-Vanila-React/react.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap demo 7 | 8 | 9 | 10 |
    11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /incrementApp-Vanila-React/react.js: -------------------------------------------------------------------------------- 1 | // console.log(React); 2 | // console.log(ReactDOM); 3 | 4 | const domContainer = document.querySelector("#root"); 5 | 6 | // const myElement = React.createElement("div", null, "Hellow wordl"); 7 | 8 | // ReactDOM.render(myElement, domContainer); 9 | 10 | 11 | // react do this for up line 12 | // let p = document.createElement("p"); 13 | // p.innerHTML = "hellow world"; 14 | // domContainer.appendChild(p); 15 | 16 | const Increment = () => { 17 | const [counter, setCounter] = React.useState(0); 18 | return ( 19 |
    20 |

    { counter}

    21 |
    22 | 23 |
    24 |
    25 | ); 26 | }; 27 | 28 | // ReactDOM.render(Increment(), domContainer); 29 | ReactDOM.render( 30 |
    31 | 32 | 33 | 34 |
    , 35 | 36 | domContainer); 37 | 38 | 39 | -------------------------------------------------------------------------------- /incrementApp-Vanila-React/vanila.js: -------------------------------------------------------------------------------- 1 | let number = 0; 2 | 3 | const display = document.querySelector("#display"); 4 | const button = document.querySelector("#button"); 5 | 6 | button.addEventListener("click", ()=>{ 7 | number++; 8 | display.textContent = number; 9 | }) -------------------------------------------------------------------------------- /jquery-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Todo List 7 | 8 | 9 | 10 | 11 |
    12 |

    Todo List

    13 | 14 | 15 |
      16 |
      17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /jquery-todo/jquery.js: -------------------------------------------------------------------------------- 1 | // Add event listener to the "Add Todo" button 2 | $("#addTodoBtn").on("click", addTodo); 3 | 4 | // Function to add a new todo item 5 | function addTodo() { 6 | // Get the trimmed value from the todo input field 7 | const todoText = $("#todoInput").val().trim(); 8 | 9 | // Check if the input is not empty 10 | if (todoText !== "") { 11 | // Create a new list item with span and buttons 12 | const listItem = $("
    • ").append( 13 | $("").text(todoText), 14 | $("
      ").addClass("buttons").append( 15 | $(" 282 | 283 | //For Loop 284 | for (var i = 0; i < 10; i++) { 285 | document.write(i + ": " + i*3 + "
      "); 286 | } 287 | var sum = 0; 288 | for (var i = 0; i < a.length; i++) { 289 | sum += a[i]; 290 | } // parsing an array 291 | html = ""; 292 | for (var i of custOrder) { 293 | html += "
    • " + i + "
      • "; 294 | } 295 | //While Loop 296 | var i = 1; // initialize 297 | while (i < 100) { // enters the cycle if statement is true 298 | i *= 2; // increment to avoid infinite loop 299 | document.write(i + ", "); // output 300 | } 301 | ///Do While Loop 302 | var i = 1; // initialize 303 | do { // enters cycle at least once 304 | i *= 2; // increment to avoid infinite loop 305 | document.write(i + ", "); // output 306 | } while (i < 100) // repeats cycle if statement is true at the end 307 | //Break 308 | for (var i = 0; i < 10; i++) { 309 | if (i == 5) { break; } // stops and exits the cycle 310 | document.write(i + ", "); // last output number is 4 311 | } 312 | //Continue 313 | for (var i = 0; i < 10; i++) { 314 | if (i == 5) { continue; } // skips the rest of the cycle 315 | document.write(i + ", "); // skips 5 316 | } 317 | 318 | //Arrays≡ 319 | var dogs = ["Bulldog", "Beagle", "Labrador"]; 320 | var dogs = new Array("Bulldog", "Beagle", "Labrador"); // declaration 321 | 322 | alert(dogs[1]); // access value at index, first item being [0] 323 | dogs[0] = "Bull Terier"; // change the first item 324 | 325 | for (var i = 0; i < dogs.length; i++) { // parsing with array.length 326 | console.log(dogs[i]); 327 | } 328 | 329 | //Methods 330 | dogs.toString(); // convert to string: results "Bulldog,Beagle,Labrador" 331 | dogs.join(" * "); // join: "Bulldog * Beagle * Labrador" 332 | dogs.pop(); // remove last element 333 | dogs.push("Chihuahua"); // add new element to the end 334 | dogs[dogs.length] = "Chihuahua"; // the same as push 335 | dogs.shift(); // remove first element 336 | dogs.unshift("Chihuahua"); // add new element to the beginning 337 | delete dogs[0]; // change element to undefined (not recommended) 338 | dogs.splice(2, 0, "Pug", "Boxer"); // add elements (where, how many to remove, element list) 339 | var animals = dogs.concat(cats,birds); // join two arrays (dogs followed by cats and birds) 340 | dogs.slice(1,4); // elements from [1] to [4-1] 341 | dogs.sort(); // sort string alphabetically 342 | dogs.reverse(); // sort string in descending order 343 | x.sort(function(a, b){return a - b}); // numeric sort 344 | x.sort(function(a, b){return b - a}); // numeric descending sort 345 | highest = x[0]; // first item in sorted array is the lowest (or highest) value 346 | x.sort(function(a, b){return 0.5 - Math.random()}); // random order sort 347 | /*concat, copyWithin, every, fill, filter, find, findIndex, forEach, indexOf, isArray, join, lastIndexOf, map, pop, push, reduce, reduceRight, reverse, shift, slice, some, sort, splice, toString, unshift, valueOf */ 348 | 349 | //JSON 350 | var str = '{"names":[' + // crate JSON object 351 | '{"first":"Hakuna","lastN":"Matata" },' + 352 | '{"first":"Jane","lastN":"Doe" },' + 353 | '{"first":"Air","last":"Jordan" }]}'; 354 | obj = JSON.parse(str); // parse 355 | document.write(obj.names[1].first); // access 356 | 357 | //Send 358 | var myObj = { "name":"Jane", "age":18, "city":"Chicago" }; // create object 359 | var myJSON = JSON.stringify(myObj); // stringify 360 | window.location = "demo.php?x=" + myJSON; 361 | 362 | //Storing and retrieving 363 | myObj = { "name":"Jane", "age":18, "city":"Chicago" }; 364 | myJSON = JSON.stringify(myObj); // storing data 365 | localStorage.setItem("testJSON", myJSON); 366 | text = localStorage.getItem("testJSON"); // retrieving data 367 | obj = JSON.parse(text); 368 | document.write(obj.name); 369 | 370 | //PromisesÞ 371 | function sum (a, b) { 372 | return Promise(function (resolve, reject) { 373 | setTimeout(function () { // send the response after 1 second 374 | if (typeof a !== "number" || typeof b !== "number") { // testing input types 375 | return reject(new TypeError("Inputs must be numbers")); 376 | } 377 | resolve(a + b); 378 | }, 1000); 379 | }); 380 | } 381 | var myPromise = sum(10, 5); 382 | myPromsise.then(function (result) { 383 | document.write(" 10 + 5: ", result); 384 | return sum(null, "foo"); // Invalid data and return another promise 385 | }).then(function () { // Won't be called because of the error 386 | }).catch(function (err) { // The catch handler is called instead, after another second 387 | console.error(err); // => Please provide two numbers to sum. 388 | }); 389 | 390 | /* 391 | States 392 | pending, fulfilled, rejected 393 | Properties 394 | Promise.length, Promise.prototype 395 | Methods 396 | Promise.all(iterable), Promise.race(iterable), Promise.reject(reason), Promise.resolve(value) 397 | */ 398 | 399 | /* 400 | Mouse 401 | onclick, oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseover, onmouseout, onmouseup 402 | Keyboard 403 | onkeydown, onkeypress, onkeyup 404 | Frame 405 | onabort, onbeforeunload, onerror, onhashchange, onload, onpageshow, onpagehide, onresize, onscroll, onunload 406 | Form 407 | onblur, onchange, onfocus, onfocusin, onfocusout, oninput, oninvalid, onreset, onsearch, onselect, onsubmit 408 | Drag 409 | ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop 410 | Clipboard 411 | oncopy, oncut, onpaste 412 | Media 413 | onabort, oncanplay, oncanplaythrough, ondurationchange, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting 414 | Animation 415 | animationend, animationiteration, animationstart 416 | Miscellaneous 417 | transitionend, onmessage, onmousewheel, ononline, onoffline, onpopstate, onshow, onstorage, ontoggle, onwheel, ontouchcancel, ontouchend, ontouchmove, ontouchstart 418 | 419 | */ -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "JavaScript-Learning", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | -------------------------------------------------------------------------------- /react-practice/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react-practice/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /react-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-practice", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "bootstrap": "^5.3.3", 10 | "formik": "^2.4.6", 11 | "react": "^18.3.1", 12 | "react-bootstrap": "^2.10.2", 13 | "react-dom": "^18.3.1", 14 | "react-icons": "^5.2.1", 15 | "react-loader-spinner": "^6.1.6", 16 | "react-router-dom": "^6.23.1", 17 | "react-scripts": "5.0.1", 18 | "react-toastify": "^10.0.5", 19 | "uuid": "^9.0.1", 20 | "web-vitals": "^2.1.4", 21 | "yup": "^1.4.0" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /react-practice/public/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdruhulkuddus/JavaScript-Learning/c3ba2e02ca2cae674ff0893fc11ad3b94f96a4e5/react-practice/public/download.png -------------------------------------------------------------------------------- /react-practice/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Practice 7 | 8 | 9 | 10 |
      11 | 12 | 13 | -------------------------------------------------------------------------------- /react-practice/public/style.css: -------------------------------------------------------------------------------- 1 | 2 | /* .pStyle { 3 | color: "green"; 4 | text-align: center; 5 | } 6 | 7 | .largeFont{ 8 | font-size: 40px; 9 | } */ 10 | 11 | .card { 12 | /* Add shadows to create the "card" effect */ 13 | box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2); 14 | transition: 0.3s; 15 | border: 1px solid #ccc; 16 | margin-top: 5px; 17 | } 18 | 19 | /* On mouse-over, add a deeper shadow */ 20 | .card:hover { 21 | box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 22 | } 23 | 24 | /* Add some padding inside the card container */ 25 | .container { 26 | padding: 2px 16px; 27 | } -------------------------------------------------------------------------------- /react-practice/src/App.js: -------------------------------------------------------------------------------- 1 | // // It cannot render multiple components directly, so wrap them in a single parent element like a
      or a React fragment
      2 | //
      3 | // 4 | // 5 | // 6 | // 7 | //
      8 | 9 | import React from "react"; 10 | // import Card from "./components/Card"; 11 | // import Data from "./data.json"; 12 | // import Card2 from "./components/Card2"; 13 | 14 | 15 | // import ReactBootstrap from "./components/ReactBootstrap"; 16 | 17 | // import State from "./components/State"; 18 | // import CONDITIONAL_RENDERING from "./components/CONDITIONAL_RENDERING/index"; 19 | // import EVENT_HANDLER from "./components/EVENT_HANDLER/index"; 20 | // import EVENT_HANDLER2 from "./components/EVENT_HANDLER/binding"; 21 | 22 | // import HooksUseState from "./components/HooksUseState"; 23 | // import EventBubbling from "./components/EventBubbling"; 24 | // import FORM from "./components/FORM/Form" 25 | // import FORM2 from "./components/FORM/useStateObj" 26 | 27 | // import Child from "./components/STATE_LIFTING/Child"; 28 | // import TODOHOME from "./components/STATE_LIFTING/TODOAPP/Home"; 29 | import SignUp from "./components/FORM_VALIDATE/SignUp"; 30 | import Toggle from "./components/Toggle"; 31 | import FAQs from "./components/FAQ/FAQs"; 32 | import UseEffectExam from "./components/HOOKS/useEffect/UseEffectExam"; 33 | import DataFetch from "./components/HOOKS/useEffect/DataFetch"; 34 | import CusDataFetch from "./components/CustomHooks/DataFetch"; 35 | import ToastInTODO from "./components/ToastMessage/ToastInTODO"; 36 | import HomeCountryAPP from "./components/CountryApp/HomeCountryAPP"; 37 | import DynamicStyle from "./components/DynamicStyle/DynamicStyle"; 38 | import PropTyps from "./components/PropTypes/PropTyps"; 39 | import LifeCycle from "./components/LifeCycle/LifeCycle"; 40 | import RefExam from "./components/RefExample/RefExam"; 41 | import UseRefExam from "./components/HOOKS/UseRefExamp/UseRefExam"; 42 | import UseReducer from "./components/HOOKS/UseReducer/UseReducer"; 43 | import Componet1 from "./components/PropDrilling/Componet1"; 44 | import Routing from "./components/Routing/Routing"; 45 | import PagiHOME from "./components/Pagination/PagiHOME"; 46 | 47 | // let items = []; 48 | // for(let i = 0; i < Data.length; i++){ 49 | // items.push(); 50 | // } 51 | // convert to map 52 | // items = Data.map((item) => ); 53 | 54 | // const users = [ 55 | // { 56 | // fullName: "Ruhul", 57 | // age: "28", 58 | // mobiles: [ 59 | // {home: "545640320"}, 60 | // {office: "4654654"} 61 | // ] 62 | // }, 63 | // { 64 | // fullName: "Easin", 65 | // age: "4", 66 | // mobiles: [ 67 | // {home: "4"}, 68 | // {office: "86787768"} 69 | // ] 70 | // }, 71 | // { 72 | // fullName: "Kuddus", 73 | // age: "5", 74 | // mobiles: [ 75 | // {home: "224"}, 76 | // {office: "54453"} 77 | // ], 78 | // }, 79 | // ]; 80 | 81 | function App() { 82 | 83 | // STATE_LIFTING 84 | // const data = "i am from parent data (App)"; 85 | // const handleChildData = (childData) =>{ 86 | // console.log("App : " + childData); 87 | // } 88 | return( 89 |
      90 | {/*

      Profiles

      */} 91 | {/* {items} */} 92 | {/* direcet mapping */} 93 | {/* {Data.map((item, index) => )} */} 94 | {/* 95 | */} 96 | 97 | {/* {users.map((user, index) => ( 98 |
      99 |

      Name: {user.fullName}

      100 |

      Age: {user.age}

      101 |
      102 | { 103 | user.mobiles.map((phone, index) => 104 |
      105 | {phone.home &&

      home: {phone.home}

      } 106 | {phone.office &&

      office: {phone.office}

      } 107 |
      108 | ) 109 | } 110 |
      111 |
      112 | ))} 113 | 114 | */} 115 | 116 | 117 | {/* Bootstrap */} 118 | {/* 119 | 120 | */} 121 | 122 | {/* state */} 123 | {/* */} 124 | 125 | {/* CONDITIONAL_RENDERING */} 126 | {/* */} 127 | 128 | {/* event handling */} 129 | {/* */} 130 | 131 | {/* binding */} 132 | {/* */} 133 | 134 | {/* useState Hooks */} 135 | {/* */} 136 | 137 | {/*
      */} 138 | {/* */} 139 | 140 | {/* STATE_LIFTING- child to parent props */} 141 | {/* */} 142 | {/* */} 143 | 144 | 145 | {/* form validation by formik */} 146 | {/* */} 147 | 148 | {/* */} 149 | {/* */} 150 | 151 | {/* */} 152 | {/* */} 153 | 154 | {/* Custorm hooks */} 155 | {/* */} 156 | 157 | {/* toast message */} 158 | {/* */} 159 | 160 | {/* project */} 161 | {/* coutryAPP */} 162 | {/* */} 163 | 164 | {/* */} 165 | {/* */} 166 | {/* */} 167 | {/* */} 168 | 169 | {/* */} 170 | {/* */} 171 | 172 | {/* */} 173 | {/* */} 174 | 175 | {/* pagination */} 176 | 177 |
      178 | ); 179 | 180 | } 181 | 182 | export default App; 183 | -------------------------------------------------------------------------------- /react-practice/src/components/CONDITIONAL_RENDERING/HomePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function HomePage() { 4 | return ( 5 |
      6 |

      Home Page

      7 |
      8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /react-practice/src/components/CONDITIONAL_RENDERING/LoginPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function LoginPage() { 4 | return ( 5 |
      6 |

      Login Page

      7 |
      8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /react-practice/src/components/CONDITIONAL_RENDERING/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import LoginPage from './LoginPage' 3 | import HomePage from './HomePage' 4 | 5 | class CONDITIONAL_RENDERING extends Component { 6 | 7 | constructor(props) { 8 | super(props) 9 | 10 | this.state = { 11 | isLoggedIn : true 12 | } 13 | } 14 | 15 | 16 | render() { 17 | 18 | const {isLoggedIn} = this.state; 19 | let element; 20 | 21 | // if(isLoggedIn){ 22 | // element = 23 | // }else{ 24 | // element = 25 | // } 26 | 27 | // element = isLoggedIn ? : ; 28 | 29 | return ( 30 |
      31 | {/* {element} */} 32 | {/* {isLoggedIn ? : } */} 33 | 34 | {/* short circuit */} 35 | {isLoggedIn && } 36 |
      37 | ); 38 | } 39 | } 40 | 41 | 42 | export default CONDITIONAL_RENDERING -------------------------------------------------------------------------------- /react-practice/src/components/Card.js: -------------------------------------------------------------------------------- 1 | // functional component 2 | 3 | function Card(props){ 4 | 5 | const{titleText, description} = props; // destructuring 6 | 7 | return ( 8 |
      9 |
      10 |

      {titleText}

      11 |

      {description}

      12 |
      13 |
      14 | ); 15 | } 16 | 17 | export default Card; -------------------------------------------------------------------------------- /react-practice/src/components/Card2.js: -------------------------------------------------------------------------------- 1 | // class component 2 | 3 | import React, {Component} from "react"; 4 | 5 | class Card2 extends Component{ 6 | render(){ 7 | return( 8 |

      {this.props.name}

      9 | ); 10 | } 11 | } 12 | 13 | export default Card2; -------------------------------------------------------------------------------- /react-practice/src/components/Card3.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | export default class Card3 extends Component { 4 | render() { 5 | return ( 6 |
      7 | 8 |
      9 | ) 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /react-practice/src/components/CountryApp/Countries.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { v4 as uuidv4 } from "uuid"; 3 | import Country from "./Country"; 4 | import { Container, Row, Col, Button, Form } from "react-bootstrap"; 5 | 6 | const Countries = (props) => { 7 | return ( 8 |
      9 | {/* */} 10 | 11 | 12 | {props.countries.map((country) => { 13 | const countryNew = { country, id: uuidv4() }; 14 | 15 | return ( 16 | 17 | 22 | 23 | ); 24 | })} 25 | 26 | 27 |
      28 | ); 29 | }; 30 | 31 | export default Countries; 32 | -------------------------------------------------------------------------------- /react-practice/src/components/CountryApp/Country.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Card, Button, Row, Col, CardGroup, Container } from "react-bootstrap"; 3 | const Country = (props) => { 4 | const { country } = props; 5 | const { name, flags, capital, population, area } = country; 6 | 7 | const handleRemoveCountry = (countryName)=>{ 8 | props.onRemoveCountry(countryName); 9 | } 10 | 11 | return ( 12 | 13 | 14 | 15 | 16 | Name: {name.common} 17 | 18 | Official: {name.official} 19 | 20 | 21 |
      Population: {population}
      22 |
      Capital: {capital}
      23 |
      Area: {area}
      24 |       25 | 26 | 29 |       30 |       31 | 32 | ); 33 | }; 34 | 35 | export default Country; 36 | -------------------------------------------------------------------------------- /react-practice/src/components/CountryApp/HomeCountryAPP.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Countries from "./Countries"; 3 | import Search from "./Search"; 4 | import { 5 | Button, 6 | Container, 7 | Form, 8 | Nav, 9 | Navbar, 10 | NavDropdown, 11 | } from "react-bootstrap"; 12 | import { MdOutlineLightMode } from "react-icons/md"; 13 | import { MdOutlineDarkMode } from "react-icons/md"; 14 | import "./Style.css"; 15 | 16 | const url = `https://restcountries.com/v3.1/all`; 17 | 18 | const HomeCountryAPP = () => { 19 | const [isLoading, setIsLoading] = useState(true); 20 | const [error, setError] = useState(null); 21 | const [countries, setCountries] = useState([]); 22 | const [filteredCountries, setFilteredCountries] = useState(countries); 23 | 24 | const current_theme = localStorage.getItem("current_theme"); 25 | const [theme, setTheme] = useState(current_theme ? current_theme : "light"); 26 | 27 | useEffect(() => { 28 | localStorage.setItem("current_theme", theme); 29 | }, [theme]); 30 | 31 | const toggle_mode = () => { 32 | theme === "light" ? setTheme("dark") : setTheme("light"); 33 | }; 34 | 35 | const fetchData = async (url) => { 36 | setIsLoading(true); 37 | 38 | try { 39 | // const response = await fetch(url); 40 | const response = await fetch(url); 41 | const data = await response.json(); 42 | setCountries(data); 43 | setFilteredCountries(data); 44 | setIsLoading(false); 45 | setError(null); 46 | // console.log(countries); 47 | } catch (error) { 48 | setIsLoading(false); 49 | setError(error); 50 | } 51 | }; 52 | 53 | useEffect(() => { 54 | fetchData(url); 55 | }, []); 56 | 57 | const handleRemoveCounntry = (name) => { 58 | const filtered = filteredCountries.filter( 59 | (country) => country.name.common !== name 60 | ); 61 | 62 | setFilteredCountries(filtered); 63 | // setCountries(filtered) 64 | // alert(name); 65 | // console.log(filteredCountries); 66 | }; 67 | 68 | const handleSearch = (searchValue) => { 69 | let value = searchValue.toLowerCase(); 70 | 71 | const newCountries = countries.filter((country) => { 72 | const countryName = country.name.common.toLowerCase(); 73 | return countryName.startsWith(value); 74 | }); 75 | // console.log(newCountries); 76 | setFilteredCountries(newCountries); 77 | // setCountries(newCountries); 78 | }; 79 | 80 | return ( 81 |
      82 | {/*

      Courtrey app - {filteredCountries && filteredCountries.length}

      */} 83 | 84 | 85 | Courtrey Info 86 | 87 | 88 | 98 | 99 | {theme === "light" ? ( 100 |
      101 | 102 | Light Mode 103 |
      104 | ) : ( 105 |
      106 | 107 | Dark Mode 108 |
      109 | )} 110 |       111 | 112 | 113 |       114 |       115 |       116 | 117 | {isLoading &&

      Loading......

      } 118 | {error &&

      {error.message}

      } 119 | {countries && ( 120 | 125 | )} 126 |
      127 | ); 128 | }; 129 | 130 | export default HomeCountryAPP; 131 | -------------------------------------------------------------------------------- /react-practice/src/components/CountryApp/Search.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Container, Row, Col, Button, Form } from "react-bootstrap"; 3 | 4 | const Search = (props) => { 5 | const [searchText, setSearchText] = useState(""); 6 | 7 | const handleChange = (e) => { 8 | setSearchText(e.target.value); 9 | // alert(searchText); 10 | }; 11 | 12 | useEffect(() => { 13 | props.onSearch(searchText); 14 | // alert(searchText) 15 | }, [searchText]); 16 | 17 | return ( 18 | 19 | 26 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | export default Search; 33 | 34 | //
      35 | // 36 | //
      -------------------------------------------------------------------------------- /react-practice/src/components/CountryApp/Style.css: -------------------------------------------------------------------------------- 1 | /* body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 4 | } */ 5 | .wrapper.light { 6 | background: #fff; 7 | color: #000; 8 | transition: background 0.5s, color 0.5s; 9 | } 10 | 11 | .wrapper.dark { 12 | background: #222; 13 | color: #fff; 14 | transition: background 0.5s, color 0.5s; 15 | } 16 | 17 | /* 18 | 19 | .navbar { 20 | background: rgb(97, 96, 96); 21 | transition: background 0.5s, color 0.5s; 22 | } 23 | 24 | .wrapper.light .navbar { 25 | background: #fff; 26 | color: #000; 27 | } 28 | 29 | .wrapper.dark .navbar { 30 | background: #222; 31 | color: #fff; 32 | } 33 | 34 | */ 35 | 36 | -------------------------------------------------------------------------------- /react-practice/src/components/CustomHooks/DataFetch.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import useFetch from "./useFetch"; 3 | 4 | 5 | const CusDataFetch = () => { 6 | 7 | const {data, isLoading, error} = useFetch("https://jsonplaceholder.typicode.com/todos"); 8 | 9 | 10 | const loadingMessage =

      Todo is Loading..........

      ; 11 | 12 | const todoElement = 13 | data && 14 | data.map((todo) => { 15 | return

      {todo.title}

      ; 16 | }); 17 | 18 | return ( 19 |
      20 |

      DataFetch- Todos

      21 | {error &&

      {error}

      } 22 | 23 | { 24 | isLoading && loadingMessage 25 | } 26 | {todoElement} 27 |
      28 | ); 29 | }; 30 | 31 | export default CusDataFetch; 32 | -------------------------------------------------------------------------------- /react-practice/src/components/CustomHooks/useFetch.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | const useFetch = (url) => { 4 | const [data, setData] = useState(null); 5 | const [isLoading, setIsLoading] = useState(true); 6 | const [error, setError] = useState(null); 7 | 8 | useEffect(() => { 9 | fetch(url) 10 | .then((res) => { 11 | if (!res.ok) { 12 | throw Error("Fetching is not successful"); 13 | } else { 14 | return res.json(); 15 | } 16 | }) 17 | .then((data) => { 18 | setData(data); 19 | setIsLoading(false); 20 | setError(null); 21 | }) 22 | .catch((error) => { 23 | setError(error.message); 24 | setIsLoading(false); 25 | }); 26 | }, [url]); 27 | return {data, isLoading, error} 28 | }; 29 | 30 | export default useFetch; 31 | -------------------------------------------------------------------------------- /react-practice/src/components/DynamicStyle/DynamicStyle.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import "./style.css"; 3 | 4 | export default function DynamicStyle() { 5 | const [name, setName] = useState(""); 6 | const [validInput, setValidInput] = useState(true); 7 | 8 | const handleChange = (e) => { 9 | setName(e.target.value); 10 | }; 11 | 12 | useEffect(() => { 13 | if (name.length < 2) { 14 | setValidInput(false); 15 | } else { 16 | setValidInput(true); 17 | } 18 | }, [name]); 19 | 20 | return ( 21 |
      22 | 30 |
      31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /react-practice/src/components/DynamicStyle/style.css: -------------------------------------------------------------------------------- 1 | .container input{ 2 | width: 400px; 3 | margin-top: 100px; 4 | 5 | } 6 | 7 | 8 | .valid{ 9 | background-color: green; 10 | } 11 | 12 | .invalid{ 13 | background-color: red; 14 | } -------------------------------------------------------------------------------- /react-practice/src/components/EVENT_HANDLER/binding.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Button from 'react-bootstrap/Button'; 3 | import Card from 'react-bootstrap/Card'; 4 | 5 | export default class EVENT_HANDLER2 extends Component { 6 | 7 | constructor(props) { 8 | super(props) 9 | 10 | this.state = { 11 | count : 0, 12 | } 13 | } 14 | 15 | 16 | handleIncrement (){ 17 | this.setState({ 18 | count: this.state.count + 1 19 | }) 20 | } 21 | 22 | 23 | 24 | render() { 25 | 26 | const {count} = this.state; 27 | 28 | return ( 29 |
      30 |

      Count : {count}

      31 | 32 |
      33 | ) 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /react-practice/src/components/EVENT_HANDLER/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class EVENT_HANDLER extends Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | changeValue: "", 9 | }; 10 | } 11 | 12 | handleOnChange = (e) => { 13 | this.setState( 14 | { 15 | changeValue: e.target.value, 16 | }, 17 | () => { 18 | console.log(this.state.changeValue); 19 | } 20 | ); 21 | }; 22 | 23 | render() { 24 | return ( 25 |
      26 | 27 |

      {this.state.changeValue}

      28 |
      29 | ); 30 | } 31 | } 32 | 33 | export default EVENT_HANDLER; 34 | -------------------------------------------------------------------------------- /react-practice/src/components/EventBubbling.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Button from "react-bootstrap/Button"; 3 | 4 | export default function EventBubbling() { 5 | const [count, setCount] = useState(0); 6 | 7 | const handleChildClick = (event) =>{ 8 | event.stopPropagation(); // for avoid event bubbling 9 | console.log("Child event ", event); 10 | } 11 | 12 | const handleParentClick = (event) =>{ 13 | console.log("Parent event ", event); 14 | } 15 | 16 | 17 | 18 | return ( 19 |
      20 |

      Count : {count}

      21 | 22 |
      23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /react-practice/src/components/FAQ/FAQ.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import style from './faq.module.css' 3 | 4 | const FAQ = ({id, title, desc}) => { // destructuring 5 | const [toggle, setToggle] = useState(false); 6 | 7 | return ( 8 |
      9 |
      10 |

      {title}

      11 | 12 |
      13 | {toggle && 14 | ( 15 |

      {desc}

      16 | )} 17 |
      18 | ); 19 | }; 20 | 21 | export default FAQ; 22 | -------------------------------------------------------------------------------- /react-practice/src/components/FAQ/FAQs.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { faqsData } from "./data"; 3 | import FAQ from "./FAQ"; 4 | import style from "./faqs.module.css"; 5 | 6 | const FAQs = () => { 7 | // console.log(faqsData); 8 | const [faqs, setFaqs] = useState(faqsData); 9 | return ( 10 |
      11 |
      12 |

      FAQs

      13 | {/* */} 14 | {faqs.map((faq) => ( 15 | 16 | ))} 17 |
      18 |
      19 | ); 20 | }; 21 | 22 | export default FAQs; 23 | -------------------------------------------------------------------------------- /react-practice/src/components/FAQ/data.js: -------------------------------------------------------------------------------- 1 | export const faqsData = [ 2 | { 3 | id: 1, 4 | title: "How can we reach you?", 5 | desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.", 6 | }, 7 | { 8 | id: 2, 9 | title: "When are you available?", 10 | desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.", 11 | }, 12 | { 13 | id: 3, 14 | title: "What services do you offer?", 15 | desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.", 16 | }, 17 | { 18 | id: 4, 19 | title: "What is your pricing model?", 20 | desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.", 21 | }, 22 | { 23 | id: 5, 24 | title: "Do you offer customer support?", 25 | desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.", 26 | }, 27 | { 28 | id: 6, 29 | title: "Can I get a discount?", 30 | desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.", 31 | }, 32 | { 33 | id: 7, 34 | title: "What is your return policy?", 35 | desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.", 36 | }, 37 | { 38 | id: 8, 39 | title: "How do I track my order?", 40 | desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis dicta nihil neque molestias cupiditate obcaecati officiis magnam numquam iure doloremque.", 41 | }, 42 | ]; 43 | 44 | 45 | -------------------------------------------------------------------------------- /react-practice/src/components/FAQ/faq.module.css: -------------------------------------------------------------------------------- 1 | .faq { 2 | margin: 1rem; 3 | background-color: rgb(229, 231, 233); 4 | padding: 1rem; 5 | border-radius: 0.6rem; 6 | box-shadow: 0.1rem 0.1rem #2c2c2c; 7 | } 8 | 9 | .faq div { 10 | display: flex; 11 | justify-content: space-between; 12 | } -------------------------------------------------------------------------------- /react-practice/src/components/FAQ/faqs.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | min-height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | background-color: rgb(233, 232, 232); 7 | padding: 1rem; 8 | } 9 | 10 | .faqs { 11 | width: 50rem; 12 | max-width: 100%; 13 | background-color: white; 14 | border-radius: 0.6rem; 15 | padding: 1rem; 16 | } 17 | 18 | h1 { 19 | text-align: center; 20 | } -------------------------------------------------------------------------------- /react-practice/src/components/FORM/Form.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react' 2 | import style from "./form.css" 3 | 4 | 5 | export default function FORM() { 6 | 7 | const [name, setName] = useState(""); 8 | const [email, setEmail] = useState(""); 9 | 10 | const handleNameChange = (e)=>{ 11 | setName(e.target.value); 12 | } 13 | const handleEmailChange = (e)=>{ 14 | setEmail(e.target.value); 15 | } 16 | const handleSubmit = (e)=>{ 17 | console.log("Form is submitted"); 18 | console.log(name, email); 19 | let userInfo = { 20 | name: name, 21 | email: email 22 | } 23 | console.log(userInfo) 24 | e.preventDefault(); 25 | } 26 | 27 | 28 | return ( 29 |
      30 |

      Register

      31 |
      32 |
      33 | 34 | 35 |
      36 |
      37 | 38 | 39 |
      40 |
      41 | 42 |
      43 |
      44 |
      45 | ) 46 | } 47 | -------------------------------------------------------------------------------- /react-practice/src/components/FORM/form.css: -------------------------------------------------------------------------------- 1 | /* .formGroup{ 2 | margin-bottom: 50px; 3 | color: #f00505; 4 | } */ 5 | button { 6 | padding: 5px; 7 | border: none; 8 | border-radius: 5px; 9 | background: green; 10 | color: white; 11 | margin: 10px 0 0 100px; 12 | font-size: 1rem; 13 | } 14 | 15 | input { 16 | margin: 5px; 17 | font-size: 1rem; 18 | padding: 5px; 19 | width: 250px; 20 | } -------------------------------------------------------------------------------- /react-practice/src/components/FORM/useStateObj.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react' 2 | import style from "./form.css"; 3 | 4 | 5 | export default function FORM2() { 6 | 7 | // const [name, setName] = useState(""); 8 | // const [email, setEmail] = useState(""); 9 | 10 | const[user, setUser] = useState({name: '', email:''}); 11 | const{name, email} = user; 12 | 13 | // const handleNameChange = (e)=>{ 14 | // setUser({name: e.target.value, email}); 15 | // } 16 | // const handleEmailChange = (e)=>{ 17 | // setUser({name, email: e.target.value}); 18 | // } 19 | 20 | const handleChange = (e) => { 21 | // const inputFieldName = e.target.name; 22 | // if(inputFieldName == "name"){ 23 | // setUser({name: e.target.value, email}); 24 | // }else if(inputFieldName == "email"){ 25 | // setUser({name, email: e.target.value}); 26 | // } 27 | setUser({...user, [e.target.name]:e.target.value}) 28 | } 29 | 30 | const handleSubmit = (e)=>{ 31 | console.log("Form is submitted"); 32 | console.log(name, email); 33 | 34 | console.log(user) 35 | e.preventDefault(); 36 | } 37 | 38 | 39 | return ( 40 |
      41 |

      Register

      42 |
      43 |
      44 | 45 | 46 |
      47 |
      48 | 49 | 50 |
      51 |
      52 | 53 |
      54 |
      55 |
      56 | ) 57 | } 58 | -------------------------------------------------------------------------------- /react-practice/src/components/FORM_VALIDATE/SignUp.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Button from "react-bootstrap/Button"; 3 | import Card from "react-bootstrap/Card"; 4 | import Col from "react-bootstrap/Col"; 5 | import Form from "react-bootstrap/Form"; 6 | import Row from "react-bootstrap/Row"; 7 | import { useFormik } from "formik"; 8 | 9 | // yop for runtime validation 10 | import { object, string, number, date, InferType } from "yup"; 11 | 12 | // name, email, password 13 | const SignUp = () => { 14 | const formik = useFormik({ 15 | initialValues: { 16 | name: "", 17 | email: "", 18 | password: "", 19 | }, 20 | 21 | validationSchema: object({ 22 | name: string().min(3, "name must have 3 character").required(), 23 | email: string().email().required(), 24 | password: string().min(6, "password must have 6 character").required(), 25 | }), 26 | 27 | onSubmit: (values, { resetForm }) => { 28 | console.log(values); 29 | resetForm({ values: "" }); 30 | }, 31 | }); 32 | 33 | // console.error(formik.errors); 34 | 35 | const renderNameError = formik.touched.name && formik.errors.name && ( 36 | {formik.errors.name} 37 | ); 38 | const renderEmailError = formik.touched.email && formik.errors.email && ( 39 | {formik.errors.email} 40 | ); 41 | const renderPasswordError = formik.touched.password && formik.errors.password && ( 42 | {formik.errors.password} 43 | ); 44 | 45 | 46 | 47 | return ( 48 | 49 |
      50 | 51 | 52 | Name 53 | 54 | 55 | 63 | {renderNameError} 64 | 65 | 66 | 67 | 68 | 69 | Email 70 | 71 | 72 | 80 | {renderEmailError} 81 | 82 | 83 | 84 | 85 | 86 | Password 87 | 88 | 89 | 98 | {renderPasswordError} 99 | 100 | 101 | 102 |
      103 |       104 | ); 105 | }; 106 | 107 | export default SignUp; 108 | -------------------------------------------------------------------------------- /react-practice/src/components/HOOKS/HooksUseState.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Button from "react-bootstrap/Button"; 3 | 4 | export default function HooksUseState() { 5 | const [count, setCount] = useState(0); 6 | 7 | const handleIncrement = () => { 8 | // setCount(count + 1); 9 | // update state based on previous state 10 | setCount((count) => count + 1); 11 | }; 12 | 13 | return ( 14 |
      15 |

      Count : {count}

      16 | 24 |
      25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /react-practice/src/components/HOOKS/UseReducer/UseReducer.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useReducer } from "react"; 2 | import { reducer } from "./reducer"; 3 | import { Alert, Button, Container, ListGroup } from "react-bootstrap"; 4 | const booksData = [ 5 | { id: 1, name: "Pather Panchal" }, 6 | { id: 2, name: "Padma Nadir Majhi" }, 7 | { id: 3, name: " Srikanta" }, 8 | ]; 9 | 10 | const Modal = ({ modalText }) => { 11 | return

      {modalText}

      ; 12 | }; 13 | 14 | const initialState = { 15 | books: booksData, 16 | isModalOpen: false, 17 | modalText: "", 18 | }; 19 | const UseReducer = () => { 20 | const [bookState, dispatch] = useReducer(reducer, initialState); 21 | const [bookName, setBookName] = useState(""); 22 | 23 | const handleSubmit = (e) => { 24 | e.preventDefault(); 25 | const newBook = { id: new Date().getTime().toString(), name: bookName }; 26 | dispatch({ type: "ADD", payload: newBook }); 27 | setBookName(""); 28 | }; 29 | 30 | const removeBook = (id) => { 31 | dispatch({ type: "REMOVE", payload: id }); 32 | }; 33 | return ( 34 | 35 |

      Book List

      36 |
      37 | { 41 | setBookName(e.target.value); 42 | }} 43 | /> 44 | 45 |
      46 | 47 | {bookState.isModalOpen && 48 | 49 | 50 | 51 | 52 | } 53 | 54 | 55 | {bookState.books.map((book) => { 56 | const { id, name } = book; 57 | return ( 58 | 59 | 60 | {name}{" "} 61 | 68 | 69 | 70 | 71 | ); 72 | })} 73 |       74 | ); 75 | }; 76 | 77 | export default UseReducer; -------------------------------------------------------------------------------- /react-practice/src/components/HOOKS/UseReducer/reducer.js: -------------------------------------------------------------------------------- 1 | export const reducer = (state, action) => { 2 | // action.type, action.payload 3 | if (action.type === "ADD") { 4 | const allBooks = [...state.books, action.payload]; 5 | return { 6 | ...state, 7 | books: allBooks, 8 | isModalOpen: true, 9 | modalText: "book is added", 10 | }; 11 | } 12 | if (action.type === "REMOVE") { 13 | const filteredBooks = [...state.books].filter( 14 | (book) => book.id !== action.payload 15 | ); 16 | return { 17 | ...state, 18 | books: filteredBooks, 19 | isModalOpen: true, 20 | modalText: "book is removed", 21 | }; 22 | } 23 | return state; 24 | }; -------------------------------------------------------------------------------- /react-practice/src/components/HOOKS/UseRefExamp/UseRefExam.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import style from "./form.css"; 3 | 4 | export default function UseRefExam() { 5 | 6 | const userNameRef = useRef(); 7 | const passwordRef = useRef(); 8 | 9 | const handleSubmit = (e) => { 10 | e.preventDefault(); 11 | const userName = userNameRef.current.value; 12 | const userPassword = passwordRef.current.value; 13 | console.log({userName, userPassword}); 14 | console.log("submitted"); 15 | }; 16 | 17 | return ( 18 |
      19 |
      20 | 21 | 22 |
      23 |
      24 | 25 | 26 |
      27 |
      28 | 29 |
      30 |
      31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /react-practice/src/components/HOOKS/UseRefExamp/form.css: -------------------------------------------------------------------------------- 1 | /* .formGroup{ 2 | margin-bottom: 50px; 3 | color: #f00505; 4 | } */ 5 | button { 6 | padding: 5px; 7 | border: none; 8 | border-radius: 5px; 9 | background: green; 10 | color: white; 11 | margin: 10px 0 0 100px; 12 | font-size: 1rem; 13 | } 14 | 15 | input { 16 | margin: 5px; 17 | font-size: 1rem; 18 | padding: 5px; 19 | width: 250px; 20 | } -------------------------------------------------------------------------------- /react-practice/src/components/HOOKS/useEffect/DataFetch.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Loader from "./Loader"; 3 | 4 | const loadingMessage =

      Todo is Loading..........

      ; 5 | 6 | const DataFetch = () => { 7 | const [todos, setTodos] = useState(null); 8 | const [isLoading, setIsLoading] = useState(true); 9 | const [error, setError] = useState(null); 10 | 11 | useEffect(() => { 12 | setTimeout(() => { 13 | // fetch("https://jsonplaceholder.typicode.com/todo") // error show fetching not successful 14 | fetch("https://jsonplaceholder.typicode.com/todos") 15 | .then((res) => { 16 | if (!res.ok) { 17 | throw Error("Fetching is not successful"); 18 | } else { 19 | return res.json(); 20 | } 21 | }) 22 | .then((data) => { 23 | setTodos(data); 24 | setIsLoading(false); 25 | setError(null); 26 | }) 27 | .catch((error) => { 28 | setError(error.message); 29 | setIsLoading(false); 30 | }); 31 | }, 2000); 32 | }, []); 33 | 34 | const todoElement = 35 | todos && 36 | todos.map((todo) => { 37 | return

      {todo.title}

      ; 38 | }); 39 | 40 | return ( 41 |
      42 |

      DataFetch- Todos

      43 | {error &&

      {error}

      } 44 | 45 | { 46 | isLoading && // if it is componet use angle bracket 47 | } 48 | {todoElement} 49 |
      50 | ); 51 | }; 52 | 53 | export default DataFetch; 54 | -------------------------------------------------------------------------------- /react-practice/src/components/HOOKS/useEffect/Loader.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // import { Audio } from 'react-loader-spinner' 4 | import { CirclesWithBar } from "react-loader-spinner"; 5 | import { ColorRing } from "react-loader-spinner"; 6 | 7 | const Loader = () => { 8 | return ( 9 |
      10 | 22 | 23 | {/* */} 32 |
      33 | ); 34 | }; 35 | 36 | export default Loader; 37 | -------------------------------------------------------------------------------- /react-practice/src/components/HOOKS/useEffect/UseEffectExam.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | 3 | const UseEffectExam = () => { 4 | const [count, setCount] = useState(0); 5 | const [loading, setLoading] = useState(true); 6 | 7 | // useEffect(()=>{ 8 | // //calles with every rendering 9 | // console.log('useEffect'); 10 | // }) 11 | 12 | // useEffect(()=>{ 13 | // //calles only one time 14 | // console.log('useEffect'); 15 | // }, []) 16 | 17 | useEffect(()=>{ 18 | //calles depends on dependy, if call count then it workd 19 | console.log('useEffect'); 20 | }, [count]) ; // count is dependency 21 | return ( 22 | 23 |
      24 | { console.log("rendering :>>")} 25 |

      UseEffect Example

      26 | 27 |

      28 | count : {count} 29 |

      30 | 31 |

      32 | 33 |
      34 | ) 35 | } 36 | 37 | export default UseEffectExam 38 | -------------------------------------------------------------------------------- /react-practice/src/components/LifeCycle/LifeCycle.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | export default class LifeCycle extends Component { 4 | constructor(props) { 5 | super(props); 6 | console.log("constructor"); 7 | this.state = { 8 | count: 0, 9 | }; 10 | } 11 | 12 | handleIncrement = () => { 13 | this.setState({ 14 | count: this.state.count + 1, 15 | }); 16 | }; 17 | 18 | componentDidMount() { 19 | console.log("ComponentDidMount"); 20 | } 21 | 22 | shouldComponentUpdate(){ 23 | console.log("shouldConponetUPdate"); 24 | return true; 25 | } 26 | 27 | componentDidUpdate() { 28 | console.log("componentDidUpdate"); 29 | } 30 | render() { 31 | console.log("render"); 32 | 33 | return ( 34 |
      35 |

      Life Cycle of class component

      36 |

      Counter: {this.state.count}

      37 | 38 |
      39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /react-practice/src/components/Pagination/CryptoCard.css: -------------------------------------------------------------------------------- 1 | .card { 2 | cursor: pointer; 3 | background: rgb(231, 231, 231); 4 | border-radius: 20px; 5 | margin: 2rem 4rem; 6 | overflow: hidden; 7 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 8 | padding: 1rem 2rem; 9 | transition: all 0.3s ease; 10 | } 11 | 12 | .card:hover { 13 | transform: scale(1.1); 14 | } 15 | 16 | .card_image { 17 | width: 200px; 18 | height: 200px; 19 | } 20 | 21 | .card_image img { 22 | width: 100%; 23 | height: 100%; 24 | object-fit: cover; 25 | } 26 | 27 | .card_info { 28 | margin-top: 1rem; 29 | } 30 | 31 | .card_info h2 { 32 | margin-bottom: 10px; 33 | color: black; 34 | } 35 | 36 | .card_info h3 { 37 | color: #272727; 38 | } -------------------------------------------------------------------------------- /react-practice/src/components/Pagination/CryptoCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./CryptoCard.css"; 4 | 5 | const CryptoCard = ({ image, name, price }) => { 6 | return ( 7 |
      8 |
      9 | {name} 10 |
      11 |
      12 |

      {name}

      13 |

      ${price.toLocaleString()}

      14 |
      15 |
      16 | ); 17 | }; 18 | 19 | export default CryptoCard; -------------------------------------------------------------------------------- /react-practice/src/components/Pagination/CryptoList.css: -------------------------------------------------------------------------------- 1 | .crypto_list { 2 | display: flex; 3 | flex-wrap: wrap; 4 | align-items: center; 5 | justify-content: space-evenly; 6 | } -------------------------------------------------------------------------------- /react-practice/src/components/Pagination/CryptoList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import CryptoCard from "./CryptoCard"; 4 | import "./CryptoList.css"; 5 | 6 | const CryptoList = ({ coinsData }) => { 7 | return ( 8 |
      9 | {coinsData.map((coin, index) => { 10 | return ( 11 | 17 | ); 18 | })} 19 |
      20 | ); 21 | }; 22 | 23 | export default CryptoList; -------------------------------------------------------------------------------- /react-practice/src/components/Pagination/PagiHOME.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | import CryptoList from "./CryptoList"; 4 | import Pagination from "./Pagination"; 5 | 6 | const PagiHOME = () => { 7 | const [coinsData, setCoinsData] = useState([]); 8 | const [currentPage, setCurrentPage] = useState(1); 9 | const [cardPerPage, setCardPerPage] = useState(8); 10 | const [error, setError] = useState(null); 11 | 12 | useEffect(() => { 13 | setTimeout(() => { 14 | fetch( 15 | "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false" 16 | ) 17 | .then((response) => { 18 | if (!response.ok) { 19 | throw Error("Fetching is not successful"); 20 | } else { 21 | return response.json(); 22 | } 23 | }) 24 | .then((data) => { 25 | setCoinsData(data); 26 | setError(null); 27 | }) 28 | .catch((error) => { 29 | setError(error.message); 30 | }); 31 | }, 2000); 32 | }, []); 33 | 34 | const lastCardIndex = currentPage * cardPerPage; 35 | const firstCardIndex = lastCardIndex - cardPerPage; 36 | const currentCards = coinsData.slice(firstCardIndex, lastCardIndex); 37 | 38 | return ( 39 | <> 40 |

      Crypto Gallery

      41 | 42 | 43 | 44 | ); 45 | }; 46 | 47 | export default PagiHOME; 48 | -------------------------------------------------------------------------------- /react-practice/src/components/Pagination/Pagination.css: -------------------------------------------------------------------------------- 1 | .pagination { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | margin-top: 1rem; 6 | } 7 | 8 | .pagination button { 9 | width: 40px; 10 | height: 40px; 11 | font-family: inherit; 12 | font-weight: 600; 13 | font-size: 16px; 14 | margin: 0 10px; 15 | border-radius: 6px; 16 | cursor: pointer; 17 | transition: all 0.3s ease; 18 | background: transparent; 19 | color: #06c579; 20 | border: 1px solid #0c0b0b; 21 | } 22 | 23 | .pagination button.active { 24 | font-weight: 900; 25 | border-color: #101010; 26 | background: #ffe400; 27 | color: #101010; 28 | } -------------------------------------------------------------------------------- /react-practice/src/components/Pagination/Pagination.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Pagination.css"; 3 | 4 | const Pagination = ({ totalCards, cardPerPage, setCurrentPage, currentPage }) => { 5 | let pages = []; 6 | 7 | for (let i = 1; i <= Math.ceil(totalCards / cardPerPage); i++) { 8 | pages.push(i); 9 | } 10 | 11 | return ( 12 |
      13 | {pages.map((page, index) => { 14 | return ; 15 | })} 16 |
      17 | ); 18 | }; 19 | 20 | export default Pagination; 21 | -------------------------------------------------------------------------------- /react-practice/src/components/PropDrilling/Componet1.js: -------------------------------------------------------------------------------- 1 | /// prop drilling - componet1 -> componet2 -> component3 2 | 3 | import React, { useState } from "react"; 4 | import Componet2 from "./Componet2"; 5 | import { UserContext } from "./UserContext"; 6 | 7 | const Componet1 = () => { 8 | const [user, setUser] = useState({ 9 | id: 201, 10 | name: "Ruhul", 11 | }); 12 | 13 | const [text, setText] = useState("Hello i am from Feni"); 14 | 15 | return ( 16 |
      17 |

      Componet 1

      18 | 19 | 20 | 21 |
      22 | ); 23 | }; 24 | 25 | export default Componet1; 26 | -------------------------------------------------------------------------------- /react-practice/src/components/PropDrilling/Componet2.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Componet3 from './Componet3' 3 | 4 | const Componet2 = () => { 5 | return ( 6 |
      7 | {/*

      Componet 2

      */} 8 | 9 |
      10 | ) 11 | } 12 | 13 | export default Componet2 -------------------------------------------------------------------------------- /react-practice/src/components/PropDrilling/Componet3.js: -------------------------------------------------------------------------------- 1 | 2 | // useContext hook = global state 3 | // 4 | import React, { useContext } from 'react' 5 | import { UserContext } from './UserContext' 6 | 7 | const Componet3 = () => { 8 | 9 | // const userData = useContext(UserContext); 10 | const {user, text} = useContext(UserContext); 11 | // console.log(userData); 12 | return ( 13 |
      14 |

      Componet 3

      15 | 16 |

      {user.id}

      17 |

      {user.name}

      18 |

      {text}

      19 | 20 |
      21 | ) 22 | } 23 | 24 | export default Componet3 -------------------------------------------------------------------------------- /react-practice/src/components/PropDrilling/UserContext.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const UserContext = React.createContext(); 4 | 5 | // provider, consumer 6 | 7 | 8 | // setp1: create context 9 | // step2: wrap childs with context provider 10 | // 3 : state access useContext hook 11 | 12 | /// prop drilling - componet1 -> componet2 -> component3 13 | 14 | // useContext hook = global state 15 | // kono ekta state ke globally declare korte pari -------------------------------------------------------------------------------- /react-practice/src/components/PropTypes/PropTyps.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import User from './User'; 3 | 4 | const PropTyps = () => { 5 | // const [name, setName] = useState("RUhul"); 6 | const [name, setName] = useState(); 7 | const [id, setId] = useState(543); 8 | const [user, setUser] = useState({ 9 | id: 105, 10 | name: "tutul" 11 | }) 12 | return ( 13 |
      14 | 15 |
      16 | ) 17 | } 18 | 19 | export default PropTyps 20 | -------------------------------------------------------------------------------- /react-practice/src/components/PropTypes/User.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | const User = props => { 5 | return ( 6 |
      7 |

      {props.userName}

      8 |

      {props.userId}

      9 |

      {props.user.id}

      10 |

      {props.user.name}

      11 |
      12 | ) 13 | } 14 | 15 | User.propTypes = { 16 | // userName: PropTypes.number 17 | userName: PropTypes.string, 18 | userId: PropTypes.string, 19 | user: PropTypes.object.isRequired, 20 | user: PropTypes.shape({ 21 | id: PropTypes.number, 22 | }) 23 | } 24 | 25 | User.defaultProps = { 26 | userName: "Default", 27 | userId: 10 28 | } 29 | export default User 30 | -------------------------------------------------------------------------------- /react-practice/src/components/ReactBootstrap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Button from 'react-bootstrap/Button'; 3 | import Card from 'react-bootstrap/Card'; 4 | 5 | const ReactBootstrap = () => { 6 | return ( 7 | 8 | 9 | Bootstrap Card 10 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam natus ipsam aperiam ut 11 | cumque quaerat a accusamus eaque iste officiis. 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default ReactBootstrap; 19 | -------------------------------------------------------------------------------- /react-practice/src/components/RefExample/RefExam.js: -------------------------------------------------------------------------------- 1 | import React, { Component, createRef } from "react"; 2 | import style from "./form.css"; 3 | 4 | export default class RefExam extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.userNameRef = createRef(); 8 | this.state = {}; 9 | } 10 | 11 | handleSubmit = (e) => { 12 | e.preventDefault(); 13 | console.log("submitted"); 14 | // console.log(this.userNameRef.current); 15 | console.log(this.userNameRef.current.value); 16 | this.userNameRef.current.style.color = "green"; 17 | }; 18 | 19 | render() { 20 | return ( 21 |
      22 |
      23 | 24 | 25 |
      26 |
      27 | 28 | 29 |
      30 |
      31 | 32 |
      33 |
      34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /react-practice/src/components/RefExample/form.css: -------------------------------------------------------------------------------- 1 | /* .formGroup{ 2 | margin-bottom: 50px; 3 | color: #f00505; 4 | } */ 5 | button { 6 | padding: 5px; 7 | border: none; 8 | border-radius: 5px; 9 | background: green; 10 | color: white; 11 | margin: 10px 0 0 100px; 12 | font-size: 1rem; 13 | } 14 | 15 | input { 16 | margin: 5px; 17 | font-size: 1rem; 18 | padding: 5px; 19 | width: 250px; 20 | } -------------------------------------------------------------------------------- /react-practice/src/components/Routing/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Container from 'react-bootstrap/Container'; 3 | import Nav from 'react-bootstrap/Nav'; 4 | import Navbar from 'react-bootstrap/Navbar'; 5 | 6 | const Navba = () => { 7 | return ( 8 |
      9 | 10 | 11 | Routing 12 | 17 | 18 | 19 |
      20 | ) 21 | } 22 | 23 | export default Navba 24 | -------------------------------------------------------------------------------- /react-practice/src/components/Routing/Routing.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter, Route, Routes } from 'react-router-dom' 3 | import Home from './pages/Home' 4 | import Contact from './pages/Contact' 5 | import Blogs from './pages/Blogs' 6 | import Error from './pages/Error' 7 | 8 | import Navba from './Navbar' 9 | import Blog from './pages/Blog' 10 | import User from './pages/User' 11 | 12 | const Routing = () => { 13 | return ( 14 |
      15 | {/*

      Routing............

      */} 16 | 17 | 18 | 19 | }/> 20 | }/> 21 | }/> 22 | }/> 23 | {/* } /> */} 24 | } /> 25 | }/> 26 | 27 | 28 |
      29 | ) 30 | } 31 | 32 | export default Routing 33 | -------------------------------------------------------------------------------- /react-practice/src/components/Routing/data.js: -------------------------------------------------------------------------------- 1 | export const blogsData = [ 2 | { 3 | id: 1, 4 | title: "html", 5 | body: "html ipsum dolor sit amet consectetur adipisicing elit. Quos delectus illum corrupti perferendis sunt, placeat rem architecto assumenda atque ratione qui fugit libero deserunt! Ullam ad deleniti, tempora laboriosam debitis perspiciatis pariatur eligendi aspernatur ipsum quo! Earum quaerat reiciendis nam ex soluta iste reprehenderit. Tempore cupiditate suscipit, voluptate debitis aliquid, eos aspernatur, rerum consequuntur quia laborum maxime nemo voluptatum. Dolores, voluptatem accusamus. Dolore ratione vero nam architecto, iusto voluptates quo id. Distinctio et enim maxime doloribus velit incidunt, assumenda sequi! Incidunt blanditiis eius, ipsam recusandae ea illum odit laborum aliquam voluptates soluta eligendi explicabo exercitationem numquam earum harum repellendus libero?" 6 | }, 7 | { 8 | id: 2, 9 | title: "css", 10 | body: "css ipsum dolor sit amet consectetur adipisicing elit. Quos delectus illum corrupti perferendis sunt, placeat rem architecto assumenda atque ratione qui fugit libero deserunt! Ullam ad deleniti, tempora laboriosam debitis perspiciatis pariatur eligendi aspernatur ipsum quo! Earum quaerat reiciendis nam ex soluta iste reprehenderit. Tempore cupiditate suscipit, voluptate debitis aliquid, eos aspernatur, rerum consequuntur quia laborum maxime nemo voluptatum. Dolores, voluptatem accusamus. Dolore ratione vero nam architecto, iusto voluptates quo id. Distinctio et enim maxime doloribus velit incidunt, assumenda sequi! Incidunt blanditiis eius, ipsam recusandae ea illum odit laborum aliquam voluptates soluta eligendi explicabo exercitationem numquam earum harum repellendus libero?" 11 | }, 12 | { 13 | id: 3, 14 | title: "Java", 15 | body: "Java ipsum dolor sit amet consectetur adipisicing elit. Quos delectus illum corrupti perferendis sunt, placeat rem architecto assumenda atque ratione qui fugit libero deserunt! Ullam ad deleniti, tempora laboriosam debitis perspiciatis pariatur eligendi aspernatur ipsum quo! Earum quaerat reiciendis nam ex soluta iste reprehenderit. Tempore cupiditate suscipit, voluptate debitis aliquid, eos aspernatur, rerum consequuntur quia laborum maxime nemo voluptatum. Dolores, voluptatem accusamus. Dolore ratione vero nam architecto, iusto voluptates quo id. Distinctio et enim maxime doloribus velit incidunt, assumenda sequi! Incidunt blanditiis eius, ipsam recusandae ea illum odit laborum aliquam voluptates soluta eligendi explicabo exercitationem numquam earum harum repellendus libero?" 16 | }, 17 | { 18 | id: 4, 19 | title: "Python", 20 | body: "Java ipsum dolor sit amet consectetur adipisicing elit. Quos delectus illum corrupti perferendis sunt, placeat rem architecto assumenda atque ratione qui fugit libero deserunt! Ullam ad deleniti, tempora laboriosam debitis perspiciatis pariatur eligendi aspernatur ipsum quo! Earum quaerat reiciendis nam ex soluta iste reprehenderit. Tempore cupiditate suscipit, voluptate debitis aliquid, eos aspernatur, rerum consequuntur quia laborum maxime nemo voluptatum. Dolores, voluptatem accusamus. Dolore ratione vero nam architecto, iusto voluptates quo id. Distinctio et enim maxime doloribus velit incidunt, assumenda sequi! Incidunt blanditiis eius, ipsam recusandae ea illum odit laborum aliquam voluptates soluta eligendi explicabo exercitationem numquam earum harum repellendus libero?" 21 | } 22 | ]; 23 | -------------------------------------------------------------------------------- /react-practice/src/components/Routing/pages/Blog.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useLocation, useParams } from "react-router-dom"; 3 | import { blogsData } from "../data"; 4 | import { Card, Container } from "react-bootstrap"; 5 | 6 | const Blog = () => { 7 | const { title } = useParams(); 8 | const location = useLocation(); 9 | // console.log(location); 10 | // const [body, setBody] = useState(""); 11 | 12 | // useEffect(() => { 13 | // const body = blogsData.filter((blog) => blog.title === title); 14 | // setBody(body[0].body); 15 | // }, []); 16 | 17 | return ( 18 |
      19 | 20 | 21 | {title} 22 | {location.state.body.slice(0, 400)} 23 | {location.state.body.slice(350, 5000)} 24 | 25 | 26 |
      27 | ); 28 | }; 29 | 30 | export default Blog; 31 | -------------------------------------------------------------------------------- /react-practice/src/components/Routing/pages/Blogs.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Button, Card, CardBody } from "react-bootstrap"; 3 | import { useNavigate } from "react-router-dom"; 4 | import { blogsData } from "../data"; 5 | import { Link } from "react-router-dom"; 6 | 7 | const Blogs = () => { 8 | const [blogs, setBlogs] = useState(blogsData); 9 | // console.log(blogs); 10 | 11 | const navigate = useNavigate(); 12 | return ( 13 |
      14 |

      Blogs Page

      15 | 16 | {blogs.map((blog) => { 17 | const { id, title, body } = blog; 18 | 19 | return ( 20 |
      21 | 22 | 23 | {title} 24 | 25 | Programming 26 | 27 | {body.substring(0, 150) + ".........."} 28 | {/* Learn More */} 29 | {/* go */} 30 | Learn More 31 | 32 | 33 |
      34 | ); 35 | })} 36 | 37 | 44 |
      45 | ); 46 | }; 47 | 48 | export default Blogs; 49 | -------------------------------------------------------------------------------- /react-practice/src/components/Routing/pages/Contact.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-bootstrap' 3 | import { useNavigate } from 'react-router-dom' 4 | 5 | const Contact = () => { 6 | const navigate = useNavigate(); 7 | return ( 8 |
      9 |

      Contact Page

      10 |

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos delectus illum corrupti perferendis sunt, placeat rem architecto assumenda atque ratione qui fugit libero deserunt! Ullam ad deleniti, tempora laboriosam debitis perspiciatis pariatur eligendi aspernatur ipsum quo! Earum quaerat reiciendis nam ex soluta iste reprehenderit. Tempore cupiditate suscipit, voluptate debitis aliquid, eos aspernatur, rerum consequuntur quia laborum maxime nemo voluptatum. Dolores, voluptatem accusamus. Dolore ratione vero nam architecto, iusto voluptates quo id. Distinctio et enim maxime doloribus velit incidunt, assumenda sequi! Incidunt blanditiis eius, ipsam recusandae ea illum odit laborum aliquam voluptates soluta eligendi explicabo exercitationem numquam earum harum repellendus libero?

      11 | 14 |
      15 | ) 16 | } 17 | 18 | export default Contact 19 | -------------------------------------------------------------------------------- /react-practice/src/components/Routing/pages/Error.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Error = () => { 4 | return ( 5 |
      6 |

      404 page is not found

      7 |
      8 | ) 9 | } 10 | 11 | export default Error -------------------------------------------------------------------------------- /react-practice/src/components/Routing/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-bootstrap' 3 | 4 | const Home = () => { 5 | return ( 6 |
      7 |

      Home Page

      8 |

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos delectus illum corrupti perferendis sunt, placeat rem architecto assumenda atque ratione qui fugit libero deserunt! Ullam ad deleniti, tempora laboriosam debitis perspiciatis pariatur eligendi aspernatur ipsum quo! Earum quaerat reiciendis nam ex soluta iste reprehenderit. Tempore cupiditate suscipit, voluptate debitis aliquid, eos aspernatur, rerum consequuntur quia laborum maxime nemo voluptatum. Dolores, voluptatem accusamus. Dolore ratione vero nam architecto, iusto voluptates quo id. Distinctio et enim maxime doloribus velit incidunt, assumenda sequi! Incidunt blanditiis eius, ipsam recusandae ea illum odit laborum aliquam voluptates soluta eligendi explicabo exercitationem numquam earum harum repellendus libero?

      9 | 10 |
      11 | ) 12 | } 13 | 14 | export default Home 15 | -------------------------------------------------------------------------------- /react-practice/src/components/Routing/pages/User.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { useParams, useSearchParams } from 'react-router-dom'; 3 | 4 | const User = () => { 5 | const {userId} = useParams(); 6 | const [seachParams, setSearchParams] = useSearchParams(); 7 | const [name, setName] = useState(""); 8 | // console.log(seachParams.get("id")); 9 | 10 | const handleSubmit = (e) =>{ 11 | e.preventDefault(); 12 | setSearchParams({name:name}) 13 | } 14 | return ( 15 |
      16 | user 17 |

      {userId}

      18 |

      {seachParams.get("id")}

      19 |

      {seachParams.get("age")}

      20 |

      {seachParams.get("name")}

      21 |
      22 | { 23 | setName(e.target.value) 24 | }} /> 25 | 26 |
      27 |
      28 | ) 29 | } 30 | 31 | export default User 32 | -------------------------------------------------------------------------------- /react-practice/src/components/STATE_LIFTING/Child.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Child = (props) => { 4 | 5 | const data = "Hi am form child data"; 6 | props.onChildData (data); 7 | 8 | return ( 9 |
      10 |

      I am IN the child Compoenet

      11 |

      {props.data}

      12 |
      13 | ) 14 | } 15 | 16 | export default Child 17 | -------------------------------------------------------------------------------- /react-practice/src/components/STATE_LIFTING/TODOAPP/Home.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import Todos from './Todos'; 3 | import NewTodo from './NewTodo'; 4 | 5 | const dummyTodos = ["todo1", "todo2"]; 6 | 7 | const TODOHOME = () => { 8 | 9 | const [todos, setTodos] = useState(dummyTodos); 10 | 11 | const handleNewTodo = (newTODO) => { 12 | setTodos([...todos, newTODO]); 13 | // console.log(todos); 14 | }; 15 | 16 | return ( 17 |
      18 | 19 | 20 |
      21 | ) 22 | } 23 | 24 | export default TODOHOME 25 | -------------------------------------------------------------------------------- /react-practice/src/components/STATE_LIFTING/TODOAPP/NewTodo.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Button from "react-bootstrap/Button"; 3 | import Card from "react-bootstrap/Card"; 4 | import Form from "react-bootstrap/Form"; 5 | 6 | const NewTodo = (props) => { 7 | const [todo, setTodo] = useState(""); 8 | 9 | const handleNewTodo = (event) => { 10 | setTodo(event.target.value); 11 | }; 12 | 13 | const handleSubmit = (event) => { 14 | event.preventDefault(); 15 | props.onTODO(todo); 16 | }; 17 | 18 | return ( 19 | 20 |
      21 | 22 | New Todo 23 | 31 | 32 | 33 |
      34 |       35 | ); 36 | }; 37 | 38 | export default NewTodo; 39 | -------------------------------------------------------------------------------- /react-practice/src/components/STATE_LIFTING/TODOAPP/Todo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Todo = (props) => { 4 | return ( 5 | 6 | 7 | {props.todo} 8 | 9 | 10 | ) 11 | } 12 | 13 | export default Todo 14 | -------------------------------------------------------------------------------- /react-practice/src/components/STATE_LIFTING/TODOAPP/Todos.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Table from 'react-bootstrap/Table'; 3 | import Card from 'react-bootstrap/Card'; 4 | import Todo from './Todo'; // Make sure the path to Todo component is correct 5 | 6 | const Todos = (props) => { 7 | return ( 8 | 9 | 10 | 11 | {props.todos.map((todo, index) => ( 12 | 13 | ))} 14 | 15 |
      16 |       17 | ); 18 | } 19 | 20 | export default Todos; 21 | -------------------------------------------------------------------------------- /react-practice/src/components/State.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Button from 'react-bootstrap/Button'; 3 | import Card from 'react-bootstrap/Card'; 4 | 5 | export default class State extends Component { 6 | 7 | constructor(props) { 8 | super(props) 9 | 10 | this.state = { 11 | count : 0, 12 | } 13 | } 14 | 15 | 16 | handleIncrement = ()=> { 17 | this.setState({ 18 | count: this.state.count + 1 19 | }) 20 | } 21 | handleDecrement = ()=> { 22 | this.setState({ 23 | count: this.state.count - 1 24 | }) 25 | } 26 | 27 | 28 | render() { 29 | 30 | const {count} = this.state; 31 | 32 | return ( 33 |
      34 |

      Count : {count}

      35 | 36 | 37 |
      38 | ) 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /react-practice/src/components/ToastMessage/ToastInTODO.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Card, Button, Container, Row, Col } from 'react-bootstrap'; 3 | import { ToastContainer, toast } from 'react-toastify'; 4 | import 'react-toastify/dist/ReactToastify.css'; 5 | 6 | const ToastInTODO = () => { 7 | 8 | const handleAddTodo = ()=>{ 9 | toast("Todo Added Successfully") 10 | } 11 | const handleDeleteTodo = ()=>{ 12 | toast.warn("Todo Deleted Successfully") 13 | } 14 | 15 | return ( 16 | 17 | 18 | 19 | 20 |

      TODO APP

      21 |
      22 | 23 | 24 |
      25 |       26 | 27 |       28 | 29 |       30 | ) 31 | } 32 | 33 | export default ToastInTODO 34 | -------------------------------------------------------------------------------- /react-practice/src/components/Toggle.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const Toggle = () => { 4 | const [toggle, setToggle] = useState(true); 5 | 6 | return ( 7 |
      15 | {toggle && ( 16 |

      17 | {" "} 18 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi tempore 19 | officiis consequatur reiciendis velit ut atque magnam dolorem tenetur 20 | inventore, minus consectetur veritatis tempora eum voluptas? Quam 21 | illum alias nobis?{" "} 22 |

      23 | )} 24 | 25 | 33 | 34 |
      35 | ); 36 | }; 37 | 38 | export default Toggle; 39 | -------------------------------------------------------------------------------- /react-practice/src/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title" : "RUhul Kuddus", 4 | "description" : "Engineer" 5 | }, 6 | { 7 | "title" : "Alamin", 8 | "description": "Intern" 9 | }, 10 | { 11 | "title": "Linkon", 12 | "description": "foreigner" 13 | } 14 | ] -------------------------------------------------------------------------------- /react-practice/src/index.css: -------------------------------------------------------------------------------- 1 | /* .pStyle { 2 | color: "green"; 3 | text-align: center; 4 | } 5 | 6 | .largeFont{ 7 | font-size: 40px; 8 | } */ 9 | 10 | -------------------------------------------------------------------------------- /react-practice/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | // import "./index.css"; 4 | import Card from "./components/Card"; 5 | import App from "./App"; 6 | import 'bootstrap/dist/css/bootstrap.min.css'; 7 | 8 | // const pStyle = { 9 | // color: "green", 10 | // textAlign: "center" 11 | // } 12 | 13 | // const jsCode = "this is js code"; 14 | // const root = ReactDOM.createRoot(document.getElementById("root")); 15 | // root.render( 16 | //
      17 | //

      Hello world

      18 | // {/*

      Here is the world

      */} 19 | //

      Here is the world

      20 | //

      {jsCode}

      21 | // {/* use curly brace for js variable use */} 22 | //
      23 | // ); 24 | 25 | 26 | 27 | const root = ReactDOM.createRoot(document.getElementById("root")); 28 | root.render( 29 | 30 | ); -------------------------------------------------------------------------------- /react-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Todo List (React) 7 | 8 | 9 | 10 | 84 | 85 | 86 |
      87 | 88 | 143 | 144 | -------------------------------------------------------------------------------- /react-vite/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /react-vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /react-vite/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /react-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
      11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.66", 18 | "@types/react-dom": "^18.2.22", 19 | "@vitejs/plugin-react-swc": "^3.5.0", 20 | "eslint": "^8.57.0", 21 | "eslint-plugin-react": "^7.34.1", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.6", 24 | "vite": "^5.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /react-vite/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react-vite/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /react-vite/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import viteLogo from '/vite.svg' 4 | import './App.css' 5 | 6 | function App() { 7 | const [count, setCount] = useState(0) 8 | 9 | return ( 10 | <> 11 |

      Hellow

      12 | 13 | 14 | ) 15 | } 16 | 17 | export default App 18 | -------------------------------------------------------------------------------- /react-vite/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react-vite/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /react-vite/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /react-vite/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /vanilla-todo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Todo List 7 | 8 | 9 | 10 |
      11 |

      Todo List

      12 | 13 | 14 |
        15 |
        16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /vanilla-todo/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background-color: #f4f4f4; 4 | } 5 | 6 | .container { 7 | max-width: 400px; 8 | margin: 30px auto; 9 | padding: 20px; 10 | background-color: #fff; 11 | border-radius: 5px; 12 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 13 | } 14 | 15 | h1 { 16 | text-align: center; 17 | color: #f90c0c; 18 | } 19 | 20 | input[type="text"] { 21 | width: 95%; 22 | padding: 10px; 23 | margin-bottom: 10px; 24 | border: 1px solid #ccc; 25 | border-radius: 3px; 26 | } 27 | 28 | .buttons { 29 | display: flex; 30 | } 31 | 32 | button { 33 | display: block; 34 | width: 100%; 35 | padding: 10px; 36 | background-color: #007bff; 37 | color: #fff; 38 | border: none; 39 | border-radius: 3px; 40 | cursor: pointer; 41 | } 42 | 43 | button:hover { 44 | color: #0056b3; 45 | } 46 | 47 | .link-button { 48 | width: auto; 49 | height: auto; 50 | background-color: transparent; 51 | text-decoration: underline; 52 | color: #000000; 53 | padding: 0px 10px; 54 | } 55 | 56 | ul { 57 | list-style-type: none; 58 | padding: 0; 59 | } 60 | 61 | li { 62 | padding: 10px; 63 | background-color: #f9f9f9; 64 | border-bottom: 1px solid #ddd; 65 | display: flex; 66 | flex-direction: row; 67 | justify-content: space-between; 68 | } 69 | 70 | li:last-child { 71 | border-bottom: none; 72 | } -------------------------------------------------------------------------------- /vanilla-todo/vanilla.js: -------------------------------------------------------------------------------- 1 | // Get references to DOM elements 2 | const todoInput = document.getElementById("todoInput"); 3 | const addTodoBtn = document.getElementById("addTodoBtn"); 4 | const todoList = document.getElementById("todoList"); 5 | 6 | // Add event listener to the "Add Todo" button 7 | addTodoBtn.addEventListener("click", addTodo); 8 | 9 | // Function to add a new todo item 10 | function addTodo() { 11 | // Get the trimmed value from the todo input field 12 | const todoText = todoInput.value.trim(); 13 | 14 | // Check if the input is not empty 15 | if (todoText !== "") { 16 | // Create a new list item 17 | const li = document.createElement("li"); 18 | 19 | // Create a div to hold the edit and delete buttons 20 | const buttonsDiv = document.createElement("div"); 21 | buttonsDiv.classList.add("buttons"); 22 | 23 | // Create a span element to display the todo text 24 | const span = document.createElement("span"); 25 | span.textContent = todoText; 26 | 27 | // Create an Edit button 28 | const editButton = document.createElement("button"); 29 | editButton.classList.add("link-button"); 30 | editButton.textContent = "Edit"; 31 | editButton.addEventListener("click", editTodo); 32 | buttonsDiv.appendChild(editButton); 33 | 34 | // Create a Delete button 35 | const deleteButton = document.createElement("button"); 36 | deleteButton.classList.add("link-button"); 37 | deleteButton.textContent = "Delete"; 38 | deleteButton.addEventListener("click", deleteTodo); 39 | buttonsDiv.appendChild(deleteButton); 40 | 41 | // Clear the input field 42 | todoInput.value = ""; 43 | 44 | // Append the elements to the list item 45 | todoList.appendChild(li); 46 | li.appendChild(span); 47 | li.appendChild(buttonsDiv); 48 | } 49 | } 50 | 51 | // Function to edit a todo item 52 | function editTodo() { 53 | // Prompt the user for the updated todo text 54 | const newText = prompt("Enter updated todo:"); 55 | 56 | // Check if the prompt was not cancelled 57 | if (newText !== null) { 58 | // Get a reference to the parent list item 59 | const li = this.parentElement.parentElement; 60 | 61 | // Create a new span element with the updated text 62 | const span = document.createElement("span"); 63 | span.textContent = newText; 64 | 65 | // Clear the contents of the parent list item 66 | li.innerHTML = ""; 67 | 68 | // Create a div to hold the edit and delete buttons 69 | const buttonsDiv = document.createElement("div"); 70 | buttonsDiv.classList.add("buttons"); 71 | 72 | // Create an Edit button 73 | const editButton = document.createElement("button"); 74 | editButton.classList.add("link-button"); 75 | editButton.textContent = "Edit"; 76 | editButton.addEventListener("click", editTodo); 77 | buttonsDiv.appendChild(editButton); 78 | 79 | // Create a Delete button 80 | const deleteButton = document.createElement("button"); 81 | deleteButton.classList.add("link-button"); 82 | deleteButton.textContent = "Delete"; 83 | deleteButton.addEventListener("click", deleteTodo); 84 | buttonsDiv.appendChild(deleteButton); 85 | 86 | // Append the updated span and buttonsDiv to the parent list item 87 | li.appendChild(span); 88 | li.appendChild(buttonsDiv); 89 | } 90 | } 91 | 92 | // Function to delete a todo item 93 | function deleteTodo() { 94 | // Remove the parent list item of the delete button 95 | this.parentElement.parentElement.remove(); 96 | } --------------------------------------------------------------------------------