├── todo ├── src │ ├── Components │ │ ├── Todo.css │ │ └── Todo.js │ ├── setupTests.js │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── App.css │ └── logo.svg ├── public │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── robots.txt │ ├── manifest.json │ └── index.html ├── .gitignore ├── package.json └── README.md ├── email-clone ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── App.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── App.css │ ├── logo.svg │ └── Components │ │ └── Email.js ├── .gitignore ├── package.json └── README.md ├── classNotes ├── 010623 829 PM.pdf ├── 020623 813 PM.pdf ├── 050623 819 PM.pdf ├── 060623 830 PM.pdf ├── 070623 823 PM.pdf ├── 090623 804 PM.pdf ├── 120523 812 PM.pdf ├── 120623 820 PM.pdf ├── 130523 816 PM.pdf ├── 130623 926 PM.pdf ├── 150523 820 PM.pdf ├── 150623 815 PM.pdf ├── 160523 812 PM.pdf ├── 170523 820 PM.pdf ├── 180523 809 PM.pdf ├── 200523 823 PM.pdf ├── 230523 815 PM.pdf ├── 240523 814 PM.pdf ├── 250523 847 PM.pdf ├── 260523 816 PM.pdf ├── 270523 826 PM.pdf ├── 290523 814 PM.pdf ├── 300523 922 PM.pdf └── 310523 802 PM.pdf ├── yellow-pages ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── Components │ │ ├── Homepage.js │ │ ├── Navbar.js │ │ ├── RetrieveData.js │ │ └── AddData.js │ ├── setupTests.js │ ├── App.test.js │ ├── index.css │ ├── reportWebVitals.js │ ├── index.js │ ├── App.js │ ├── App.css │ └── logo.svg ├── .gitignore ├── package.json └── README.md ├── Day1.js ├── React.js ├── homework.md ├── index.html ├── Day2.js └── IQ.js /todo/src/Components/Todo.css: -------------------------------------------------------------------------------- 1 | .list{ 2 | display: flex; 3 | } -------------------------------------------------------------------------------- /todo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/todo/public/favicon.ico -------------------------------------------------------------------------------- /todo/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/todo/public/logo192.png -------------------------------------------------------------------------------- /todo/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/todo/public/logo512.png -------------------------------------------------------------------------------- /todo/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /email-clone/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /classNotes/010623 829 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/010623 829 PM.pdf -------------------------------------------------------------------------------- /classNotes/020623 813 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/020623 813 PM.pdf -------------------------------------------------------------------------------- /classNotes/050623 819 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/050623 819 PM.pdf -------------------------------------------------------------------------------- /classNotes/060623 830 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/060623 830 PM.pdf -------------------------------------------------------------------------------- /classNotes/070623 823 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/070623 823 PM.pdf -------------------------------------------------------------------------------- /classNotes/090623 804 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/090623 804 PM.pdf -------------------------------------------------------------------------------- /classNotes/120523 812 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/120523 812 PM.pdf -------------------------------------------------------------------------------- /classNotes/120623 820 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/120623 820 PM.pdf -------------------------------------------------------------------------------- /classNotes/130523 816 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/130523 816 PM.pdf -------------------------------------------------------------------------------- /classNotes/130623 926 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/130623 926 PM.pdf -------------------------------------------------------------------------------- /classNotes/150523 820 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/150523 820 PM.pdf -------------------------------------------------------------------------------- /classNotes/150623 815 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/150623 815 PM.pdf -------------------------------------------------------------------------------- /classNotes/160523 812 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/160523 812 PM.pdf -------------------------------------------------------------------------------- /classNotes/170523 820 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/170523 820 PM.pdf -------------------------------------------------------------------------------- /classNotes/180523 809 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/180523 809 PM.pdf -------------------------------------------------------------------------------- /classNotes/200523 823 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/200523 823 PM.pdf -------------------------------------------------------------------------------- /classNotes/230523 815 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/230523 815 PM.pdf -------------------------------------------------------------------------------- /classNotes/240523 814 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/240523 814 PM.pdf -------------------------------------------------------------------------------- /classNotes/250523 847 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/250523 847 PM.pdf -------------------------------------------------------------------------------- /classNotes/260523 816 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/260523 816 PM.pdf -------------------------------------------------------------------------------- /classNotes/270523 826 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/270523 826 PM.pdf -------------------------------------------------------------------------------- /classNotes/290523 814 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/290523 814 PM.pdf -------------------------------------------------------------------------------- /classNotes/300523 922 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/300523 922 PM.pdf -------------------------------------------------------------------------------- /classNotes/310523 802 PM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/classNotes/310523 802 PM.pdf -------------------------------------------------------------------------------- /yellow-pages/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /email-clone/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/email-clone/public/favicon.ico -------------------------------------------------------------------------------- /email-clone/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/email-clone/public/logo192.png -------------------------------------------------------------------------------- /email-clone/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/email-clone/public/logo512.png -------------------------------------------------------------------------------- /yellow-pages/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/yellow-pages/public/favicon.ico -------------------------------------------------------------------------------- /yellow-pages/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/yellow-pages/public/logo192.png -------------------------------------------------------------------------------- /yellow-pages/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goelabhishek694/FS-04/HEAD/yellow-pages/public/logo512.png -------------------------------------------------------------------------------- /email-clone/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import Email from './Components/Email'; 4 | function App() { 5 | return ( 6 | 7 | ) 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /yellow-pages/src/Components/Homepage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Homepage() { 4 | return ( 5 |
6 |

India's first Digitized Directory

7 |
8 | ) 9 | } 10 | 11 | export default Homepage -------------------------------------------------------------------------------- /todo/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 | -------------------------------------------------------------------------------- /email-clone/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 | -------------------------------------------------------------------------------- /todo/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import Todo from './Components/Todo'; 4 | import './Components/Todo.css'; 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /yellow-pages/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 | -------------------------------------------------------------------------------- /todo/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 | -------------------------------------------------------------------------------- /email-clone/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 | -------------------------------------------------------------------------------- /yellow-pages/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 | -------------------------------------------------------------------------------- /todo/.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 | -------------------------------------------------------------------------------- /email-clone/.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 | -------------------------------------------------------------------------------- /todo/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 | -------------------------------------------------------------------------------- /yellow-pages/.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 | -------------------------------------------------------------------------------- /email-clone/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 | -------------------------------------------------------------------------------- /todo/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 | -------------------------------------------------------------------------------- /yellow-pages/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 | -------------------------------------------------------------------------------- /email-clone/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 | -------------------------------------------------------------------------------- /yellow-pages/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 | -------------------------------------------------------------------------------- /yellow-pages/src/Components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Link} from 'react-router-dom' 3 | function Navbar() { 4 | return ( 5 | <> 6 |

Yellow Pages

7 | 17 | 18 | ); 19 | } 20 | 21 | export default Navbar -------------------------------------------------------------------------------- /todo/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /email-clone/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /yellow-pages/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Day1.js: -------------------------------------------------------------------------------- 1 | var user = { 2 | name: "Abhishek", 3 | age: 90, 4 | greet: function () { 5 | console.log("hello"); 6 | }, 7 | }; 8 | 9 | user.age; 10 | user.greet(); 11 | 12 | let myFn = user.greet; 13 | myFn(); 14 | 15 | function fun() { 16 | console.log("hello"); 17 | // return "hello"; 18 | // return undefined; //js by default returns undefined if nothing is returned from a function 19 | } 20 | 21 | var a=fun(); 22 | console.log(a) 23 | // console.log(fun()); 24 | 25 | for (var i = 0; i < 10; i++){ 26 | console.log(i); 27 | } 28 | 29 | console.log(i); //10 30 | 31 | 32 | -------------------------------------------------------------------------------- /todo/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 | -------------------------------------------------------------------------------- /email-clone/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 | -------------------------------------------------------------------------------- /yellow-pages/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 | -------------------------------------------------------------------------------- /yellow-pages/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; 4 | import AddData from './Components/AddData' 5 | import RetrieveData from './Components/RetrieveData'; 6 | import Navbar from './Components/Navbar'; 7 | import Homepage from './Components/Homepage'; 8 | function App() { 9 | return ( 10 | 11 | 12 | 13 | }> 14 | }> 15 | }> 16 | 17 | 18 | ); 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /todo/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 | -------------------------------------------------------------------------------- /email-clone/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 | -------------------------------------------------------------------------------- /yellow-pages/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.js: -------------------------------------------------------------------------------- 1 | 2 | //------->how to transfer data from child to parent<--------- 3 | 4 | import { useEffect } from "react"; 5 | 6 | // import { useState } from "react"; 7 | // import ChildComp from "./ChildComp"; 8 | function ParentComp(prop) { 9 | let [counter, setCounter] = useState(0); 10 | let callback = (value) => setCounter(value); 11 | useEffect(() => { 12 | setCounter(10) 13 | console.log(value); 14 | }) 15 | return ( 16 |
17 |

Value of Counter : {counter}

18 | 19 |
20 | ); 21 | } 22 | 23 | export default ParentComp; 24 | 25 | function ChildComp(props) { 26 | let childCounterValue = props.counterValue; 27 | return ( 28 |
29 | 32 |
33 | ); 34 | } 35 | 36 | // export default ChildComp; 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /todo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 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 | -------------------------------------------------------------------------------- /email-clone/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "email-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 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 | -------------------------------------------------------------------------------- /yellow-pages/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "yellow-pages", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-router-dom": "^6.12.1", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /yellow-pages/src/Components/RetrieveData.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | 3 | function RetrieveData() { 4 | const [search, setSearch] = useState(''); 5 | const [user, setUser] = useState({}); 6 | 7 | const handleData = () => { 8 | const data = JSON.parse(localStorage.getItem(search)); 9 | console.log(data); 10 | setUser(data); 11 | } 12 | 13 | return ( 14 |
15 | setSearch(e.target.value)} /> 16 | 17 | { 18 | user ? ( 19 |
20 | { 21 | Object.keys(user).map(key=>( 22 |
  • {key} : {user[key]}
    • 23 | )) 24 | } 25 |
    26 | ):(

    No Data Found

    ) 27 | } 28 |
    29 | ) 30 | } 31 | 32 | export default RetrieveData -------------------------------------------------------------------------------- /homework.md: -------------------------------------------------------------------------------- 1 | 13/5/23 2 | 3 | https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/stand-in-line 4 | 5 | 24/05/2023 6 | 7 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some 8 | 9 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every 10 | 11 | 27/05/2023 12 | 13 | https://www.freecodecamp.org/news/regular-expressions-for-beginners/ 14 | 15 | 29/05/2023 16 | 17 | https://javascript.info/localstorage 18 | 19 | 30/05/2023 20 | 21 | https://docs.google.com/document/d/1nySZjqYERods4kQA8hMuYn9M-Cg7u0h1alT1GBjDTHU/edit 22 | 23 | 06/06/2023 24 | 25 | https://blog.logrocket.com/how-browser-rendering-works-behind-scenes/ 26 | 27 | 07/06/2023 28 | 29 | https://developer.mozilla.org/en-US/docs/Web/CSS/position 30 | 31 | https://flukeout.github.io/ 32 | 33 | https://cssgridgarden.com/ 34 | 35 | https://flexboxfroggy.com/ 36 | 37 | 08/06/2023 38 | 39 | https://betterprogramming.pub/why-dont-react-state-updates-reflect-immediately-9041c4377385 40 | 41 | 14/06/2023 42 | https://www.npmjs.com/package/json-server 43 | https://javascript-questions.vercel.app/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learning JS 8 | 9 | 10 | 11 |

    FS- 04 © ® £

    12 | 13 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
    -------------------------------------------------------------------------------- /todo/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 | -------------------------------------------------------------------------------- /email-clone/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 | -------------------------------------------------------------------------------- /yellow-pages/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 | -------------------------------------------------------------------------------- /todo/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /email-clone/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /yellow-pages/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /todo/src/Components/Todo.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | // uuid 3 | export default class Todo extends Component { 4 | constructor() { 5 | console.log('constructor is called'); 6 | super(); //-> constructor method of Component is called 7 | this.state = { 8 | tasks: [{id:1,value:'Revise JavaScript'}, {id:2,value:'Revise DSA'}], 9 | currTask:'', 10 | counter:0 11 | }; 12 | } 13 | 14 | componentDidMount() { 15 | console.log('CDM is called'); 16 | let data = setTimeout(() => { 17 | this.setState({ counter: this.state.counter + 1 }) 18 | },2000) 19 | } 20 | 21 | componentWillUpdate() { 22 | console.log('comp will update is called just before state is chnaged'); 23 | } 24 | 25 | componentDidUpdate() { 26 | console.log('comp did update is called after state is changed '); 27 | } 28 | 29 | //methods in class 30 | handleChange = (e) => { 31 | console.log(e.target.value); 32 | this.setState({ 33 | currTask:e.target.value 34 | }) 35 | } 36 | 37 | addTask = () => { 38 | this.setState({ 39 | tasks: [...this.state.tasks, { id: this.state.tasks.length + 1, value: this.state.currTask }], 40 | currTask:'' 41 | }) 42 | } 43 | 44 | handleDelete = (id) => { 45 | const newTasks = this.state.tasks.filter(taskObj => taskObj.id != id) 46 | this.setState({ 47 | tasks:[...newTasks] 48 | }) 49 | } 50 | 51 | //render method id called initially and everytime when state is changed. 52 | render() { 53 | console.log('render is called'); 54 | return ( 55 |
    56 | 62 | 63 | {/* to render my tasks */} 64 | {this.state.tasks.map((taskObj,idx) => { 65 | return ( 66 |
  • 67 |

    {`${idx + 1}. ${taskObj.value}`}

    68 | 72 |
    • 73 | ); 74 | })} 75 |
    76 | ); 77 | } 78 | } 79 | 80 | 81 | // let btn = document.getElementById(add) 82 | // btn.addEventListener('click', addTask); -------------------------------------------------------------------------------- /todo/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 | -------------------------------------------------------------------------------- /email-clone/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 | -------------------------------------------------------------------------------- /yellow-pages/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 | -------------------------------------------------------------------------------- /yellow-pages/src/Components/AddData.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | function AddData() { 4 | const [rows, setRows] = useState([{ 5 | userName: "", 6 | age: "", 7 | dob: "", 8 | uid: "", 9 | mobile: "", 10 | gender: "", 11 | }]); 12 | 13 | const handleInputChange = (e,index) => { 14 | const { name, value } = e.target; 15 | console.log(name, value); 16 | const updatedRows = [...rows]; 17 | updatedRows[index][name] = value; 18 | setRows(updatedRows); 19 | }; 20 | 21 | const handleSubmit = (e,index) => { 22 | e.preventDefault(); 23 | console.log(rows); 24 | const row = rows[index]; 25 | localStorage.setItem(row.uid,JSON.stringify(row)) 26 | } 27 | 28 | const handleDelete = (e,index) => { 29 | e.preventDefault(); 30 | const row = rows[index]; 31 | const uid = row.uid; 32 | const updatedRows = rows.filter(row => row.uid != uid) 33 | setRows(updatedRows); 34 | localStorage.removeItem(row.uid); 35 | } 36 | const handleAddRow = () => { 37 | setRows([...rows, { 38 | userName: "", 39 | age: "", 40 | dob: "", 41 | uid: "", 42 | mobile: "", 43 | gender: "", 44 | }]); 45 | } 46 | return ( 47 |
    48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | {rows.map((row, index) => ( 61 | 62 | 72 | 82 | 92 | 102 | 112 | 122 | 125 | 128 | 129 | ))} 130 | 131 |
    NameAgeDOBAadhar No.Mobile No.Gender
    63 | { 68 | handleInputChange(e, index); 69 | }} 70 | /> 71 | 73 | { 78 | handleInputChange(e, index); 79 | }} 80 | /> 81 | 83 | { 88 | handleInputChange(e, index); 89 | }} 90 | /> 91 | 93 | { 98 | handleInputChange(e, index); 99 | }} 100 | /> 101 | 103 | { 108 | handleInputChange(e, index); 109 | }} 110 | /> 111 | 113 | { 118 | handleInputChange(e, index); 119 | }} 120 | /> 121 | 123 | 124 | 126 | 127 |
    132 | 133 | 134 |
    135 | ); 136 | } 137 | 138 | export default AddData; 139 | 140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /email-clone/src/Components/Email.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | 3 | function Email() { 4 | const [currentSelection,setCurrentSelection]=useState('Inbox'); 5 | const [inbox, setInbox] = useState([ 6 | { 7 | mId: "guid-1", 8 | unread: true, 9 | subject: "Training Program", 10 | content: 11 | "About Microsoft Virtual Academy
    Microsoft Virtual Academy provides free online training by world-class experts to help you build your technical skills and advance your career. Make it your destination of choice to get started on the latest Microsoft technologies and join this vibrant community.", 12 | }, 13 | { 14 | mId: "guid-2", 15 | unread: true, 16 | subject: "Empower your future", 17 | content: 18 | "We foster our pipeline of future leaders with 47 employee networks and 7 global employee resource groups, servicing an active community of thousands across Microsoft", 19 | }, 20 | ]); 21 | const [spam, setSpam] = useState([ 22 | { 23 | mId: "guid-3", 24 | unread: true, 25 | subject: "Pre Approved Loan", 26 | content: 27 | "Congratulations ! Credit card is being shipped to you today!", 28 | }, 29 | { 30 | mId: "guid-4", 31 | unread: true, 32 | subject: "You won a lottery!", 33 | content: 34 | "You have just won the New York official lottery. Please send us your address so that we may start the transfer.", 35 | }, 36 | ]); 37 | // const [emails,setEmails]=useState([{}]); 38 | const[content,setContent]=useState([{}]); 39 | const [unreadCount, setUnreadCount] = useState({ inbox: 0, spam: 0 }); 40 | 41 | const handleSelectionClick=(selection)=>{ 42 | setCurrentSelection(selection); 43 | setContent([{}]) 44 | console.log(selection); 45 | } 46 | //if a fn is called in UI then never setState over their 47 | const switchParam=(headerType)=>{ 48 | switch(headerType){ 49 | case('Inbox'): 50 | return inbox 51 | case('Spam'): 52 | return spam 53 | case('delete'): 54 | return[] 55 | case ('promotions'): 56 | return [] 57 | default: 58 | return [] 59 | } 60 | } 61 | 62 | const handleMailContent=async (id)=>{ 63 | //get specific email using currentSelection and id 64 | const data=switchParam(currentSelection).filter((emailObj)=>emailObj['mId']==id) 65 | console.log(data); 66 | setContent(data); 67 | 68 | //mark my email read 69 | const updatedEmails = switchParam(currentSelection).map(emailObj => { 70 | if(emailObj.mId==id){ 71 | return {...emailObj,unread:false} 72 | } 73 | return emailObj 74 | }) 75 | //update the state 76 | // const method = `set${currentSelection}`; 77 | const updatedUnreadCount = { ...unreadCount }; 78 | updatedUnreadCount[currentSelection] = updatedEmails.filter(emailObj => emailObj.unread).length 79 | setUnreadCount(updatedUnreadCount); 80 | if (currentSelection == "Inbox") setInbox(updatedEmails); 81 | else if (currentSelection == "Spam") setSpam(updatedEmails); 82 | } 83 | 84 | useEffect(() => { 85 | const initialUnreadCount = { 86 | inbox: switchParam("Inbox").filter((emailObj) => emailObj.unread) 87 | .length, 88 | spam: switchParam("Spam").filter((emailObj) => emailObj.unread) 89 | .length, 90 | }; 91 | setUnreadCount(initialUnreadCount) 92 | }, []) 93 | 94 | return ( 95 |
    96 |
    97 | 100 | 103 | 104 | 107 |
    108 |
    109 | { 110 | // switchParam(currentSelection)?( 111 | switchParam(currentSelection).map((emailObj) => ( 112 |
    handleMailContent(emailObj.mId)} 114 | style={{ border: "5px solid red", height: "100px" }} 115 | > 116 |

    {emailObj.subject}

    117 |

    {emailObj.content.slice(0, 20) + "..."}

    118 |
    119 | )) 120 | // ): 121 | // (

    Data not found

    ) 122 | } 123 |
    124 |
    125 | {content ? ( 126 |
    127 |

    {content[0].subject}

    128 |

    {content[0].content}

    129 |
    130 | ) : ( 131 |

    No Mails to Show

    132 | )} 133 |
    134 |
    135 | ); 136 | } 137 | 138 | export default Email -------------------------------------------------------------------------------- /Day2.js: -------------------------------------------------------------------------------- 1 | // let stream = "CSE"; 2 | // let user = { 3 | // name: 'Nidhi', 4 | // age: 23, 5 | // location: "Delhi", 6 | // CSE: true, 7 | // 6:"hello" 8 | // } 9 | 10 | // every key inside objects is stored in string irrespective of how we store them 11 | 12 | // let user = { 13 | // "name": "Nidhi", 14 | // "age": 23, 15 | // "location": "Delhi", 16 | // "CSE": true, 17 | // "6": "hello", 18 | // }; 19 | 20 | // console.log(user.name); //Nidhi 21 | // console.log(user["age"]); //23 22 | // console.log(user.stream); //ud 23 | // console.log(user[stream]); //true 24 | // console.log(user[1 + 2 + 3]); //hello 25 | 26 | 27 | // const a = 10; //primitive-> number,boolean,string arr,obj,func 28 | // a = 20;//error 29 | // const arr = [1, 2, 3, 4]; 30 | // arr.push(5);//[1,2,3,4,5] 31 | 32 | 33 | // var j = 10; 34 | // var printNumTwo; 35 | // for (let i = 0; i < 3; i++) { 36 | // if (j === 10) { 37 | // printNumTwo = function () { 38 | // return i; 39 | // }; 40 | // } 41 | // } 42 | // console.log(printNumTwo()); 43 | 44 | 45 | // let a = 10; 46 | // function outer() { 47 | // let a = 100; 48 | // function inner() { 49 | // console.log(a) 50 | // } 51 | 52 | // return inner; 53 | // } 54 | 55 | // let ans = outer(); 56 | // ans(); 57 | 58 | 59 | // function outermost() { 60 | // var b = 10; 61 | // function inner() { 62 | // var a = 90; 63 | // function innermost() { 64 | // console.log(a,b); 65 | // } 66 | // innermost(); 67 | // } 68 | // inner(); 69 | // } 70 | // outermost(); 71 | 72 | 73 | //hoisting-> variable declration and functions are moved to the top. actually this just for understanding, but in reality memory is allocted from top to bottom in phase 1 , then in phase 2 code is executed. 74 | // console.log(a); //ud 75 | // b(); //hello 76 | // // c(); //error 77 | // var a = 10; 78 | // console.log(a);//10 79 | // function b() { 80 | // console.log("hello"); 81 | // } 82 | // //function expression 83 | // var c = function () { 84 | // console.log("bye"); 85 | // } 86 | // c(); //bye 87 | 88 | // console.log(d); //reference error-> cannot access d before initialization 89 | // let d; //tdz-> time difference taken by my variable when it is declared and initialized . 90 | // d = 10; 91 | // console.log(d); //10 92 | 93 | //type error -> assignment to constant variable 94 | // const b = 1000; 95 | // b = 10; 96 | 97 | //syntax error 98 | 99 | //arrow functions 100 | // let evenNum = (arr) => { 101 | // //do something 102 | // } 103 | 104 | // let evenNum = arr => { 105 | // //do something 106 | // }; 107 | 108 | // let evenNum = (arr,a) => { 109 | // //do something 110 | // }; 111 | 112 | // let print = name => console.log(name); 113 | // print("Abhishek"); 114 | 115 | //hoisting difference 116 | //they do not have their own 'this' 117 | 118 | 119 | //default parameter-> default parameter kicks in when the argument is not specified (it is undefined) 120 | // function cricketerInfo(name, age,country='India') { 121 | // console.log('Hi my name is '+name+' my age is '+age+'. I am from '+country) 122 | // } 123 | 124 | // cricketerInfo('Kapil Dev', 60, "USA"); 125 | // cricketerInfo('Ms Dhoni', 40); 126 | 127 | //rest parameters 128 | // function print(...arr){ 129 | // arr.forEach(cb); 130 | // function cb(ele) { 131 | // console.log(ele); 132 | // } 133 | //} 134 | 135 | // print("hi",'how','are') //arg 136 | // print("hi",'how','are','you') 137 | // print("hi",'how','are','1',2,3,4,5) 138 | // print("hi", 'how', 'are', '1', 2, 3, 4, 5, 6, 7, 8, 9) 139 | 140 | //we do know how many arguments are there in the function, it is going to be dynamic. so we use rest parameter for this 141 | 142 | // func def -> parameters 143 | // func call-> args 144 | 145 | 146 | //slice [start,end) -> //my fruits arr is not changed 147 | // const fruits = ['kiwi', 'papaya', 'banana', 'mango', 'apple']; 148 | // console.log(fruits.slice(1, 4)); //['papaya', 'banana', 'mango'] 149 | // console.log(fruits.slice(2,5)); //['banana', 'mango', 'apple'] 150 | // console.log(fruits.slice(-3)); //['mango', 'apple'] 151 | // console.log(fruits.slice(3)); //['mango', 'apple'] 152 | // console.log(fruits.slice(1, -2)); //['papaya', 'banana'] 153 | // console.log(fruits.slice()); //['kiwi', 'papaya', 'banana', 'mango', 'apple'] 154 | // console.log(fruits); //['kiwi', 'papaya', 'banana', 'mango', 'apple'] 155 | 156 | // function slice(arr, s, e) { 157 | // let arr = []; 158 | // if (!s && !e) { 159 | // s = 0; 160 | // e = arr.length; 161 | // } 162 | // if (!e) { 163 | // e = arr.length; 164 | // } 165 | // if (s<0) { 166 | // s = s + arr.length; 167 | // } 168 | // if (e < 0) { 169 | // e = e + arr.length; 170 | // } 171 | // if (s > 0 && e > 0) { 172 | // // loop and push s to e-1 173 | // } 174 | // } 175 | 176 | //splice -> it changes contents of array by removig/replacing/adding elements 177 | //syntax 178 | // arr.splice(start, num_of_ele_to_delete, item1_to_add, item2_to_add, ...itemn_to_add); 179 | 180 | // const cars = ["mustang", "G-Wagon", "Range Rover", "GTR", "Tesla", "Bugatti"]; 181 | 182 | // // console.log(cars.splice(1)); -> start removes the elements from original array 183 | // //removing from start to end 184 | // // let removedArr = cars.splice(1); 185 | // // console.log(removedArr); 186 | 187 | // //controlled removing 188 | // // let removedSUV = cars.splice(1, 2); 189 | // // console.log(removedSUV); 190 | 191 | // //adding ele in cars arr 192 | // // let removedSUVAddedSportsCar = cars.splice(1, 2, 'Aventador','Maseratti'); 193 | // // console.log(removedSUVAddedSportsCar); 194 | // // console.log(cars); 195 | 196 | // //only adding 197 | // // let addedCars = cars.splice(3, 0, 'Porsche'); 198 | // // console.log(addedCars); //[] 199 | // // console.log(cars); //['mustang','G-Wagon','Range Rover','Porsche','GTR','Tesla','Bugatti'] 200 | 201 | 202 | // // let ans = cars.indexOf("GTR"); 203 | // // console.log(ans); 204 | 205 | 206 | // // Return Largest Numbers in Arrays 207 | // //-1<-ve<-2000 208 | // // function largestOfFour(twoDArr) { 209 | // // let largestNum; 210 | // // let arr = []; 211 | // // for (let idx = 0; idx < twoDArr.length; idx++){ 212 | // // largestNum = twoDArr[idx][0]; 213 | // // for (let subIdx = 1; subIdx < twoDArr[idx].length; subIdx++){ 214 | // // largestNum = Math.max(largestNum, twoDArr[idx][subIdx]); 215 | // // } 216 | // // arr.push(largestNum); 217 | // // // largestNum = -1; 218 | // // } 219 | // // return arr; 220 | // // } 221 | 222 | // //map/forEach and reduce 223 | 224 | // function largestOfFour(twoDArr) { 225 | // return twoDArr.forEach(arr => { 226 | // return arr.reduce((acc, cur) => { 227 | // return cur>acc?cur:acc 228 | // }) 229 | // }) 230 | // } 231 | 232 | 233 | 234 | // let ans=largestOfFour([ 235 | // [13, 27, 18, 26], 236 | // [4, 5, 1, 3], 237 | // [32, 35, 37, 39], 238 | // [1000, 1001, 857, 11], 239 | // ]); 240 | 241 | // console.log(ans); 242 | 243 | 244 | // function confirmEnding(str, target) { 245 | // return str.slice(-target.length) === target; 246 | // } 247 | 248 | // function confirmEnding(str, target) { 249 | // let start = str.length - target.length; 250 | // let subStr=str.substring(start); 251 | // return subStr === target; 252 | // } 253 | 254 | // confirmEnding("Bastian", "ian"); 255 | 256 | // function repeatStringNumTimes(str, num) { 257 | // if (num <= 0) return ""; 258 | // let ans='' 259 | // for (let i = 0; i < num; i++){ 260 | // ans += str; 261 | // } 262 | // return ans; 263 | // } 264 | 265 | // function repeatStringNumTimes(str, num) { 266 | // if (num <= 0) return ""; 267 | // let ans = []; 268 | // for (let i = 0; i < num; i++) { 269 | // ans.push(str); 270 | // } 271 | // return ans.join(''); 272 | // } 273 | 274 | // function repeatStringNumTimes(str, num) { 275 | // if(num<=0) return '' 276 | // return Array(num).fill(str).join(""); 277 | // } 278 | 279 | // //recursion 280 | // function repeatStringNumTimes(str, num) { 281 | // let res = ''; 282 | // helper(res, str, num); 283 | // return res; 284 | // } 285 | 286 | // function helper(res, str, num) { 287 | // if(num<1) return '' 288 | // res = res + str; 289 | // helper(res, str, num-1); 290 | // } 291 | 292 | // repeatStringNumTimes("abc", 3); 293 | 294 | // function truncateString(str, num) { 295 | // if (num >= str.length) return str; 296 | // return str.slice(0,num)+'...'; 297 | // } 298 | 299 | // function truncateString(str, num) { 300 | // //subsring 301 | // } 302 | // truncateString("A-tisket a-tasket A green and yellow basket", 8); 303 | 304 | // let arr = [10, 20, 30, 40, 50, 60]; 305 | // //if atleast one ele passes the test it returns true 306 | // arr.some(evenTest); 307 | // function test(ele) { 308 | // return ele % 2 == 0; 309 | // } 310 | 311 | // //if all of the ele passes the test it returns true 312 | // arr.every(greaterThan9); 313 | // function test(ele) { 314 | // return ele>9; 315 | // } 316 | 317 | // function findElement(arr, func) { 318 | // let ans = arr.filter(func); 319 | // return ans[0]; 320 | // } 321 | 322 | // function findElement(arr, func) { 323 | // return arr.find(func) 324 | // } 325 | 326 | // findElement([1, 2, 3, 4], (num) => num % 2 === 0); 327 | 328 | // function titleCase(str) { 329 | // //toLowerCase 330 | // str = str.toLowerCase(); 331 | // //split 332 | // let strArr=str.split(' '); 333 | // //for 334 | // for (let idx = 0; idx < strArr.length; idx++){ 335 | // let word = strArr[idx]; 336 | // let firstLetter = word[0].toUpperCase(); 337 | // let restOfWord = word.slice(1); 338 | // strArr[idx] = firstLetter + restOfWord; 339 | // } 340 | // //map/forEach 341 | // return strArr.join(' '); 342 | // } 343 | 344 | // function titleCase(str) { 345 | // //toLowerCase 346 | // str = str.toLowerCase(); 347 | // //split 348 | // let strArr = str.split(" "); 349 | // //for 350 | // strArr.map((word) => { 351 | // let firstLetter = word[0].toUpperCase(); 352 | // let restOfWord = word.slice(1); 353 | // strArr[idx] = firstLetter + restOfWord; 354 | // }) 355 | 356 | 357 | // //map 358 | // return strArr.join(" "); 359 | // } 360 | 361 | // function titleCase(str) { 362 | // //toLowerCase 363 | // str = str.toLowerCase(); 364 | // //split 365 | // let strArr = str.split(" "); 366 | // let ans = ''; 367 | // //for 368 | // strArr.forEach((word) => { 369 | // let firstLetter = word[0].toUpperCase(); 370 | // let restOfWord = word.slice(1); 371 | // ans = ans+firstLetter + restOfWord + ' '; 372 | // }); 373 | 374 | // //map 375 | // return ans.trim(); 376 | // } 377 | 378 | // let ans1 = titleCase("I'm a little tea pot"); 379 | // console.log(ans1); 380 | 381 | // function frankenSplice(arr1, arr2, n) { 382 | // let newArr = arr2.slice(); 383 | // console.log(newArr); 384 | // newArr.splice(n, 0, ...arr1); 385 | // console.log(newArr); 386 | // return newArr; 387 | // } 388 | 389 | // function frankenSplice(arr1, arr2, n) { 390 | // let leftArr = arr2.slice(0,n); 391 | // let rightArr = arr2.slice(n); 392 | // let newArr = [...leftArr, ...arr1, ...rightArr]; 393 | // // console.log(newArr); 394 | // // newArr.splice(n, 0, ...arr1); 395 | // // console.log(newArr); 396 | // return newArr; 397 | // } 398 | 399 | // frankenSplice([1, 2, 3], [4, 5, 6], 1); 400 | 401 | // function bouncer(arr) { 402 | // return arr.filter(ele=>Boolean(ele)) 403 | // } 404 | 405 | // console.log(bouncer([7, "ate", "", false, 9])); 406 | 407 | 408 | // function getIndexToIns(arr, num) { 409 | // arr.sort((a, b) => a - b); 410 | // for (let i = 0; i < arr.length; i++){ 411 | // if (arr[i] >= num) { 412 | // return i; 413 | // } 414 | // } 415 | // return arr.length; 416 | // } 417 | 418 | // function getIndexToIns(arr, num) { 419 | // return arr.filter(ele=>ele a - b); 425 | // return arr.indexOf(num); 426 | // } 427 | 428 | // getIndexToIns([10, 20, 30, 40, 50], 35); 429 | 430 | 431 | // function mutation(arr) { 432 | // let testString = arr[0].toLowerCase(); 433 | // let targetString = arr[1].toLowerCase(); 434 | // for (let i = 0; i < targetString.length; i++){ 435 | // let char = targetString[i]; 436 | // if (testString.indexOf(char) == -1) return false; 437 | // } 438 | // return true; 439 | // } 440 | 441 | // mutation(["hello", "hey"]); 442 | 443 | // function sumAll(arr) { 444 | // let s = Math.min(arr[0], arr[1]); //1 445 | // let b = Math.max(arr[0], arr[1]); //4 446 | // let sum = 0; //10 447 | // for (let i = s; i <= b; i++){ 448 | // sum = sum + i; 449 | // } 450 | // return sum; 451 | // } 452 | 453 | // function sumAll(arr) { 454 | // let newArr = []; 455 | // let s = Math.min(arr[0], arr[1]); //1 456 | // let b = Math.max(arr[0], arr[1]); //4 457 | // for (let i = s; i <= b; i++) { 458 | // newArr.push(i); 459 | // } 460 | 461 | // return newArr.reduce((acc, curr) => { 462 | // return acc + curr; 463 | // }, 0) 464 | // } 465 | 466 | // sumAll([1, 4]); 467 | 468 | 469 | 470 | 471 | //map-> traverse + returns array of the same length as of original array always 472 | // let abc = [1, 2, 3, 4]; 473 | // abc.map(ele => { 474 | // return ele * 10; 475 | // } 476 | // return ans; 477 | 478 | //forEach->traverse only, does not return anything 479 | // let ans = []; 480 | // abc.forEach(ele => { 481 | // abc.push(ele * 10); 482 | // }) 483 | 484 | // return ans; 485 | 486 | //HOF-> when function accepts another function as an argument then that function is known as HOF 487 | //conveert dollar to inr 488 | let bankStatement = [15, 22, 32, 42,-12,-13]; 489 | let bankStatementInINR = bankStatement.map((numInDollar) => { 490 | return numInDollar * 85; 491 | }); 492 | console.log(bankStatementInINR); 493 | console.log(bankStatement); 494 | 495 | //save the payments in db 496 | let res = bankStatement.forEach((num) => { 497 | console.log(num); //db.save(num) 498 | return num * 85; 499 | }); 500 | console.log(res); 501 | 502 | //total in bank account 503 | let totalBalanceInDollar = bankStatement.reduce((acc, curr) => acc + curr); 504 | console.log(totalBalanceInDollar); 505 | 506 | let totalBalanceInINR = bankStatementInINR.reduce((acc, curr) => acc + curr); 507 | console.log(totalBalanceInINR); 508 | 509 | let numArr = [1, 2, 3, 4, 5]; 510 | 511 | // //sum of array 512 | // let sum = 0; 513 | // for (let i = 0; i < numArr.length; i++){ 514 | // sum = sum + numArr[i]; 515 | // } 516 | // console.log(sum); 517 | // //accumulator=>arr[0], currrent value in arr=>arr[1] 518 | // let ans = numArr.reduce((acc, curr) => { 519 | // console.log('acc -> ', acc); 520 | // console.log('curr -> ', curr); 521 | // acc = acc + curr 522 | // return acc; 523 | // }); 524 | // console.log(ans); 525 | 526 | // //accumulator=>initial value, currrent value in arr=>arr[0] 527 | // let ans1 = numArr.reduce((acc, curr) => { 528 | // console.log("acc -> ", acc); 529 | // console.log("curr -> ", curr); 530 | // acc = acc + curr; 531 | // return acc; 532 | // }, 100); //initial value of acc 533 | // console.log(ans1); 534 | 535 | let arrOfObj = [{ x: 10 }, { x: 20 }, { x: 30 }] //{x:60} 536 | let val=arrOfObj.reduce((acc, curr) => { 537 | acc['x'] = curr['x']; 538 | if (acc['x']) { 539 | acc['x']=acc['x']+curr['x'] 540 | } 541 | return acc; 542 | },{}) 543 | console.log(val); 544 | 545 | function diffArray(arr1, arr2) { 546 | const newArr = []; 547 | for (let ele of arr1) { 548 | if (!arr2.includes(ele)) newArr.push(ele); 549 | } 550 | for (let ele of arr2) { 551 | if (!arr1.includes(ele)) newArr.push(ele); 552 | } 553 | // console.log(newArr); 554 | return newArr; 555 | } 556 | 557 | function diffArray(arr1, arr2) { 558 | let newArr = []; 559 | let a=arr1.filter(ele=>!arr2.includes(ele)) 560 | let b = arr2.filter(ele => !arr1.includes(ele)) 561 | newArr = [...a, ...b]; 562 | // console.log(newArr); 563 | return newArr; 564 | } 565 | 566 | diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]); 567 | 568 | function destroyer(...arr) { 569 | let [repeatedArr, ...args] = arr; 570 | console.log(repeatedArr); 571 | console.log(args); 572 | args.forEach((ele) => { 573 | repeatedArr.filter((num) => num !== ele); 574 | }); 575 | return repeatedArr; 576 | } 577 | 578 | console.log(destroyer([1, 2, 3, 1, 2, 3], 2, 3)); 579 | 580 | function whatIsInAName(collection, source) { 581 | let res=[] 582 | res=collection.filter(obj => { 583 | for (let key in source) { 584 | // console.log(key); 585 | // console.log(source[key]); 586 | if (!obj.hasOwnProperty(key) || obj[key] !== source[key]) { 587 | return false; 588 | } 589 | } 590 | return true; 591 | }) 592 | return res; 593 | } 594 | 595 | whatIsInAName( 596 | [ 597 | { first: "Romeo", last: "Montague" }, 598 | { first: "Mercutio", last: null }, 599 | { first: "Tybalt", last: "Capulet" }, 600 | ], 601 | { last: "Capulet" } 602 | ); 603 | 604 | function spinalCase(str) { 605 | return str 606 | .replace(/([a-z])([A-Z])/g, "$1 $2") 607 | .replace(/\s+|_+/g, "-") 608 | .toLowerCase(); 609 | } 610 | 611 | spinalCase("This Is Spinal Tap"); 612 | 613 | 614 | function translatePigLatin(str) { 615 | let vowelArr = ["a", "e", "i", "o", "u"]; 616 | let partitionIdx = str.length; 617 | for (let i = 0; i < str.length; i++) { 618 | let char = str[i]; 619 | if (vowelArr.includes(char)) { 620 | partitionIdx = i; 621 | break; 622 | } 623 | } 624 | let vowelStr = str.slice(partitionIdx); //eaker 625 | let consStr = str.slice(0, partitionIdx); //sp 626 | return partitionIdx == 0 ? str + "way" : vowelStr + consStr + "ay"; 627 | } 628 | 629 | translatePigLatin("consonant"); 630 | 631 | (() => { 632 | console.log("hello") 633 | })(); 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | -------------------------------------------------------------------------------- /IQ.js: -------------------------------------------------------------------------------- 1 | // localStorage.setItem("cartoon", "Popeye"); 2 | // localStorage.setItem("hobby", "eats spinach"); 3 | // let ans = localStorage.getItem("cartoon"); 4 | // console.log(ans); 5 | // // localStorage.removeItem("hobby"); 6 | // // localStorage.clear(); 7 | // let obj = { 8 | // nme:'Shaikh', 9 | // age: 23, 10 | // place:"delhi" 11 | // } 12 | // localStorage.setItem("userData", obj); 13 | // localStorage.setItem("userData", JSON.stringify(obj)); 14 | // let userObj = localStorage.getItem("userData"); 15 | // console.log(userObj); 16 | // console.log(typeof userObj); 17 | // let parsedObj = JSON.parse(userObj); 18 | // console.log(parsedObj); 19 | // // let str="{nme:'Shaikh',age: 23,place:'delhi'}" 20 | // //sesssion storage 21 | // //5mb-10mb 22 | // // sessionStorage.setItem("cartoon", "TomnJerry"); 23 | // // sessionStorage.setItem("hobby", "fighting"); 24 | // // let ans1 = sessionStorage.getItem("cartoon"); 25 | // // console.log(ans1); 26 | // let arr = [10, 20, 30, 40]; 27 | // sessionStorage.setItem('data', JSON.stringify(arr)); 28 | // let parsdArr = JSON.parse(sessionStorage.getItem('data')); 29 | // console.log(parsdArr); 30 | // // let a = JSON.parse('{ "a": "a98" }') 31 | // // console.log(a); 32 | // // //'098' '98a' 33 | 34 | 35 | // //cookies 36 | // //4kb 37 | 38 | // //callbacks-> as the name suggests , these functions are caled back upon fulfilling a certain condition 39 | // // a function which is present as an argument in another function is known as cb function 40 | // function isEven(num, cb) { 41 | // if (num % 2 == 0) { 42 | // cb(num) 43 | // } 44 | // } 45 | // function cb(num) { 46 | // console.log(num); 47 | // //perofrm some other action 48 | // } 49 | 50 | // //1. weather api call -> save that data in my db 51 | 52 | // function getWeatherData(url,cb){ 53 | // setTimeout(() => { 54 | // const data = [10, 20, 30, 40, 50]; 55 | // cb(data); 56 | // }, 3000); 57 | // for (let i = 0; i < 5; i++) { 58 | // console.log(i); 59 | // } 60 | // } 61 | 62 | // function cb(data) { 63 | // for (ele of data) { 64 | // console.log(ele); 65 | // } 66 | // } 67 | 68 | // //callback hell -> dealing with multiple/nested callbacks 69 | // //drawbacks-> code is not readable, difficult to understand,it would be difficult to debug, maintain the code. 70 | // asyncFunction(function (err,res) { 71 | // if (err) console.log(err); 72 | // else { 73 | // asyncFunction2(function (err, res) { 74 | // if (err) console.log(err); 75 | // else { 76 | // asyncFunction3(function (err, res) { 77 | // if (err) console.log(err); 78 | // else console.log('pyramid of doom has been formed') 79 | // }) 80 | // } 81 | // }) 82 | // } 83 | // }) 84 | 85 | 86 | // //promises 87 | // //executor 88 | // let burgerPromise = new Promise(function (resolve, reject) { 89 | // //contains api call-> result 90 | // //resolve reject -> cb functions 91 | // //either resolve or reject 92 | // //resolve(value) -> if job i finished successfully with result 'value 93 | // //reject(err) -> if an error occurs with result error 94 | // }) 95 | //initially my promise has state pending , then either it will be chnages to 'fulfilled when resolve is called or 'rejected when reject method is called 96 | //result: initially undefined then chnages to value when resolve(value), or to error when reject(error) 97 | 98 | //when new promise is created executor is called immediately 99 | 100 | // let getJobPromise = new Promise(function (resolve, reject) { 101 | // //process the data 102 | // const data=[10,20,30,40,50] 103 | // setTimeout(() => resolve(data), 2000); 104 | // }) 105 | // console.log(getJobPromise); 106 | 107 | // //then catch 108 | // getJobPromise.then((res) => { 109 | // for (ele of res) { 110 | // console.log(ele); 111 | // } 112 | // }) 113 | // getJobPromise.catch((err) => { 114 | // console.log(err); 115 | // }) 116 | // //if my promise state has been fuflfilled then my sb function inside .then is called 117 | // //promise chaining 100->130 118 | // new Promise((resolve, reject) => { 119 | // setTimeout(() => resolve(100), 2000); 120 | // }) 121 | // .then((res) => { 122 | // let val = res + 10; //instantly resolved promise 123 | // // //whenever i am returning a value from then , a new pomise is created and then returned 124 | // // let addTenPromise = new Promise((resolve, reject) => { 125 | // // resolve(val); //instantly resolved promise 126 | // // }); 127 | // // return addTenPromise; 128 | // // return val; 129 | // }) 130 | // .then((res) => { 131 | // let val = res + 10; 132 | // let addTenPromise = new Promise((resolve, reject) => { 133 | // resolve(val); 134 | // }); 135 | // return addTenPromise; 136 | // }) 137 | // .then((res) => { 138 | // let val = res + 10; 139 | // let addTenPromise = new Promise((resolve, reject) => { 140 | // resolve(val); 141 | // }); 142 | // return addTenPromise; 143 | // }) 144 | // .then((res) => { 145 | // console.log(res); //130 146 | // }) 147 | // .catch((err) => console.log("error logged")); 148 | 149 | 150 | 151 | // let np=new Promise(function (resolve, reject) { 152 | // setTimeout(() => resolve('hooray'), 2000); 153 | // }) 154 | 155 | // np.then((res) => { 156 | // console.log(res); 157 | // return res+" yayya" 158 | // }) 159 | 160 | // np.then((res) => { 161 | // console.log(res); 162 | // return res + " wowowowo" 163 | // }) 164 | 165 | // np.then((res) => { 166 | // console.log(res); 167 | // }) 168 | 169 | // //get weather api call data 170 | // //save it in db 171 | // // console 172 | 173 | // // promises used for network requests -> fetch 174 | // const API_KEY = "d8ab14f7e93c56cbe84562d28e8202bd"; 175 | // let lat = '25.3176'; 176 | // let lon = '82.9739'; 177 | // let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&units=metric&appid=${API_KEY}`; 178 | 179 | // let weatherData = fetch(url); 180 | // console.log(weatherData); 181 | // //when state is changed from pending to something else 182 | // weatherData.then((data)=>{ 183 | // console.log(data); 184 | // return data.json(); 185 | // }) 186 | // .then((data) => { 187 | // console.log(data); 188 | // }) 189 | 190 | // // 191 | // let username='itsShubhamShinde' 192 | // let githubAPI = `https://api.github.com/users/${username}` 193 | 194 | // let githubUserPromise = fetch(githubAPI); 195 | // githubUserPromise.then((res) => { 196 | // return res.json() 197 | // }) 198 | // .then((res) => { 199 | // console.log(res); 200 | // let img = document.createElement('img'); 201 | // let dpURL = res.avatar_url; 202 | // img.src = dpURL; 203 | // img.style.height = '300px'; 204 | // img.style.width = '300px'; 205 | // img.style.borderRadius = '50%'; 206 | // console.log(document); 207 | // document.body.append(img); 208 | // setTimeout(() => img.remove(), 4000); 209 | // }) 210 | 211 | 212 | // let isEvenPromise = new Promise(function (resolve, reject) { 213 | // function getVal() { 214 | // //[0 to 1) 215 | // let val = Math.floor(Math.random() * 100) //0 to 99 216 | // if (val % 2 == 0) resolve(val); 217 | // else reject(`received odd number ${val}`) 218 | // } 219 | // setTimeout(getVal, 4000); 220 | // }) 221 | 222 | // //when state is changed from pending to something else 223 | // //fulfilled //rejected 224 | // isEvenPromise.then( 225 | // (val) => { console.log(val) }, 226 | // (err) => { console.log(err) } 227 | // ) 228 | 229 | // isEvenPromise.then( 230 | // (val) => { 231 | // console.log(val); 232 | // } 233 | // ); 234 | // isEvenPromise.catch( 235 | // (err) => { 236 | // console.log(err); 237 | // }); 238 | 239 | 240 | //promise API/methods 241 | //promise.all -> it waits for all the promises to be executed in parallel. promise.all will only be resolved if all of the listed promises are resolved. all of the promises resolved with value will be placed in a result array in repective manner promises were placed. 242 | //if any of the listed promise gets rejected then the result of promise.all will be that error 243 | //all or nothing 244 | //let p1 = new Promise((resolve, reject) => setTimeout(() => reject('err'), 4000)); 245 | // let p2 = new Promise((resolve, reject) => setTimeout(()=>reject('err'), 5000)); 246 | // let p3 = new Promise((resolve, reject) => setTimeout(()=>resolve(300), 6000)); 247 | 248 | // let allPromises = Promise.all([p1,p2,p3]); 249 | 250 | // allPromises 251 | // .then((data) => console.log(data)) 252 | // .catch((err) => console.log(err)); 253 | 254 | //10-12lpa 255 | // let numPromise = Promise.all([p1, 10, 20]); 256 | // numPromise.then(data => console.log(data)); //[100,10,20] 257 | 258 | //Promise.allSettled 259 | //it is going to give me result of all the promises as soon as they are settled. i.e. if the promise has been resolved or rejected. 260 | 261 | // let p1 = new Promise((resolve, reject) => setTimeout(() => resolve(100), 4000)); 262 | // let p2 = new Promise((resolve, reject) => setTimeout(()=>reject('err'), 5000)); 263 | // let p3 = new Promise((resolve, reject) => setTimeout(()=>resolve(300), 6000)); 264 | 265 | // let allSettledPromises = Promise.allSettled([p1,p2,p3]); 266 | // let failedPromise = []; 267 | // allSettledPromises 268 | // .then((data) => { 269 | // console.log(data) //aray of objects 270 | // data.forEach(promiseObj => { 271 | // if (promiseObj.status == "fulfilled") { 272 | // console.log(promiseObj.value); 273 | // } else failedPromise.push(promiseObj.reason); 274 | // }) 275 | // return failedPromise 276 | // }) 277 | // .then(arr=>console.log(arr)) 278 | 279 | 280 | 281 | //Pomise.race-> similar to promise.all , but as the name suggests it is going to return the value of promise which gets resolved the fastest 282 | 283 | // let p1 = new Promise((resolve, reject) => setTimeout(() => reject(200), 9000)); 284 | // let p2 = new Promise((resolve, reject) => setTimeout(()=>reject('err'), 1000)); 285 | // let p3 = new Promise((resolve, reject) => setTimeout(()=>resolve(300), 3000)); 286 | 287 | // let racePromises = Promise.race([p1,p2,p3]); 288 | 289 | // racePromises 290 | // .then((data) => console.log(data)) 291 | // .catch((err) => console.log(err)); 292 | 293 | 294 | 295 | //Promise.any-> like race but it waits for first fulfiled promise 296 | 297 | // let p1 = new Promise((resolve, reject) => setTimeout(() => resolve(200), 9000)); 298 | // let p2 = new Promise((resolve, reject) => setTimeout(()=>reject('err'), 1000)); 299 | // let p3 = new Promise((resolve, reject) => setTimeout(()=>resolve(300), 3000)); 300 | 301 | // let anyPromises = Promise.any([p1,p2,p3]); 302 | 303 | // anyPromises.then((data) => console.log(data)).catch((err) => console.log(err)); 304 | 305 | //promise.reject 306 | // let p1 = Promise.reject('err'); 307 | // //promise.resolve 308 | // let p2 = Promise.resolve("hello"); 309 | 310 | 311 | // let urls = [ 312 | // "https://api.github123.com/users123/goelabhishek694", 313 | // "https://api.github.com/users/ramesh1234chaudhary", 314 | // "https://api.github.com/users/bhi2710", 315 | // "https://api.github.com/users/sonukumar77", 316 | // "https://api.github.com/users/saumya-bisht", 317 | // "https://api.github.com/users/venky123895", 318 | // "https://api.github.com/users/nidhirathour", 319 | // "https://api.github.com/users/debashish7862", 320 | // "https://api.github.com/users/rajnikant-raghav", 321 | // ]; 322 | 323 | //go and get avatar url of all these users 324 | 325 | // let promiseUrl = urls.map(url => fetch(url)); 326 | 327 | // let promiseData = Promise.allSettled(promiseUrl); 328 | // let failedRequests = []; 329 | // promiseData 330 | // .then((data) => { 331 | // console.log(data); //aray of objects 332 | // let userData = data.filter((promiseObj) => { 333 | // if (promiseObj.status == "fulfilled") { 334 | // return promiseObj; 335 | // } else failedRequests.push(promiseObj); 336 | // }); 337 | // return userData; 338 | // }) 339 | // .then((userData) => { 340 | // console.log(userData); 341 | // userData=userData.map((user) => user.value.json()); 342 | // return Promise.all(userData); 343 | // }) 344 | // .then((userData) => { 345 | // console.log(userData); 346 | // userData.map((user) => { 347 | // let img = document.createElement("img"); 348 | // let url = user.avatar_url; 349 | // img.src = url; 350 | // img.style.height = "300px"; 351 | // img.style.width = "300px"; 352 | // img.style.borderRadius = "50%"; 353 | // console.log(document); 354 | // document.body.append(img); 355 | // setTimeout(() => img.remove(), 4000); 356 | // }); 357 | // }) 358 | // .catch((err) => console.log(err)) 359 | // .finally(() => { 360 | // console.log(failedRequests); 361 | // }); 362 | //try catch finally 363 | //then catch finally 364 | 365 | //async await 366 | 367 | // async function foo() { 368 | // return 1; 369 | // } 370 | 371 | // let ans = foo(); 372 | // console.log(ans); 373 | // ans.then(res => console.log(res)); 374 | 375 | // async function foo() { 376 | // let p = new Promise((resolve, reject) => { 377 | // setTimeout(() => resolve(100), 2000); 378 | // }); 379 | // let res = await p; // execution stops at that line and only resumes when promise has been settled 380 | // console.log(res); 381 | // return res; 382 | // } 383 | //await keyword can only be used inside async function 384 | //codeoputside the function would be executed as usual , it wont be affected from await keyword inside a function. only that function's execution is suspended in which await keyword is used. 385 | 386 | // let ans = foo(); 387 | // ans.then(res => console.log(res)); 388 | 389 | // let ans = await foo(); 390 | // console.log(ans); //await is only valid in async functions and the top level bodies of modules 391 | // promise.then(res => console.log(res)); 392 | 393 | 394 | // let username='itsShubhamShinde' 395 | // let githubAPI = `https://api.github.com/users/${username}` 396 | 397 | // async function getAvatarURL(githubAPI) { 398 | // let req = await fetch(githubAPI); 399 | // let data = await req.json(); 400 | // console.log(data); 401 | // let img = document.createElement("img"); 402 | // let url = data.avatar_url; 403 | // img.src = url; 404 | // img.style.height = "300px"; 405 | // img.style.width = "300px"; 406 | // img.style.borderRadius = "50%"; 407 | // console.log(document); 408 | // document.body.append(img); 409 | // setTimeout(() => img.remove(), 4000); 410 | // } 411 | 412 | // // getAvatarURL(githubAPI); 413 | 414 | // //error handling in reject 415 | // async function foo() { 416 | // try { 417 | // let p = new Promise((resolve, reject) => { 418 | // setTimeout(() => reject('error received'), 2000); 419 | // }); 420 | // let res = await p; // execution stops at that line and only resumes when promise has been settled 421 | // console.log(res); 422 | // return res; 423 | // } 424 | // catch (err) { 425 | // console.log(err) 426 | // } 427 | // } 428 | 429 | // // foo() 430 | 431 | 432 | // function fun() { 433 | // try { 434 | // const a=10; 435 | // a = 20; 436 | // return a 437 | // } 438 | // catch (err) { 439 | // console.log(err); 440 | // return err 441 | // } 442 | // } 443 | 444 | // let ans = fun() 445 | // console.log(ans); 446 | 447 | // for (let i = 0; i < 5; i++){ 448 | // console.log(i); 449 | // } 450 | 451 | // let userObj = { 452 | // name: 'Abhishek', 453 | // age: 22, 454 | // address: { 455 | // state: 'delhi', 456 | // city:'new delhi', 457 | // greet: function () { 458 | // console.log('hello Geeksters') 459 | // } 460 | // } 461 | // } 462 | 463 | // console.log(userObj); 464 | // let user2 = userObj; 465 | // user2.name = 'Arbaz' 466 | // console.log(user2); 467 | 468 | //objects are passed by refereence. user2 is a reference of userObj 469 | 470 | //shallow copy -> only the first level of the object is copied. deeper levels are referenced 471 | //1. spread operator 472 | // const shallowObj = { ...userObj }; 473 | // shallowObj.name = 'Arbaz'; 474 | // shallowObj.address.state = 'Chennai'; 475 | // console.log(shallowObj); 476 | 477 | //2. Object.assign() -> MDN //Object.freeze() 478 | // const shallowObj = Object.assign(userObj); 479 | // shallowObj.name = 'Arbaz'; 480 | // shallowObj.address.state = 'Goa'; 481 | // console.log(shallowObj); 482 | 483 | //deep copy 484 | //when all the levels of keys are copied it is know as deep copy 485 | // const deepObj = JSON.parse(JSON.stringify(userObj)); 486 | // //cons-> if your obj contains a function , then function cannot will not be copied 487 | // deepObj.name = "Arbaz"; 488 | // deepObj.address.state = "Karnataka"; 489 | // console.log(deepObj); 490 | 491 | //WAC for deep copy -> recursion 492 | 493 | // let student1= { 494 | // nae: 'A', 495 | // age: 22, 496 | // strea:'cse', 497 | // subject:['algo','ds','networking','dbms'] 498 | 499 | // } 500 | 501 | // let student2 = { ...student1 }; 502 | 503 | //this in functions 504 | //this keyword's value depends on how a function is called. this->obj,arr,function 505 | 506 | //why dow use this ? 507 | 508 | let user1 = { 509 | fullName: "Abhishek Goel", 510 | }; 511 | let user2 = { 512 | fullName: "Shubham Shinde", 513 | }; 514 | 515 | function meet1() { 516 | console.log(`Hello ${user1.fullName}`); 517 | } 518 | 519 | function meet2() { 520 | console.log(`Hello ${user2.fullName}`); 521 | } 522 | 523 | meet1(); 524 | meet2(); 525 | 526 | function meet() { 527 | console.log(`Hello ${this.fullName}`); 528 | } 529 | 530 | user1.fn = meet; 531 | user2.fn = meet; 532 | 533 | console.log(user1); 534 | user1.fn() 535 | user2.fn() 536 | 537 | //<-------golden rules--------> 538 | // 1. the value of 'this' is evaluated during run Time 539 | // 2. value of 'this' depends from where it is called 540 | // 3. 'this' points to that obj from where the function is being called 541 | // 4. arr,obj,fn are all passed by referrence 542 | 543 | //this-> to obj before '.' 544 | 545 | // function type1() { 546 | // console.log(`I love ${this.name123}`); 547 | // } 548 | // // var name123 = 'JS'; // i love js 549 | // let name123 = 'JS'; // i love ud 550 | // // { 551 | // // let name123 = 'JS'; // i love ud 552 | // // } 553 | // type1(); //-> if fn is called globally , this-> global obj 554 | 555 | 556 | //1. conventional function 557 | 558 | // function meet() { 559 | // console.log(`hello ${this.name}`); 560 | // } 561 | 562 | // meet(); this->global obj 563 | 564 | //2. 565 | 566 | // function type2() { 567 | // console.log(this.fname); 568 | // } 569 | 570 | // var obj = { 571 | // fname: "Abhishek", 572 | // type2: function () { 573 | // console.log(this.fname); 574 | // } 575 | // } 576 | 577 | // obj.type2(); 578 | 579 | //3. 580 | var food = 'Pizza'; 581 | var obj = { 582 | food: 'pasta', 583 | eat: function () { 584 | console.log(`i like to eat ${this.food}`); 585 | } 586 | } 587 | 588 | var foo = obj.eat; 589 | foo(); 590 | 591 | //4. 592 | let length = 1; 593 | function square() { 594 | let cb = function () { 595 | console.log(this.length * this.length); 596 | } 597 | setTimeout(cb, 3000); 598 | } 599 | 600 | var obj = { 601 | length: 3, 602 | square 603 | } 604 | 605 | // console.log(obj); 606 | 607 | obj.square(); 608 | 609 | 610 | //5. 611 | function Name(fName, lName) { 612 | this.firstName = fName; 613 | this.lastName = lName; 614 | } 615 | 616 | // class Name{ 617 | // constructor() { 618 | // this 619 | // } 620 | // } 621 | var obj = new Name("MS", "Dhoni"); 622 | console.log(obj); 623 | //js creates a new object -> {} ->4k 624 | //js passess the object's referrence to the fn 625 | //this->4k->{} 626 | 627 | 628 | // const arr = [10, 20, 30, 40] 629 | // const obj = { ...arr } {0:10,1:20,2:30,3:40} 630 | 631 | 632 | let food1 = { 633 | continent: 'Italy', 634 | name2: 'Pizza', 635 | say() { 636 | console.log(this); 637 | let favFood = function () { 638 | console.log(this.name2); //ud 639 | }; 640 | favFood(); //this->window 641 | } 642 | } 643 | 644 | food1.say() 645 | 646 | //arrow functions -> they do not have their own 'this' keyword , so they refer the 'this' keyword of their outer scope 647 | 648 | let food2 = { 649 | continent: "Italy", 650 | name2: "Pizza", 651 | say() { 652 | console.log(this); 653 | let favFood = ()=>{ 654 | console.log(this.name2); //pizza 655 | }; 656 | favFood(); //this->window 657 | }, 658 | }; 659 | 660 | food2.say(); 661 | 662 | let group = { 663 | title: 'picnic', 664 | students: ['Nidhi', 'Abhishek', 'Rajnikant', 'Renuka'], 665 | list() { 666 | let cb=function(student){ 667 | console.log(`${student} is going on a ${this.title}`); 668 | } 669 | this.students.forEach(cb) 670 | } 671 | } 672 | 673 | group.list(); 674 | 675 | //call 676 | // let player1 = { 677 | // fName: "Rahul", 678 | // lName: "Dravid", 679 | // welcome: function () { 680 | // console.log(this.fName + " " + this.lName); 681 | // }, 682 | // }; 683 | 684 | // player1.welcome(); 685 | 686 | let player2 = { 687 | fName:"Sachin", 688 | lName:"Tendulkar" 689 | } 690 | 691 | let player3 = { 692 | fName: "Kapil", 693 | lName: "Dev", 694 | }; 695 | 696 | //function borrowing 697 | // player1.welcome()//-> rahul dravid 698 | // console.log(player2.welcome)//ud 699 | // player2.welcome() 700 | //somehow my this->player2 then -> sachin tendulkar 701 | //pls call welcome function from player1 object , but call it with it's 'this' pointing to player2 object 702 | // player1.welcome.call(player2); 703 | 704 | //parameters from call method 705 | function welcome(...arr) { 706 | console.log(arr); 707 | console.log(`Welcome ${this.fName} ${this.lName} 708 | Email: ${arr[0]} 709 | Age: ${arr[1]}`); 710 | } 711 | //name of object to which 'this' points to, n number of arguments 712 | welcome.call(player2, "masterblaster@gmail.com",50); 713 | 714 | // //apply 715 | // let argsArr = ["kd83@gmail.com", 55]; 716 | // welcome.apply(player3, argsArr); 717 | // welcome() 718 | 719 | //bind 720 | //as soon as we call method(call,apply), the function s called. 721 | let welcomeSachin = welcome.bind(player2, "masterblaster@gmail.com", 50); 722 | // a new copy of welcome function is created in which this-> player2 . then this copy is returned//bind returns a function in which the function is explicitly is pointing to a obj that we want it to . 723 | welcomeSachin(); 724 | 725 | 726 | // this->player2 727 | // function welcomeCopy(...arr) { 728 | // console.log(arr); 729 | // console.log(`Welcome ${this.fName} ${this.lName} 730 | // Email: ${arr[0]} 731 | // Age: ${arr[1]}`); 732 | // } 733 | 734 | // 735 | 736 | // let group = { 737 | // title: "picnic", 738 | // students: ["Nidhi", "Abhishek", "Rajnikant", "Renuka"], 739 | // list() { 740 | // let cb = function (student) { 741 | // console.log(`${student} is going on a ${this.title}`); 742 | // }; 743 | // cbBinded = cb.bind(group); 744 | // this.students.forEach(cbBinded); 745 | // }, 746 | // }; 747 | 748 | // group.list(); 749 | 750 | //polyfill for bind 751 | var car = { 752 | name: 'Thar', 753 | brand:'Mahindra' 754 | } 755 | 756 | var car2={ 757 | name:'G-Wagon', 758 | brand:'Mercedes' 759 | } 760 | 761 | function carDescription(...args){ 762 | console.log(`I bought a new ${this.brand} ${this.name} on ${args[0]} for INR ${args[1]}`); 763 | } 764 | 765 | carDescription() 766 | carDescription.call(car); 767 | 768 | // let bindedCarDescription = carDescription.bind(car2); 769 | // bindedCarDescription() 770 | 771 | //prototype-> 772 | let b=[1,2,3,4,5]; 773 | b.push(6); 774 | 775 | Function.prototype.myBind = function (...args) { 776 | let fnObj = this; //carDescription fn 777 | let params = args.slice(1); 778 | return function () { 779 | fnObj.apply(args[0],params); 780 | } 781 | } 782 | 783 | let bindedFn = carDescription.myBind(car2,'10th September 2028', '4crore') 784 | bindedFn() 785 | 786 | 787 | let arr = [10, 20, 30, 40]; 788 | let ans=arr.map(cb) 789 | function cb(ele) { 790 | return 2*ele 791 | } 792 | console.log(ans); //[20,40,60,80] 793 | 794 | Array.prototype.myMap = function (cb) { 795 | var arr = []; 796 | for (let i = 0; i < this.length; i++){ 797 | arr.push(cb(this[i],i)) 798 | } 799 | return arr; 800 | } 801 | 802 | let myans = arr.myMap(cb) 803 | console.log('mymap',myans); 804 | 805 | arr.filter(cbf) 806 | function cbf(ele) { 807 | if (ele > 10) { 808 | return ele 809 | } 810 | //return undefined 811 | } 812 | Array.prototype.myFilter = function (cb) { 813 | var arr = []; 814 | for (let i = 0; i < this.length; i++) { 815 | 816 | if (cb(this[i])) { 817 | arr.push(this[i]) 818 | }; 819 | } 820 | return arr; 821 | }; 822 | 823 | let filteredArr = arr.myFilter(cbf); 824 | console.log(filteredArr); 825 | 826 | // write a polyfill for push method / indexOf 827 | 828 | 829 | 830 | --------------------------------------------------------------------------------