├── batch1 ├── Bootstrap │ ├── DSF1998-1280x853.jpg │ ├── grid.html │ └── intro.html ├── CSSNotes.txt ├── ExpressJS.txt ├── ExpressJS │ ├── .gitignore │ ├── Day1 │ │ ├── client │ │ │ ├── index.html │ │ │ └── script.js │ │ ├── index.js │ │ ├── package-lock.json │ │ ├── package.json │ │ └── sample.js │ └── Day2 │ │ ├── index.html │ │ ├── index.js │ │ ├── middlewares │ │ └── auth.js │ │ ├── package-lock.json │ │ └── package.json ├── HTMLNotes.txt ├── JSNotes.txt ├── JavaScript │ ├── AsynchronousJS │ │ ├── API │ │ │ ├── callData.html │ │ │ ├── callData.js │ │ │ ├── jsonData.html │ │ │ └── myData.json │ │ ├── Callbacks │ │ │ ├── Program1.html │ │ │ ├── Program1.js │ │ │ ├── Program2.html │ │ │ └── Program2.js │ │ ├── Intro │ │ │ ├── Program1.html │ │ │ ├── Program1.js │ │ │ ├── Program2.html │ │ │ └── Program2.js │ │ └── Promise │ │ │ ├── Demo.html │ │ │ ├── Program1.html │ │ │ ├── Program1.js │ │ │ ├── Program2.html │ │ │ ├── Program2.js │ │ │ └── Program3.html │ ├── Intro │ │ ├── Program1.html │ │ ├── Program2.html │ │ └── Program3.html │ ├── Loops │ │ ├── Division.html │ │ ├── ForLoop.html │ │ ├── do-while.html │ │ ├── while.html │ │ └── while_do_while.html │ ├── Objects │ │ ├── BOM │ │ │ ├── Program1.html │ │ │ ├── Program2.html │ │ │ ├── Program3.html │ │ │ ├── Program4.html │ │ │ ├── Program5.html │ │ │ ├── Program6.html │ │ │ └── Program7.html │ │ └── Program1.html │ ├── conditionStatements │ │ ├── Program1.html │ │ ├── Program2.html │ │ ├── Program3.html │ │ ├── demo.html │ │ └── demo.js │ └── functions │ │ ├── program1.html │ │ └── program1.js ├── MongoDB │ ├── playground-1.mongodb.js │ ├── playground-2.mongodb.js │ ├── playground-3.mongodb.js │ └── playground-4.mongodb.js ├── NodeJS.txt ├── Nodejs │ ├── FileModule │ │ ├── MyFile.txt │ │ ├── MyFile2.txt │ │ ├── MyFile3.txt │ │ ├── read.js │ │ └── write.js │ ├── httpModule │ │ ├── index.js │ │ ├── jsonDisplay.html │ │ └── jsondata.js │ └── modules │ │ ├── demo.js │ │ ├── index.js │ │ └── program1.js ├── React │ ├── project1 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── components │ │ │ ├── ChangeState.jsx │ │ │ ├── ClassComp.jsx │ │ │ ├── Function1.jsx │ │ │ ├── Function2.jsx │ │ │ ├── Function3.jsx │ │ │ ├── MyFirstComp.jsx │ │ │ ├── MySecComp.jsx │ │ │ ├── ProfileRoutes.jsx │ │ │ ├── SingleProfilePage.jsx │ │ │ ├── ToggleState.jsx │ │ │ ├── ToggleState2.jsx │ │ │ ├── UseEffect.jsx │ │ │ └── UseState.jsx │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ ├── reportWebVitals.js │ │ │ └── setupTests.js │ └── project2 │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ ├── CompA.jsx │ │ ├── CompB.jsx │ │ ├── CompC.jsx │ │ ├── Context.jsx │ │ ├── Display.jsx │ │ ├── Display2.jsx │ │ ├── ThemeContext.jsx │ │ └── ToggleTheme.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── ReactNotes.txt ├── crud-app │ ├── client │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── components │ │ │ │ ├── Footer.jsx │ │ │ │ ├── Header.jsx │ │ │ │ └── Layout.jsx │ │ │ ├── index.css │ │ │ ├── main.jsx │ │ │ └── pages │ │ │ │ ├── EditPage.jsx │ │ │ │ ├── Home.jsx │ │ │ │ ├── PageRoutes.jsx │ │ │ │ └── RegisterPage.jsx │ │ └── vite.config.js │ └── server │ │ ├── .gitignore │ │ ├── index.js │ │ ├── models │ │ └── users.js │ │ ├── package-lock.json │ │ ├── package.json │ │ └── routes │ │ └── userRoutes.js ├── css │ ├── Top_Gun_Maverick_Poster.jpg │ ├── animations │ │ ├── program1.html │ │ ├── program2.html │ │ ├── program3.html │ │ ├── program4.html │ │ ├── program5.html │ │ └── program6.html │ ├── assignmen1.html │ ├── background.html │ ├── blockDisplay.html │ ├── border │ │ ├── padding.html │ │ └── square.html │ ├── boxmodel1.html │ ├── centerDiv.html │ ├── display.html │ ├── flexDisplay.html │ ├── font.html │ ├── inline.html │ ├── inlineDisplay.html │ ├── internal.html │ ├── navbar.css │ ├── navbar.html │ └── positions │ │ ├── absolute.html │ │ ├── fixed.html │ │ ├── relative.html │ │ ├── static.html │ │ └── sticky.html └── html │ ├── Top_Gun_Maverick_Poster.jpg │ ├── caseSensitive.html │ ├── intro.html │ ├── structure.html │ ├── table.html │ └── timetable.html └── batch2 ├── css ├── Program1.html ├── Program2.html ├── Program3.html ├── Program4.html ├── Program5.html ├── Task1.html ├── Top_Gun_Maverick_Poster.jpg └── cssNotes.txt └── html ├── HtmlNotes.txt ├── Program1.html ├── Program2.html ├── Program3.html └── Program4.html /batch1/Bootstrap/DSF1998-1280x853.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/Bootstrap/DSF1998-1280x853.jpg -------------------------------------------------------------------------------- /batch1/Bootstrap/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 13 | 14 | 15 |

16 | Grid and Cards 17 |

18 |
19 |
20 |
Row 1 Col 1
21 |
Row 1 Col 2
22 |
Row 1 Col 3
23 |
24 |
25 |
Row 2 Col 1
26 |
Row 2 Col 2
27 |
Row 2 Col 3
28 |
29 |
30 |

Bootstrap Cards

31 |
32 | ... 33 |
34 |
Northern Lights
35 |

36 | The northern lights are a phenomenal natural occurance and some people 37 | make their way all the way to Iceland specifically to see them. 38 |

39 | View Iceland 44 |
45 |
46 |

Grid and Cards

47 |
48 |
49 |
50 |
51 | ... 52 |
53 |
Northern Lights
54 |

55 | The northern lights are a phenomenal natural occurance and some 56 | people make their way all the way to Iceland specifically to see 57 | them. 58 |

59 | View Iceland 64 |
65 |
66 |
67 |
68 |
69 | ... 70 |
71 |
Northern Lights
72 |

73 | The northern lights are a phenomenal natural occurance and some 74 | people make their way all the way to Iceland specifically to see 75 | them. 76 |

77 | View Iceland 82 |
83 |
84 |
85 |
86 |
87 | ... 88 |
89 |
Northern Lights
90 |

91 | The northern lights are a phenomenal natural occurance and some 92 | people make their way all the way to Iceland specifically to see 93 | them. 94 |

95 | View Iceland 100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | ... 108 |
109 |
Northern Lights
110 |

111 | The northern lights are a phenomenal natural occurance and some 112 | people make their way all the way to Iceland specifically to see 113 | them. 114 |

115 | View Iceland 120 |
121 |
122 |
123 |
124 |
125 | ... 126 |
127 |
Northern Lights
128 |

129 | The northern lights are a phenomenal natural occurance and some 130 | people make their way all the way to Iceland specifically to see 131 | them. 132 |

133 | View Iceland 138 |
139 |
140 |
141 |
142 |
143 | ... 144 |
145 |
Northern Lights
146 |

147 | The northern lights are a phenomenal natural occurance and some 148 | people make their way all the way to Iceland specifically to see 149 | them. 150 |

151 | View Iceland 156 |
157 |
158 |
159 |
160 |
161 | 162 | 163 | -------------------------------------------------------------------------------- /batch1/Bootstrap/intro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 13 | 14 | 15 |

Bootstrap Framework

16 |

17 | Bootstrap is a frontend css framework which provides prebuilt css classes 18 | for faster responsive frontend development 19 |

20 |
I am background danger
21 |
I am background warning
22 |
I am background success
23 |
I am background secondary
24 |
I am background dark
25 |
26 | I am background primary and center 27 |
28 |
I am margin-left
29 |
I am margin-right
30 |
I am margin-top and bottom
31 |
I am without margin
32 | 33 |

I am heading - 1

34 |

I am heading - 5

35 |

I am heading - 6

36 | 37 | 38 | -------------------------------------------------------------------------------- /batch1/CSSNotes.txt: -------------------------------------------------------------------------------- 1 | CSS : cascading style sheets 2 | CSS is a styling language used to control the layout and appearance 3 | of web pages written in HTML or XML 4 | CSS provides properties to control the appearence of the webpage 5 | CSS is used to separate the presentation of a document from its structure, 6 | which is controlled by HTML or XML 7 | CSS is applied in three ways: 8 | 1. Inline CSS: CSS is written directly in the HTML document,using the 9 | style attribute within the elements 10 | 2. Internal CSS: CSS is written in the HTML document, but in a separate section, 11 | using 30 | 31 | 32 |

33 | Fetching Users 34 |

35 |
36 |
37 | 45 | 50 | 51 | 58 | 63 |
64 |
65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /batch1/ExpressJS/Day1/client/script.js: -------------------------------------------------------------------------------- 1 | function fetchAllUsers() { 2 | fetch("http://localhost:8000/users") 3 | .then((res) => res.json()) 4 | .then((res) => { 5 | displayData(res); 6 | }) 7 | .catch((err) => { 8 | console.log(err); 9 | }); 10 | } 11 | 12 | const table = document.getElementById("users"); 13 | 14 | function displayData(res) { 15 | const users = res; 16 | console.log(res); 17 | const headerRow = document.createElement("tr"); 18 | const header1 = document.createElement("th"); 19 | header1.innerHTML = "User ID"; 20 | headerRow.appendChild(header1); 21 | const header2 = document.createElement("th"); 22 | header2.innerHTML = "Name"; 23 | headerRow.appendChild(header2); 24 | const header3 = document.createElement("th"); 25 | header3.innerHTML = "Age"; 26 | headerRow.appendChild(header3); 27 | const header4 = document.createElement("th"); 28 | header4.innerHTML = "Occupation"; 29 | headerRow.appendChild(header4); 30 | table.appendChild(headerRow); 31 | users.map((user) => { 32 | const row = document.createElement("tr"); 33 | const idCell = document.createElement("td"); 34 | const nameCell = document.createElement("td"); 35 | const ageCell = document.createElement("td"); 36 | const occupationCell = document.createElement("td"); 37 | idCell.innerHTML = user.userId; 38 | nameCell.innerHTML = user.name; 39 | ageCell.innerHTML = user.age; 40 | occupationCell.innerHTML = user.occupation; 41 | row.appendChild(idCell); 42 | row.appendChild(nameCell); 43 | row.appendChild(ageCell); 44 | row.appendChild(occupationCell); 45 | table.appendChild(row); 46 | }); 47 | } 48 | 49 | function fetchSingleUser() { 50 | const userId = document.getElementById("userId").value; 51 | fetch(`http://localhost:8000/users/${userId}`) 52 | .then((res) => res.json()) 53 | .then((res) => { 54 | displaySingleUser(res); 55 | }) 56 | .catch((err) => { 57 | alert("User Not found"); 58 | console.log(err); 59 | }); 60 | event.preventDefault(); 61 | } 62 | function displaySingleUser(user) { 63 | console.log(user); 64 | const userDiv = document.getElementById("singleUser"); 65 | for (let prop in user) { 66 | const row = document.createElement("p"); 67 | row.innerHTML = `${prop}: ${user[prop]}`; 68 | userDiv.appendChild(row); 69 | } 70 | } 71 | fetchAllUsers(); 72 | -------------------------------------------------------------------------------- /batch1/ExpressJS/Day1/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Steps to build a simple express app 3 | 1. Set up the environment 4 | 2. import express 5 | 3. create an instance of express 6 | 4. define routes 7 | 5. start the server (npm run dev) 8 | */ 9 | 10 | const express = require("express"); 11 | const app = express(); 12 | const cors = require("cors"); 13 | 14 | app.use(cors()); 15 | 16 | // app.get(Route, requestHandler) 17 | app.get("/", (req, res) => { 18 | res.status(200).json({ 19 | message: "Welcome to my home page", 20 | }); 21 | }); 22 | 23 | // arrays of users 24 | const users = [ 25 | { userId: 10, name: "Ronnie", age: 22, occupation: "Student" }, 26 | { userId: 5, name: "John", age: 25, occupation: "Teacher" }, 27 | { userId: 1, name: "Jane", age: 28, occupation: "Doctor" }, 28 | { userId: 51, name: "Bob", age: 30, occupation: "Engineer" }, 29 | { userId: 15, name: "Alice", age: 32, occupation: "Lawyer" }, 30 | { userId: 17, name: "Amith", age: 28, occupation: "Software Engg" }, 31 | { userId: 18, name: "Sarah", age: 26, occupation: "Software Engg" }, 32 | { userId: 20, name: "Sadiq", age: 26, occupation: "Data Engg" }, 33 | ]; 34 | 35 | app.get("/users", (req, res) => { 36 | res.status(200).json(users); 37 | }); 38 | // get single user 39 | app.get("/users/:id", (req, res) => { 40 | const id = req.params.id; 41 | const user = users.find((user) => user.userId === parseInt(id)); 42 | console.log(user); 43 | if (user) { 44 | res.status(200).json(user); 45 | } else { 46 | res.status(404).json({ message: "User not found" }); 47 | } 48 | }); 49 | 50 | const PORT = 8000; 51 | app.listen(PORT, () => { 52 | console.log(`Server listening on port ${PORT}`); 53 | }); 54 | -------------------------------------------------------------------------------- /batch1/ExpressJS/Day1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "day1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node index.js", 9 | "dev": "nodemon index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "cors": "^2.8.5", 16 | "express": "^4.21.2", 17 | "nodemon": "^3.1.9" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /batch1/ExpressJS/Day1/sample.js: -------------------------------------------------------------------------------- 1 | const nos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20]; 2 | 3 | // find() 4 | const reqdData = 25; 5 | const myno = nos.find((n) => { 6 | if (n === reqdData) { 7 | return n; 8 | } 9 | }); 10 | 11 | if (myno) { 12 | console.log(`The number ${reqdData} is found in the array`); 13 | } else { 14 | console.log(`The number ${reqdData} is not found in the array`); 15 | } 16 | -------------------------------------------------------------------------------- /batch1/ExpressJS/Day2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login Form 7 | 13 | 14 | 15 |

16 | Login Form 17 |

18 |
19 |
20 |
21 | 22 | 29 |
30 |
31 | 32 | 38 |
39 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /batch1/ExpressJS/Day2/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const { checkAge, loginAuth } = require("./middlewares/auth"); 3 | const bodyParser = require("body-parser"); 4 | const app = express(); 5 | 6 | // use body parser 7 | app.use(bodyParser.json()); 8 | app.use(bodyParser.urlencoded({ extended: true })); 9 | app.use(express.json()); 10 | 11 | // simple route 12 | app.get("/", (req, res) => { 13 | console.log(`Current directory: ${__dirname}`); 14 | res.sendFile(__dirname + "/index.html"); 15 | }); 16 | 17 | app.post("/login", loginAuth, (req, res) => { 18 | res.json({ message: "Login successful" }); 19 | }); 20 | 21 | app.get("/:age", checkAge, (req, res) => { 22 | res.json({ 23 | message: `You are ${req.params.age} years old`, 24 | }); 25 | }); 26 | 27 | app.listen(4000, () => { 28 | console.log("Server is running on port 4000"); 29 | }); 30 | -------------------------------------------------------------------------------- /batch1/ExpressJS/Day2/middlewares/auth.js: -------------------------------------------------------------------------------- 1 | const checkAge = (req, res, next) => { 2 | const { age } = req.params; 3 | console.log(age); 4 | if (age >= 18) { 5 | next(); 6 | } else { 7 | res 8 | .status(401) 9 | .send({ message: "You are not allowed to access this resource" }); 10 | } 11 | }; 12 | 13 | const loginAuth = (req, res, next) => { 14 | const { email, password } = req.body; 15 | if (email === "test@example.com" && password === "password") { 16 | next(); 17 | } else { 18 | res.json({ message: "Invalid email or password" }); 19 | } 20 | }; 21 | 22 | module.exports = { checkAge, loginAuth }; 23 | -------------------------------------------------------------------------------- /batch1/ExpressJS/Day2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "day2", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node index.js", 9 | "dev": "nodemon index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "body-parser": "^1.20.3", 16 | "cors": "^2.8.5", 17 | "express": "^4.21.2", 18 | "nodemon": "^3.1.9" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /batch1/HTMLNotes.txt: -------------------------------------------------------------------------------- 1 | html stands for hypertext markup language 2 | hypertext means: text displayed on the browser 3 | markup language means: a set of tags used to format the text 4 | 5 | HTML is a markup language used to create web pages. 6 | It is used to add structure and content to the webpages 7 | 8 | *HTML is not a programming language* 9 | 10 | Structure of html 11 | 12 | 13 | 14 | 15 | 16 | Document 17 | 18 | 19 | //all content comes here 20 | 21 | 22 | 23 | Html Elements: 24 | They are the building blocks of html, and they are made up of html tags 25 | They are used to define the structure of the webpage 26 | 27 | HTML tags: 28 | They are used to define the elements of the webpage 29 | They are surrounded by angle brackets < > 30 | They are used to define the start and end of an element 31 | They are case sensitive 32 | eg:

This is the content

33 | 34 | HTML attributes 35 | They are used to provide extra information about an element 36 | They are added to the opening tag of an element 37 | They are in the form of key-value pairs 38 | Eg: Click Link here 39 | 40 | -------------------------------------------------- 41 | Some html tags 42 | -------------------------------------------------- 43 | h1 : creates a heading on the webpage 44 | h2 : creates a subheading on the webpage 45 | h3 : creates a sub-subheading on the webpage 46 | They go upto h6.. 47 | 48 | p : creates a paragraph on the webpage 49 | b : creates bold text on the webpage 50 | i : creates italic text on the webpage 51 | a : creates a link on the webpage 52 | div: creates a division on the webpage 53 | 54 | -------------------------------------------------- 55 | Some html attributes 56 | -------------------------------------------------- 57 | href : used to specify the link 58 | src : used to specify the source of an image 59 | alt: alternate text to an image 60 | 61 | -------------------------------------------------- 62 | html tables 63 | --------------------------------------------------- 64 | created using table tag 65 | tr : table row 66 | td : table data 67 | th : table header 68 | colspan : span the data across columns 69 | rowspan : span the data acroos rows 70 | cellpadding : distance between the content and the border 71 | cellspacing : distance between the cells of the table 72 | -------------------------------------------------------------------------------- /batch1/JSNotes.txt: -------------------------------------------------------------------------------- 1 | JavaScript 2 | 3 | It is a programming language used as a webtechnology 4 | It is used for web development 5 | It is used for mobile app development and game development 6 | 7 | JavaScript adds functionality to frontend 8 | It is used for backend development with Node.js 9 | 10 | Variables in JS 11 | Variables are used to store data 12 | Variables are case sensitive 13 | Variables are declared with let, const, var 14 | 15 | Variables using let keyword 16 | let name = "Manoj"; 17 | 18 | 1. Variables using let keyword, values can be reassigned 19 | let name = "Manoj"; 20 | name = "Rahul"; 21 | 2. Variables using let keyword cannot be redeclared 22 | let name = "Manoj"; 23 | let name = "Rahul"; // SyntaxError: Identifier 'name' has already been created 24 | 25 | Variables using const keyword 26 | const name = "Manoj"; 27 | 1. Variables using const keyword, values cannot be reassigned 28 | const name = "Manoj"; 29 | name = "Rahul"; // TypeError: Assignment to constant variable. 30 | 2. Variables using const keyword can be redeclared 31 | const name = "Manoj"; 32 | const name = "Rahul"; // SyntaxError: Identifier 'name' has already been created 33 | 34 | Variables using var keyword 35 | var name = "Manoj"; 36 | 1. Variables using var keyword, values can be reassigned 37 | var name = "Manoj"; 38 | name = "Rahul"; 39 | 2. Variables using var keyword can be redeclared 40 | var name = "Manoj"; 41 | var name = "Rahul"; // No error 42 | 43 | Operators in js 44 | Question 1 : Given a number which when divided by 7 leaves a remainder 3 and produces 45 | a quotient of 8. What is the number? 46 | Answer: 59 47 | 48 | Question 2: 49 | let n1 = 5 50 | let n2 = 7 51 | let r = n1++ + n2-- + 11 + n1 52 | clg(r) 53 | 54 | Preincrement Operators 55 | The preincrement operator increments the value of a variable before it is used in an expression. 56 | 57 | Working of preincrement: 58 | 1. The value of the variable is incremented by 1. 59 | 2. The incremented value is assigned to another variable. 60 | 3. Access the updated value. 61 | 62 | Postincrement Operator 63 | The postincrement operator increments the value of a variable after it is used in an expression. 64 | 65 | Working of postincrement 66 | 1. The current value of the variable is assigned to another variable. 67 | 2. The value of the variable is incremented by 1. 68 | 3. Access the updated value. 69 | 70 | Control Flow in JS 71 | Control flow statements are used to control the flow of program 72 | 1. Conditional Statements 73 | 2. Looping statements 74 | 75 | Conditional Statements: 76 | They execute a set of statements only when a given condition happens to be true 77 | 1. If statement 78 | Syntax: 79 | if (condition) { 80 | // code to be executed if condition is true 81 | } 82 | if(10>5){ 83 | console.log("10 is greater than 5"); 84 | } 85 | 2. if-else statement 86 | Syntax: 87 | if (condition) { 88 | // code to be executed if condition is true 89 | }else{ 90 | // code to be executed if condition is false 91 | } 92 | if(10>5){ 93 | console.log("10 is greater than 5"); 94 | }else{ 95 | console.log("10 is not greater than 5"); 96 | } 97 | 98 | 3. If-else-if ladder 99 | Syntax: 100 | if (condition1) { 101 | // code to be executed if condition1 is true 102 | }else if(condition 2){ 103 | // code to be executed if condition2 is trues 104 | }else{ 105 | // code to be executed if all conditions are false 106 | } 107 | 108 | 4. Switch case 109 | Syntax: 110 | switch(expression){ 111 | case value1:{ 112 | // code to be executed if expression equals value1 113 | }break; 114 | case value2:{ 115 | // code to be executed if expression equals value2 116 | }break; 117 | default:{ 118 | // code to be executed if expression does not match any case value 119 | } 120 | } 121 | 122 | Looping Statements 123 | They execute a set of statements repeatedly for a specified number of times or until 124 | a given condition is becomes false. 125 | Types of loops: 126 | 1. while loop 127 | 2. do while loop 128 | 3. for loop 129 | ---- dealt later -------- 130 | 4. for in loop (objects) 131 | 5. for of loop (arrays) 132 | 6. for each loop (arrays) 133 | ------------------------- 134 | 135 | Any loop will have three segments: 136 | 1. Initialization 137 | 2. Condition 138 | 3. Increment/Decrement 139 | 140 | while loop 141 | Syntax: 142 | Initialization 143 | while (condition) { 144 | // code to be executed 145 | update (increment/cecrement) 146 | } 147 | Working of while loop 148 | 1. Initialization 149 | 2. Condition is checked 150 | 3. If condition is true, code inside the loop is executed 151 | 4. update is executed 152 | 5. Condition is checked again and repeat 3 and 4 until condition becomes false 153 | Example: 154 | int i = 1; 155 | while (i <= 5) { 156 | console.log("Hello"); 157 | i++; 158 | } 159 | 160 | Practice programs: 161 | Write a loop to find the multiple of 5 multiplied 8 times without using * or / or % 162 | Write a loop to find the sum of first 10 natural numbers 163 | Write a loop to find the sum of all digits from a given number 164 | number = 1998; 165 | sum of all digits: 1+9+9+8 166 | sum = 27 167 | Write a loop to find power of a number 168 | 169 | do-while loop 170 | Syntax: 171 | Initialization 172 | do { 173 | // do-while block code 174 | update (increment/decrement) 175 | }while(condition); 176 | 177 | Working: 178 | 1. Initialization 179 | 2. do-while block code is executed 180 | 3. update is executed 181 | 4. condition is checked 182 | 5. repeat 2, 3 and 4 until condition becomes false 183 | 184 | for loop 185 | Syntax: 186 | for (initialization; condition; update) { 187 | // code to be executed 188 | } 189 | 190 | Working: 191 | 1. initialization 192 | 2. condition is checked 193 | 3. if condition is true, code inside the loop is executed 194 | 4. update is executed 195 | 5. condition is checked again and repeat 2, 3 and 4 until condition becomes false 196 | 197 | ------------------------------------------------------------------------------------------------- 198 | BOM and DOM in JavaScript 199 | ------------------------------------------------------------------------------------------------- 200 | BOM (Browser Object Model) 201 | BOM is a set of objects and methods that are available in the browser window object. 202 | It provides a way to interact with the browser and its features. 203 | BOM is used to perform tasks such as opening new windows, setting the title of the page, 204 | and getting the current URL. 205 | 206 | -------------------------------------- 207 | DOM (Document Object Model) 208 | -------------------------------------- 209 | DOM is a set of objects and methods that are used to interact with the HTML document. 210 | It provides a way to access and manipulate the HTML elements in the document. 211 | DOM is used to perform tasks such as getting the value of an input field, changing the text of 212 | a paragraph, and adding new elements to the document. 213 | ------------------------------------------------------ 214 | Asynchronous JavaScript 215 | ------------------------------------------------------ 216 | Asynchronous JavaScript is a type of JavaScript that allows you to perform tasks in the background. 217 | Parallel execution of two or more functions 218 | It allows you to execute code without blocking the execution of other code. 219 | It is used to perform tasks such as making API calls, loading images, and handling user input. 220 | 221 | ---------------------------------------------------------- 222 | Callback Functions 223 | ---------------------------------------------------------- 224 | Callback functions are functions that are passed as arguments to other functions. 225 | They are used to perform tasks such as handling errors, making API calls, and executing code after a 226 | delay. 227 | 228 | Nested callbacks lead to callback Hell 229 | ---------------------------------------------------------- 230 | Callback Hell is a situation where you have multiple nested callbacks. 231 | It can make your code difficult to read and understand. 232 | ---------------------------------------------------------- 233 | 234 | Promises In JavaScript 235 | ---------------------------------------------------------- 236 | Promises are a way to handle asynchronous code in a more readable and maintainable way. 237 | They are used to perform tasks such as making API calls, loading images, and handling user input. 238 | A promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its 239 | result. 240 | 241 | ---------------------------------------------------------- 242 | Async/Await 243 | ---------------------------------------------------------- 244 | Async/Await is a way to write asynchronous code that looks and feels like synchronous code. 245 | It is used to perform tasks such as making API calls, loading images, and handling user input. 246 | Async: 247 | It is used to declare a function that can be executed asynchronously. 248 | It makes a function return a promise object by default 249 | Await: 250 | It is used to pause the execution of a function until a promise is resolved or rejected. 251 | It is used to get the result of a promise. 252 | Await is only used in an async function 253 | 254 | ----------------------------------------------------------------------------- 255 | JSON - JavaScript Object Notation 256 | ----------------------------------------------------------------------------- 257 | It is a representation of JS object in a string format 258 | It is used to exchange data between a server and a web application 259 | To convert object to JSON use JSON.stringify(obj) 260 | To convert JSON to object use JSON.parse(json) -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/API/callData.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 14 | 15 | 16 |

API call in JavaScript

17 |

We can make API calls in JS using fetch()

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/API/callData.js: -------------------------------------------------------------------------------- 1 | // capture the data given by https://jsonplaceholder.typicode.com/users and display in the form 2 | // a divison 3 | fetch("https://jsonplaceholder.typicode.com/users") 4 | .then((res) => { 5 | // console.log(res); 6 | return res.json(); 7 | }) 8 | .then((res) => { 9 | console.log(res); 10 | displayResponseData(res); 11 | }) 12 | .catch((err) => { 13 | console.log(err); 14 | }); 15 | 16 | function displayResponseData(res) { 17 | let div = document.createElement("div"); 18 | let h3 = document.createElement("h3"); 19 | h3.innerHTML = "User Names"; 20 | div.appendChild(h3); 21 | for (let user of res) { 22 | console.log(user); 23 | let p = document.createElement("p"); 24 | p.innerHTML = user.name; 25 | div.appendChild(p); 26 | } 27 | 28 | document.body.appendChild(div); 29 | } 30 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/API/jsonData.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/API/myData.json: -------------------------------------------------------------------------------- 1 | { 2 | "Name": "Richie", 3 | "age": 20, 4 | "occupation": "student" 5 | } 6 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Callbacks/Program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Callbacks And Asynchronous JS

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Callbacks/Program1.js: -------------------------------------------------------------------------------- 1 | // add sub mul 2 | // result of add -> sub -> mul 3 | // result sub -> mul 4 | 5 | function add(a, b, cb1) { 6 | let r = a + b; // 15+13 7 | console.log(r); //28 8 | cb1(r, 5, multiply); 9 | } 10 | 11 | function sub(addResult, b, cb2) { 12 | let r = addResult - b; //28-5 13 | console.log(r); //23 14 | cb2(r, 5); 15 | } 16 | 17 | function multiply(subResult, b) { 18 | let r = subResult * b; //23*5 19 | console.log(r); //115 20 | } 21 | add(15, 13, sub); 22 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Callbacks/Program2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Callbacks/Program2.js: -------------------------------------------------------------------------------- 1 | function add(a, b, cb1) { 2 | setTimeout(() => { 3 | let r = a + b; 4 | cb1(r); 5 | }, 1000); 6 | } 7 | 8 | function sub(addresult, b, cb2) { 9 | setTimeout(() => { 10 | let r = addresult - b; 11 | cb2(r); 12 | }, 1000); 13 | } 14 | 15 | function multiply(subresult, b, cb3) { 16 | setTimeout(() => { 17 | let r = subresult * b; 18 | cb3(r); 19 | }, 1000); 20 | } 21 | add(10, 5, (r) => { 22 | console.log("Add result = ", r); 23 | sub(r, 3, (r) => { 24 | console.log("sub result = ", r); 25 | multiply(r, 5, (r) => { 26 | console.log("multiply result = ", r); 27 | }); 28 | }); 29 | }); 30 | 31 | // nested callbacks --> callback hell 32 | // nested callbacks which lead to pyramid like structure of code 33 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Intro/Program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Asynchronous JavaScript

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Intro/Program1.js: -------------------------------------------------------------------------------- 1 | function MyFunction1() { 2 | console.log("i am in func1() but before the settimeout()"); 3 | setTimeout(() => { 4 | for (let i = 1; i <= 1000; i++) { 5 | console.log("I am function 1
" + i); 6 | } 7 | }, 0); 8 | } 9 | 10 | function MyFunction2() { 11 | console.log("I am function 2
"); 12 | } 13 | 14 | MyFunction1(); 15 | MyFunction2(); 16 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Intro/Program2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Asynchronous JavaScript

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Intro/Program2.js: -------------------------------------------------------------------------------- 1 | let data; 2 | function MyFunction1(callFunc) { 3 | // assigns value to data 4 | setTimeout(() => { 5 | data = { name: "Sachin", age: 50, occupation: "Cricketer" }; 6 | callFunc(); 7 | }, 1000); 8 | } 9 | 10 | function MyFunction2() { 11 | // display the data 12 | console.log( 13 | `Name is ${data.name} and age ${data.age} and occupation is ${data.occupation}` 14 | ); 15 | } 16 | 17 | function MyFunction3() { 18 | console.log( 19 | `Name is ${data.name} and age ${data.age} and occupation is ${data.occupation}` 20 | ); 21 | } 22 | 23 | MyFunction1(MyFunction2); 24 | MyFunction1(MyFunction3); 25 | // the function passed as a parameter to another function is called as callback function 26 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Promise/Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Promise in JS

10 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Promise/Program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Promises in JavaScript

10 |

Result is:

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Promise/Program1.js: -------------------------------------------------------------------------------- 1 | function add(a, b) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | if (typeof a === "number" && typeof b === "number") { 5 | resolve(a + b); 6 | } else { 7 | reject("Error: Both inputs must be numbers"); 8 | } 9 | }, 2000); 10 | }); 11 | } 12 | 13 | function displayAddResult(result) { 14 | let resultEle = document.getElementById("result"); 15 | resultEle.innerText = result; 16 | resultEle.style.backgroundColor = "lightgreen"; 17 | console.log(result); 18 | } 19 | 20 | function displayErrMess(err) { 21 | console.log(err); 22 | let resultEle = document.getElementById("result"); 23 | resultEle.innerHTML = err; 24 | result.style.backgroundColor = "red"; 25 | } 26 | add(13, "14").then(displayAddResult).catch(displayErrMess); 27 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Promise/Program2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Promise Chaining

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Promise/Program2.js: -------------------------------------------------------------------------------- 1 | function add(a, b) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | if (typeof a == "number" && typeof b == "number") { 5 | let result = a + b; 6 | resolve(result); 7 | } else { 8 | reject("Error: Both inputs must be numbers"); 9 | } 10 | }, 2000); 11 | }); 12 | } 13 | 14 | function sub(resultAdd, b = 10) { 15 | let result = resultAdd - b; 16 | console.log(result); 17 | } 18 | 19 | add(20, "40") 20 | .then(sub) 21 | .catch((err) => { 22 | console.log(err); 23 | }); 24 | -------------------------------------------------------------------------------- /batch1/JavaScript/AsynchronousJS/Promise/Program3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Aysnc And Await

10 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /batch1/JavaScript/Intro/Program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

10 | 11 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /batch1/JavaScript/Intro/Program2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Variables in JS

10 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /batch1/JavaScript/Intro/Program3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /batch1/JavaScript/Loops/Division.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /batch1/JavaScript/Loops/ForLoop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

For Loop

10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /batch1/JavaScript/Loops/do-while.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Do while Loop

10 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /batch1/JavaScript/Loops/while.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

While loop

10 | 17 | 18 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /batch1/JavaScript/Loops/while_do_while.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

While Vs Do-While

10 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /batch1/JavaScript/Objects/BOM/Program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 12 | 13 | 14 |

Browser Object Model

15 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /batch1/JavaScript/Objects/BOM/Program2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

DOM in javascript

10 |

11 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /batch1/JavaScript/Objects/BOM/Program3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

I am heading and I can change content

10 |

Para Ele

11 | 12 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /batch1/JavaScript/Objects/BOM/Program4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

I am heading

10 |

I am paragraph, you can change my data using JavaScript

11 | 12 |

I am paragraph, you can change my data using JavaScript

13 | 14 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /batch1/JavaScript/Objects/BOM/Program5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Click the button to increase value or decrease value

10 | 11 | 12 | 13 |

I have clicked 0 times

14 | 15 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /batch1/JavaScript/Objects/BOM/Program6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /batch1/JavaScript/Objects/BOM/Program7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Query Selector in JavaScript

10 |

I am para 1

11 |

I am para 2

12 |

I am para 3

13 |
Div 1
14 |
Div 1
15 |
Div 1
16 |
Div 1
17 |
Div 1
18 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /batch1/JavaScript/Objects/Program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Object is javascript

10 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /batch1/JavaScript/conditionStatements/Program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

If and if-else statements

10 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /batch1/JavaScript/conditionStatements/Program2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

If-else-if ladder

10 |

Greatest of 15,20 and 10

11 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /batch1/JavaScript/conditionStatements/Program3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Switch Case

10 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /batch1/JavaScript/conditionStatements/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /batch1/JavaScript/conditionStatements/demo.js: -------------------------------------------------------------------------------- 1 | let value = 100; 2 | switch (value) { 3 | case value < 200: 4 | { 5 | console.log("value is less than 200"); 6 | } 7 | break; 8 | case value > 100: 9 | { 10 | console.log("value is greater than 100"); 11 | } 12 | break; 13 | default: { 14 | console.log("idiot, in case values i cannot check for conditions"); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /batch1/JavaScript/functions/program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Functions

10 |

11 | Functions are blocks of statements that are used to perform a task 12 |
13 | There are two types of functions depending on parameters
14 | 1. Non-parameterised
15 | 2. Parameterised
16 | 17 |
18 | There are three different functions based on naming 19 |
20 | 1. Function definition: they are defined using function keyword along with 21 | function name
22 | 2. Anonymous function: they are defined using function keyword and 23 | function name is not given
24 | 3. Arrow function: they are defined using arrow operator ()=> 25 |

26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /batch1/JavaScript/functions/program1.js: -------------------------------------------------------------------------------- 1 | // function definition 2 | function myFunctionDef() { 3 | document.write("I am a non-parameterised function
"); 4 | } 5 | 6 | myFunctionDef(); 7 | 8 | function myFunctionDefPara(myinput) { 9 | document.write("I am printing the data I got: " + myinput + "
"); 10 | } 11 | myFunctionDefPara("Ricky"); 12 | myFunctionDefPara(1997632); 13 | myFunctionDefPara("Amitabh Bachchan"); 14 | document.write("
----------------------------------------
"); 15 | // ------------------------------------------------- 16 | // anonymous functions 17 | // anonymous functions are functions without a name 18 | let myAnonFunc = function () { 19 | document.write("I am an anonymous function
"); 20 | }; 21 | 22 | myAnonFunc(); 23 | 24 | let myAnonFuncPara = function (myParameter) { 25 | document.write( 26 | "I am an anonymous function with a parameter: " + myParameter + "
" 27 | ); 28 | }; 29 | myAnonFuncPara("Grizzly Bear"); 30 | myAnonFuncPara("Polar Bear"); 31 | myAnonFuncPara(404.43); 32 | myAnonFuncPara(true); 33 | document.write("
----------------------------------------
"); 34 | // ------------------------------------------------- 35 | // arrow functions 36 | // arrow functions are functions without a name and function keyword 37 | // they are used to create small functions 38 | let arrowFunc = () => { 39 | document.write("I am an arrow function
"); 40 | }; 41 | arrowFunc(); 42 | let myArrowFuncPara = (n1, n2) => { 43 | document.write( 44 | "I am an arrow function with two parameters: " + n1 + " and " + n2 + "
" 45 | ); 46 | }; 47 | myArrowFuncPara(1500, 300); 48 | document.write("
----------------------------------------
"); 49 | // ------------------------------------------------- 50 | // IIFEE functions 51 | // IIFEE stands for Immediately Invoked Function Expression 52 | // they are used to create a function that runs immediately after it is defined 53 | // they are used to create a scope for the variables used inside the function 54 | 55 | let iifee = (function () { 56 | document.write("I am an IIFEE function expression"); 57 | })(); 58 | 59 | console.log("I am on the console"); 60 | console.log(window); 61 | -------------------------------------------------------------------------------- /batch1/MongoDB/playground-1.mongodb.js: -------------------------------------------------------------------------------- 1 | // create a database in mongodb 2 | use("Infosys-MERN"); 3 | 4 | // create collection in mongodb 5 | db.createCollection("users"); 6 | 7 | // insert into users collection 8 | // db.users.insertOne({ 9 | // _id: "user_01", 10 | // name: "John Doe", 11 | // email: "johndoe@example.com", 12 | // password: "password123", 13 | // role: "admin", 14 | // city: "Bangalore", 15 | // }); 16 | 17 | // to insert more than one at a time: 18 | // db.users.insertMany([ 19 | // { 20 | // _id: "user_02", 21 | // name: "Jane Doe", 22 | // email: "janedoe@example.com", 23 | // password: "password123", 24 | // role: "admin", 25 | // city: "Bangalore", 26 | // }, 27 | // { 28 | // _id: "user_03", 29 | // name: "John Smith", 30 | // email: "johnsmith@example.com", 31 | // password: "password123", 32 | // role: "user", 33 | // city: "Mumbai", 34 | // }, 35 | // { 36 | // _id: "user_04", 37 | // name: "Jane Smith", 38 | // email: "janesmith@example.com", 39 | // password: "password123", 40 | // role: "user", 41 | // city: "Delhi", 42 | // }, 43 | // { 44 | // _id: "user_05", 45 | // name: "John Johnson", 46 | // email: "johnjohnson@example.com", 47 | // password: "password123", 48 | // role: "data admin", 49 | // city: "Chennai", 50 | // }, 51 | // { 52 | // _id: "user_06", 53 | // name: "Jane Johnson", 54 | // email: "janeyjohnson@example.com", 55 | // password: "password123", 56 | // role: "software engineer", 57 | // city: "Hyderabad", 58 | // }, 59 | // ]); 60 | 61 | // to read from database 62 | db.users.find(); 63 | -------------------------------------------------------------------------------- /batch1/MongoDB/playground-2.mongodb.js: -------------------------------------------------------------------------------- 1 | use("Infosys-MERN"); 2 | 3 | db.getCollectionNames(); 4 | 5 | // db.users.find(); 6 | // fetch data of user id 3 7 | // db.users.find({ _id: "user_03" }); 8 | 9 | // fetch data of users whose names start with j 10 | // db.users.find({ name: { $regex: /^j/, $options: "i" } }); 11 | 12 | // update the email of the user with id 3 as gomes@example.com 13 | // db.users.updateOne( 14 | // { _id: "user_03" }, 15 | // { $set: { email: "gomes@example.com" } } 16 | // ); 17 | 18 | // delete the user with user id 02 19 | // db.users.deleteOne({ _id: "user_02" }); 20 | // db.users.find(); 21 | 22 | // rename users collection to employees 23 | // db.users.renameCollection("employees"); 24 | -------------------------------------------------------------------------------- /batch1/MongoDB/playground-3.mongodb.js: -------------------------------------------------------------------------------- 1 | use("Infosys-MERN"); 2 | 3 | // db.createCollection("managers"); 4 | 5 | // db.managers.insertOne({ 6 | // _id: "man_01", 7 | // name: "Bon", 8 | // email: "bon@example.com", 9 | // contact: 124456, 10 | // }); 11 | // db.managers.insertMany([ 12 | // { 13 | // _id: "man_02", 14 | // name: "Ronn", 15 | // email: "ronn@example.com", 16 | // contact: 123456, 17 | // }, 18 | // { 19 | // _id: "man_03", 20 | // name: "Donn", 21 | // email: "donn@example.com", 22 | // contact: 125456, 23 | // }, 24 | // ]); 25 | 26 | // db.createCollection("departments"); 27 | // db.departments.insertOne({ 28 | // _id: "dept_01", 29 | // name: "Sales", 30 | // manager: "man_01", 31 | // teamLead: "user_01", 32 | // members: ["users_01", "user_02"], 33 | // }); 34 | 35 | // db.departments.find(); 36 | -------------------------------------------------------------------------------- /batch1/MongoDB/playground-4.mongodb.js: -------------------------------------------------------------------------------- 1 | use("Infosys-MERN"); 2 | 3 | // write an aggregation function to display details of department with id dept_01 4 | 5 | // db.departments.find(); 6 | 7 | // db.departments.aggregate([ 8 | // { 9 | // $match: { 10 | // _id: "dept_01", 11 | // }, 12 | // }, 13 | // ]); 14 | 15 | // write an agg func to display the details of manager of the dept dept_01 16 | db.departments.aggregate([ 17 | { 18 | $match: { 19 | _id: "dept_01", 20 | }, 21 | }, 22 | { 23 | $lookup: { 24 | // capture details from another collection 25 | from: "managers", 26 | localField: "manager", 27 | foreignField: "_id", 28 | as: "manager_details", 29 | }, 30 | }, 31 | { 32 | $unwind: "$manager_details", 33 | }, 34 | ]); 35 | -------------------------------------------------------------------------------- /batch1/NodeJS.txt: -------------------------------------------------------------------------------- 1 | Nodejs provides JS runtime environment to execute server side scripting 2 | - Node.js is built on Chrome's V8 JavaScript engine 3 | - Node.js is event-driven, non-blocking I/O model that makes it lightweight and efficient 4 | - Node.js supports multiple programming languages, including JavaScript, TypeScript, and CoffeeScript 5 | - Node.js has a vast ecosystem of packages and modules available through the npm package manager 6 | 7 | Modules in Nodejs 8 | ------------------- 9 | - Modules are reusable pieces of code that can be used in multiple applications 10 | - Modules can be written in JavaScript, TypeScript, or other languages 11 | - Modules can be installed using npm or yarn package managers 12 | - Modules can be required(imported) in other modules using the `require()` function 13 | 14 | Types of modules in Nodejs 15 | --------------------------- 16 | - Built-in modules: These are modules that come pre-installed with Node.js, such as `http module` 17 | - Third-party modules: These are modules that are not part of the Node.js core, but can be installed 18 | using npm 19 | - Custom modules: These are modules that are created by developers to solve specific problems 20 | ---------------------------------------------------------------------------------------------- 21 | HTTP module in Nodejs 22 | ------------------- 23 | - The HTTP module in Node.js allows developers to create web servers and handle HTTP requests 24 | 25 | What is a webserver? 26 | ------------------- 27 | - A web server is a program that listens for incoming HTTP requests from clients and sends back HTTP responses 28 | - Web servers can be used to serve static files, such as HTML, CSS, and images, 29 | or to run server-side scripts, such as Node.js applications 30 | ----------------------------- 31 | File Module in Nodejs 32 | ------------------- 33 | - The File module in Node.js allows developers to interact with the file system 34 | - It provides methods to read and write files, create directories, and delete files 35 | - It also provides methods to check if a file exists, get file stats, and more 36 | 37 | 38 | ------------------------------------ 39 | API 40 | ------------------------------------ 41 | - API stands for Application Programming Interface 42 | - API is a set of defined rules that enables different applications to communicate with each other 43 | - API can be used to interact with external services, such as databases, file systems, and web servers 44 | - API can be used to create web services, such as RESTful APIs, GraphQL APIs, and 45 | WebSockets, SOAP APIs 46 | -------------------------------------------------------------------------------- /batch1/Nodejs/FileModule/MyFile.txt: -------------------------------------------------------------------------------- 1 | The Lion and the Mouse 2 | A lion is lying under a tree when a mouse accidentally steps on his paw. 3 | The lion wants to crush the mouse, but the mouse promises to repay him. 4 | A few days later, the lion gets trapped in a hunter's net, and the mouse gnaws the net to free him. -------------------------------------------------------------------------------- /batch1/Nodejs/FileModule/MyFile2.txt: -------------------------------------------------------------------------------- 1 | The Lion and the Mouse 2 | A lion is lying under a tree when a mouse accidentally steps on his paw. 3 | The lion wants to crush the mouse, but the mouse promises to repay him. 4 | A few days later, the lion gets trapped in a hunter's net, and the mouse gnaws the net to free him. -------------------------------------------------------------------------------- /batch1/Nodejs/FileModule/MyFile3.txt: -------------------------------------------------------------------------------- 1 | The Lion and the Mouse 2 | A lion is lying under a tree when a mouse accidentally steps on his paw. 3 | The lion wants to crush the mouse, but the mouse promises to repay him. 4 | A few days later, the lion gets trapped in a hunter's net, and the mouse gnaws the net to free him. -------------------------------------------------------------------------------- /batch1/Nodejs/FileModule/read.js: -------------------------------------------------------------------------------- 1 | // reading MyFile.txt 2 | 3 | // import fs module 4 | const fs = require("fs"); 5 | // read file content synchrnously 6 | const fileData = fs.readFileSync("./MyFile.txt", "utf-8"); 7 | console.log(fileData); 8 | 9 | // read file data asynchrnously 10 | fs.readFile("./MyFile.txt", "utf-8", (err, data) => { 11 | if (err) { 12 | console.log(err); 13 | } else { 14 | console.log(data); 15 | } 16 | }); 17 | 18 | console.log("...................I am after reading the file..............."); 19 | -------------------------------------------------------------------------------- /batch1/Nodejs/FileModule/write.js: -------------------------------------------------------------------------------- 1 | // read data from MyFile.txt and write into MyFile2.txt 2 | // read data from MyFile.txt 3 | // write data into MyFile2.txt 4 | const fs = require("fs"); 5 | const data = fs.readFileSync("./MyFile.txt", "utf8"); 6 | // write data into MyFile2.txt 7 | fs.writeFileSync("./MyFile2.txt", data); 8 | 9 | console.log("Read and write operation complete"); 10 | 11 | // write file asynchronously 12 | // read data from MyFile.txt and write into MyFile2.txt 13 | fs.writeFile("./MyFile3.txt", data, (err) => { 14 | if (err) { 15 | console.log(err); 16 | } 17 | }); 18 | 19 | console.log("\n-------------I am after writing data----------------\n"); 20 | -------------------------------------------------------------------------------- /batch1/Nodejs/httpModule/index.js: -------------------------------------------------------------------------------- 1 | // http module is used to make http requests to other resources etc 2 | const http = require("node:http"); 3 | 4 | // creating a simple webserver 5 | const server = http.createServer((req, res) => { 6 | res.write("Hello from nodejs server"); 7 | res.end(); 8 | }); 9 | 10 | // server is listening on port 4000 11 | server.listen(4000, () => { 12 | console.log("server is running on port 4000"); 13 | }); 14 | -------------------------------------------------------------------------------- /batch1/Nodejs/httpModule/jsonDisplay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 17 | 18 | 19 |

Fetch data from localserver

20 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /batch1/Nodejs/httpModule/jsondata.js: -------------------------------------------------------------------------------- 1 | const http = require("node:http"); 2 | 3 | const server = http.createServer((req, res) => { 4 | // Set appropriate headers for CORS and content type 5 | res.setHeader("Access-Control-Allow-Origin", "*"); 6 | res.setHeader("Access-Control-Allow-Methods", "GET"); 7 | res.setHeader("Content-Type", "application/json"); 8 | 9 | // Set response status code 10 | res.writeHead(200); 11 | 12 | // Define the JSON response 13 | const message = { 14 | message: "Hello, World!", 15 | Name: "John Doe", 16 | Age: 23, 17 | Profession: "Doctor", 18 | }; 19 | 20 | // Send the response 21 | res.end(JSON.stringify(message)); 22 | }); 23 | 24 | // Start the server 25 | server.listen(5000, () => { 26 | console.log("Server is running on port 5000"); 27 | }); 28 | -------------------------------------------------------------------------------- /batch1/Nodejs/modules/demo.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/Nodejs/modules/demo.js -------------------------------------------------------------------------------- /batch1/Nodejs/modules/index.js: -------------------------------------------------------------------------------- 1 | // import the function from program1.js 2 | const { add, sub, multiply } = require("./program1"); 3 | 4 | // use the function 5 | add(15, 25); 6 | sub(16, 7); 7 | multiply(16, 3); 8 | 9 | // To what kind of files do you use require() 10 | // common js file 11 | // you can use require() in node.js 12 | 13 | // import statement: in sometime 14 | // node demo.js -------------------------------------------------------------------------------- /batch1/Nodejs/modules/program1.js: -------------------------------------------------------------------------------- 1 | function add(a, b) { 2 | let r = a + b; 3 | console.log(r); 4 | } 5 | 6 | function sub(a, b) { 7 | let r = a - b; 8 | console.log(r); 9 | } 10 | 11 | function multiply(a, b) { 12 | let r = a * b; 13 | console.log(r); 14 | } 15 | 16 | // export functions from one file to another 17 | module.exports = { add, sub, multiply }; 18 | 19 | // module is a set of code written in order to be reused 20 | -------------------------------------------------------------------------------- /batch1/React/project1/.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 | -------------------------------------------------------------------------------- /batch1/React/project1/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 | -------------------------------------------------------------------------------- /batch1/React/project1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^1.7.9", 7 | "bootstrap": "^5.3.3", 8 | "cra-template": "1.2.0", 9 | "react": "^19.0.0", 10 | "react-dom": "^19.0.0", 11 | "react-router-dom": "^7.0.2", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^4.2.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 | -------------------------------------------------------------------------------- /batch1/React/project1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/React/project1/public/favicon.ico -------------------------------------------------------------------------------- /batch1/React/project1/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 | -------------------------------------------------------------------------------- /batch1/React/project1/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/React/project1/public/logo192.png -------------------------------------------------------------------------------- /batch1/React/project1/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/React/project1/public/logo512.png -------------------------------------------------------------------------------- /batch1/React/project1/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 | -------------------------------------------------------------------------------- /batch1/React/project1/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /batch1/React/project1/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 | -------------------------------------------------------------------------------- /batch1/React/project1/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import MyFirstComp from "./components/MyFirstComp"; 3 | import MySecComp from "./components/MySecComp"; 4 | import Function1 from "./components/Function1"; 5 | import ClassComp from "./components/ClassComp"; 6 | import ChangeState from "./components/ChangeState"; 7 | import ToggleState from "./components/ToggleState"; 8 | import ToggleState2 from "./components/ToggleState2"; 9 | import UseState from "./components/UseState"; 10 | import UseEffect from "./components/UseEffect"; 11 | import ProfileRoutes from "./components/ProfileRoutes"; 12 | function App() { 13 | // Parent Component 14 | // const person = { 15 | // name: "Sachin", 16 | // age: 50, 17 | // country: "India", 18 | // }; 19 | return ( 20 |
21 | {/* */} 22 | {/* Child Component */} 23 | {/* */} 24 | {/* */} 25 | {/* */} 26 | {/*
*/} 27 | {/* */} 28 | {/*
*/} 29 | {/* */} 30 | {/*
*/} 31 | {/* */} 32 | {/*
*/} 33 | {/* */} 34 | {/* */} 35 | 36 |
37 | ); 38 | } 39 | 40 | export default App; 41 | -------------------------------------------------------------------------------- /batch1/React/project1/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 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/ChangeState.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class ChangeState extends Component { 4 | constructor() { 5 | super(); 6 | this.state = { 7 | name: "John", 8 | }; 9 | // bind handleClick : binding the handleClick function to the current class object 10 | this.handleClick = this.handleClick.bind(this); 11 | console.log(this); 12 | } 13 | handleClick() { 14 | this.setState({ 15 | name: "Jane", 16 | }); 17 | } 18 | // the event handling function must be binded with the state 19 | render() { 20 | return ( 21 |
22 |

My name is {this.state.name}

23 | 24 |
25 | ); 26 | } 27 | } 28 | 29 | export default ChangeState; 30 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/ClassComp.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class ClassComp extends Component { 4 | constructor() { 5 | // a constructor is a function in classes which will initialise an object 6 | super(); //invoke th super class constructor 7 | this.state = { 8 | // state is only present in class component 9 | name: "Sachin", 10 | age: 50, 11 | country: "India", 12 | }; 13 | } 14 | render() { 15 | return ( 16 |
17 |

I am a class component

18 |

19 | Hi my name is {this.state.name} and I am {this.state.age} years of age 20 | and I come from {this.state.country} 21 |

22 |
23 | ); 24 | } 25 | } 26 | 27 | export default ClassComp; 28 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/Function1.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Function2 from "./Function2"; 3 | function Function1(props) { 4 | const { Obj } = props; 5 | return ( 6 |
7 |

Function 1 Component

8 |

Function 1 is called in App and is accessing props

9 |
10 | 11 |
12 | ); 13 | } 14 | 15 | export default Function1; 16 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/Function2.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Function3 from "./Function3"; 3 | 4 | function Function2(props) { 5 | const { appData } = props; 6 | return ( 7 |
8 |

I am function 2

9 |

I am called inside function1

10 |
11 | 12 |
13 | ); 14 | } 15 | 16 | export default Function2; 17 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/Function3.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Function3(props) { 4 | console.log("props from func 3"); 5 | console.log(props); 6 | const { func1Data } = props; 7 | return ( 8 |
9 |

I am function3

10 |

I am called in Function 2

11 |

I display the data given in app

12 |

13 | Data given from app to func 3 is : {func1Data.name} , {func1Data.age}{" "} 14 | and {func1Data.country} 15 |

16 |
17 | ); 18 | } 19 | 20 | export default Function3; 21 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/MyFirstComp.jsx: -------------------------------------------------------------------------------- 1 | // functional components 2 | import React from "react"; 3 | 4 | function MyFirstComp(props) { 5 | console.log(props); 6 | console.log(props.name); 7 | console.log(props.age); 8 | return ( 9 |
10 |

My First Component

11 |

My name is {props.name}

12 |

My age is {props.age}

13 |
14 | ); 15 | } 16 | 17 | export default MyFirstComp; 18 | // JSX : JavaScript and XML ; When a JS function returns an HTML element 19 | // JSX is a syntax extension for JavaScript. It allows you to write HTML in your JavaScript files. 20 | // JSX is not a separate language, but a syntax extension for JavaScript. It is used with React 21 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/MySecComp.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function MySecComp(props) { 4 | console.log(props); 5 | const { myObj } = props; 6 | return ( 7 |
8 |

My Second Component

9 |

My name is : {props.myObj.name}

10 |

My age is : {props.myObj.age}

11 |

My country is : {props.myObj.country}

12 |
13 |

My name is : {myObj.name}

14 |

My age is : {myObj.age}

15 |

My country is : {myObj.country}

16 |
17 | ); 18 | } 19 | 20 | export default MySecComp; 21 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/ProfileRoutes.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import UseEffect from "./UseEffect"; 3 | import { BrowserRouter, Route, Routes } from "react-router-dom"; 4 | import SingleProfilePage from "./SingleProfilePage"; 5 | function ProfileRoutes() { 6 | return ( 7 |
8 | 9 | 10 | } /> 11 | } 14 | /> 15 | 16 | 17 |
18 | ); 19 | } 20 | 21 | export default ProfileRoutes; 22 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/SingleProfilePage.jsx: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import React, { useEffect, useState } from "react"; 3 | import { useParams } from "react-router-dom"; 4 | 5 | function SingleProfilePage() { 6 | const [people, setPeople] = useState([]); 7 | const { id } = useParams(); 8 | useEffect(() => { 9 | axios.get("https://jsonplaceholder.typicode.com/users").then((res) => { 10 | setPeople(res.data); 11 | }); 12 | }, []); 13 | console.log(id); 14 | 15 | function Display() { 16 | return people.map((person) => { 17 | if (person.id === parseInt(id)) { 18 | return ( 19 |
20 |

{person.id}

21 |

{person.name}

22 |

{person.username}

23 |

{person.email}

24 |

25 | {person.address.stree}, {person.address.suite},{" "} 26 | {person.address.city}, {person.address.zipcode} 27 |

28 |
29 | ); 30 | } 31 | }); 32 | } 33 | return ( 34 |
35 |

Single Profile Page, ID captured is {id}

36 | {Display()} 37 |
38 | ); 39 | } 40 | 41 | export default SingleProfilePage; 42 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/ToggleState.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class ToggleState extends Component { 4 | constructor() { 5 | super(); 6 | this.state = { 7 | name1: "Sachin", 8 | name2: "Virat", 9 | toggle: true, 10 | }; 11 | } 12 | toggleState = () => { 13 | this.setState({ 14 | toggle: !this.state.toggle, 15 | }); 16 | }; 17 | render() { 18 | if (this.state.toggle) { 19 | return ( 20 |
21 |

Hello my name is {this.state.name1}

22 | 23 |
24 | ); 25 | } else { 26 | return ( 27 |
28 |

Hello my name is {this.state.name2}

29 | 30 |
31 | ); 32 | } 33 | } 34 | } 35 | 36 | export default ToggleState; 37 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/ToggleState2.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class ToggleState2 extends Component { 4 | constructor() { 5 | super(); 6 | this.state = { 7 | name: "Sachin", 8 | }; 9 | } 10 | toggleName = () => { 11 | this.setState((prevState) => ({ 12 | name: prevState.name === "Sachin" ? "Virat" : "Sachin", 13 | })); 14 | }; 15 | render() { 16 | return ( 17 |
18 |

Hello My name is {this.state.name}

19 | 20 |
21 | ); 22 | } 23 | } 24 | 25 | export default ToggleState2; 26 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/UseEffect.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import "../../node_modules/bootstrap/dist/css/bootstrap.min.css"; 4 | import { Link } from "react-router-dom"; 5 | 6 | function UseEffect() { 7 | const [people, setPeople] = useState([]); 8 | useEffect(() => { 9 | axios 10 | .get("https://jsonplaceholder.typicode.com/users") 11 | .then((res) => { 12 | setPeople(res.data); 13 | document.getElementById("p1").innerHTML = "Data Fetched Successfully"; 14 | }) 15 | .catch((err) => { 16 | console.log(err); 17 | }); 18 | }, []); 19 | 20 | function Display() { 21 | return people.map((person) => { 22 | return ( 23 | 24 | 25 | {person.id} 26 | 27 | {person.name} 28 | {person.username} 29 | {person.email} 30 | 31 | ); 32 | }); 33 | } 34 | return ( 35 |
36 | {/* {console.log(people)} */} 37 |

38 | Capture data from a given resource 39 |

40 |

41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | {Display()} 51 |
IdNameUsernameEmail
52 |
53 | ); 54 | } 55 | 56 | export default UseEffect; 57 | -------------------------------------------------------------------------------- /batch1/React/project1/src/components/UseState.jsx: -------------------------------------------------------------------------------- 1 | // how to access state inside a react functional component 2 | 3 | import React, { useState } from "react"; 4 | 5 | function UseState() { 6 | // declare a state variable 7 | const [count, setCount] = useState(0); 8 | 9 | const [color, setColor] = useState("red"); 10 | 11 | function increment() { 12 | setCount(count + 1); 13 | } 14 | function changeColor() { 15 | setColor("blue"); 16 | } 17 | 18 | return ( 19 |
20 |

UseState function in React

21 |

I have clicked {count} times

22 |

my favorite color is: {color}

23 | 24 | 25 |
26 | ); 27 | } 28 | 29 | export default UseState; 30 | -------------------------------------------------------------------------------- /batch1/React/project1/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 | -------------------------------------------------------------------------------- /batch1/React/project1/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 | -------------------------------------------------------------------------------- /batch1/React/project1/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /batch1/React/project1/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 | -------------------------------------------------------------------------------- /batch1/React/project1/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 | -------------------------------------------------------------------------------- /batch1/React/project2/.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 | -------------------------------------------------------------------------------- /batch1/React/project2/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 | -------------------------------------------------------------------------------- /batch1/React/project2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "cra-template": "1.2.0", 7 | "react": "^19.0.0", 8 | "react-dom": "^19.0.0", 9 | "react-scripts": "5.0.1", 10 | "web-vitals": "^4.2.4" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": [ 20 | "react-app", 21 | "react-app/jest" 22 | ] 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /batch1/React/project2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/React/project2/public/favicon.ico -------------------------------------------------------------------------------- /batch1/React/project2/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 | -------------------------------------------------------------------------------- /batch1/React/project2/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/React/project2/public/logo192.png -------------------------------------------------------------------------------- /batch1/React/project2/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/React/project2/public/logo512.png -------------------------------------------------------------------------------- /batch1/React/project2/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 | -------------------------------------------------------------------------------- /batch1/React/project2/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /batch1/React/project2/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 | -------------------------------------------------------------------------------- /batch1/React/project2/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo.svg"; 2 | import "./App.css"; 3 | import CompA from "./components/CompA"; 4 | import Display from "./components/Display"; 5 | import { UserProvider } from "./components/Context"; 6 | import Display2 from "./components/Display2"; 7 | import { ThemeProvider } from "./components/ThemeContext"; 8 | import ToggleTheme from "./components/ToggleTheme"; 9 | function App() { 10 | return ( 11 |
12 | {/* */} 13 | {/*
*/} 14 | {/* */} 15 | {/* 16 | */} 17 | {/*
*/} 18 | {/* */} 19 | 20 | 21 | 22 |
23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /batch1/React/project2/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 | -------------------------------------------------------------------------------- /batch1/React/project2/src/components/CompA.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import CompB from "./CompB"; 3 | 4 | function CompA() { 5 | return ( 6 |
7 |

I am component A

8 | 9 |
10 | ); 11 | } 12 | 13 | export default CompA; 14 | -------------------------------------------------------------------------------- /batch1/React/project2/src/components/CompB.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import CompC from "./CompC"; 3 | 4 | function CompB(props) { 5 | return ( 6 |
7 |

Hi I am component B

8 | 9 |
10 | ); 11 | } 12 | 13 | export default CompB; 14 | -------------------------------------------------------------------------------- /batch1/React/project2/src/components/CompC.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function CompC(props) { 4 | console.log(props); 5 | return ( 6 |
7 |

I am component C

8 |

Props: {props.name}

9 |
10 | ); 11 | } 12 | 13 | export default CompC; 14 | -------------------------------------------------------------------------------- /batch1/React/project2/src/components/Context.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | 3 | //create a context 4 | // tell the component that there is some data to be passed 5 | export const UserContext = React.createContext(); 6 | 7 | // Provide the context : provide the data 8 | // this is the top level component that will provide the data 9 | // to all the components below it 10 | export const UserProvider = ({ children }) => { 11 | const user = { 12 | username: "John", 13 | age: 30, 14 | }; 15 | // user object must be provided to all the underlying components 16 | return ( 17 | // Wrap the Provider around the context() 18 | {children} 19 | ); 20 | }; 21 | 22 | // export the context 23 | export const useUser = () => { 24 | return useContext(UserContext); 25 | }; 26 | -------------------------------------------------------------------------------- /batch1/React/project2/src/components/Display.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useUser } from "./Context"; 3 | function Display() { 4 | const user = useUser(); 5 | console.log(user); 6 | return ( 7 |
8 |

Display component

9 |

Username: {user.username}

10 |

Age: {user.age}

11 |
12 | ); 13 | } 14 | 15 | export default Display; 16 | -------------------------------------------------------------------------------- /batch1/React/project2/src/components/Display2.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useUser } from "./Context"; 3 | function Display2() { 4 | const user = useUser(); 5 | console.log(user); 6 | return ( 7 |
8 |

Display2

9 |

Username : {user.username}

10 |

Age : {user.age}

11 |
12 | ); 13 | } 14 | 15 | export default Display2; 16 | -------------------------------------------------------------------------------- /batch1/React/project2/src/components/ThemeContext.jsx: -------------------------------------------------------------------------------- 1 | // light , dark if value of state variable is light then apply bg-color white else apply bg-black 2 | import React, { useContext } from "react"; 3 | 4 | export const ThemeContext = React.createContext(); 5 | 6 | // create context with default value of light 7 | export const ThemeProvider = ({ children }) => { 8 | const [theme, setTheme] = React.useState("light"); 9 | 10 | const toggleTheme = () => { 11 | setTheme((prevTheme) => { 12 | console.log(theme); 13 | return prevTheme === "light" ? "dark" : "light"; 14 | }); 15 | }; 16 | // if bg is white then the color of text will be black else should be white 17 | const themeStyles = { 18 | backgroundColor: theme === "light" ? "#fff" : "#333", 19 | color: theme === "light" ? "black" : "white", 20 | }; 21 | return ( 22 | 23 | {children} 24 | 25 | ); 26 | }; 27 | 28 | export const useTheme = () => { 29 | return useContext(ThemeContext); 30 | }; 31 | -------------------------------------------------------------------------------- /batch1/React/project2/src/components/ToggleTheme.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useTheme } from "./ThemeContext"; 3 | function ToggleTheme() { 4 | // const theme = useTheme(); 5 | // console.log(theme); 6 | const { theme, toggleTheme } = useTheme(); 7 | return ( 8 |
9 | 13 |
14 | ); 15 | } 16 | 17 | export default ToggleTheme; 18 | -------------------------------------------------------------------------------- /batch1/React/project2/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 | -------------------------------------------------------------------------------- /batch1/React/project2/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 | -------------------------------------------------------------------------------- /batch1/React/project2/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /batch1/React/project2/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 | -------------------------------------------------------------------------------- /batch1/React/project2/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 | -------------------------------------------------------------------------------- /batch1/ReactNotes.txt: -------------------------------------------------------------------------------- 1 | What is React JS 2 | React is a JavaScript library for building user interfaces. 3 | It allows developers to create reusable UI components and manage state and props (data) 4 | 5 | Installing: 6 | npx create-react-app@latest project1 7 | cd project1 8 | npm start 9 | --------------------------------------------------------- 10 | Component in ReactJS 11 | A React component is a small, reusable piece of code that represents a UI element. It can be 12 | a function, a class. Components can be nested inside each other to create 13 | complex UI structures. 14 | 15 | Functional Component: 16 | A functional component is a simple function that returns JSX elements. It does not have 17 | its own state or lifecycle methods 18 | To handle data it makes of props 19 | 20 | Any component once created has to be called in App.JS 21 | The component which calls the other component is called as Parent Component 22 | The component which is called by the Parent Component is called as Child Component 23 | 24 | Component Nesting: 25 | Components can be nested inside each other to create complex UI structures. 26 | Data can be passed from the top-most component to the lower-most component using props 27 | This process is called as Props Drilling 28 | Which leads to unwanted complication in the code 29 | To overcome this complication we use a function called useContext() 30 | --------------------------------------------------------- 31 | Homework: Learn class Component in react and state? 32 | 33 | ------------------------------------------------------------------------ 34 | useContext: 35 | useContext is a hook that allows you to share data between components without passing props down manually. 36 | It's a way to manage global state in your application. 37 | 38 | npx create-react-app project2 39 | cd project2 40 | npm start 41 | 42 | npm i web-vitals 43 | 44 | How to use useContext() 45 | 1. Import the useContext hook from the react library 46 | 2. Create a context(data that is supposed to be passed) using the createContext function from the react library 47 | 3. Wrap the context with the Provider component from the react library 48 | 4. Use the useContext hook in the component where you want to access the context 49 | -------------------------------------------------------------------------------- /batch1/crud-app/client/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /batch1/crud-app/client/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /batch1/crud-app/client/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /batch1/crud-app/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /batch1/crud-app/client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.7.9", 14 | "bootstrap": "^5.3.3", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-router-dom": "^7.1.5" 18 | }, 19 | "devDependencies": { 20 | "@types/react": "^18.2.66", 21 | "@types/react-dom": "^18.2.22", 22 | "@vitejs/plugin-react": "^4.2.1", 23 | "eslint": "^8.57.0", 24 | "eslint-plugin-react": "^7.34.1", 25 | "eslint-plugin-react-hooks": "^4.6.0", 26 | "eslint-plugin-react-refresh": "^0.4.6", 27 | "vite": "^5.2.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /batch1/crud-app/client/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/App.jsx: -------------------------------------------------------------------------------- 1 | import PageRoutes from "./pages/PageRoutes"; 2 | 3 | function App() { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | function Footer() { 4 | return ( 5 | 16 | ); 17 | } 18 | 19 | export default Footer; 20 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import { Link } from "react-router-dom"; 4 | function Header() { 5 | return ( 6 | 38 | ); 39 | } 40 | 41 | export default Header; 42 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/components/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Header from "./Header"; 3 | import Footer from "./Footer"; 4 | 5 | function Layout(props) { 6 | return ( 7 |
8 |
9 |
{props.children}
10 |
11 |
12 | ); 13 | } 14 | 15 | export default Layout; 16 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/crud-app/client/src/index.css -------------------------------------------------------------------------------- /batch1/crud-app/client/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/pages/EditPage.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Layout from "../components/Layout"; 3 | import { useParams } from "react-router-dom"; 4 | import axios from "axios"; 5 | 6 | function EditPage() { 7 | // userparam to get id 8 | const { id } = useParams(); 9 | const [user, setUser] = useState(); 10 | const [loading, setLoading] = useState(true); 11 | const [fullName, setFullName] = useState(); 12 | const [email, setEmail] = useState(); 13 | const [contact, setContact] = useState(); 14 | 15 | // function to fetch details of the particular user 16 | useEffect(() => { 17 | axios 18 | .get(`http://localhost:4000/users/getsingle/${id}`) 19 | .then((res) => { 20 | setUser(res.data); 21 | setLoading(false); 22 | setFullName(user.fullName); 23 | setEmail(user.email); 24 | setContact(user.contact); 25 | }) 26 | .catch((err) => { 27 | console.log(err); 28 | }); 29 | }, []); 30 | 31 | const handleSubmit = async (event) => { 32 | event.preventDefault(); 33 | const userObj = { 34 | fullName: fullName, 35 | email: email, 36 | contact: contact, 37 | }; 38 | console.log(userObj); 39 | try { 40 | const { data } = await axios.put( 41 | `http://localhost:4000/users/update/${id}`, 42 | userObj 43 | ); 44 | alert(data.message); 45 | } catch (err) { 46 | console.log(err); 47 | } 48 | }; 49 | if (loading) { 50 | return ( 51 | 52 |
Loading...
53 | 54 | ); 55 | } 56 | return ( 57 | 58 |
59 |
60 | 63 | { 70 | setFullName(e.target.value); 71 | }} 72 | defaultValue={user.fullName} 73 | /> 74 |
75 |
76 | 79 | { 86 | setEmail(e.target.value); 87 | }} 88 | defaultValue={user.email} 89 | /> 90 |
91 |
92 | 95 | { 102 | setContact(e.target.value); 103 | }} 104 | defaultValue={user.contact} 105 | /> 106 |
107 |
108 | 113 |
114 |
115 | 116 | ); 117 | } 118 | 119 | export default EditPage; 120 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Layout from "../components/Layout"; 3 | import axios from "axios"; 4 | import { Link } from "react-router-dom"; 5 | 6 | function Home() { 7 | const [users, setUsers] = useState(); 8 | const [loading, setLoading] = useState(true); 9 | 10 | useEffect(() => { 11 | axios 12 | .get("http://localhost:4000/users") 13 | .then((res) => { 14 | console.log(res); 15 | setUsers(res.data); 16 | setLoading(false); 17 | }) 18 | .catch((err) => { 19 | alert(err.message); 20 | }); 21 | }, []); 22 | 23 | async function deleteUser(id) { 24 | let response = await axios.delete( 25 | `http://localhost:4000/users/delete/${id}` 26 | ); 27 | alert(response.data.message); 28 | window.location.reload(); 29 | } 30 | 31 | function displayUsers() { 32 | return users.map((user, id) => { 33 | return ( 34 | 35 | {user.fullName} 36 | {user.email} 37 | {user.contact} 38 | 39 | 40 | 41 | 42 | 48 | 49 | 50 | ); 51 | }); 52 | } 53 | 54 | if (loading) { 55 | return ( 56 | 57 |
Loading...
58 | 59 | ); 60 | } 61 | return ( 62 | 63 |

Registered Profiles

64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | {displayUsers()} 74 |
Profile NameProfile EmailProfile ContactAction
75 | 76 | ); 77 | } 78 | 79 | export default Home; 80 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/pages/PageRoutes.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter, Route, Routes } from "react-router-dom"; 3 | import RegisterPage from "./RegisterPage"; 4 | import Home from "./Home"; 5 | import EditPage from "./EditPage"; 6 | function PageRoutes() { 7 | return ( 8 | 9 | 10 | } /> 11 | } /> 12 | } /> 13 | 14 | 15 | ); 16 | } 17 | 18 | export default PageRoutes; 19 | -------------------------------------------------------------------------------- /batch1/crud-app/client/src/pages/RegisterPage.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import Layout from "../components/Layout"; 4 | import axios from "axios"; 5 | function RegisterPage() { 6 | const [fullName, setFullName] = useState(""); 7 | const [email, setEmail] = useState(""); 8 | const [contact, setContact] = useState(""); 9 | 10 | const handleSubmit = async (event) => { 11 | event.preventDefault(); 12 | const userObj = { 13 | fullName: fullName, 14 | email: email, 15 | contact: contact, 16 | }; 17 | console.log(userObj); 18 | try { 19 | const { data } = await axios.post( 20 | "http://localhost:4000/users/register", 21 | userObj 22 | ); 23 | alert(data.message); 24 | } catch (err) { 25 | console.log(err); 26 | } 27 | }; 28 | 29 | return ( 30 | 31 |
32 |
33 | 36 | { 43 | setFullName(e.target.value); 44 | }} 45 | /> 46 |
47 |
48 | 51 | { 58 | setEmail(e.target.value); 59 | }} 60 | /> 61 |
62 |
63 | 66 | { 73 | setContact(e.target.value); 74 | }} 75 | /> 76 |
77 |
78 | 83 |
84 |
85 | 86 | ); 87 | } 88 | 89 | export default RegisterPage; 90 | -------------------------------------------------------------------------------- /batch1/crud-app/client/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /batch1/crud-app/server/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /batch1/crud-app/server/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const app = express(); 3 | const mongoose = require("mongoose"); 4 | const userRoutes = require("./routes/userRoutes"); 5 | const cors = require("cors"); 6 | const port = 4000; 7 | 8 | const connect = async () => { 9 | // connect mongodb 10 | try { 11 | await mongoose.connect("mongodb://127.0.0.1:27017/Info-Crud-App"); 12 | console.log("MongoDB Connected"); 13 | } catch (err) { 14 | console.log(err.message); 15 | } 16 | }; 17 | 18 | app.use(cors()); 19 | app.use(express.json()); 20 | 21 | app.get("/api", (req, res) => { 22 | res.json({ message: "API WORKING..." }); 23 | }); 24 | 25 | app.use("/users", userRoutes); 26 | 27 | app.listen(port, () => { 28 | connect(); 29 | console.log(`Server is running on port http://localhost:${port}`); 30 | }); 31 | -------------------------------------------------------------------------------- /batch1/crud-app/server/models/users.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | // model for users collection 4 | const userSchema = new mongoose.Schema({ 5 | fullName: String, 6 | email: String, 7 | contact: String, 8 | }); 9 | 10 | // export the schema 11 | module.exports = mongoose.model("User", userSchema); 12 | -------------------------------------------------------------------------------- /batch1/crud-app/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node index.js", 9 | "dev": "nodemon index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "body-parser": "^1.20.3", 16 | "cors": "^2.8.5", 17 | "express": "^4.21.2", 18 | "mongoose": "^8.9.6", 19 | "nodemon": "^3.1.9" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /batch1/crud-app/server/routes/userRoutes.js: -------------------------------------------------------------------------------- 1 | // import user schema 2 | const user = require("../models/users.js"); 3 | 4 | const express = require("express"); 5 | 6 | // build backend routes 7 | const router = express.Router(); 8 | 9 | // get all users 10 | router.get("/", async (req, res) => { 11 | try { 12 | const users = await user.find(); 13 | res.json(users); 14 | } catch (err) { 15 | res.status(500).json({ message: err.message }); 16 | } 17 | }); 18 | 19 | // router to insert data 20 | router.post("/register", async (req, res) => { 21 | const { fullName, email, contact } = req.body; 22 | 23 | try { 24 | const newUser = new user({ fullName, email, contact }); 25 | await newUser.save(); 26 | res.json({ user: newUser, message: "user registered successfully" }); 27 | } catch (err) { 28 | res.status(500).json({ message: err.message }); 29 | } 30 | }); 31 | 32 | // get single profile 33 | router.get("/getsingle/:id", async (req, res) => { 34 | const { id } = req.params; 35 | console.log(id); 36 | try { 37 | const userDoc = await user.findById(id); 38 | console.log(userDoc); 39 | if (!userDoc) return res.status(404).json({ message: "User not found" }); 40 | res.json(userDoc); 41 | } catch (err) { 42 | console.log(err); 43 | res.status(500).json({ message: err.message }); 44 | } 45 | }); 46 | 47 | // update a user by id 48 | router.put("/update/:id", async (req, res) => { 49 | const { id } = req.params; 50 | const { fullName, email, contact } = req.body; 51 | try { 52 | const userDoc = await user.findByIdAndUpdate( 53 | id, 54 | { fullName, email, contact }, 55 | { new: true } 56 | ); 57 | if (!userDoc) return res.status(404).json({ message: "User not found" }); 58 | res.json({ user: userDoc, message: "User updated successfully" }); 59 | } catch (err) { 60 | console.log(err); 61 | res.status(500).json({ message: err.message }); 62 | } 63 | }); 64 | 65 | // delete user based on id 66 | router.delete("/delete/:id", async (req, res) => { 67 | const { id } = req.params; 68 | try { 69 | const userDoc = await user.findByIdAndDelete(id); 70 | if (!userDoc) return res.status(404).json({ message: "User not found" }); 71 | res.json({ message: "User deleted successfully" }); 72 | } catch (err) { 73 | console.log(err); 74 | res.status(500).json({ message: err.message }); 75 | } 76 | }); 77 | 78 | module.exports = router; 79 | -------------------------------------------------------------------------------- /batch1/css/Top_Gun_Maverick_Poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/css/Top_Gun_Maverick_Poster.jpg -------------------------------------------------------------------------------- /batch1/css/animations/program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 27 | 28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /batch1/css/animations/program2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 29 | 30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /batch1/css/animations/program3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 52 | 53 | 54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /batch1/css/animations/program4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 27 | 28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /batch1/css/animations/program5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 26 | 27 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /batch1/css/animations/program6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 28 | 29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /batch1/css/assignmen1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 22 | 23 | 24 |
25 |
26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /batch1/css/background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 24 | 25 | 26 |
I am box 1 with image background
27 |
I am box2 with background gradient
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /batch1/css/blockDisplay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 15 | 16 | 17 | I am span1 18 | I am span2 19 | 20 | 21 | -------------------------------------------------------------------------------- /batch1/css/border/padding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 41 | 42 | 43 |
I am a box
44 |
I am padding-right
45 |
I am padding-right
46 |
I am padding-shorthand
47 | 48 | 49 | -------------------------------------------------------------------------------- /batch1/css/border/square.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 61 | 62 | 63 |
Square
64 |
65 |
66 |
67 |
68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /batch1/css/boxmodel1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 19 | 20 | 21 |
I am box
22 | 23 | 24 | -------------------------------------------------------------------------------- /batch1/css/centerDiv.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 24 | 25 | 26 |
27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /batch1/css/display.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 13 | 14 | 15 |

I am heading line 1

16 |

I am heading line 2

17 | 18 | 19 | -------------------------------------------------------------------------------- /batch1/css/flexDisplay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 25 | 26 | 27 |
28 |
Item 1
29 |
Item 2
30 |
Item 3
31 |
Item 4
32 |
Item 5
33 |
Item 6
34 |
Item 7
35 |
Item 8
36 |
Item 9
37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /batch1/css/font.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 21 | 22 | 23 |
24 |

25 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem eligendi 26 | quo, laboriosam, architecto maiores placeat delectus facilis consequatur 27 | beatae molestias nam libero explicabo cupiditate quam nemo a neque nihil 28 | voluptatem.Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem 29 | eligendi quo, laboriosam, architecto maiores placeat delectus facilis 30 | consequatur beatae molestias nam libero explicabo cupiditate quam nemo a 31 | neque nihil voluptatem.Lorem ipsum dolor sit amet consectetur 32 | adipisicing elit. Rem eligendi quo, laboriosam, architecto maiores 33 | placeat delectus facilis consequatur beatae molestias nam libero 34 | explicabo cupiditate quam nemo a neque nihil voluptatem. 35 |

36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /batch1/css/inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

10 | Welcome to my webpage

11 | 12 | 13 | -------------------------------------------------------------------------------- /batch1/css/inlineDisplay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 23 | 24 | 25 |
26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae 27 | voluptate inventore quod eius laborum quam hic eum sint, accusantium nobis 28 | consectetur consequatur, nulla ipsa tempore vel dicta iste aliquid fugiat. 29 |
30 |
31 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime 32 | accusantium quaerat aliquam odio facere quas nobis commodi eum, modi 33 | obcaecati tenetur vel laudantium officiis maiores fugiat mollitia 34 | voluptatem facilis magnam. 35 |
36 |

I am heading 2

37 | 38 | 39 | -------------------------------------------------------------------------------- /batch1/css/internal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 27 | 28 | 29 |

I am heading

30 |

I am paragraph

31 |
I am a division
32 | 33 | 34 |
I am a division with class c1
35 |
I am a division with id i1
36 |
I am division with no ID or class
37 | 38 | 39 | -------------------------------------------------------------------------------- /batch1/css/navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | background-color: lightcoral; 3 | display: flex; 4 | padding: 5px; 5 | justify-content: space-between; 6 | } 7 | 8 | a { 9 | text-decoration: none; 10 | color: black; 11 | padding: 5px; 12 | } 13 | -------------------------------------------------------------------------------- /batch1/css/navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
My Brand Name
12 |
13 | Home 14 | About 15 | Contact 16 | Login 17 | SignUp 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /batch1/css/positions/absolute.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 20 | 21 | 22 |
I am absolute div
23 |
24 | I am a reactangle, to make you see how i work with absoulte-div 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /batch1/css/positions/fixed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 23 | 24 | 25 |
I am fixed div
26 |

I am only for scroll

27 | 28 | 29 | -------------------------------------------------------------------------------- /batch1/css/positions/relative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 22 | 23 | 24 |
I am relative div
25 |

I am here for scrolling

26 | 27 | 28 | -------------------------------------------------------------------------------- /batch1/css/positions/static.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 21 | 22 | 23 |
I am a static div
24 |

I am here for scrolling

25 | 26 | 27 | -------------------------------------------------------------------------------- /batch1/css/positions/sticky.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 21 | 22 | 23 |
I am sticky div
24 |

I am only for scroll

25 | 26 | 27 | -------------------------------------------------------------------------------- /batch1/html/Top_Gun_Maverick_Poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch1/html/Top_Gun_Maverick_Poster.jpg -------------------------------------------------------------------------------- /batch1/html/caseSensitive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

This is h1 using h1

10 |

This is h1 using H1

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /batch1/html/intro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 |
Geography
13 |
It is the study of planet Earth and other aspects of earth
14 |
Chemistry
15 |
It is the study of chemicals and reactions
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /batch1/html/structure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My First Webpage 6 | 7 | 8 | 9 |

My First Webpage

10 |

My name is Richie Arnold and I will be training MERN

11 | poster here 12 |

Top Gun Maverick is my favorite movie

13 |

Top Gun Maverick is my favorite movie

14 | 15 | Read about the movie 18 | 19 | 20 | 21 |

This is a block element 1

22 |

This is a block element 2

23 | 24 | 26 | img1 27 | 28 | img2 29 | Anchor tag1 30 | Anchor tag2 31 | 32 |
I am a division
33 |
I am a division2
34 |
35 |

I am heading 1 inside a div

36 |

I am a paragraph

37 |
38 | 39 | 46 | 47 | 48 |

Ordered List

49 |
    50 |
  1. Apple
    2. 51 |
  2. Banana
    3. 52 |
  3. Orange
    4. 53 |
  4. Pineapple
    5. 54 |
  5. Watermelon
    6. 55 |
56 | 59 | 60 |

Unordered List

61 |
    62 |
  • Apple
    • 63 |
  • Banana
    • 64 |
  • Orange
    • 65 |
  • Pineapple
    • 66 |
  • Watermelon
    • 67 |
68 | 69 | 70 |

Description list

71 |
72 |
Definition Term
73 |
Definition Description
74 |
Oxygen
75 |
It is a gas
76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /batch1/html/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Tables

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
NameID
Sameer20
Akshay10
31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
Student Details
IDNameCourse
1AmithCSE
2Chetan
3BinduECE
4SameerME
63 | 64 | 65 | -------------------------------------------------------------------------------- /batch1/html/timetable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
Time table
Day9:00 - 10:0010:00 - 11:0011:00 - 12:0012:00 - 1:001:00 - 2:00
MondayMathsEnglishBreakSecond LangEnglish
MondayMathsEnglishSecond LangEnglish
TuesdayMathsEnglishSecond LangEnglish
WednesdayMathsEnglishSecond LangEnglish
ThursdayMathsEnglishSecond LangEnglish
FridayMathsEnglishSecond LangEnglish
70 | 71 | 72 | -------------------------------------------------------------------------------- /batch2/css/Program1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

10 | I am heading, using style attribute 11 |

12 |

13 | I am h1 with the same styling 14 |

15 |

I am another h1 with no style

16 | 17 | 18 | ` -------------------------------------------------------------------------------- /batch2/css/Program2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 17 | 18 | 19 |

I am heading

20 |

I am another heading

21 |

I am para

22 |

I am para

23 | 24 | 25 | -------------------------------------------------------------------------------- /batch2/css/Program3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 24 | 25 | 26 |
I am div with no attribute
27 |
I am div with class attribute
28 |
I am a div with id attribute
29 |

I am h1

30 |

I am h1

31 |

I am h1

32 | 33 | 34 | -------------------------------------------------------------------------------- /batch2/css/Program4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 18 | 19 | 20 |
I am div element
21 |
I am div element
22 |
i am div with class and id
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /batch2/css/Program5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 36 | 37 | 38 |

I am heading

39 |

40 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit 41 | saepe, mollitia voluptates cumque doloribus dolor ullam quod earum 42 | expedita quam nihil explicabo aperiam obcaecati. Eos minima labore 43 | adipisci quos esse. Lorem ipsum dolor sit amet consectetur adipisicing 44 | elit. Ipsum in qui et dicta, nemo consectetur quae ex dignissimos quo 45 | voluptatum. Expedita natus impedit dignissimos vitae officiis, quia eum 46 | iste sint! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum 47 | in qui et dicta, nemo consectetur quae ex dignissimos quo voluptatum. 48 | Expedita natus impedit dignissimos vitae officiis, quia eum iste sint! 49 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum in qui et 50 | dicta, nemo consectetur quae ex dignissimos quo voluptatum. Expedita natus 51 | impedit dignissimos vitae officiis, quia eum iste sint! 52 |

53 |
I am writing something
54 |
55 |
56 | 57 | 58 | -------------------------------------------------------------------------------- /batch2/css/Task1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 20 | 21 | 22 |
I am a division, can you read my text?
23 |
24 | I am a division with id and class, can you read my text? 25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /batch2/css/Top_Gun_Maverick_Poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/richieArnrich/infosys-mern/0f7bd3eb64508380593e9302c47fc57b510ed876/batch2/css/Top_Gun_Maverick_Poster.jpg -------------------------------------------------------------------------------- /batch2/css/cssNotes.txt: -------------------------------------------------------------------------------- 1 | =========================================================== 2 | Cascading Style Sheets 3 | =========================================================== 4 | 5 | What is CSS? 6 | ---------------- 7 | CSS is the styling language used in html 8 | It is used to add style to the web pages 9 | CSS is used to separate the presentation of a document from its structure, 10 | which is controlled by HTML or XML. 11 | 12 | ------------------ 13 | CSS can be applied in three ways 14 | 1. Inline CSS 15 | 2. Internal CSS 16 | 3. External CSS 17 | 18 | - 1. Inline CSS 19 | Inline CSS is used to add style to a single element 20 | It is written inside the element's tag (using style attribute) 21 | It is not recommended to use inline CSS as it can make the code messy 22 | and difficult to maintain. 23 | 24 | - 2. Internal CSS 25 | Internal CSS is used to add style to a single HTML document 26 | It is written inside the HTML document (inside the head tag using style tag) 27 | It is not recommended to use internal CSS as it can make 28 | the code messy and difficult to maintain. 29 | 30 | - 3. External CSS 31 | External CSS is used to add style to multiple HTML documents 32 | It is written in a separate file (with .css extension) 33 | It is linked to the html using tag 34 | It is recommended to use external CSS as it makes the code clean and easy to 35 | maintain. 36 | 37 | ----------------------------------------------------- 38 | CSS Selectors 39 | ----------------------------------------------------- 40 | What are css selectors? 41 | ----------------- 42 | CSS selectors are used to select the elements in the HTML document 43 | They are used to apply styles to the selected elements. 44 | 45 | There are four types of selectors 46 | 1. Element selectors: 47 | These are used to select elements based on their element name 48 | Example: p {color: blue;} selects all the paragraph elements. 49 | 2. Class selectors: 50 | These are used to select elements based on their class name 51 | It is denoted using . 52 | Example: .red {color: red;} selects all the elements with class name red. 53 | 3. ID selectors 54 | These are used to select elements based on their id name 55 | It is denoted using # 56 | Example: #red {color: red;} selects the element with id name red. 57 | 4. Universal selector: 58 | This is used to select all elements in the document 59 | It is denoted using * 60 | Example: * {color: blue;} selects all the elements in the document. 61 | 62 | ----------------------------------------------------- 63 | CSS specificity 64 | ----------------------------------------------------- 65 | CSS specificity is used to determine which style will be applied when there are 66 | multiple styles with the same property and value 67 | 68 | Order of css specificity: 69 | => id>class>element>universal 70 | ----------------------------------------------------- 71 | CSS Properties 72 | ----------------------------------------------------- 73 | 1. Text Properties 74 | color: It is used to change the color of the text. 75 | font-family: It is used to change the font family of the text. 76 | font-size: It is used to change the size of the text. 77 | font-style: It is used to change the style of the text. 78 | font-weight: It is used to change the weight of the text. 79 | text-declaration: It is used to change the decoration of the text, like underline etc 80 | text-align: used to align the text on left,right and center. 81 | line-height: used to change the height between two lines in a paragraph 82 | letter-spacing: used to increase/decrease the space the between each letter in a word 83 | -------------------------------------------------------- 84 | 2. Background Properties 85 | background-color: It is used to change the background color of the element. 86 | background-image: It is used to change the background image of the element. 87 | background-repeat: It is used to change the repeat of the background image. 88 | background-position: It is used to change the position of the background image. 89 | background-size: It is used tp change the size of the background image 90 | ------------------------------------------------------------ 91 | -------------------------------------------------------------------------------- /batch2/html/HtmlNotes.txt: -------------------------------------------------------------------------------- 1 | What is HTML? 2 | HTML is a language used to build webpages 3 | HTML stands for Hypertext Markup Language 4 | HTML is used to create web pages 5 | It is the standard markup language for creating webpages 6 | 7 | What is XML 8 | XML is a markup language used to store and transport data 9 | 10 | What are HTML elements in html? 11 | HTML elements are the building blocks of HTML documents. 12 | They are represented by tags and are used to define content of a web page. 13 | 14 | What are tags? 15 | Tags are used to define the start and end of an HTML element. 16 | They are represented by angle brackets 17 |

: opening tag

: closing tag 18 | --------------------------------------------------------------------- 19 | Structure of HTML page: 20 | --------------------------------------------------------------------- 21 | 22 | 23 | 24 | My Webpage 25 | 26 | 27 | 28 |

My Webpage

29 |

Welcome to my webpage, really excited to learn webdevelopment

30 | 31 | 32 | 33 | DOCTYPE: 34 | is the document type declaration, 35 | it tells the browser that this is an HTML document 36 | 37 | html: 38 | is the root element of an HTML document. 39 | 40 | head: 41 | The head section contains metadata about the document, such as the title, 42 | character encoding, styles, scripts, and links to external documents. 43 | 44 | body: 45 | The body section contains the content of the HTML document, 46 | such as text, images, links, forms 47 | 48 | ------------------------------------------------------------ 49 | Tables in html 50 | ------------------------------------------------------------ 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
Student Details
IDNameAgeCourse
1Amith22CSE
2Sarah23
3Chetan21ME
4John22ECE
85 | 86 | table tag: 87 | - : defines an HTML table 88 | - : defines a table row 89 | -
: defines a table header 90 | - : defines a table data cell 91 | 92 | Attributes for table 93 | attrributes are key="value" pairs which provides information about an element 94 | - border : specifies the width of the border around the table 95 | - cellspacing : specifies the space between the cells in a table 96 | - cellpadding : specifies the space between the cell content and the cell border 97 | ------------------------------------------------------------ 98 | Lists in HTML 99 | ------------------------------------------------------------ 100 | There are three types of Lists 101 | 1. Ordered List 102 | 2. Unordered List 103 | 3. Definition List 104 | 105 | 1. Ordered List 106 | -
    : defines an ordered list 107 | -
  1. : defines each item in the list 108 | 109 | 2. Unordered List 110 | -