├── Backend ├── EJS │ ├── data.json │ ├── index.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── CSS │ │ │ └── style.css │ │ └── JS │ │ │ └── style.js │ └── views │ │ ├── datanotfound.ejs │ │ ├── includes │ │ └── head.ejs │ │ ├── index.ejs │ │ ├── instagram.ejs │ │ └── rolldice.ejs ├── Express │ ├── ExpressError.js │ ├── index.js │ ├── package-lock.json │ └── package.json ├── MISCELLANEOUS │ ├── BACKEND │ │ ├── index.js │ │ ├── package-lock.json │ │ ├── package.json │ │ └── views │ │ │ └── hello.ejs │ └── FRONTEND │ │ └── index.html ├── MongoDB-CLASS │ ├── MongoDB-Express │ │ ├── ExpressError.js │ │ ├── index.js │ │ ├── init.js │ │ ├── models │ │ │ └── chat.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ └── style.css │ │ └── views │ │ │ ├── edit.ejs │ │ │ ├── index.ejs │ │ │ └── new.ejs │ ├── MongoDB-JS │ │ ├── books.js │ │ ├── index.js │ │ ├── package-lock.json │ │ └── package.json │ └── MongoDB-Relationships │ │ ├── Models │ │ ├── customer.js │ │ ├── post.js │ │ └── user.js │ │ └── package.json ├── REST-CLASS │ ├── index.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── style.css │ └── views │ │ ├── edit.ejs │ │ ├── index.ejs │ │ ├── new.ejs │ │ ├── post.ejs │ │ └── show.ejs ├── SQL-CLASS │ ├── index.js │ ├── package-lock.json │ ├── package.json │ ├── schema.sql │ └── views │ │ ├── delete.ejs │ │ ├── edit.ejs │ │ ├── home.ejs │ │ ├── new.ejs │ │ └── user.ejs ├── math.js ├── package-lock.json ├── package.json └── script.js ├── CSS ├── Bootstrap │ └── index.html ├── CSS Mini Project │ ├── index.html │ ├── photo.jpg │ └── style.css ├── CSS Project │ └── SPOTIFY CLONE │ │ ├── assets │ │ ├── album_img.jpg │ │ ├── backward_icon.png │ │ ├── card1img.jpeg │ │ ├── card2img.jpeg │ │ ├── card3img.jpeg │ │ ├── card4img.jpeg │ │ ├── card5img.jpeg │ │ ├── card6img.jpeg │ │ ├── forward_icon.png │ │ ├── library_icon.png │ │ ├── logo.png │ │ ├── play_musicbar.png │ │ ├── player_icon1.png │ │ ├── player_icon2.png │ │ ├── player_icon3.png │ │ ├── player_icon4.png │ │ └── player_icon5.png │ │ ├── index.html │ │ └── style.css ├── Chapter-1 │ ├── index.html │ └── style.css ├── Chapter-2 │ ├── PracticeQs.css │ ├── PracticeQs.html │ ├── index.html │ ├── inheritance_demo.html │ ├── inheritance_style.css │ └── style.css ├── Chapter-3 │ ├── index.html │ └── style.css ├── Chapter-4 │ ├── Hover Card Effect │ │ ├── Cartoon Cute Girl&Boy.jpg │ │ ├── DigitalOcean Smiley 02.jpg │ │ ├── index.html │ │ └── style.css │ ├── Smiley Face.css │ ├── Smiley Face.html │ ├── index.html │ └── style.css ├── Chapter-5 │ ├── index.html │ └── style.css ├── Chapter-6 │ ├── Pet Adoption │ │ ├── cat.jpg │ │ ├── dog.jpg │ │ ├── index.html │ │ └── style.css │ ├── index.html │ └── style.css └── TailwindCSS │ ├── README.md │ ├── image.png │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── style.css │ └── tailwind.config.js ├── HTML └── HTML.html ├── JavaScript ├── Simon │ ├── index.html │ ├── script.js │ └── style.css ├── index.html └── script.js ├── My Portfolio └── Portfolio.html ├── Projects └── ExploreHut │ ├── app.js │ ├── cloudConfig.js │ ├── controllers │ ├── listing.js │ ├── review.js │ └── user.js │ ├── init │ ├── data.js │ └── index.js │ ├── models │ ├── listing.js │ ├── review.js │ └── user.js │ ├── package.json │ ├── public │ ├── CSS │ │ ├── filter.css │ │ ├── rating.css │ │ └── style.css │ └── JS │ │ └── script.js │ ├── routes │ ├── listing.js │ ├── review.js │ └── user.js │ ├── schema.js │ ├── utils │ ├── ExpressError.js │ ├── middleware.js │ └── wrapAsync.js │ └── views │ ├── error.ejs │ ├── includes │ ├── flashMessages.ejs │ ├── footer.ejs │ └── navbar.ejs │ ├── layouts │ └── boilerplate.ejs │ ├── listings │ ├── edit.ejs │ ├── index.ejs │ ├── new.ejs │ └── show.ejs │ └── users │ ├── login.ejs │ └── signup.ejs ├── REACT ├── Material-UI │ └── react-mini-project │ │ ├── .eslintrc.cjs │ │ ├── README.md │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components │ │ │ ├── SearchBox.css │ │ │ ├── SearchBox.jsx │ │ │ ├── WeatherApp.jsx │ │ │ ├── WeatherInfo.css │ │ │ └── WeatherInfo.jsx │ │ ├── hooks │ │ │ └── useGeolocation.js │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── react-class-app │ ├── .eslintrc.cjs │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── ButtonEvent.jsx │ │ ├── Form.jsx │ │ ├── Price.jsx │ │ ├── Product.css │ │ ├── Product.jsx │ │ ├── ProductTab.jsx │ │ ├── index.css │ │ └── main.jsx │ └── vite.config.js └── react-state-class │ ├── .eslintrc.cjs │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.css │ ├── App.jsx │ ├── Comment.css │ ├── Comment.jsx │ ├── CommentForm.css │ ├── CommentForm.jsx │ ├── Counter.jsx │ ├── DateActivity.jsx │ ├── Forms.jsx │ ├── LikeButton.jsx │ ├── UseEffect.jsx │ ├── components │ │ ├── LotteryGame │ │ │ ├── LotteryGame.css │ │ │ ├── LotteryGame.jsx │ │ │ ├── Ticket.jsx │ │ │ └── TicketNumber.jsx │ │ └── ToDoList │ │ │ ├── Task.css │ │ │ ├── Task.jsx │ │ │ ├── ToDoList.css │ │ │ └── ToDoList.jsx │ ├── index.css │ ├── main.jsx │ └── utils │ │ └── helperLotteryGame.js │ └── vite.config.js ├── README.md └── Redux └── redux-class ├── .eslintrc.cjs ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.css ├── App.jsx ├── app │ └── store.js ├── components │ ├── AddTask.jsx │ ├── Task.jsx │ └── Todo.jsx ├── features │ └── todo │ │ └── todoSlice.js ├── index.css └── main.jsx └── vite.config.js /Backend/EJS/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "cats": { 3 | "name": "cats", 4 | "followers": 25000, 5 | "following": 5, 6 | "posts": [ 7 | { 8 | "image": "https://plus.unsplash.com/premium_photo-1677545182067-26ac518ef64f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60", 9 | "likes": 200, 10 | "comments": 17 11 | }, 12 | { 13 | "image": "https://images.unsplash.com/photo-1592194996308-7b43878e84a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60", 14 | "likes": 312, 15 | "comments": 19 16 | }, 17 | { 18 | "image": "https://images.unsplash.com/photo-1577023311546-cdc07a8454d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2F0c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60", 19 | "likes": 1065, 20 | "comments": 200 21 | } 22 | ] 23 | }, 24 | "dogs": { 25 | "name": "dogs", 26 | "followers": 75000, 27 | "following": 150, 28 | "posts": [ 29 | { 30 | "image": "https://images.unsplash.com/photo-1598133894008-61f7fdb8cc3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZG9nc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60", 31 | "likes": 3000, 32 | "comments": 41 33 | }, 34 | { 35 | "image": "https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fGRvZ3N8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60", 36 | "likes": 2500, 37 | "comments": 32 38 | }, 39 | { 40 | "image": "https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGRvZ3N8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=800&q=60", 41 | "likes": 500, 42 | "comments": 6 43 | } 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /Backend/EJS/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const path = require("path"); 3 | 4 | const app = express(); 5 | 6 | let port = 8080; 7 | 8 | app.set("view engine", "ejs"); //Setting template engine as ejs. 9 | app.set("views", path.join(__dirname, "/views")); //Setting this directory as default for views. 10 | app.use(express.static(path.join(__dirname, "/public"))); //Used to serve static files like images, CSS, and JavaScript files from a specific directory. 11 | app.use(express.static(path.join(__dirname, "/public/CSS"))); //Served static CSS file from public folder. 12 | app.use(express.static(path.join(__dirname, "/public/JS"))); //Served static JS file from public folder. 13 | 14 | /* This line is listening all request coming from the port & running it's callback function. */ 15 | app.listen(port, () => { 16 | console.log(`Server Started and Listening on port ${port}.`); 17 | }); 18 | 19 | /* Making Routs */ 20 | app.get("/", (req, res) => { 21 | res.render("index"); //Express by default search files by name, so we don't need to type file name with its exrensions. 22 | }); 23 | 24 | app.get("/rolldice", (req, res) => { 25 | let diceValue = Math.floor((Math.random() * 6) + 1); 26 | res.render("rolldice.ejs", { diceValue }); 27 | }); 28 | 29 | app.get("/ig/:username", (req, res) => { 30 | let { username } = req.params; //It is a destructuring assignment syntax. It's a concise way of extracting a property from an object and assigning it to a variable with the same name. 31 | const instaData = require("./data.json"); //Requiring JSON data file. 32 | const data = instaData[username]; 33 | if (data) { 34 | res.render("instagram.ejs", { data }); 35 | } else { 36 | res.render("datanotfound.ejs"); 37 | } 38 | }); -------------------------------------------------------------------------------- /Backend/EJS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ejs", 3 | "version": "1.0.0", 4 | "description": "This is my own package that I created. It is created for the practicing and learning Embedded JavaScript.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "Sarvesh Devrukhakar", 11 | "license": "ISC", 12 | "dependencies": { 13 | "ejs": "^3.1.9", 14 | "express": "^4.18.2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Backend/EJS/public/CSS/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: grey; 3 | } 4 | 5 | img { 6 | width: 15rem; 7 | height: auto; 8 | } -------------------------------------------------------------------------------- /Backend/EJS/public/JS/style.js: -------------------------------------------------------------------------------- 1 | const btns = document.querySelectorAll("button"); 2 | 3 | for (btn of btns) { 4 | btn.addEventListener("click", () => { 5 | console.log("Button clicked!"); 6 | }); 7 | } -------------------------------------------------------------------------------- /Backend/EJS/views/datanotfound.ejs: -------------------------------------------------------------------------------- 1 | <%- include("includes/head.ejs"); %> 2 | 3 | 4 |

Data Not Found

5 | 6 | 7 | -------------------------------------------------------------------------------- /Backend/EJS/views/includes/head.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Instagram 8 | 9 | -------------------------------------------------------------------------------- /Backend/EJS/views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home 8 | 9 | 10 | 11 |

This is Home Template.

12 |

13 | <%= "Random Text generated by EJS Interpolation Syntax." %> 14 |

15 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe repellendus officia quisquam officiis, temporibus 16 | voluptas totam ea laudantium magni facere deleniti unde, voluptatum cupiditate repudiandae nesciunt vero 17 | dignissimos necessitatibus iusto!

18 | 19 |

Click the button below to get random dice number: 20 | 21 |

22 | 23 |

Go to Instagram page: 24 | 25 |

26 | 27 | 28 | -------------------------------------------------------------------------------- /Backend/EJS/views/instagram.ejs: -------------------------------------------------------------------------------- 1 | <%- include("includes/head.ejs"); %> 2 | 3 | 4 |

Hi @<%= data.name %>

5 |
6 |

Followers: <%= data.followers %>      Following: <%= data.following %> 7 |

8 |
9 |
10 | 11 | <% for (post of data.posts) { %> 12 |
13 | post image 14 |

Likes <%= post.likes %>      Comments <%= post.comments %> 15 |

16 |
17 | <% } %> 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Backend/EJS/views/rolldice.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Roll The Dice 8 | 9 | 10 | 11 |

The Dice Value is <%= diceValue %> 12 |

13 | 14 | <% if(diceValue==6) { %> 15 |

Nice! You got a six. Roll the dice again.

16 | <% } %> 17 | 18 | 19 | -------------------------------------------------------------------------------- /Backend/Express/ExpressError.js: -------------------------------------------------------------------------------- 1 | // It is a custome Error class. 2 | class ExpressError extends Error { 3 | constructor(status, message) { 4 | super(); 5 | this.status = status; 6 | this.message = message; 7 | } 8 | } 9 | module.exports = ExpressError; 10 | -------------------------------------------------------------------------------- /Backend/Express/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); //Requiring a Express 2 | const app = express(); //It is basically a function. 3 | const ExpressError = require("./ExpressError"); 4 | 5 | let port = 8080; //3000 6 | 7 | //Middlewares 8 | const checkToken = (req, res, next) => { 9 | let { token } = req.query; 10 | if (token === "giveaccess") { 11 | next(); 12 | } 13 | throw new ExpressError(401, "ACCESS_DENIED"); 14 | }; 15 | 16 | //Routers 17 | app.get("/", (req, res) => { 18 | res.send("Hello there!"); 19 | }); 20 | 21 | app.get("/err", (req, res) => { 22 | asdf = asdf; 23 | }); 24 | 25 | app.get("/api", checkToken, (req, res) => { 26 | res.send("Your Data is here."); 27 | }); 28 | 29 | app.get("/admin", (req, res) => { 30 | throw new ExpressError(403, "Admin access is forbiddne."); 31 | }); 32 | 33 | /* Error Handling Middlewares (Custom) */ 34 | app.use((err, req, res, next) => { 35 | let { status = 500, message = "some error occurred there." } = err; 36 | res.status(status).send(message); 37 | }); 38 | 39 | //Handling Requests: Listen makes web server that listen incoming API requests. 40 | app.listen(8080, () => { 41 | console.log(`Server Started: App is litening on port ${port}`); 42 | }); 43 | -------------------------------------------------------------------------------- /Backend/Express/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "express", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Sarvesh Devrukhakar", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.18.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Backend/MISCELLANEOUS/BACKEND/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const session = require("express-session"); 3 | const flash = require("connect-flash"); 4 | const path = require("path"); 5 | const app = express(); 6 | const port = 8080; 7 | 8 | app.set("view engine", "ejs"); 9 | app.set("views", path.join(__dirname, "views")); 10 | 11 | const sessionOption = { secret: "BishopTakesRook", resave: false, saveUninitialized: true }; 12 | 13 | app.use(session(sessionOption)); 14 | app.use(flash()); 15 | 16 | // connect-flash: One time msg flash service. 17 | app.use((req, res, next) => { 18 | res.locals.successMsg = req.flash("success"); 19 | res.locals.errorMsg = req.flash("error"); 20 | next(); 21 | }); 22 | 23 | app.get("/register", (req, res) => { 24 | let { name = "There." } = req.query; 25 | req.session.name = name; 26 | if (name === "There.") { 27 | req.flash("error", "User not registered!"); 28 | } else { 29 | req.flash("success", "User registered successfully!"); 30 | } 31 | res.redirect("/hello"); 32 | }); 33 | 34 | app.get("/hello", (req, res) => { 35 | res.render("./hello.ejs", { name: req.session.name }); 36 | }); 37 | 38 | app.listen(port, () => { 39 | console.log(`Server is started on port ${port}`); 40 | }); 41 | -------------------------------------------------------------------------------- /Backend/MISCELLANEOUS/BACKEND/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "miscellaneous", 3 | "version": "1.0.0", 4 | "description": "This is the miscellaneous practice package.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Sarvesh Devrukhakar", 10 | "license": "ISC", 11 | "dependencies": { 12 | "connect-flash": "^0.1.1", 13 | "ejs": "^3.1.10", 14 | "express": "^4.18.3", 15 | "express-session": "^1.18.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Backend/MISCELLANEOUS/BACKEND/views/hello.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello..! 8 | 9 | 10 | 11 | <%= successMsg %> <%= errorMsg %> 12 |

Hello <%= name %>

13 | 14 | 15 | -------------------------------------------------------------------------------- /Backend/MISCELLANEOUS/FRONTEND/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Get & Post Requests 8 | 9 | 10 | 11 |

Get Request Form

12 |
13 |

14 |

15 | 16 |
17 |
18 | 19 |

Post Request Form

20 |
21 |

22 |

23 | 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Express/ExpressError.js: -------------------------------------------------------------------------------- 1 | class ExpressError extends Error { 2 | constructor(status, message) { 3 | super(); // calling the constructor of the parent class. 4 | this.status = status; 5 | this.message = message; 6 | } 7 | } 8 | module.exports = ExpressError; 9 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Express/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const { constants } = require("http2"); 3 | const mongoose = require("mongoose"); 4 | const path = require("path"); 5 | const Chat = require("./models/chat.js"); 6 | const methodOverride = require("method-override"); 7 | const app = express(); 8 | const ExpressError = require("./ExpressError.js"); 9 | 10 | /* Path setup */ 11 | app.set("views", path.join(__dirname, "views")); 12 | app.set("view engine", "ejs"); 13 | app.use(express.static(path.join(__dirname, "public"))); 14 | app.use(express.urlencoded({ extended: true })); // Enables URL-encoded body parsing. 15 | app.use(methodOverride("_method")); 16 | 17 | /* Database connectivity setup */ 18 | main() 19 | .then(() => { 20 | console.log("Database connected."); 21 | }) 22 | .catch((err) => console.log(err)); 23 | 24 | async function main() { 25 | await mongoose.connect("mongodb://127.0.0.1:27017/LetChat"); 26 | } 27 | 28 | /* All Routes */ 29 | // home route 30 | app.get("/", (req, res) => { 31 | try { 32 | res.send("Home route is working."); 33 | } catch (error) { 34 | next(error); 35 | } 36 | }); 37 | 38 | // /chats: To see all chats. 39 | app.get("/chats", asyncWrap(async (req, res) => { 40 | let chats = await Chat.find(); //To extract all chat data from database. 41 | res.render("index.ejs", { chats }); 42 | })); 43 | 44 | // GET /chats/new: To render new chat form. 45 | app.get("/chats/new", (req, res) => { 46 | try { 47 | res.render("new.ejs"); 48 | } catch (error) { 49 | next(error); 50 | } 51 | }); 52 | 53 | // POST /chats/new: To insert new chat data in DB. 54 | app.post("/chats/new", asyncWrap(async (req, res, next) => { 55 | let { from, to, msg } = req.body; 56 | let newChat = new Chat({ 57 | from: from, 58 | to: to, 59 | message: msg, 60 | created_at: new Date(), 61 | updated_at: new Date(), 62 | }); 63 | await newChat.save(); 64 | res.redirect("/chats"); 65 | })); 66 | 67 | // GET /chats/:id/edit - To render edit form. 68 | app.get("/chats/:id/edit", asyncWrap(async (req, res, next) => { 69 | let { id } = req.params; 70 | let chat = await Chat.findById(id); 71 | if (!chat) next(new ExpressError(500, "Chat Not Found!")); // Handling Error if id is incorrect. 72 | res.render("edit.ejs", { chat }); 73 | })); 74 | 75 | // PUT /chats/:id - To update new data in DB. 76 | app.put("/chats/:id", asyncWrap(async (req, res) => { 77 | let { id } = req.params; 78 | let { msg: newMessage } = req.body; 79 | let updatedChat = await Chat.findByIdAndUpdate( 80 | id, 81 | { message: newMessage, updated_at: new Date() }, 82 | { runValidators: true, new: true }, 83 | ); 84 | console.log(updatedChat); 85 | res.redirect("/chats"); 86 | })); 87 | 88 | // DELETE /chats/:id - To delete chat from DB. 89 | app.delete( 90 | "/chats/:id", 91 | asyncWrap(async (req, res) => { 92 | let { id } = req.params; 93 | let deletedChat = await Chat.findByIdAndDelete(id); 94 | console.log(deletedChat); 95 | res.redirect("/chats"); 96 | }), 97 | ); 98 | 99 | // Utility function to handle asynchronous error more efficiently. 100 | function asyncWrap(asyncFunction) { 101 | return function (req, res, next) { 102 | asyncFunction(req, res, next).catch((error) => next(error)); 103 | } 104 | } 105 | 106 | // Utility function: Use when error occurs to do some importnat tasks. 107 | const handleValidationError = (err) => { 108 | console.log("This is validation error. Please follow rules."); 109 | console.dir(err.message); 110 | return err; 111 | } 112 | 113 | // Error handling middleware. 114 | app.use((err, req, res, next) => { // Error handler for specific error. 115 | console.log(err.name); 116 | if (err.name === "ValidationError") err = handleValidationError(err); 117 | next(err); 118 | }); 119 | 120 | app.use((err, req, res, next) => { 121 | let { status = 500, message = "Some Error Occurred" } = err; 122 | res.status(status).send(message); 123 | }); 124 | 125 | /* Server setup */ 126 | app.listen(8080, () => { 127 | console.log("Server is running on localhost:8080"); 128 | }); 129 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Express/init.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | const Chat = require("./models/chat.js"); 3 | 4 | /* Database connectivity setup */ 5 | main() 6 | .then(() => { 7 | console.log("Database connected.\nAll data Pushed to Database."); 8 | }) 9 | .catch((err) => console.log(err)); 10 | 11 | async function main() { 12 | await mongoose.connect("mongodb://127.0.0.1:27017/LetChat"); 13 | } 14 | 15 | let allChats = [ 16 | { 17 | from: "sarvesh", 18 | to: "Mahadev", 19 | message: "How can I become like you?", 20 | created_at: new Date(), 21 | updated_at: new Date(), 22 | }, 23 | { 24 | from: "captain", 25 | to: "tony", 26 | message: "Hi, Tony", 27 | created_at: new Date(), 28 | updated_at: new Date(), 29 | }, 30 | { 31 | from: "tony", 32 | to: "bruce", 33 | message: "Hi, Hulk", 34 | created_at: new Date(), 35 | updated_at: new Date(), 36 | }, 37 | { 38 | from: "soap", 39 | to: "ghost", 40 | message: "lt, are you ugly?", 41 | created_at: new Date(), 42 | updated_at: new Date(), 43 | }, 44 | { 45 | from: "makarov", 46 | to: "price", 47 | message: "It's not good captain, you will pay for this.", 48 | created_at: new Date(), 49 | updated_at: new Date(), 50 | }, 51 | ]; 52 | 53 | Chat.insertMany(allChats); 54 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Express/models/chat.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | const chatSchema = new mongoose.Schema({ 4 | from: { 5 | type: String, 6 | required: true, 7 | }, 8 | to: { 9 | type: String, 10 | required: true, 11 | }, 12 | message: { 13 | type: String, 14 | maxLength: 50, 15 | }, 16 | created_at: { 17 | type: String, 18 | required: true, 19 | }, 20 | updated_at: { 21 | type: String, 22 | required: true, 23 | }, 24 | }); 25 | 26 | const Chat = mongoose.model("Chat", chatSchema); 27 | 28 | module.exports = Chat; 29 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Express/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mongodb-express", 3 | "version": "1.0.0", 4 | "description": "This package is created for learning MongoDB with Express.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Sarvesh Devrukhakar", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ejs": "^3.1.10", 13 | "express": "^4.19.2", 14 | "method-override": "^3.0.0", 15 | "mongoose": "^8.4.1" 16 | }, 17 | "devDependencies": { 18 | "nodemon": "^3.1.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Express/public/style.css: -------------------------------------------------------------------------------- 1 | .chats { 2 | background-color: rgb(200, 230, 250); 3 | display: inline-block; 4 | padding: 1rem; 5 | margin: 1rem; 6 | border-radius: 1rem; 7 | } 8 | 9 | .msg { 10 | background-color: dodgerblue; 11 | color: white; 12 | padding: 0 1rem; 13 | border-radius: 0.25rem; 14 | } 15 | 16 | .btn { 17 | display: flex; 18 | justify-content: space-between; 19 | } 20 | 21 | .btn button { 22 | margin: 0.5rem 0; 23 | } 24 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Express/views/edit.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Edit Message 7 | 8 | 9 |

This chat was sent from <%= chat.from %> to <%= chat.to %>.

10 | 11 |
12 | 13 |
14 | 15 |
16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Express/views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | LetChat 7 | 8 | 9 | 10 |

All Chats!

11 |
12 | 13 |
14 | <% for (let chat of chats) { %> 15 |
16 |

From: <%= chat.from %>

17 |
18 | <%= chat.message %> 19 |
20 |
21 |
22 | 23 |
24 | 25 |
26 | 27 |
28 |
29 |
30 |

Recieved by <%= chat.to %>

31 |
32 |

33 | Time: <%= chat.updated_at.toString().split(" ")[4] %> 34 | Date: <%=chat.updated_at.toString().split(" ").slice(1, 4).join(" ") %> 35 |

36 |
37 |
38 | <% } %> 39 | 40 | 41 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Express/views/new.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | LetChat 7 | 8 | 9 | 10 |

Add new chat

11 |
12 | 13 |

14 | 15 |
16 | 22 |

23 | 24 | 25 |

26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-JS/books.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | main() 4 | .then(() => { 5 | console.log("Connection Successful!"); 6 | }) 7 | .catch((err) => console.log(err)); 8 | 9 | async function main() { 10 | mongoose.connect("mongodb://127.0.0.1:27017/amazon"); // It connects to a database named "amazon" on the local machine (127.0.0.1) on port 27017. 11 | } 12 | 13 | /* Creating Schema for Amazon Books */ 14 | const bookSchema = new mongoose.Schema({ 15 | title: { 16 | type: String, 17 | required: true, 18 | }, 19 | author: { 20 | type: String, 21 | }, 22 | price: { 23 | type: Number, 24 | min: [1, "This is not a valid price..!"] /* Custom Error message. */, 25 | }, 26 | discout: { 27 | type: Number, 28 | default: 0, 29 | }, 30 | category: { 31 | type: String, 32 | enum: ["fiction", "non-fiction"], // Values except in this array will not be accepted. 33 | }, 34 | genre: [String], 35 | }); 36 | 37 | /* Creating collections using Schema */ 38 | const Book = mongoose.model("Book", bookSchema); 39 | 40 | /* Inserting Book data in DB */ 41 | const book1 = new Book({ 42 | title: "Yayati", 43 | author: "Ranajit Desai", 44 | price: 700, 45 | category: "non-fiction", 46 | genre: ["drama", "moral"], 47 | }); 48 | 49 | book1 50 | .save() 51 | .then((resolve) => { 52 | console.log(resolve); 53 | }) 54 | .catch((error) => { 55 | console.log(error.errors.price.properties.message); // Handling Errors. 56 | }); 57 | 58 | Book.findOneAndUpdate( 59 | { author: "Napoleon Hill" }, 60 | { author: "John Weak" }, 61 | { runValidators: true, new: true }, 62 | ) 63 | .then((resolve) => { 64 | console.log(resolve); 65 | }) 66 | .catch((error) => { 67 | console.log(error); 68 | }); 69 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-JS/index.js: -------------------------------------------------------------------------------- 1 | /* Steps to use MongoDB in Mongoose with CRUD operations. */ 2 | 3 | // Step 1: Requiring Mongoose in this file. 4 | const mongoose = require("mongoose"); 5 | 6 | main() 7 | .then(() => { 8 | console.log("Connection Successful!"); 9 | }) 10 | .catch((err) => console.log(err)); 11 | 12 | async function main() { 13 | /* It is a async function that returns promise. */ 14 | mongoose.connect("mongodb://127.0.0.1:27017/test"); // It connects to a database named "test" on the local machine (127.0.0.1) on port 27017. 15 | } 16 | 17 | /* Step 2: Creating Schema for collection. */ 18 | const userSchema = new mongoose.Schema({ 19 | name: String, 20 | email: String, 21 | age: Number, 22 | }); 23 | 24 | /* Step 3: Creating collection using Schema. */ 25 | const User = mongoose.model("User", userSchema); 26 | 27 | /* Step 4: Inserting Single user data in DB. */ 28 | const user1 = new User({ 29 | name: "Ashok", 30 | email: "ashok@yahoo.com", 31 | age: 60, 32 | }); 33 | 34 | /* Step 5: Saving it into DB. */ 35 | user1 36 | .save() 37 | .then((resolve) => { 38 | console.log(resolve); 39 | }) 40 | .catch((error) => { 41 | console.log(error); 42 | }); 43 | 44 | /* Step 6: Inserting Multiple user data in DB. */ 45 | User.insertMany([ 46 | { name: "Priyanka", email: "priyanka@yahoo.com", age: 30 }, 47 | { name: "Pallavi", email: "pallavi@yahoo.com", age: 26 }, 48 | { name: "Sarvesh", email: "sarvesh@yahoo.com", age: 18 }, 49 | ]) 50 | .then((resolve) => { 51 | console.log(resolve); 52 | }) 53 | .catch((error) => { 54 | console.log(error); 55 | }); 56 | 57 | /* Step 7: Find data in DB. */ 58 | User.find({ age: { $gt: 40 } }) 59 | .then((resolve) => { 60 | console.log(resolve); 61 | }) 62 | .catch((error) => { 63 | console.log(error); 64 | }); 65 | 66 | User.findOne({ age: { $lt: 40 } }) 67 | .then((resolve) => { 68 | console.log(resolve); 69 | }) 70 | .catch((error) => { 71 | console.log(error); 72 | }); 73 | 74 | User.findById("665d7cd5e97f656629126fcd") 75 | .then((resolve) => { 76 | console.log(resolve); 77 | }) 78 | .catch((error) => { 79 | console.log(error); 80 | }); 81 | 82 | /* Step 8: Update in DB. */ 83 | User.updateOne({ name: "Anjali" }, { age: 50 }) 84 | .then((resolve) => { 85 | console.log(resolve); 86 | }) 87 | .catch((error) => { 88 | console.log(error); 89 | }); 90 | 91 | User.updateMany({ age: { $lte: 30 } }, { age: 100 }) 92 | .then((resolve) => { 93 | console.log(resolve); 94 | }) 95 | .catch((error) => { 96 | console.log(error); 97 | }); 98 | 99 | User.findOneAndUpdate({ name: "Ashok" }, { age: 40 }, { new: true }) 100 | .then((resolve) => { 101 | console.log(resolve); 102 | }) 103 | .catch((error) => { 104 | console.log(error); 105 | }); 106 | 107 | User.findByIdAndUpdate("665d7cd5e97f656629126fcd", { age: 16 }, { new: true }) 108 | .then((resolve) => { 109 | console.log(resolve); 110 | }) 111 | .catch((error) => { 112 | console.log(error); 113 | }); 114 | 115 | /* Step 9: Delete in DB. */ 116 | User.deleteOne({ name: "Anjali" }) 117 | .then((resolve) => { 118 | console.log(resolve); 119 | }) 120 | .catch((error) => { 121 | console.log(error); 122 | }); 123 | 124 | User.deleteMany({ age: 100 }) 125 | .then((resolve) => { 126 | console.log(resolve); 127 | }) 128 | .catch((error) => { 129 | console.log(error); 130 | }); 131 | 132 | User.findByIdAndDelete("665d7772b966b451751844a0") 133 | .then((resolve) => { 134 | console.log(resolve); 135 | }) 136 | .catch((error) => { 137 | console.log(error); 138 | }); 139 | 140 | User.findOneAndDelete({ name: "Sarvesh" }) 141 | .then((resolve) => { 142 | console.log(resolve); 143 | }) 144 | .catch((error) => { 145 | console.log(error); 146 | }); 147 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-JS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mongodb-js", 3 | "version": "1.0.0", 4 | "description": "This package is created for learning MongoDB with JavaScript.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Sarvesh Devrukhakar", 10 | "license": "ISC", 11 | "dependencies": { 12 | "mongoose": "^8.4.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Relationships/Models/customer.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | const { Schema } = mongoose; 3 | 4 | main() 5 | .then(() => { 6 | console.log("Connection Successful!"); 7 | }) 8 | .catch((err) => console.log(err)); 9 | 10 | async function main() { 11 | mongoose.connect("mongodb://127.0.0.1:27017/mongo-relation-demo"); 12 | } 13 | 14 | // Defining Schemas 15 | const orderSchema = new Schema({ item: String, price: Number }); 16 | 17 | const customerSchema = new Schema({ 18 | name: String, 19 | orders: [{ type: Schema.Types.ObjectId, ref: "Order" }], 20 | }); 21 | 22 | /* Mongoose Middlewares to Handle Deletions */ 23 | 24 | // This 'pre' middleware runs before query executed. 25 | // customerSchema.pre("findOneAndDelete", async () => { 26 | // console.log("PRE_MIDDLEWARE"); 27 | // }); 28 | 29 | // This 'post' middleware runs after query executed. 30 | customerSchema.post("findOneAndDelete", async (customer) => { 31 | if (customer.orders.length) { 32 | let result = await Order.deleteMany({ _id: { $in: customer.orders } }); 33 | console.log(result, "\nThis data is deleted by POST_MIDDLEWARE!"); 34 | } 35 | }); 36 | 37 | // Creating Models. 38 | const Order = mongoose.model("Order", orderSchema); 39 | const Customer = mongoose.model("Customer", customerSchema); 40 | 41 | // Function to create customer data. 42 | const findCustomer = async () => { 43 | let result = await Customer.find({}).populate("orders"); // Used to extract entire document instead of only document id. 44 | console.log(result[0]); 45 | }; 46 | 47 | // findCustomer(); 48 | 49 | const addCustomer = async () => { 50 | let newCustomer = new Customer({ 51 | // Creating new customer. 52 | name: "Price", 53 | }); 54 | 55 | let newOrder = new Order({ 56 | // Creating new order. 57 | item: "Sandwich", 58 | price: 200, 59 | }); 60 | 61 | newCustomer.orders.push(newOrder); // Assigning new order ID into customers order section. 62 | 63 | // Saving order and customer instances into DB. 64 | await newOrder.save(); 65 | await newCustomer.save(); 66 | 67 | console.log("Added new customer successfully!."); 68 | }; 69 | 70 | // addCustomer(); 71 | 72 | const delCustomer = async () => { 73 | let data = await Customer.findByIdAndDelete("67473fe6d0a76cd515bd6984"); 74 | console.log(data, "\nData above is deleted!"); 75 | }; 76 | 77 | delCustomer(); 78 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Relationships/Models/post.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | const { Schema } = mongoose; 3 | 4 | main() 5 | .then(() => { 6 | console.log("Connection Successful!"); 7 | }) 8 | .catch((err) => console.log(err)); 9 | 10 | async function main() { 11 | mongoose.connect("mongodb://127.0.0.1:27017/mongo-relation-demo"); 12 | } 13 | 14 | // Defining Schemas 15 | const userSchema = new Schema({ username: String, email: String }); 16 | 17 | const postSchema = new Schema({ 18 | content: String, 19 | likes: Number, 20 | user: { type: Schema.Types.ObjectId, ref: "User" }, 21 | }); 22 | 23 | // Creating Models. 24 | const User = mongoose.model("User", userSchema); 25 | const Post = mongoose.model("Post", postSchema); 26 | 27 | // Function to create data. 28 | // const addData = async () => { 29 | // let user1 = await User.findOne({ username: "sad0xer" }); 30 | 31 | // let post2 = new Post({ content: "Ram Ram", likes: 8 }); 32 | 33 | // post2.user = user1._id; 34 | 35 | // await post2.save(); 36 | // }; 37 | 38 | // addData(); 39 | 40 | // Function to see post created by whom. 41 | const getData = async () => { 42 | const result = await Post.find({}).populate("user", "username"); 43 | console.log(result); 44 | }; 45 | 46 | getData(); 47 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Relationships/Models/user.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | const { Schema } = mongoose; 3 | 4 | main() 5 | .then(() => { 6 | console.log("Connection Successful!"); 7 | }) 8 | .catch((err) => console.log(err)); 9 | 10 | async function main() { 11 | mongoose.connect("mongodb://127.0.0.1:27017/mongo-relation-demo"); 12 | } 13 | 14 | // Defining user schema. 15 | const userSchema = new Schema({ 16 | username: String, 17 | addresses: [ 18 | { 19 | _id: false, 20 | location: String, 21 | city: String, 22 | }, 23 | ], 24 | }); 25 | 26 | const User = mongoose.model("user", userSchema); // Implementing schema on DB. 27 | 28 | // Adding data into DB. 29 | const addUsers = async () => { 30 | let user1 = new User({ 31 | username: "ghost", 32 | addresses: [ 33 | { 34 | location: "18, Hanuman Mandir, Manchester, United Kingdom", 35 | city: "Bhandup", 36 | }, 37 | ], 38 | }); 39 | 40 | user1.addresses.push({ location: "118, Dev House", city: "Lahore" }); // Adding data in to DB by accessing user1. 41 | let result = await user1.save(); 42 | console.log(result); 43 | }; 44 | 45 | addUsers(); 46 | -------------------------------------------------------------------------------- /Backend/MongoDB-CLASS/MongoDB-Relationships/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mongodb-relationships", 3 | "version": "1.0.0", 4 | "description": "This package created to learn, practice and see the implementation of MongoDB Relationships.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Sarvesh Deverukhakar", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.21.1", 13 | "mongoose": "^8.8.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Backend/REST-CLASS/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const path = require("path"); 3 | const methodOverride = require("method-override"); // To override basic HTTP methods (GET, POST etc.) 4 | const app = express(); 5 | const { v4: uuidv4 } = require('uuid'); // To generate random unique IDs. 6 | 7 | const port = 8080; 8 | 9 | app.use(express.urlencoded({ extended: true })); 10 | app.use(express.json()); // to support JSON-encoded bodies. 11 | app.use(express.static(path.join(__dirname, "/public"))); // Serve static files from the public folder. 12 | app.use(methodOverride("_method")); // Override with query parameter `_method`. 13 | 14 | app.set("view engine", "ejs"); 15 | app.set("view engine", path.join(__dirname, "views")); 16 | 17 | app.listen(port, () => { 18 | console.log(`Listening on port ${port}...`); 19 | }); 20 | 21 | app.get("/", (req, res) => { /* Showing Home page */ 22 | res.render("index.ejs"); 23 | }); 24 | 25 | // const database = JSON.parse(localStorage.getItem("database")) || []; 26 | 27 | let posts = [ 28 | { 29 | id: uuidv4(), 30 | username: "apnacollege", 31 | imgUrl: "https://lwfiles.mycourse.app/62a6cd5e1e9e2fbf212d608d-public/6efdd5e7f0d663cf231d0f2040be0a1e.png", 32 | caption: "Do Not Stop unil the goal is reached.", 33 | content: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus porro officiis ratione perspiciatis eius quam labore modi nulla assumenda? Ullam perspiciatis quod dolor optio perferendis nam laboriosam earum voluptatem! Iste." 34 | }, 35 | { 36 | id: uuidv4(), 37 | username: "Aman Dhattarwal", 38 | imgUrl: "https://media.licdn.com/dms/image/C4E03AQFAoY-MSYJsCA/profile-displayphoto-shrink_200_200/0/1600154261501?e=2147483647&v=beta&t=KCZ2mZI2NmPmkVmD1u_cQN9z0vGpTvYRuAwbbUfgX24", 39 | caption: "Tu Phodega!", 40 | content: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus porro officiis ratione perspiciatis eius quam labore modi nulla assumenda? Ullam perspiciatis quod dolor optio perferendis nam laboriosam earum voluptatem! Iste." 41 | }, 42 | { 43 | id: uuidv4(), 44 | username: "Shrasha Khapra", 45 | imgUrl: "https://lwfiles.mycourse.app/62a6cd5e1e9e2fbf212d608d-public/fcc79fff0a31cd4c6290d3d3ada29edf.png", 46 | caption: "Success requires hardwork.", 47 | content: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus porro officiis ratione perspiciatis eius quam labore modi nulla assumenda? Ullam perspiciatis quod dolor optio perferendis nam laboriosam earum voluptatem! Iste." 48 | } 49 | ]; 50 | 51 | app.get("/posts", (req, res) => { /* Getting/Showing all Posts. */ 52 | res.render("post.ejs", { posts }); 53 | }); 54 | 55 | app.get("/posts/new", (req, res) => { /* Showing form for creating a new post. */ 56 | res.render("new.ejs"); 57 | }); 58 | 59 | app.get("/posts/:id", (req, res) => { /* Showing post in detail using it's respective user ID. */ 60 | let { id } = req.params; 61 | let post = posts.find((post) => id === post.id); 62 | res.render("show.ejs", { post }); 63 | }); 64 | 65 | app.get("/posts/:id/edit", (req, res) => { /* Showing form for edit a post. */ 66 | let { id } = req.params; 67 | let post = posts.find((post) => id === post.id); 68 | res.render("edit.ejs", { post }); 69 | }); 70 | 71 | app.post("/posts", (req, res) => { /* Creating a new post and adding to existing list of posts. */ 72 | // console.log(req.body); // Logs data sent by user in request body. 73 | let { username, imgUrl, caption, content } = req.body; 74 | let id = uuidv4(); 75 | posts.push({ id, username, imgUrl, caption, content }); 76 | res.redirect("/posts"); 77 | }); 78 | 79 | app.patch("/posts/:id", (req, res) => { /* Updating an existing post with the edited details. */ 80 | let { id } = req.params; // Get the :id from URL parameters. 81 | /* Getting data from request body to update it. */ 82 | let newImgUrl = req.body.imgUrl; 83 | let newCaption = req.body.caption; 84 | let newContent = req.body.content; 85 | let post = posts.find((post) => id === post.id); // Find the post that matches the given ID. 86 | /* Updating the fields if they exist in the request body. */ 87 | post.imgUrl = newImgUrl; 88 | post.caption = newCaption; 89 | post.content = newContent; 90 | res.redirect("/posts"); 91 | }); 92 | 93 | app.delete("/posts/:id", (req, res) => { 94 | let { id } = req.params; 95 | posts = posts.filter((p) => id !== p.id); 96 | res.redirect("/posts"); 97 | }); 98 | 99 | -------------------------------------------------------------------------------- /Backend/REST-CLASS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rest-class", 3 | "version": "1.0.0", 4 | "description": "This package is created for learning REST.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Sarvesh Devrukhakar", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ejs": "^3.1.9", 13 | "express": "^4.18.3", 14 | "method-override": "^3.0.0", 15 | "uuid": "^9.0.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Backend/REST-CLASS/public/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: maroon; 3 | } 4 | 5 | .post { 6 | background-color: aqua; 7 | } 8 | 9 | .post img { 10 | width: 25%; 11 | } 12 | 13 | .user { 14 | font-style: italic; 15 | } -------------------------------------------------------------------------------- /Backend/REST-CLASS/views/edit.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Edit your post 8 | 9 | 10 | 11 | 12 | 13 |

Post Username: @<%= post.username %>

14 |

Post Id: <%= post.id %>

15 | 16 |
17 | Image URL

18 | 19 |
20 |

21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /Backend/REST-CLASS/views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | REST CLASS Activities 8 | 9 | 10 | 11 | 12 |

Welcome to REST Project.

13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Backend/REST-CLASS/views/new.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Create New Post 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 |

Create New Post

18 | 19 |
20 |

21 | 22 |
23 |

24 | 25 |
26 |

27 | 28 |
29 |

30 | 31 | 32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /Backend/REST-CLASS/views/post.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | All Posts 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Quora Posts

15 | 16 | <% for (post of posts){ %> 17 |
18 |

@<%= post.username %>

19 | Image URL 20 |

<%= post.caption %>

21 |

<%= post.content %>

22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 |
30 | <% } %> 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Backend/REST-CLASS/views/show.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Your Posts 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Post ID: <%= post.id %>

15 | 16 |
17 |

@<%= post.username %>

18 | Image URL 19 |

<%= post.caption %>

20 |

<%= post.content %>

21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /Backend/SQL-CLASS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sql-class", 3 | "version": "1.0.0", 4 | "description": "This package is created for learning SQL in Backend.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Sarvesh Devrukhakar", 10 | "license": "ISC", 11 | "dependencies": { 12 | "ejs": "^3.1.10", 13 | "express": "^4.19.2", 14 | "method-override": "^3.0.0", 15 | "mysql2": "^3.9.7", 16 | "uuid": "^9.0.1" 17 | }, 18 | "devDependencies": { 19 | "@faker-js/faker": "^8.4.1", 20 | "nodemon": "^3.1.1" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Backend/SQL-CLASS/schema.sql: -------------------------------------------------------------------------------- 1 | USE delta_app; 2 | 3 | CREATE TABLE user ( 4 | id VARCHAR(50) PRIMARY KEY, 5 | username VARCHAR(50) UNIQUE, 6 | email VARCHAR(50) UNIQUE NOT NULL, 7 | password VARCHAR(50) NOT NULL 8 | ); -------------------------------------------------------------------------------- /Backend/SQL-CLASS/views/delete.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Edit Username 7 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 |

You are deleting this user: <%= user.email %>

26 |
27 |
31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /Backend/SQL-CLASS/views/edit.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Edit Username 7 | 8 | 9 |

You are about to edit this user: <%= user.email %>

10 |
11 |
12 |
16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /Backend/SQL-CLASS/views/home.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home 7 | 15 | 16 | 17 | 18 |

The total count of our user is <%= count %>

19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Backend/SQL-CLASS/views/new.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Add New User 7 | 15 | 16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 |

Add new user!

26 |
27 | 28 |
29 | 30 | 31 |
32 | 33 | 34 |
35 | 36 | 37 |
38 | 39 | 40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /Backend/SQL-CLASS/views/user.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Our Users 7 | 21 | 22 | 23 | 24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | <% for (user of users) { %> 39 | 40 | 41 | 42 | 43 | 48 | 53 | 54 | <% } %> 55 |
IdUsernameEmail
<%=user.id%><%=user.username%><%=user.email%> 44 |
45 | 46 |
47 | 		49 |
50 | 51 |
52 |
56 | 57 | 58 | -------------------------------------------------------------------------------- /Backend/math.js: -------------------------------------------------------------------------------- 1 | module.exports.a = 123; 2 | 3 | module.exports.hi = () => { 4 | console.log("hi"); 5 | }; 6 | 7 | module.exports.hello = "Hello"; 8 | // module.exports = { hi, a }; 9 | 10 | //Using npm packages. 11 | var figlet = require("figlet"); 12 | 13 | figlet("Hello World!!", function (err, data) { 14 | if (err) { 15 | console.log("Something went wrong..."); 16 | console.dir(err); 17 | return; 18 | } 19 | console.log(data); 20 | }); 21 | -------------------------------------------------------------------------------- /Backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "figlet": "^1.7.0", 4 | "nodemon": "^3.1.3" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Backend/script.js: -------------------------------------------------------------------------------- 1 | const taken = require("./math"); 2 | 3 | console.log(taken); 4 | // console.log(taken.hi()); 5 | taken.hi(); 6 | console.log(taken.a); 7 | console.log(taken.hello); -------------------------------------------------------------------------------- /CSS/Bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap: A CSS Framework 7 | 8 | 11 | 12 | 13 | 14 |

Pricing

15 |

Please checkout our most effective payment models

16 | 17 |
18 | 19 |
20 |
21 |

Free

22 |
23 |
24 |

$0 / mo

25 |
    26 |
  • 10 users included
    • 27 |
  • 2GB of storage
    • 28 |
  • Email support
    • 29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 |

Pro

37 |
38 |
39 |

$15 / mo

40 |
    41 |
  • 20 users included
    • 42 |
  • 10GB of storage
    • 43 |
  • Priority email support
    • 44 |
45 | 46 |
47 |
48 | 49 |
50 |
51 |

Enterprise

52 |
53 |
54 |

$29 / mo

55 |
    56 |
  • 30 users included
    • 57 |
  • 15GB of storage
    • 58 |
  • Phone & email support
    • 59 |
60 | 61 |
62 |
63 |
64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /CSS/CSS Mini Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Project 8 | 9 | 10 | 11 | 14 | 17 | 20 | 21 | 22 |
23 | 24 |
25 | 28 |
29 | 30 |
31 | 34 | 35 |
36 | 39 |
40 | 41 |
42 | 72 |
73 | 74 | 82 |
83 |
84 | 85 | 86 | -------------------------------------------------------------------------------- /CSS/CSS Mini Project/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Mini Project/photo.jpg -------------------------------------------------------------------------------- /CSS/CSS Mini Project/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: "Poppins", sans-serif; 5 | } 6 | 7 | .main_box { 8 | background-image: url("photo.jpg"); 9 | height: 100vh; 10 | background-size: cover; 11 | } 12 | 13 | .btn_one i { 14 | color: rgba(255, 255, 255, 0.75); 15 | font-size: 30px; 16 | font-weight: 700; 17 | position: absolute; 18 | left: 20px; 19 | line-height: 50px; 20 | cursor: pointer; 21 | transition: all 0.25s linear; 22 | } 23 | 24 | .sidebar_menu { 25 | position: fixed; 26 | left: -310px; 27 | height: 100vh; 28 | width: 300px; 29 | background-color: rgba(255, 255, 255, 0.1); 30 | box-shadow: 0 3px 5px rgba(255, 255, 255, 1); 31 | transition: all 0.3s linear; 32 | } 33 | 34 | .sidebar_menu .logo { 35 | position: absolute; 36 | width: 100%; 37 | line-height: 50px; 38 | box-shadow: 0 3px 2.5px rgba(255, 255, 255, 1); 39 | height: 50px; 40 | border-bottom-right-radius: 5px; 41 | } 42 | 43 | .sidebar_menu .logo a { 44 | position: absolute; 45 | left: 35px; 46 | color: white; 47 | text-decoration: none; 48 | font-size: 30px; 49 | font-weight: 600; 50 | } 51 | 52 | .sidebar_menu .btn_two i { 53 | color: gray; 54 | font-size: 25px; 55 | line-height: 55px; 56 | position: absolute; 57 | left: 270px; 58 | opacity: 0; 59 | cursor: pointer; 60 | transition: all 0.25s linear; 61 | } 62 | 63 | .sidebar_menu .menu { 64 | position: absolute; 65 | width: 100%; 66 | top: 70px; 67 | } 68 | 69 | .sidebar_menu .menu li { 70 | margin-right: 40px; 71 | padding: 10px 20px; 72 | list-style: none; 73 | } 74 | 75 | .sidebar_menu .menu i, a { 76 | color: white; 77 | text-decoration: none; 78 | font-size: 20px; 79 | } 80 | 81 | .sidebar_menu .menu i { 82 | padding-right: 10px; 83 | } 84 | 85 | .sidebar_menu .social_media { 86 | color: white; 87 | /* opacity: 0.5; */ 88 | position: absolute; 89 | left: 5%; 90 | bottom: 20px; 91 | } 92 | 93 | .sidebar_menu .social_media i { 94 | color: white; 95 | opacity: 0.75; 96 | padding: 0 5px; 97 | } 98 | 99 | #check { 100 | display: none; 101 | } 102 | 103 | .sidebar_menu .menu li:hover { 104 | box-shadow: 0 0 5px rgba(255, 255, 255, 1); 105 | border-radius: 5px; 106 | } 107 | 108 | .btn_one i:hover { 109 | font-size: 35px; 110 | color: white; 111 | } 112 | 113 | .btn_two i:hover { 114 | font-size: 30px; 115 | color: white; 116 | } 117 | 118 | .sidebar_menu .social_media i:hover { 119 | opacity: 1; 120 | transform: scale(1.5); 121 | transition: all 0.25s linear; 122 | } 123 | 124 | #check:checked ~ .sidebar_menu { 125 | left: 0; 126 | } 127 | 128 | #check:checked ~ .btn_one i { 129 | opacity: 0; 130 | } 131 | 132 | #check:checked ~ .sidebar_menu .btn_two i { 133 | opacity: 1; 134 | } 135 | -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/album_img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/album_img.jpg -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/backward_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/backward_icon.png -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/card1img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/card1img.jpeg -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/card2img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/card2img.jpeg -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/card3img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/card3img.jpeg -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/card4img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/card4img.jpeg -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/card5img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/card5img.jpeg -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/card6img.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/card6img.jpeg -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/forward_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/forward_icon.png -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/library_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/library_icon.png -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/logo.png -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/play_musicbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/play_musicbar.png -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/player_icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/player_icon1.png -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/player_icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/player_icon2.png -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/player_icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/player_icon3.png -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/player_icon4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/player_icon4.png -------------------------------------------------------------------------------- /CSS/CSS Project/SPOTIFY CLONE/assets/player_icon5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/CSS Project/SPOTIFY CLONE/assets/player_icon5.png -------------------------------------------------------------------------------- /CSS/Chapter-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS: Chapter 1 : CCS Assignment-1 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Ozymandias

15 | 16 | 17 |

by Percy Bysshe Shelley

18 | 19 | 20 |

21 | I met a traveller from an antique land
22 | Who said: Two vast and trunkless legs of stone
23 | Stand in the desart. Near them, on the sand,
24 | Half sunk, a shattered visage lies, whose frown,
25 | And wrinkled lip, and sneer of cold command,
26 | Tell that its sculptor well those passions read
27 | Which yet survive, stamped on these lifeless things,
28 | The hand that mocked them and the heart that fed:
29 | And on the pedestal these words appear:
30 | "My name is Ozymandias, king of kings:
31 | Look on my works, ye Mighty, and despair!"
32 | Nothing beside remains. Round the decay
33 | Of that colossal wreck, boundless and bare
34 | The lone and level sands stretch far away.
35 |

36 |
37 |

38 | Read up more about the poem on 39 | Wikipedia 40 |

41 | 42 | 43 |

44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /CSS/Chapter-1/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | color: brown; 3 | text-align: center; 4 | line-height: 30px; 5 | } 6 | 7 | h1 { 8 | text-align: center; 9 | color: red; 10 | font-family: Georgia; 11 | } 12 | 13 | h3 { 14 | text-align: center; 15 | color: black; 16 | } 17 | 18 | a { 19 | text-decoration: none; 20 | color: green; 21 | } 22 | 23 | button { 24 | background-color: white; 25 | color: blueviolet; 26 | } 27 | 28 | textarea { 29 | color: black; 30 | } 31 | 32 | span { 33 | text-decoration: underline; 34 | } -------------------------------------------------------------------------------- /CSS/Chapter-2/PracticeQs.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Courier New", Courier, monospace; 3 | } 4 | 5 | h1 { 6 | color: #1b74e4; 7 | } 8 | 9 | #searchbtn { 10 | background-color: black; 11 | color: white; 12 | } 13 | 14 | .userbtn { 15 | background-color: aqua; 16 | } 17 | 18 | /* Practice Question 2 */ 19 | /* #myid p { 20 | color: green; 21 | } */ 22 | 23 | div[id="myid"] p { 24 | color: green; 25 | } 26 | -------------------------------------------------------------------------------- /CSS/Chapter-2/PracticeQs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Practice Question 2 8 | 9 | 10 | 11 |

Facebook

12 | 13 | 14 |
15 | 16 | 17 | 18 |
19 |
20 |

21 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium 22 | odio repellat obcaecati dolore at, tempora doloremque exercitationem 23 | temporibus, quidem ipsam dolores labore accusamus enim esse aperiam 24 | nihil maxime consequuntur et. 25 |

26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /CSS/Chapter-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Chapter 2: Assignment-2 8 | 9 | 10 | 11 | 12 |

CSS Practice: Part-2

13 |

Let's learn about selector.

14 | 15 |

There are multiple selectors in css.

16 | 17 |

Some of them include class selector, id selector etc.

18 | 19 |

And we can also combine these too.

20 |
21 |
Did you like the practice set?
22 | 23 | 24 |
25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /CSS/Chapter-2/inheritance_demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Inheritance Demo 8 | 9 | 10 | 11 | 12 |

Main Heading

13 |
14 |

Heading 1

15 |
16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 | 25 |
26 |

Heading 2

27 |

28 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt 29 | inventore saepe, reiciendis dolorem illo culpa velit odio pariatur, 30 | officia ad veniam itaque adipisci veritatis quos tenetur. Ut autem 31 | dolores mollitia! 32 |

33 |
34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /CSS/Chapter-2/inheritance_style.css: -------------------------------------------------------------------------------- 1 | /* Inheritance Example */ 2 | div { 3 | background-color: blueviolet; 4 | } 5 | 6 | /* CSS for Excepted elements */ 7 | input { 8 | background-color: inherit; 9 | } 10 | 11 | button { 12 | background-color: inherit; 13 | } -------------------------------------------------------------------------------- /CSS/Chapter-2/style.css: -------------------------------------------------------------------------------- 1 | /* Part-A: Selectors */ 2 | #mainTopic { 3 | color: blue; 4 | } 5 | 6 | * { 7 | text-align: center; 8 | } 9 | 10 | h1, h3, h5 { 11 | font-family: georgia; 12 | } 13 | 14 | .p { 15 | color: white; 16 | background-color: cornflowerblue; 17 | } 18 | 19 | div button { 20 | background-color: purple; 21 | color: azure; 22 | } 23 | 24 | /* Part-B: Pseudo Class & Elements */ 25 | button:hover { 26 | background-color: yellow; 27 | color: blue; 28 | } 29 | 30 | #p:nth-of-type(odd) { /* 2n+1 */ 31 | color: yellow; 32 | } 33 | 34 | h1::first-letter { 35 | color: red; 36 | } 37 | 38 | #yes:checked + label { 39 | color: darkgreen; 40 | } 41 | 42 | /* 43 | - #mainContent (100) 44 | - div.main (011) 45 | - .main (010) 46 | - h1 (001) 47 | */ 48 | -------------------------------------------------------------------------------- /CSS/Chapter-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Chapter 3: Assignment-3 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 |

Technologies

22 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /CSS/Chapter-3/style.css: -------------------------------------------------------------------------------- 1 | /* Question 1 */ 2 | #q1 { 3 | height: 150px; 4 | width: 300px; 5 | background-color: gray; 6 | margin: 20px 1rem 40px 2em; 7 | padding: 1em; 8 | } 9 | 10 | /* Question 2 */ 11 | #q2 { 12 | height: 100px; 13 | width: 100px; 14 | border: 2px solid black; 15 | display: inline-block; 16 | } 17 | 18 | /* Question 3 */ 19 | ul li { 20 | display: inline; 21 | } 22 | -------------------------------------------------------------------------------- /CSS/Chapter-4/Hover Card Effect/Cartoon Cute Girl&Boy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/Chapter-4/Hover Card Effect/Cartoon Cute Girl&Boy.jpg -------------------------------------------------------------------------------- /CSS/Chapter-4/Hover Card Effect/DigitalOcean Smiley 02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/Chapter-4/Hover Card Effect/DigitalOcean Smiley 02.jpg -------------------------------------------------------------------------------- /CSS/Chapter-4/Hover Card Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Chapter-4: Next Steps 7 | 8 | 9 | 10 |
11 | man 12 |
13 |

Rahul Kumar

14 |

Data Analyst

15 |
16 |
17 |
18 | woman 19 |
20 |

Neha Sharma

21 |

Software Engineer

22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /CSS/Chapter-4/Hover Card Effect/style.css: -------------------------------------------------------------------------------- 1 | /* Hover Card Effect */ 2 | .card { 3 | width: 200px; 4 | height: auto; 5 | border: 2px solid black; 6 | display: inline-block; 7 | margin: 10px; 8 | box-shadow: 2px 4px 8px black; 9 | transition: 0.5s; 10 | border-radius: 5px; 11 | } 12 | 13 | .desc { 14 | padding: 0 2px 0 2px; 15 | } 16 | 17 | .card img { 18 | width: 100%; /* This will fix the img-size according to parents size. */ 19 | border-radius: 5px; 20 | } 21 | 22 | .card:hover { 23 | box-shadow: 2px 4px 20px black; 24 | } 25 | -------------------------------------------------------------------------------- /CSS/Chapter-4/Smiley Face.css: -------------------------------------------------------------------------------- 1 | /* Smiley Face */ 2 | .face { 3 | height: 400px; 4 | width: 400px; 5 | background-color: yellow; 6 | border-radius: 50%; 7 | border: 5px solid black; 8 | } 9 | 10 | .mouth { 11 | width: 200px; 12 | height: 75px; 13 | background-color: whitesmoke; 14 | border-radius: 0px 0px 75px 75px; 15 | position: absolute; 16 | top: 250px; 17 | left: 100px; 18 | border: 5px solid black; 19 | } 20 | 21 | .left-eye, 22 | .right-eye { 23 | width: 50px; 24 | height: 50px; 25 | border-radius: 50%; 26 | background-color: blue; 27 | display: inline-block; 28 | position: absolute; 29 | top: 100px; 30 | left: 100px; 31 | border: 5px solid black; 32 | } 33 | 34 | .right-eye { 35 | left: 250px; 36 | } 37 | -------------------------------------------------------------------------------- /CSS/Chapter-4/Smiley Face.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Smiley Face 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /CSS/Chapter-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Chapter-4: Assignment-4 8 | 9 | 10 | 11 |
This is box1
12 |
This is box2
13 |
This is box3
14 |
This is box4
15 |
This is my Picture.
16 | 17 | 18 | -------------------------------------------------------------------------------- /CSS/Chapter-4/style.css: -------------------------------------------------------------------------------- 1 | /* Qs1. Add a 2s transition on box1 for width changes. 2 | It should have 'ease-in' speed curve & 0.5s delay */ 3 | 4 | #box1 { 5 | width: 100px; 6 | height: 100px; 7 | background: green; 8 | transition: width 2s ease-in 0.5s; 9 | } 10 | 11 | #box1:hover { 12 | width: 600px; 13 | } 14 | 15 | /* Qs2. Using transform, move box2 200px to the right & 16 | 200px down. Also rotate it 90deg.*/ 17 | 18 | #box2 { 19 | width: 100px; 20 | height: 100px; 21 | background: red; 22 | transform: translate(200px, 200px) rotate(90deg); 23 | } 24 | 25 | /* Qs3. Using transform, skew box3 20deg along the x axis.*/ 26 | 27 | #box3 { 28 | width: 100px; 29 | height: 100px; 30 | background: lightblue; 31 | transform: skewX(20deg); 32 | } 33 | 34 | /* Qs4. Set a 2px horizontal & 2px vertical, green shadow 35 | for box4, with a 5px blur radius.*/ 36 | 37 | #box4 { 38 | width: 100px; 39 | height: 100px; 40 | background: lightgreen; 41 | box-shadow: 2px 2px 5px green; 42 | } 43 | 44 | /* Qs5. Set Your picture or any picture as the background of the div 45 | "myPic". Also, set transparency of this div to 50%. */ 46 | 47 | #myPic { 48 | width: 200px; 49 | height: 200px; 50 | background: pink; 51 | background-image: url("Hover Card Effect/DigitalOcean Smiley 02.jpg"); 52 | background-size: cover; 53 | opacity: 50%; 54 | } 55 | -------------------------------------------------------------------------------- /CSS/Chapter-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Chapter 5: Assignment-5 8 | 9 | 10 | 11 | 12 | 13 |
14 |
A
15 |
B
16 |
C
17 |
D
18 |
E
19 |
F
20 |
G
21 |
H
22 |
I
23 |
24 |
25 | 26 | 27 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /CSS/Chapter-5/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Times New Roman"; 3 | } 4 | 5 | /* Question 1 */ 6 | #out { 7 | height: 400px; 8 | width: 400px; 9 | border: 2px solid darkcyan; 10 | border-radius: 10px; 11 | display: flex; 12 | flex-wrap: wrap; 13 | justify-content: space-evenly; 14 | align-items: center; 15 | } 16 | 17 | #in { 18 | height: 100px; 19 | width: 100px; 20 | border: 2px solid black; 21 | border-radius: 10px; 22 | background-color: gray; 23 | text-align: center; 24 | font-size: 50px; 25 | } 26 | 27 | /* Question 2 */ 28 | #navbar { 29 | height: 50px; 30 | width: 900px; 31 | background-color: lightpink; 32 | border: 2px solid darkcyan; 33 | border-radius: 10px; 34 | display: flex; 35 | justify-content: flex-start; 36 | align-items: center; 37 | } 38 | 39 | #item { 40 | height: 50px; 41 | width: 80px; 42 | font-size: 24px; 43 | margin-left: 5px; 44 | line-height: 50px; 45 | } 46 | -------------------------------------------------------------------------------- /CSS/Chapter-6/Pet Adoption/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/Chapter-6/Pet Adoption/cat.jpg -------------------------------------------------------------------------------- /CSS/Chapter-6/Pet Adoption/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/Chapter-6/Pet Adoption/dog.jpg -------------------------------------------------------------------------------- /CSS/Chapter-6/Pet Adoption/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS 8 | 9 | 10 | 11 |

adoptme.com

12 |

Adopt a Pet Today

13 |

14 |
15 |
16 | jerry 17 |

Meet Jerry

18 |

19 | Jerry is a charming and friendly dog with a heart of gold, and he is 20 | looking for a loving home to call his own. He is a medium-sized mixed 21 | breed with soft, fluffy fur and soulful brown eyes that will melt your 22 | heart. If you are looking for a loyal and loving companion who will 23 | bring endless joy into your life, Jerry may be the perfect pet for 24 | you. Adopting Jerry means giving him a second chance at a happy life, 25 | and you will be rewarded with the unconditional love and companionship 26 | that only a dog can provide. So don't hesitate to bring this wonderful 27 | pup home today! 28 |

29 |
30 |
31 | tom 32 |

Meet Tom

33 |

34 | Tom is a handsome and affectionate cat who is looking for his forever 35 | home. He is a medium-sized domestic short hair with sleek black and 36 | white fur and striking green eyes that will capture your heart. If you 37 | are looking for a loyal and loving companion who will provide you with 38 | endless joy and entertainment, Tom may be the perfect pet for you. 39 | Adopting Tom means giving him a second chance at a happy life, and you 40 | will be rewarded with the unconditional love and companionship that 41 | only a cat can provide mhn mmmm. So why not bring this wonderful 42 | feline into your life today? 43 |

44 |
45 |
46 |

a gift of new life

47 | 48 | 49 | -------------------------------------------------------------------------------- /CSS/Chapter-6/Pet Adoption/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #d56f3e; 3 | } 4 | 5 | #pets { 6 | display: flex; 7 | justify-content: space-evenly; 8 | background-color: #3c787e; 9 | border-radius: 25px; 10 | } 11 | 12 | .card { 13 | width: 400px; 14 | border: 2px solid black; 15 | border-radius: 25px; 16 | padding: 10px; 17 | margin: 10px; 18 | background-color: #d56f3e; 19 | } 20 | 21 | img { 22 | width: 100%; 23 | border-radius: 25px; 24 | } 25 | 26 | h1 { 27 | text-align: center; 28 | margin: auto; 29 | border-radius: 20px; 30 | background-color: #3c787e; 31 | } 32 | 33 | h2 { 34 | color: #ffffff; 35 | background-color: #3c787e; 36 | border-radius: 15px; 37 | text-align: center; 38 | } 39 | 40 | h4 { 41 | text-align: right; 42 | color: #3c787e; 43 | } 44 | 45 | span { 46 | color: #ffffff; 47 | } 48 | 49 | @media (max-width: 700px) { 50 | #pets { 51 | flex-wrap: wrap; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /CSS/Chapter-6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Chapter 6: Assignment-6 7 | 8 | 9 | 10 | 11 |
12 |
Header (1 Row, 12 Column)
13 |
Sidebar (10 Row, 3 Column)
14 |
Navigation (1 Row, 6 Column)
15 |
Ads (10 Row, 3 Column)
16 |
Main (9 Row, 6 Column)
17 |
Footer (1 Row, 12 Column)
18 |
19 |

20 | Loader is Loading Due to Heavy Load... LoL😂😂😂 21 |

22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /CSS/Chapter-6/style.css: -------------------------------------------------------------------------------- 1 | /* Question-1 */ 2 | .container { 3 | display: grid; 4 | grid-template-rows: repeat(12, 1fr); 5 | grid-template-columns: repeat(12, 1fr); 6 | height: 100vh; 7 | grid-gap: 10px; 8 | font-size: 1.5rem; 9 | margin: 0px; 10 | padding: 0px; 11 | } 12 | 13 | .header { 14 | grid-column: 1 / span 12; 15 | background-color: antiquewhite; 16 | } 17 | 18 | .sidebar { 19 | grid-column: 1 / span 3; 20 | grid-row: 2 / span 10; 21 | background-color: brown; 22 | } 23 | 24 | .navigation { 25 | grid-column: 4 / span 6; 26 | background-color: aquamarine; 27 | } 28 | 29 | .ads { 30 | grid-column: 10 / span 3; 31 | grid-row: 2 / span 10; 32 | background-color: blue; 33 | } 34 | 35 | .main { 36 | grid-column: 4 / span 6; 37 | grid-row: 3 / span 9; 38 | background-color: blueviolet; 39 | } 40 | 41 | .footer { 42 | grid-column: 1 / span 12; 43 | background-color: cadetblue; 44 | } 45 | 46 | /* Question-2 */ 47 | @media (max-width: 720px) { 48 | .header { 49 | grid-column: 1 / span 12; 50 | background-color: antiquewhite; 51 | } 52 | 53 | .navigation { 54 | grid-column: 1 / span 12; 55 | background-color: aquamarine; 56 | } 57 | 58 | .sidebar { 59 | grid-column: 1 / span 3; 60 | grid-row: 3 / span 8; 61 | background-color: brown; 62 | } 63 | 64 | .main { 65 | grid-column: 4 / span 9; 66 | grid-row: 3 / span 8; 67 | background-color: blueviolet; 68 | } 69 | 70 | .ads { 71 | grid-column: 1 / span 3; 72 | grid-row: 11 / span 1; 73 | background-color: blue; 74 | } 75 | 76 | .footer { 77 | grid-column: 4 / span 9; 78 | background-color: cadetblue; 79 | } 80 | } 81 | 82 | /* Question-3 */ 83 | .loader { 84 | border: 50px solid black; 85 | border-top: 50px solid goldenrod; 86 | border-radius: 50%; 87 | width: 100px; 88 | height: 100px; 89 | animation-name: spin; 90 | animation: spin 2s linear infinite; 91 | } 92 | 93 | @keyframes spin { 94 | 0% { 95 | transform: rotate(0deg); 96 | } 97 | 100% { 98 | transform: rotate(360deg); 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /CSS/TailwindCSS/README.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | > [Tailwind CSS Installation Guide](https://tailwindcss.com/docs/installation)👈click here to see official installation guide. 4 | 5 | ## Get started with Tailwind CSS 6 | 7 | ### Tailwind CLI: Using PostCSS 8 | 9 | > ⚠️ Install `Node.js` and `npm` (if you haven't already). 10 | 11 | 1. **Create `package.json` file**: This file is used to manage your project's dependencies, scripts, and other metadata. 12 | 13 | > 💡 The alternative method to create a new `package.json` is create `package.json` named file manually in your project directory and add `{}` empty curly braces inside it and follow further **Tailwind** commands. 14 | 15 | Run `npm init` or `npm i -y` to create a new `package.json` file. 16 | 17 | > ⚠️ `-y` or `--yes` flag will automatically accept all the default values, skipping the prompts. 18 | 19 | 2. **Install Tailwind CSS**: Install it from the [`Using PostCSS`](https://tailwindcss.com/docs/installation/using-postcss) tab. 20 | 21 | Run `npm install -D tailwindcss postcss autoprefixer` in your project directory. 22 | 23 | 3. **Install Vite**: 24 | Run `npm i vite` in your project directory. 25 | 26 | 4. **Create Config File**: 27 | 28 | To create _config files_ run `npx tailwindcss init -p` this command. 29 | 30 | > ⚠️ This `-p` flag will create _config_ file for `PostCSS` which is `postcss.config.js` file. 31 | 32 | 5. **Configure your template paths**: Add the paths to all of your template files in your tailwind.config.js file. 33 | 34 | Add `"*"` in `content` array of your `tailwind.config.js` file. 35 | 36 | ```js tailwind.config.js 37 | content: ["*"], 38 | ``` 39 | 40 | > ⚠️ This `*` (asterisk/star) tells tailwind to apply css in the all over the places. 41 | 42 | 6. **Add the Tailwind directives to your CSS**: Add the `@tailwind` directives for each of Tailwind’s layers to your main CSS file. 43 | 44 | ```css syle.css 45 | @tailwind base; 46 | @tailwind components; 47 | @tailwind utilities; 48 | ``` 49 | 50 | 7. **Change `package.json`**: 51 | Add the following to your `package.json` file. 52 | 53 | ```json 54 | "scripts": { 55 | "start": "vite", 56 | }, 57 | ``` 58 | 59 | 8. **Link `CSS` file to `HTML`**: Add the following line into your **HTML** `` tag. 60 | 61 | ```html index.html 62 | 63 | ``` 64 | 65 | > Finally, run `npm run start` to start the server. 66 | -------------------------------------------------------------------------------- /CSS/TailwindCSS/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SAD0XER/Delta3.0-Full-Stack-MERN-Web-Development-Course/feae3ff3efb75851dde02fa461ccb23c9ec2c281/CSS/TailwindCSS/image.png -------------------------------------------------------------------------------- /CSS/TailwindCSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tailwind CSS Class 8 | 9 | 10 |
11 | 12 |
14 | News you can Trust. 15 |
16 | 17 | 18 |
19 |

Stay up to date with the Latest!

20 |

Subscribe to our newsletter for latest news straight into your inbox.

21 |
22 | 26 |
27 | 28 |
29 | We value your privacy 30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /CSS/TailwindCSS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "start": "vite" 4 | }, 5 | "devDependencies": { 6 | "autoprefixer": "^10.4.19", 7 | "postcss": "^8.4.39", 8 | "tailwindcss": "^3.4.6", 9 | "vite": "^5.3.4" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /CSS/TailwindCSS/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /CSS/TailwindCSS/style.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /CSS/TailwindCSS/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["*"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /HTML/HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML (Level 3) Practice Set 8 | 9 | 10 | 11 | 12 | 13 | 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 |
14 | Student Information 15 |
InfoNameAddress
CityHouse
ADelhi1
BMumbai2
CKolkata3
DPune4
46 |
47 | 48 | 49 |
50 | 51 | 52 |

53 | 54 | 55 | 56 | 57 | 58 | 59 |

60 | 61 | 62 | 69 |

70 | 71 |
72 | 73 |

74 | 75 | 76 | 77 |

78 | 79 | 80 |
81 |
82 | 83 | 84 |

Feedback Form

85 |
86 | 87 | 88 |

89 | 90 | 91 | 92 |

93 | 94 |
95 | 96 |

97 | 98 |
99 | 100 |
101 | 102 |
103 | 104 |
105 | 106 |
107 | 108 | 109 |

110 | 111 | 112 |
113 | 114 | 115 | -------------------------------------------------------------------------------- /JavaScript/Simon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Simon Game: Play Online Simon Says Game 9 | 10 | 11 | 12 |

Simon Says Game

13 |

14 |

Press any key to start the game

15 | 16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /JavaScript/Simon/script.js: -------------------------------------------------------------------------------- 1 | // For storing color sequence 2 | let gameSeq = []; 3 | let userSeq = []; 4 | 5 | let start = false; 6 | let level = 0; 7 | let highScore = -1; 8 | 9 | let colors = ["red", "green", "blue", "yellow"]; // For random color selection. 10 | 11 | let h3 = document.querySelector("h3"); 12 | 13 | document.addEventListener("keydown", (event) => { 14 | if (start == false) { 15 | start = true; 16 | console.log("Game is Started!"); 17 | 18 | levelUp(); 19 | } 20 | }); 21 | 22 | function levelUp() { 23 | userSeq = []; 24 | level++; 25 | h3.innerText = `Level: ${level}`; 26 | 27 | //Choose Random Button 28 | let randomIdx = Math.floor(Math.random() * 4); 29 | let randColor = colors[randomIdx]; 30 | let randBtn = document.querySelector(`.${randColor}`); 31 | gameSeq.push(randColor); 32 | console.log(gameSeq); //Printing Color Sequence. 33 | gameFlash(randBtn); 34 | } 35 | 36 | //Blinking Button Functionality 37 | function gameFlash(btn) { 38 | btn.classList.add("gameFlash"); 39 | 40 | setTimeout(() => { 41 | btn.classList.remove("gameFlash"); 42 | }, 250); 43 | } 44 | 45 | function userFlash(btn) { 46 | btn.classList.add("userFlash"); 47 | 48 | setTimeout(() => { 49 | btn.classList.remove("userFlash"); 50 | }, 250); 51 | } 52 | 53 | //What will happen if button is pressed. 54 | function btnPress() { 55 | let btn = this; 56 | userFlash(btn); 57 | 58 | let userColor = btn.getAttribute("id"); 59 | userSeq.push(userColor); 60 | 61 | checkLevel(userSeq.length - 1); 62 | } 63 | 64 | let allBtns = document.querySelectorAll(".btn"); 65 | for (btn of allBtns) { 66 | btn.addEventListener("click", btnPress); 67 | } 68 | 69 | //Checking User Sequence witn Game Sequence. 70 | function checkLevel(idx) { 71 | if (gameSeq[idx] === userSeq[idx]) { 72 | if (gameSeq.length == userSeq.length) { 73 | setTimeout(() => { 74 | levelUp(); 75 | }, 1000); 76 | } 77 | } else { 78 | hiScore(level); 79 | h3.innerText = `Game Over!\nYour Score: ${level}\nPress any key to start again.`; 80 | let body = (document.querySelector("body").style.backgroundColor = "red"); 81 | setTimeout(() => { 82 | document.querySelector("body").style.backgroundColor = "white"; 83 | }, 250); 84 | reset(); 85 | } 86 | } 87 | 88 | function reset() { 89 | start = false; 90 | gameSeq = []; 91 | userSeq = []; 92 | level = 0; 93 | highScore = -1; 94 | } 95 | 96 | function hiScore(level) { 97 | if (highScore < level) { 98 | highScore = level; 99 | } 100 | 101 | let h2 = document.querySelector("h2"); 102 | h2.innerText = `High Score: ${highScore}`; 103 | } 104 | -------------------------------------------------------------------------------- /JavaScript/Simon/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | margin: auto; 4 | } 5 | 6 | .btn-container { 7 | display: flex; 8 | justify-content: center; 9 | /* background-color: rgb(30, 30, 30); */ 10 | } 11 | 12 | .btn { 13 | height: 200px; 14 | width: 200px; 15 | border: 10px solid black; 16 | border-radius: 20%; 17 | margin: 2rem; 18 | box-shadow: 0px 0px 20px black; 19 | } 20 | 21 | .green { 22 | background-color: green; 23 | } 24 | 25 | .yellow { 26 | background-color: yellow; 27 | } 28 | 29 | .red { 30 | background-color: red; 31 | } 32 | 33 | .blue { 34 | background-color: blue; 35 | } 36 | 37 | .gameFlash { 38 | background-color: black; 39 | } 40 | 41 | .userFlash { 42 | background-color: white; 43 | } 44 | -------------------------------------------------------------------------------- /JavaScript/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | JavaScript OOPs 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /JavaScript/script.js: -------------------------------------------------------------------------------- 1 | // 1. Using factory function, a function that creates an object with methods 2 | /* function Person(name, age) { 3 | return { 4 | name: name, age: age, talk() { console.log(`${this.name} can talk also.`); } 5 | } 6 | } */ 7 | 8 | // 2. Constructors: Starts with Capital latter & they doesn't return anything. 9 | /* function Person(name, age) { 10 | this.name = name; 11 | this.age = age; 12 | } 13 | 14 | Person.prototype.talk = function () { 15 | console.log(`Hello, My name is ${this.name}.`); 16 | }; */ 17 | 18 | // 3. Classes: A template for creating objects. 19 | /* class Person { 20 | constructor(name, age) { // It's the same as above but using class syntax. 21 | this.name = name; 22 | this.age = age; 23 | } 24 | 25 | talk() { 26 | console.log(`Hi! I am ${this.name}, and I am ${this.age} years old.`); 27 | } 28 | } 29 | 30 | let person1 = new Person("John", 30); 31 | person1.talk(); */ 32 | 33 | // OOPs Inheritance in JS 34 | //Parent class / Base class. 35 | class Person { 36 | constructor(name, age) { 37 | this.name = name; 38 | this.age = age; 39 | } 40 | walk() { 41 | console.log(`I am walking.`); 42 | } 43 | } 44 | 45 | //Extending Person class. 46 | class Student extends Person { 47 | constructor(name, age, marks) { 48 | //'super' keyword calls the parent constructor. 49 | super(name, age); // calling parent constructor. 50 | this.marks = marks; 51 | } 52 | 53 | // This is a example of overriding. 54 | walk() { 55 | console.log(`${this.name} is walking.\nThis is overrided function.`); 56 | } 57 | } 58 | 59 | let std1 = new Student("sarvesh", 10, 90); //Creating student object. 60 | console.log(`Name is ${std1.name}.\nAge is ${std1.age}.\nI got ${std1.marks} marks out of 100.`); 61 | std1.walk(); 62 | -------------------------------------------------------------------------------- /My Portfolio/Portfolio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Portfolio 8 | 9 | 10 | 11 |
12 | Profile Photo 13 |

SARVESH ASHOK DEVRUKHAKAR

14 |
15 |
16 | 17 |
18 |

Education

19 | 24 |
25 |
26 | 27 |
28 |

Skills

29 | 35 |
36 |
37 | 38 |
39 |

Achievements

40 | 45 |
46 |
47 | 48 |
49 |

Hobbies

50 | 54 |
55 |
56 | 57 |
58 |

Contact

59 | 66 |
67 | 68 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /Projects/ExploreHut/app.js: -------------------------------------------------------------------------------- 1 | // Check for NODE_ENV is not set on "production". 2 | if (process.env.NODE_ENV != "production") require("dotenv").config(); 3 | 4 | const express = require("express"); 5 | const mongoose = require("mongoose"); 6 | const path = require("path"); 7 | const methodOverride = require("method-override"); 8 | const ejsMate = require("ejs-mate"); 9 | const ExpressError = require("./utils/ExpressError.js"); 10 | const session = require("express-session"); 11 | const MongoStore = require("connect-mongo"); 12 | const flash = require("connect-flash"); 13 | const passport = require("passport"); 14 | const LocalStrategy = require("passport-local"); 15 | const User = require("./models/user.js"); 16 | 17 | // Requiring Express Router files. 18 | const listingRouter = require("./routes/listing.js"); 19 | const reviewRouter = require("./routes/review.js"); 20 | const userRouter = require("./routes/user.js"); 21 | 22 | // Setting for project requirements. 23 | const app = express(); 24 | app.set("view engine", "ejs"); 25 | app.set("views", path.join(__dirname, "views")); 26 | app.use(express.urlencoded({ extended: true })); 27 | app.use(methodOverride("_method")); 28 | app.engine("ejs", ejsMate); 29 | app.use(express.static(path.join(__dirname, "/public"))); 30 | 31 | const cloudDatabaseUrl = process.env.ATLAS_DB_URL; // Connection link of Cloud MongoDB (Atlas) Database. 32 | 33 | // MongoDB session store for 'Connect' and 'Express'. 34 | const store = MongoStore.create({ 35 | mongoUrl: cloudDatabaseUrl, 36 | crypto: { 37 | secret: process.env.SECRET, 38 | }, 39 | touchAfter: 24 * 3600, 40 | }); 41 | 42 | // Handling Error if session store fails. 43 | store.on("error", () => { 44 | console.log("ERROR in MONGO SESSION STORE!"); 45 | console.log(error); 46 | console.error(error); 47 | }); 48 | 49 | // express-session parameters. 50 | const sessionOptions = { 51 | store: store, 52 | secret: process.env.SECRET, 53 | resave: false, 54 | saveUninitialized: true, 55 | cookie: { 56 | expires: Date.now() + 7 * 24 * 60 * 60 * 1000, 57 | maxAge: Date.now() + 7 * 24 * 60 * 60 * 1000, 58 | httpOnly: true, 59 | }, 60 | }; 61 | 62 | app.use(session(sessionOptions)); 63 | app.use(flash()); 64 | 65 | app.use(passport.initialize()); 66 | app.use(passport.session()); 67 | passport.use(new LocalStrategy(User.authenticate())); // It is to use static authenticate method of model in LocalStrategy. 68 | 69 | // use static serialize and deserialize of model for passport session support. 70 | passport.serializeUser(User.serializeUser()); 71 | passport.deserializeUser(User.deserializeUser()); 72 | 73 | // Flsh Message Middleware. 74 | app.use((req, res, next) => { 75 | res.locals.success = req.flash("success"); 76 | res.locals.error = req.flash("error"); 77 | res.locals.currentUser = req.user; // Storing current User in locals so that can be accessed everywhere. 78 | next(); 79 | }); 80 | 81 | // Express Routers 82 | app.use("/listings", listingRouter); 83 | app.use("/listings/:id/reviews", reviewRouter); 84 | app.use("/", userRouter); 85 | 86 | // Middlewares 87 | app.all("*", (req, res, next) => { 88 | next(new ExpressError(404, "Page Not Found!")); 89 | }); 90 | 91 | app.use((err, req, res, next) => { 92 | let { statusCode = 500, message = "Something Went Wrong!" } = err; 93 | res.status(statusCode).render("error.ejs", { message }); 94 | }); 95 | 96 | /* Database connectivity setup */ 97 | async function main() { 98 | await mongoose.connect(cloudDatabaseUrl); 99 | console.log("Database connected."); 100 | } 101 | 102 | main().catch((err) => console.log(err)); 103 | 104 | /* Server setup */ 105 | app.listen(8080, () => { 106 | console.log("Server is running on localhost: 8080"); 107 | }); 108 | -------------------------------------------------------------------------------- /Projects/ExploreHut/cloudConfig.js: -------------------------------------------------------------------------------- 1 | const cloudinary = require("cloudinary").v2; 2 | const { CloudinaryStorage } = require("multer-storage-cloudinary"); 3 | 4 | cloudinary.config({ 5 | cloud_name: process.env.CLOUD_NAME, 6 | api_key: process.env.CLOUD_API_KEY, 7 | api_secret: process.env.CLOUD_API_SECRET, 8 | }); 9 | 10 | const storage = new CloudinaryStorage({ 11 | cloudinary: cloudinary, 12 | params: { 13 | folder: "Explore-Hut_Dev", 14 | allowedFormats: ["png", "jpg", "jpeg", "gif", "tiff", "bmp", "pdf"], 15 | }, 16 | }); 17 | 18 | module.exports = { cloudinary, storage }; 19 | -------------------------------------------------------------------------------- /Projects/ExploreHut/controllers/listing.js: -------------------------------------------------------------------------------- 1 | const Listing = require("../models/listing.js"); 2 | 3 | // Index Route Callback to see all Listings. 4 | module.exports.index = async (req, res) => { 5 | const allListings = await Listing.find({}); //To extract all listing data from database. 6 | res.render("../views/listings/index.ejs", { listings: allListings }); //Passing all listings to index.ejs with key name as `listings`. 7 | }; 8 | 9 | // New Form to Create new Listings. 10 | module.exports.newListingForm = (req, res) => { 11 | res.render("../views/listings/new.ejs"); 12 | }; 13 | 14 | // Show Listing Details. 15 | module.exports.showListingDetails = async (req, res) => { 16 | const { id } = req.params; 17 | const listing = await Listing.findById(id) 18 | .populate({ path: "reviews", populate: { path: "author" } }) 19 | .populate("owner"); 20 | 21 | // Handling case if listing does not found. 22 | if (!listing) { 23 | req.flash("error", "Requested list does not exist!"); 24 | res.redirect("/listings"); 25 | } 26 | res.render("../views/listings/show.ejs", { listing }); 27 | }; 28 | 29 | // Create and Save new Listing in DB. 30 | module.exports.saveNewListing = async (req, res, next) => { 31 | const newListing = new Listing(req.body.listing); 32 | const { path: url, filename } = req.file; 33 | newListing.owner = req.user._id; 34 | newListing.image = { url, filename }; 35 | await newListing.save(); 36 | req.flash("success", "New Listing Added!"); 37 | res.redirect("/listings"); 38 | }; 39 | 40 | // New Form to Edit Listing. 41 | module.exports.editListingForm = async (req, res) => { 42 | const { id } = req.params; 43 | const listing = await Listing.findById(id); 44 | 45 | // Handling case if editing list does not found. 46 | if (!listing) { 47 | req.flash("error", "Requested editing list does not exist!"); 48 | res.redirect("/listings"); 49 | } 50 | 51 | let previewImage = listing.image.url.replace("/upload", "/upload/c_auto,h_200,w_400"); 52 | res.render("../views/listings/edit.ejs", { listing, previewImage }); 53 | }; 54 | 55 | // Update Edited Listing data in DB. 56 | module.exports.updateListing = async (req, res) => { 57 | const { id } = req.params; 58 | let listing = await Listing.findByIdAndUpdate(id, { ...req.body.listing }); 59 | 60 | // Checking if file exist or not. 61 | if (req.file) { 62 | const { path: url, filename } = req.file; 63 | listing.image = { url, filename }; 64 | await listing.save(); 65 | } 66 | req.flash("success", "Listing Updated!"); 67 | res.redirect(`/listings/${id}`); 68 | }; 69 | 70 | // Delete Lising. 71 | module.exports.deleteListing = async (req, res) => { 72 | const { id } = req.params; 73 | await Listing.findByIdAndDelete(id); 74 | req.flash("success", "Listing Deleted!"); 75 | res.redirect(`/listings`); 76 | }; 77 | -------------------------------------------------------------------------------- /Projects/ExploreHut/controllers/review.js: -------------------------------------------------------------------------------- 1 | const Listing = require("../models/listing.js"); 2 | const Review = require("../models/review.js"); 3 | 4 | // Add Review Route Callback. 5 | module.exports.addReview = async (req, res) => { 6 | let listing = await Listing.findById(req.params.id); 7 | let newReview = new Review(req.body.review); 8 | newReview.author = req.user._id; 9 | 10 | listing.reviews.push(newReview); 11 | 12 | await newReview.save(); 13 | await listing.save(); 14 | 15 | req.flash("success", "New Review Added!"); 16 | res.redirect(`/listings/${listing._id}`); 17 | }; 18 | 19 | // Delete Review Route Callback. 20 | module.exports.deleteReview = async (req, res) => { 21 | let { id, reviewId } = req.params; 22 | 23 | await Listing.findByIdAndUpdate(id, { $pull: { reviews: reviewId } }); 24 | await Review.findByIdAndDelete(reviewId); 25 | 26 | req.flash("success", "Review Deleted!"); 27 | res.redirect(`/listings/${id}`); 28 | }; 29 | -------------------------------------------------------------------------------- /Projects/ExploreHut/controllers/user.js: -------------------------------------------------------------------------------- 1 | const User = require("../models/user.js"); 2 | 3 | // Signup User GET Route Callback. 4 | module.exports.signupUserForm = (req, res) => { 5 | res.render("users/signup.ejs"); 6 | }; 7 | 8 | // Signup User POST Route Callback. 9 | module.exports.saveSignupUser = async (req, res) => { 10 | try { 11 | let { username, email, password } = req.body; 12 | const newUser = new User({ email, username }); 13 | const registeredUser = await User.register(newUser, password); 14 | console.log(registeredUser); 15 | 16 | // Login User after successful User registration. 17 | req.login(registeredUser, (error) => { 18 | if (error) return next(error); 19 | req.flash("success", "Welcome to Explore Hut!"); 20 | res.redirect("/listings"); 21 | }); 22 | } catch (error) { 23 | req.flash("error", error.message); 24 | res.redirect("/signup"); 25 | } 26 | }; 27 | 28 | // Login User GET Route Callback. 29 | module.exports.loginUserForm = (req, res) => { 30 | res.render("users/login.ejs"); 31 | }; 32 | 33 | // Login User POST Route Callback. 34 | module.exports.saveLoginUser = async (req, res) => { 35 | req.flash("success", "Login successful!"); 36 | // let redirectUrl = res.locals.redirectUrl || "/listings"; // Redirecting to '/listings' if 'res.locals.redirectUrl' is not undefined. 37 | res.redirect(res.locals.redirectUrl || "/listings"); 38 | }; 39 | 40 | // Logout User Route Callback. 41 | module.exports.logoutUser = (req, res, next) => { 42 | req.logout((error) => { 43 | if (error) return next(error); 44 | req.flash("success", "Logout successful."); 45 | res.redirect("/listings"); 46 | }); 47 | }; 48 | -------------------------------------------------------------------------------- /Projects/ExploreHut/init/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * We have created this `/init` folder to initialise database with fresh data. 3 | * so, we can perform project setup and data initialisation in this file. 4 | */ 5 | 6 | const mongoose = require("mongoose"); 7 | const initData = require("./data.js"); // Importing data from data.js file. 8 | const Listing = require("../models/listing.js"); // Importing Listing model from models folder. 9 | 10 | const MONGO_URL = "mongodb://127.0.0.1:27017/Explore-Hut"; 11 | 12 | /* Database connectivity setup */ 13 | main() 14 | .then(() => { 15 | console.log("Database connected."); 16 | }) 17 | .catch((err) => console.log(err)); 18 | 19 | async function main() { 20 | await mongoose.connect(MONGO_URL); 21 | } 22 | 23 | const initDB = async () => { 24 | await Listing.deleteMany({}); 25 | // initData.data = initData.data.map((listing) => ({...listing, owner: ""})); 26 | await Listing.insertMany(initData.data); 27 | console.log("Data is initialized."); 28 | }; 29 | 30 | initDB(); 31 | -------------------------------------------------------------------------------- /Projects/ExploreHut/models/listing.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); // Importing/Requiring mongoose from package. 2 | const Schema = mongoose.Schema; // Importing mongoose module and Schema. 3 | const Review = require("./review.js"); 4 | 5 | /* Schema defining */ 6 | const listingSchema = new Schema({ 7 | title: { 8 | type: String, 9 | required: true, 10 | }, 11 | description: String, 12 | image: { 13 | url: String, 14 | filename: String, 15 | }, 16 | price: Number, 17 | location: String, 18 | country: String, 19 | reviews: [{ type: Schema.Types.ObjectId, ref: "Review" }], 20 | owner: { type: Schema.Types.ObjectId, ref: "User" }, 21 | }); 22 | 23 | // Post Mongoose Middleware 24 | listingSchema.post("findOneAndDelete", async (listing) => { 25 | if (listing) { 26 | await Review.deleteMany({ _id: { $in: listing.reviews } }); 27 | } 28 | }); 29 | 30 | /* Model creating and exporting */ 31 | const Listing = mongoose.model("Listing", listingSchema); // Creating a model from the schema. 32 | module.exports = Listing; // Exporting the model for use in other parts of the application. 33 | -------------------------------------------------------------------------------- /Projects/ExploreHut/models/review.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | const Schema = mongoose.Schema; 3 | 4 | const reviewSchema = new Schema({ 5 | comment: String, 6 | rating: { 7 | type: Number, 8 | min: 1, 9 | max: 5, 10 | }, 11 | createdAt: { type: Date, default: Date.now() }, 12 | author: { type: Schema.Types.ObjectId, ref: "User" }, 13 | }); 14 | 15 | module.exports = mongoose.model("Review", reviewSchema); 16 | -------------------------------------------------------------------------------- /Projects/ExploreHut/models/user.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | const Schema = mongoose.Schema; 3 | const passportLocalMongoose = require("passport-local-mongoose"); 4 | 5 | const userSchema = new Schema({ 6 | email: { 7 | type: String, 8 | required: true, 9 | }, 10 | }); 11 | 12 | /* It will add a username, hash and salt field to store the username, the hashed password and the salt value. */ 13 | userSchema.plugin(passportLocalMongoose); 14 | 15 | module.exports = mongoose.model("User", userSchema); 16 | -------------------------------------------------------------------------------- /Projects/ExploreHut/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "engines": { 3 | "node": "v20.11.1" 4 | }, 5 | "name": "explore-hut", 6 | "version": "1.0.0", 7 | "description": "This package is the project 'Explore Hut', it is building while learning at the same time.", 8 | "main": "app.js", 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "author": "Sarvesh Devrukhkar", 13 | "license": "ISC", 14 | "dependencies": { 15 | "cloudinary": "^2.5.1", 16 | "connect": "^3.7.0", 17 | "connect-flash": "^0.1.1", 18 | "connect-mongo": "^5.1.0", 19 | "dotenv": "^16.4.7", 20 | "ejs": "^3.1.10", 21 | "ejs-mate": "^4.0.0", 22 | "express": "^4.21.0", 23 | "express-session": "^1.18.1", 24 | "formidable": "^3.5.1", 25 | "joi": "^17.13.3", 26 | "method-override": "^3.0.0", 27 | "mkdirp": "^3.0.1", 28 | "mongoose": "^8.4.3", 29 | "multer": "^1.4.5-lts.1", 30 | "multer-storage-cloudinary": "^4.0.0", 31 | "passport": "^0.7.0", 32 | "passport-local": "^1.0.0", 33 | "passport-local-mongoose": "^8.0.0" 34 | }, 35 | "devDependencies": { 36 | "nodemon": "^3.1.7" 37 | } 38 | } -------------------------------------------------------------------------------- /Projects/ExploreHut/public/CSS/filter.css: -------------------------------------------------------------------------------- 1 | #filter-tax-switch-container { 2 | display: inline-flex; 3 | margin: 2rem 0; 4 | } 5 | 6 | .filter { 7 | display: inline-block; 8 | margin: 0 1rem; 9 | text-align: center; 10 | opacity: 0.75; 11 | } 12 | .filter:hover { 13 | opacity: initial; 14 | cursor: pointer; 15 | } 16 | 17 | .filter small { 18 | display: block; 19 | } 20 | 21 | .tax-toggle-container { 22 | display: flex; 23 | align-items: center; 24 | border: solid 0.1px lightgray; 25 | border-radius: 0.5rem; 26 | padding: 0.25rem 1rem; 27 | } 28 | .tax-toggle-container:hover { 29 | border-color: initial; 30 | } 31 | 32 | .form-check-label { 33 | font-size: small; 34 | font-weight: bold; 35 | } 36 | 37 | .tax-info { 38 | display: none; 39 | } -------------------------------------------------------------------------------- /Projects/ExploreHut/public/CSS/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Plus Jakarta Sans", sans-serif !important; 3 | display: flex; 4 | flex-direction: column; 5 | min-height: 100vh; 6 | } 7 | 8 | .container { 9 | flex: 1; 10 | } 11 | 12 | /* Navbar */ 13 | .navbar { 14 | height: 5rem; 15 | } 16 | 17 | .fa-compass { 18 | color: #ff385c; 19 | font-size: 2rem; 20 | } 21 | 22 | .nav-link { 23 | color: #222222; 24 | } 25 | 26 | .search-box { 27 | border-radius: 1.25rem; 28 | box-shadow: 0 0 0.1rem 0.1rem lightgray; 29 | } 30 | .search-box:hover { 31 | border-color: lightgray; 32 | box-shadow: 0 0 0.1rem 0.1rem lightgray; 33 | background-color: lightgray; 34 | } 35 | .search-box:focus { 36 | border-color: lightgray; 37 | box-shadow: 0 0 0.1rem 0.1rem lightgray; 38 | background-color: initial; 39 | } 40 | .search-box::placeholder { 41 | font-size: small; 42 | color: gray; 43 | } 44 | 45 | .search-btn { 46 | border: 1px solid lightgray; 47 | border-radius: 1.25rem; 48 | display: flex; 49 | align-items: center; 50 | color: white; 51 | background-color: #ff385c; 52 | padding: 0.5rem 0.75rem; 53 | } 54 | .search-btn:focus, .fa-magnifying-glass:focus { 55 | color: #ff385c; 56 | background-color: white; 57 | } 58 | 59 | /* Footer */ 60 | .foot-info { 61 | display: flex; 62 | flex-wrap: wrap; 63 | justify-content: center; 64 | align-items: center; 65 | background-color: #ebebeb; 66 | height: auto; 67 | text-align: center; 68 | padding: 1rem 0 1.5rem; 69 | } 70 | 71 | .foot-info-socials, 72 | .foot-info-links { 73 | width: 100%; 74 | } 75 | 76 | .foot-info-socials i { 77 | font-size: 1.25rem; 78 | margin: 0.5rem; 79 | } 80 | 81 | .foot-info-links a { 82 | text-decoration: none; 83 | color: #222222; 84 | } 85 | 86 | .foot-info-links a:hover { 87 | text-decoration: underline; 88 | } 89 | 90 | /* Cards */ 91 | .listing-link { 92 | text-decoration: none; 93 | } 94 | 95 | .listing-card { 96 | border: none !important; 97 | margin: 0 0.75rem 1rem; 98 | padding: 0; 99 | } 100 | 101 | .card-img-top { 102 | border-radius: 0.75rem !important; 103 | width: 100% !important; 104 | object-fit: cover !important; 105 | } 106 | 107 | .card-body { 108 | padding: 0 !important; 109 | } 110 | 111 | .card-text { 112 | font-weight: 600 !important; 113 | } 114 | 115 | .card-text span { 116 | font-weight: normal !important; 117 | } 118 | 119 | /* Card Overlay Effect on Card */ 120 | .card-img-overlay { 121 | opacity: 0; 122 | } 123 | 124 | .card-img-overlay:hover { 125 | opacity: 0.25; 126 | background-color: rgba(255, 255, 255, 0.5); 127 | } 128 | 129 | /* Add New Listing Form */ 130 | .add-new-listing-btn { 131 | background-color: #ff385c !important; 132 | } 133 | 134 | /* Edit Listing Form */ 135 | .edit-listing-btn { 136 | background-color: #ff385c !important; 137 | } 138 | 139 | /* Show Listing Page */ 140 | .show-img { 141 | height: 30dvh; 142 | } -------------------------------------------------------------------------------- /Projects/ExploreHut/public/JS/script.js: -------------------------------------------------------------------------------- 1 | // Function for form validation. 2 | (() => { 3 | "use strict"; 4 | 5 | // Fetch all the forms we want to apply custom Bootstrap validation styles to 6 | const forms = document.querySelectorAll(".needs-validation"); 7 | 8 | // Loop over them and prevent submission 9 | Array.from(forms).forEach((form) => { 10 | form.addEventListener( 11 | "submit", 12 | (event) => { 13 | if (!form.checkValidity()) { 14 | event.preventDefault(); 15 | event.stopPropagation(); 16 | } 17 | 18 | form.classList.add("was-validated"); 19 | }, 20 | false, 21 | ); 22 | }); 23 | })(); 24 | 25 | // JavaScript for Tax Switch Toggle. 26 | let taxSwitchToggle = document.getElementById("flexSwitchCheckDefault"); 27 | let texSwitchToggle = () => { 28 | let taxInfo = document.getElementsByClassName("tax-info"); 29 | for (info of taxInfo) { 30 | if (taxSwitchToggle.checked) info.style.display = "inline"; 31 | else info.style.display = "none"; 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /Projects/ExploreHut/routes/listing.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const router = express.Router(); 3 | exports.router = router; 4 | const wrapAsync = require("../utils/wrapAsync.js"); 5 | const { isLoggedIn, isOwner, validateListing } = require("../utils/middleware.js"); 6 | const listingController = require("../controllers/listing.js"); 7 | const multer = require("multer"); // pkg to parse 'multipart/form-data', used to uploading files. 8 | const { storage } = require("../cloudConfig.js"); 9 | const upload = multer({ storage }); // creates destination folder to store uploaded files. 10 | 11 | // New Listing Form Route: /listings/new - To create a new listing. 12 | router.get("/new", isLoggedIn, listingController.newListingForm); 13 | 14 | // New form Route: /listings/:id/edit - To edit listing. 15 | router.get("/:id/edit", isLoggedIn, isOwner, wrapAsync(listingController.editListingForm)); 16 | 17 | router 18 | .route("/") 19 | .get(wrapAsync(listingController.index)) // Index Route: /listings - To see all Listings. 20 | .post( 21 | isLoggedIn, 22 | upload.single("listing[image]"), 23 | validateListing, 24 | wrapAsync(listingController.saveNewListing), 25 | ); // Create Route: /listings - To create a new listing in DB. 26 | 27 | router 28 | .route("/:id") 29 | .get(wrapAsync(listingController.showListingDetails)) // Show Route: /listings/:id - To see a single list. 30 | .put( 31 | isLoggedIn, 32 | isOwner, 33 | upload.single("listing[image]"), 34 | validateListing, 35 | wrapAsync(listingController.updateListing), 36 | ) // Update Route: /listings/:id - To update data in DB. 37 | .delete(isLoggedIn, isOwner, wrapAsync(listingController.deleteListing)); // Delete Route: /listings/:id - To delete listing from DB. 38 | 39 | module.exports = router; 40 | -------------------------------------------------------------------------------- /Projects/ExploreHut/routes/review.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const router = express.Router({ mergeParams: true }); 3 | const wrapAsync = require("../utils/wrapAsync.js"); 4 | const { validateReview, isLoggedIn, isReviewAuthor } = require("../utils/middleware.js"); 5 | const reviewController = require("../controllers/review.js"); 6 | 7 | // Add Review Route: /listings/:id/reviews - To add review in respective listing. 8 | router.post("/", validateReview, isLoggedIn, wrapAsync(reviewController.addReview)); 9 | 10 | // Delete Review Route: /listings/:id/reviews/:reviewsId 11 | router.delete("/:reviewId", isLoggedIn, isReviewAuthor, wrapAsync(reviewController.deleteReview)); 12 | 13 | module.exports = router; 14 | -------------------------------------------------------------------------------- /Projects/ExploreHut/routes/user.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const router = express.Router({ mergeParams: true }); 3 | const wrapAsync = require("../utils/wrapAsync.js"); 4 | const passport = require("passport"); 5 | const { saveRedirectUrl } = require("../utils/middleware.js"); 6 | const userController = require("../controllers/user.js"); 7 | 8 | // Signup User Route. 9 | router.route("/signup") 10 | .get(userController.signupUserForm) 11 | .post(wrapAsync(userController.saveSignupUser)); 12 | 13 | // Login User Route. 14 | router.route("/login") 15 | .get(userController.loginUserForm) 16 | .post( 17 | saveRedirectUrl, 18 | passport.authenticate("local", { failureRedirect: "/login", failureFlash: true }), 19 | userController.saveLoginUser, 20 | ); 21 | 22 | // Logout User Route. 23 | router.get("/logout", userController.logoutUser); 24 | 25 | module.exports = router; 26 | -------------------------------------------------------------------------------- /Projects/ExploreHut/schema.js: -------------------------------------------------------------------------------- 1 | const Joi = require("joi"); 2 | 3 | module.exports.listingSchema = Joi.object({ 4 | listing: Joi.object({ 5 | title: Joi.string().required(), 6 | description: Joi.string().required(), 7 | location: Joi.string().required(), 8 | country: Joi.string().required(), 9 | price: Joi.number().min(0).required(), 10 | image: Joi.string().allow("", null), 11 | }).required(), 12 | }); 13 | 14 | module.exports.reviewSchema = Joi.object({ 15 | review: Joi.object({ 16 | rating: Joi.number().min(1).max(5).required(), 17 | comment: Joi.string().required(), 18 | }).required(), 19 | }); -------------------------------------------------------------------------------- /Projects/ExploreHut/utils/ExpressError.js: -------------------------------------------------------------------------------- 1 | module.exports = class ExpressError extends Error { 2 | constructor(statusCode, message) { 3 | super(); 4 | this.statusCode = statusCode; 5 | this.message = message; 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /Projects/ExploreHut/utils/middleware.js: -------------------------------------------------------------------------------- 1 | const Listing = require("../models/listing.js"); 2 | const Review = require("../models/review.js"); 3 | const { listingSchema, reviewSchema } = require("../schema.js"); 4 | const ExpressError = require("../utils/ExpressError.js"); 5 | 6 | module.exports.isLoggedIn = (req, res, next) => { 7 | if (!req.isAuthenticated()) { 8 | req.session.redirectUrl = req.originalUrl; // Storing original URL in the session cookies to redirect back to it later. 9 | req.flash("error", "Signup or login to create a new post!"); 10 | return res.redirect("/login"); 11 | } 12 | next(); 13 | }; 14 | 15 | // Middleware to store the original URL in the 'res.locals' object. 16 | module.exports.saveRedirectUrl = (req, res, next) => { 17 | if (req.session.redirectUrl) res.locals.redirectUrl = req.session.redirectUrl; 18 | next(); 19 | }; 20 | 21 | // Middleware to check current User is owner of current Listing or not. 22 | module.exports.isOwner = async (req, res, next) => { 23 | const { id } = req.params; 24 | let listing = await Listing.findById(id); 25 | if (!listing.owner.equals(res.locals.currentUser._id)) { 26 | req.flash("error", "You are not authorized to make changes."); 27 | return res.redirect(`/listings/${id}`); 28 | } 29 | next(); 30 | }; 31 | 32 | // Middleware to check current User is owner of current Review or not. 33 | module.exports.isReviewAuthor = async (req, res, next) => { 34 | const { id, reviewId } = req.params; 35 | let review = await Review.findById(reviewId); 36 | 37 | if (!review.author.equals(res.locals.currentUser._id)) { 38 | req.flash("error", "You are not authorized to make changes."); 39 | return res.redirect(`/listings/${id}`); 40 | } 41 | next(); 42 | }; 43 | 44 | // Schema Validator Middleware 45 | module.exports.validateListing = (req, res, next) => { 46 | let { error } = listingSchema.validate(req.body); // Validating data inside req.body using joi's schema. 47 | if (error) { 48 | throw new ExpressError(400, error.message); // If there is error, then throw it. 49 | } else { 50 | next(); // If there is no error, call next middleware. 51 | } 52 | }; 53 | 54 | // Schema Validator Middleware 55 | module.exports.validateReview = (req, res, next) => { 56 | let { error } = reviewSchema.validate(req.body); 57 | if (error) { 58 | throw new ExpressError(400, error.message); 59 | } else { 60 | next(); 61 | } 62 | }; 63 | -------------------------------------------------------------------------------- /Projects/ExploreHut/utils/wrapAsync.js: -------------------------------------------------------------------------------- 1 | module.exports = (func) => (req, res, next) => { 2 | func(req, res, next).catch((error) => next(error)); 3 | }; 4 | -------------------------------------------------------------------------------- /Projects/ExploreHut/views/error.ejs: -------------------------------------------------------------------------------- 1 | <% layout("layouts/boilerplate") %> 2 | 3 |
4 | 7 |
8 | -------------------------------------------------------------------------------- /Projects/ExploreHut/views/includes/flashMessages.ejs: -------------------------------------------------------------------------------- 1 | 2 | <% if (success && success.length) { %> 3 | 7 | <% } %> 8 | 9 | 10 | <% if (error && error.length) { %> 11 | 15 | <% } %> -------------------------------------------------------------------------------- /Projects/ExploreHut/views/includes/footer.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Projects/ExploreHut/views/includes/navbar.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Projects/ExploreHut/views/layouts/boilerplate.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Explore Hut 20 | 21 | 22 | 23 | <%- include("../includes/navbar.ejs") %> 24 |
25 | <%- include("../includes/flashMessages.ejs") %><%- body -%> 26 |
27 | 28 | <%- include("../includes/footer.ejs") %> 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Projects/ExploreHut/views/listings/edit.ejs: -------------------------------------------------------------------------------- 1 | <% layout("layouts/boilerplate") %> 2 | 3 | 4 | 5 | 6 |
7 |
8 |
9 |

Edit your Listing

10 | 11 |
17 | 18 |
19 | 20 | 27 |
Title required!
28 |
29 | 30 |
31 | 32 | 38 |
Enter short description!
39 |
40 | 41 |
42 | 43 | Listing Image 44 |
45 | 46 |
47 | 48 | 49 |
50 | 51 |
52 |
53 | 54 | 61 |
Enter valid price!
62 |
63 | 64 |
65 | 66 | 73 |
Enter valid country name!
74 |
75 |
76 | 77 |
78 | 79 | 86 |
Enter valid location!
87 |
88 | 89 | 92 |
93 |
94 |
95 |
96 | 97 | -------------------------------------------------------------------------------- /Projects/ExploreHut/views/listings/index.ejs: -------------------------------------------------------------------------------- 1 | <% layout("layouts/boilerplate") %> 2 | 3 | 4 |
5 | 6 |
7 |
8 | 9 | Amazing Views 10 |
11 |
12 | 13 | Tranding 14 |
15 |
16 | 17 | Bed & Breakfasts 18 |
19 |
20 | 21 | Arctic 22 |
23 |
24 | 25 | Capmping 26 |
27 |
28 | 29 | Amazing Pools 30 |
31 |
32 | 33 | Castles 34 |
35 |
36 | 37 | 38 |
39 |
40 | 41 | 42 |
43 |
44 |
45 | 46 | 47 | 48 |
49 | <% for (let listing of listings) { %> 50 | 51 | 52 | 53 |
54 | Card Image 59 | 60 | 61 |
62 |
63 |
<%= listing.title %>
64 |

65 | ₹<%= listing.price.toLocaleString("en-IN") %> per guest 66 |     +18% GST 67 |

68 |
69 |
70 | 71 | <% } %> 72 |
73 | 74 | -------------------------------------------------------------------------------- /Projects/ExploreHut/views/listings/new.ejs: -------------------------------------------------------------------------------- 1 | <% layout("layouts/boilerplate") %> 2 | 3 | 4 | 5 | 6 |
7 |
8 |
9 |

Create New Listing

10 |
16 | 17 |
18 | 19 | 26 |
Title required!
27 |
28 | 29 |
30 | 31 | 38 |
Enter short description!
39 |
40 | 41 |
42 | 43 | 49 |
50 | 51 |
52 |
53 | 54 | 61 |
Enter valid price!
62 |
63 | 64 |
65 | 66 | 73 |
74 |
Enter valid country name!
75 |
76 | 77 |
78 | 79 | 86 |
Enter valid location!
87 |
88 | 89 | 90 |
91 |
92 |
93 |
94 | 95 | -------------------------------------------------------------------------------- /Projects/ExploreHut/views/users/login.ejs: -------------------------------------------------------------------------------- 1 | <% layout("layouts/boilerplate") %> 2 | 3 |
4 |
5 |
6 |

Log In

7 | to continue to Explore Hut! 8 | 9 |
10 |
11 | 12 | 18 |
19 | 20 |
21 | 22 | 28 |
29 | 30 | 31 | 32 | Don't have an account? Sign Up 33 |
34 |
35 |
36 |
37 | -------------------------------------------------------------------------------- /Projects/ExploreHut/views/users/signup.ejs: -------------------------------------------------------------------------------- 1 | <% layout("layouts/boilerplate") %> 2 | 3 |
4 |
5 |
6 |

Sign Up

7 | Create your account here 8 | 9 |
10 |
11 | 12 | 18 |
19 | 20 |
21 | 22 | 28 |
29 | 30 |
31 | 32 | 38 |
39 | 40 | 41 | 42 | Already have an account? Login 43 |
44 |
45 |
46 |
47 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/README.md: -------------------------------------------------------------------------------- 1 | # WeatherApp - A React Mini Project 2 | 3 | This is the mini project after learning basics of React it is built using **Material UI**. 4 | Here, I learned basics of **Material UI**. 5 | 6 | ## Create New React App using Vite 7 | 8 | 1. Run `npm create vite` To create vite environment and server. 9 | 1. Add project name. (react-state-class) 10 | 2. Select a framework.(react) 11 | 3. Choose varient. (javascript) 12 | 2. Run `cd your-project-name` to nevigate to your react project. 13 | 3. Run `npm install` to install Node Modules. 14 | 4. Run `npm run dev` to start the server and run the app. 15 | 16 | > 💡 Now you have done with setting REACT app, now you can open this app in browser. 17 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Mini Project with Material UI 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-mini-project", 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 | "@emotion/react": "^11.11.4", 14 | "@emotion/styled": "^11.11.5", 15 | "@fontsource/roboto": "^5.0.13", 16 | "@mui/icons-material": "^5.16.4", 17 | "@mui/material": "^5.16.4", 18 | "react": "^18.2.0", 19 | "react-dom": "^18.2.0" 20 | }, 21 | "devDependencies": { 22 | "@types/react": "^18.2.66", 23 | "@types/react-dom": "^18.2.22", 24 | "@vitejs/plugin-react": "^4.2.1", 25 | "eslint": "^8.57.0", 26 | "eslint-plugin-react": "^7.34.1", 27 | "eslint-plugin-react-hooks": "^4.6.0", 28 | "eslint-plugin-react-refresh": "^0.4.6", 29 | "vite": "^5.2.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | display: flex; 9 | place-items: center; 10 | min-width: 320px; 11 | min-height: 100vh; 12 | background-color: #242424; 13 | } -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import WeatherApp from "./components/WeatherApp"; 3 | 4 | function App() { 5 | return ( 6 | <> 7 | 8 | 9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/components/SearchBox.css: -------------------------------------------------------------------------------- 1 | div { 2 | background-color: white; 3 | } 4 | 5 | #btn { 6 | margin: 1rem 0; 7 | } 8 | 9 | .loader { 10 | width: 48px; 11 | height: 48px; 12 | display: block; 13 | margin: 2rem auto; 14 | box-sizing: border-box; 15 | position: relative; 16 | } 17 | 18 | .loader::after { 19 | content: ''; 20 | width: 48px; 21 | height: 48px; 22 | left: 0; 23 | bottom: 0; 24 | position: absolute; 25 | box-sizing: border-box; 26 | border-radius: 50% 50% 0; 27 | border: 15px solid rgb(50, 50, 50); 28 | transform: rotate(45deg) translate(0, 0); 29 | animation: animMarker 0.4s ease-in-out infinite alternate; 30 | } 31 | 32 | .loader::before { 33 | content: ''; 34 | box-sizing: border-box; 35 | position: absolute; 36 | left: 0; 37 | right: 0; 38 | margin: auto; 39 | top: 150%; 40 | width: 24px; 41 | height: 4px; 42 | border-radius: 50%; 43 | background: rgba(0, 0, 0, 0.2); 44 | animation: animShadow 0.4s ease-in-out infinite alternate; 45 | } 46 | 47 | @keyframes animMarker { 48 | 0% { 49 | transform: rotate(45deg) translate(5px, 5px); 50 | } 51 | 52 | 100% { 53 | transform: rotate(45deg) translate(-5px, -5px); 54 | } 55 | } 56 | 57 | @keyframes animShadow { 58 | 0% { 59 | transform: scale(0.5); 60 | } 61 | 62 | 100% { 63 | transform: scale(1); 64 | } 65 | } -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/components/SearchBox.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import "./SearchBox.css"; 3 | import TextField from "@mui/material/TextField"; 4 | import Button from "@mui/material/Button"; 5 | import useGeolocation from "../hooks/useGeolocation"; 6 | 7 | export default function SearchBox({ newWeatherInfo }) { 8 | const [city, setCity] = useState(""); // Used to tract the city name from user input. 9 | const [isError, setIsError] = useState(false); 10 | const [isLoading, setIsLoading] = useState(false); 11 | const { 12 | location: { latitude, longitude }, 13 | error, 14 | } = useGeolocation(); 15 | 16 | const API_URL = "https://api.openweathermap.org/data/2.5/weather"; 17 | const API_KEY = "463919a118cb3eda46274f6bd7370a86"; 18 | 19 | // Function to fetch weather data for the entered city through the API. 20 | const getWeather = async () => { 21 | try { 22 | setIsLoading(true); 23 | let response = await fetch(`${API_URL}?q=${city}&appid=${API_KEY}&units=metric`); // Creating query string. 24 | let jsonResponse = await response.json(); 25 | if (jsonResponse.cod === "404") throw new Error(jsonResponse.message); 26 | setIsLoading(false); 27 | setIsError(false); 28 | return jsonResponse; 29 | } catch (error) { 30 | setIsError(true); 31 | } finally { 32 | setIsLoading(false); 33 | } 34 | }; 35 | 36 | // Function to fetch weather data for the entered city through the API. 37 | const getCurrentWeather = async () => { 38 | try { 39 | setIsLoading(true); 40 | let response = await fetch( 41 | `${API_URL}?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`, 42 | ); // Creating query string. 43 | let jsonResponse = await response.json(); 44 | if (jsonResponse.cod === "400") throw new Error(jsonResponse.message); 45 | setIsLoading(false); 46 | return jsonResponse; 47 | } catch (error) { 48 | console.log(error); 49 | } finally { 50 | setIsLoading(false); 51 | } 52 | }; 53 | 54 | useEffect(() => { 55 | const fetchCurrentWeather = async () => { 56 | const newInfo = await getCurrentWeather(); // As soon as form submission, the weather method will be called. 57 | newWeatherInfo(newInfo); 58 | }; 59 | 60 | fetchCurrentWeather(); 61 | }, []); 62 | 63 | const handleChange = (event) => { 64 | setCity(event.target.value); 65 | }; 66 | 67 | const handleSubmit = async (event) => { 68 | event.preventDefault(); 69 | setCity(""); // Reseting the input values for next input. 70 | const newInfo = await getWeather(); // As soon as form submission, the weather method will be called. 71 | newWeatherInfo(newInfo); 72 | }; 73 | 74 | return ( 75 |
76 |
77 | 85 |
86 | 87 | 88 | {isError &&

City not found!

} 89 | {isLoading && } 90 |
91 | ); 92 | } 93 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/components/WeatherApp.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import SearchBox from "./SearchBox"; 3 | import WeatherInfo from "./WeatherInfo"; 4 | 5 | export default function WeatherApp() { 6 | const [weatherInfo, setWeatherInfo] = 7 | useState(); 8 | 9 | const newWeatherInfo = (newWeatherInfo) => { 10 | setWeatherInfo(newWeatherInfo); 11 | }; 12 | 13 | return ( 14 |
15 |

Weather App

16 | 17 | It is a mini React project using Material UI. 18 | 19 |
20 | 21 | {weatherInfo && } 22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/components/WeatherInfo.css: -------------------------------------------------------------------------------- 1 | .WeatherInfo { 2 | text-align: center; 3 | margin: 1rem; 4 | } 5 | 6 | .city-name { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | svg { 13 | margin: 0 0 0 1rem; 14 | } -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/components/WeatherInfo.jsx: -------------------------------------------------------------------------------- 1 | import Card from "@mui/material/Card"; 2 | import CardContent from "@mui/material/CardContent"; 3 | import CardMedia from "@mui/material/CardMedia"; 4 | import Typography from "@mui/material/Typography"; 5 | import "./WeatherInfo.css"; 6 | import AcUnitIcon from "@mui/icons-material/AcUnit"; 7 | import WbSunnyIcon from "@mui/icons-material/WbSunny"; 8 | import ThunderstormIcon from "@mui/icons-material/Thunderstorm"; 9 | 10 | export default function WeatherInfo({ info }) { 11 | let HOT_URL = 12 | "https://images.unsplash.com/photo-1504370805625-d32c54b16100?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTgwOTN8MHwxfHNlYXJjaHw4fHxob3QlMjB3ZWF0aGVyfGVufDB8fHx8MTcyMTM3NTEzNHww"; 13 | let COLD_URL = 14 | "https://images.unsplash.com/photo-1613082448174-9edaee09732f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"; 15 | let RAIN_URL = 16 | "https://images.unsplash.com/photo-1534274988757-a28bf1a57c17?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"; 17 | 18 | return ( 19 |
20 | 21 | 80 ? RAIN_URL : info?.main?.temp < 15 ? COLD_URL : HOT_URL} 24 | title="green iguana" 25 | /> 26 | 27 | 28 | {info?.name} 29 | {info?.main?.humidity > 80 ? ( 30 | 31 | ) : info?.main?.temp < 15 ? ( 32 | 33 | ) : ( 34 | 35 | )} 36 | 37 | 38 |

39 | Todays wheather is like {info?.weather[0]?.description} and it feels like {info?.main?.feels_like}°C. 40 |

41 | 42 | 43 |

Temperature: {info?.main?.temp}°C

44 |

Minimum Temperature: {info?.main?.temp_min}°C

45 |

Maximum Temperature: {info?.main?.temp_max}°C

46 |

Humidiy: {info?.main?.humidity}

47 | 48 | 49 | 50 |
51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/hooks/useGeolocation.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | export default function useGeolocation() { 4 | const [location, setLocation] = useState({ latitude: null, longitude: null }); 5 | const [error, setError] = useState(null); 6 | 7 | useEffect(() => { 8 | if (navigator.geolocation) { 9 | navigator.geolocation.getCurrentPosition( 10 | (position) => { 11 | setLocation({ 12 | latitude: position.coords.latitude, 13 | longitude: position.coords.longitude, 14 | }); 15 | }, 16 | (error) => { 17 | setError(error.message); 18 | }, 19 | ); 20 | } else { 21 | setError("Geolocation is not supported by this browser."); 22 | } 23 | }, []); 24 | 25 | return { location, error }; 26 | } 27 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: flex; 4 | flex-direction: column; 5 | place-items: center; 6 | min-width: 320px; 7 | min-height: 100vh; 8 | } 9 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /REACT/Material-UI/react-mini-project/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 | -------------------------------------------------------------------------------- /REACT/react-class-app/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /REACT/react-class-app/README.md: -------------------------------------------------------------------------------- 1 | # React Class App 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 | 10 | ## Set Up Local Environment for REACT app using Vite 11 | 12 | 1. Run `npm create@latest` To create vite environment and server. 13 | 2. Enter project name for your REACT app. Default project name is `vite-project` 14 | 3. Select a framework, Choose `React` 15 | 4. Select varient, Choose `JavaScript` 16 | 5. Run `cd your-project-name` to nevigate to your react project. 17 | 6. Run `npm install` or `npm i` to install Node Modules. 18 | 19 | > 💡 Now you have done with setting REACT app, now you can run this app. 20 | 21 | 7. Run `npm run dev` to start the server and run the app. 22 | 23 | 8. Open local link given in terminal in the browser. `http://localhost:5173/` or `http://127.0.0.1:5173/` 24 | -------------------------------------------------------------------------------- /REACT/react-class-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /REACT/react-class-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-class-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.66", 18 | "@types/react-dom": "^18.2.22", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.57.0", 21 | "eslint-plugin-react": "^7.34.1", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.6", 24 | "vite": "^5.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 1rem; 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Form from "./Form.jsx"; 3 | 4 | function App() { 5 | return ( 6 | <> 7 |
8 | 9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/ButtonEvent.jsx: -------------------------------------------------------------------------------- 1 | function onClick() { 2 | console.log("onClick Event"); 3 | } 4 | 5 | function onDoubleClick() { 6 | console.log("onDoubleClick event"); 7 | } 8 | 9 | function onMouseOver() { 10 | console.log("onMouseOver Event"); 11 | } 12 | 13 | export default function ButtonEvent() { 14 | return ( 15 | <> 16 | 17 |

onMouseOverEvent!

18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/Form.jsx: -------------------------------------------------------------------------------- 1 | function handleFormSubmit(event) { 2 | event.preventDefault(); 3 | console.log("Form was submitted."); 4 | } 5 | 6 | export default function Form() { 7 | return ( 8 | 9 | 10 | 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/Price.jsx: -------------------------------------------------------------------------------- 1 | export default function Price({ oldPrice, newPrice }) { 2 | let styles = { 3 | display: "flex", 4 | justifyContent: "space-evenly", 5 | backgroundColor: "#d6bc60", 6 | borderRadius: "0 0 0.9rem .9rem", 7 | }; 8 | let oldStyles = { 9 | textDecorationLine: "line-through", 10 | }; 11 | let newStyles = { 12 | fontWeight: "bold", 13 | }; 14 | return ( 15 |
16 | {oldPrice} 17 | {newPrice} 18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/Product.css: -------------------------------------------------------------------------------- 1 | .Product { 2 | box-sizing: border-box; 3 | border: 0.1rem solid white; 4 | border-radius: 1rem; 5 | height: auto 0; 6 | width: 20%; 7 | } 8 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/Product.jsx: -------------------------------------------------------------------------------- 1 | import "./Product.css"; 2 | import Price from "./Price.jsx"; 3 | 4 | function Product({ title, idx }) { 5 | let oldPrices = ["12,495", "11,900", "1,599", "599"]; 6 | let newPrices = ["8,999", "9,199", "899", "278"]; 7 | let description = [ 8 | ["8,000 DPI", "5 Programmable Buttons"], 9 | ["Intitive touch Surface", "Designed for iPad Pro"], 10 | ["Intitive touch Surface", "Designed for iPad Pro"], 11 | ["Wireless Mouse 2.4 GHz", "Optical Orientation"], 12 | ]; 13 | return ( 14 |
15 |

{title}

16 |

{description[idx][0]}

17 |

{description[idx][1]}

18 | 19 |
20 | ); 21 | } 22 | 23 | export default Product; 24 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/ProductTab.jsx: -------------------------------------------------------------------------------- 1 | import Product from "./Product.jsx"; 2 | 3 | export default function ProductTab() { 4 | let styles = { 5 | display: "flex", 6 | flexWrap: "wrap", 7 | justifyContent: "space-around", 8 | alignItems: "center", 9 | }; 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | body { 17 | margin: 0; 18 | place-items: center; 19 | min-width: 320px; 20 | min-height: 100vh; 21 | } 22 | -------------------------------------------------------------------------------- /REACT/react-class-app/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /REACT/react-class-app/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 | -------------------------------------------------------------------------------- /REACT/react-state-class/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /REACT/react-state-class/README.md: -------------------------------------------------------------------------------- 1 | # React-State-Class 2 | 3 | Here I practiced all the concepts related to React Hooks alike `useState()`, `useEffect()`, etc. 4 | 5 | ## Create New React App using Vite 6 | 7 | 1. Run `npm create vite` To create vite environment and server. 8 | 1. Add project name. (react-state-class) 9 | 2. Select a framework.(react) 10 | 3. Choose varient. (javascript) 11 | 2. Run `cd your-project-name` to nevigate to your react project. 12 | 3. Run `npm install` to install Node Modules. 13 | 4. Run `npm run dev` to start the server and run the app. 14 | 15 | > 💡 Now you have done with setting REACT app, now you can open this app in browser. 16 | -------------------------------------------------------------------------------- /REACT/react-state-class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | React State Class 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /REACT/react-state-class/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-state-class", 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 | "formik": "^2.4.6", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "uuid": "^10.0.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.66", 20 | "@types/react-dom": "^18.2.22", 21 | "@vitejs/plugin-react": "^4.2.1", 22 | "eslint": "^8.57.0", 23 | "eslint-plugin-react": "^7.34.1", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.6", 26 | "vite": "^5.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /REACT/react-state-class/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | text-align: center; 5 | } 6 | -------------------------------------------------------------------------------- /REACT/react-state-class/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import LotteryGame from "./components/LotteryGame/LotteryGame.jsx"; 3 | import { getSumOfRandomNumber } from "./utils/helperLotteryGame"; 4 | 5 | function App() { 6 | let winCondition = (ticket) => { 7 | return getSumOfRandomNumber(ticket) === 15; // Win condition is sum of number is 15. 8 | // return ticket.every((number) => number === ticket[0]); // Win condition is all numbers must be same. Ex. 666, 555, 222, etc. 9 | // return ticket[0] === 0; // Win condition is fist number of ticket is 0. Ex. 012, 098, etc. 10 | }; 11 | 12 | return ( 13 | <> 14 | 15 | 16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /REACT/react-state-class/src/Comment.css: -------------------------------------------------------------------------------- 1 | .comment-card { 2 | border: 0.1rem solid white; 3 | border-radius: 1rem; 4 | padding: 1rem; 5 | margin: 1rem 0; 6 | } 7 | 8 | .comment-name { 9 | font-weight: bold; 10 | font-size: large; 11 | } 12 | 13 | .comment-rating { 14 | font-size: large; 15 | } 16 | 17 | .comment-text { 18 | font-size: medium; 19 | color: initial; 20 | } -------------------------------------------------------------------------------- /REACT/react-state-class/src/Comment.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import CommentForm from "./CommentForm"; 3 | import "./Comment.css"; 4 | 5 | export default function Comment() { 6 | let [comments, setComments] = useState([]); 7 | 8 | let addNewComment = (comment) => { 9 | setComments((currComment) => [...currComment, comment]); 10 | }; 11 | 12 | return ( 13 |
14 |

All Comments

15 | {comments.map((comment, index) => ( 16 |
17 | {comment.username} 18 | 19 |      20 | (Rating: {comment.rating}) 21 | 22 |

{comment.comment}

23 |
24 | ))} 25 |
26 | 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /REACT/react-state-class/src/CommentForm.css: -------------------------------------------------------------------------------- 1 | .comment-form { 2 | border: 0.1rem solid grey; 3 | border-radius: 0.5rem; 4 | padding: 1rem 5 | } 6 | 7 | label { 8 | font-weight: bold; 9 | } 10 | 11 | input, 12 | textarea { 13 | margin-bottom: 1rem; 14 | } 15 | 16 | p { 17 | color: red; 18 | margin: 0; 19 | } -------------------------------------------------------------------------------- /REACT/react-state-class/src/CommentForm.jsx: -------------------------------------------------------------------------------- 1 | import { useFormik } from "formik"; 2 | import "./CommentForm.css"; 3 | 4 | // Validate method definition. 5 | const validate = (values) => { 6 | const errors = {}; 7 | 8 | // Validation for input username. 9 | if (!values.username) { 10 | errors.username = "Required!"; 11 | } else if (values.username.length > 20) { 12 | errors.username = "Must be 15 characters or less"; 13 | } 14 | 15 | // Validation for input comment. 16 | if (!values.comment) { 17 | errors.comment = "Required"; 18 | } 19 | 20 | // Validation for input rating. 21 | if (!values.rating) { 22 | errors.rating = "Required"; 23 | } 24 | 25 | return errors; 26 | }; 27 | 28 | export default function CommentForm({ addNewComment }) { 29 | // Defining state variables using pkg. formik. 30 | const formik = useFormik({ 31 | initialValues: { 32 | username: "", 33 | comment: "", 34 | rating: "", 35 | }, 36 | validate, 37 | onSubmit: (values) => { 38 | addNewComment(values); 39 | formik.resetForm(); 40 | }, 41 | }); 42 | 43 | return ( 44 |
45 |

Leave a comment!

46 | 47 |
48 | 49 |
50 | 58 | {formik.errors.username ?

{formik.errors.username}

: null} 59 |
60 | 61 | 62 |
63 |