├── .vscode └── settings.json ├── 00. Introduction ├── 0.1 Intro.txt └── PPT Personal .pptx ├── 01.HTML ├── HTML.txt ├── index.html ├── test.html └── testImage.png ├── 02. CSS__Bootstrap ├── CSS.txt ├── Real-Estate-Bootstrap │ ├── cover.jpg │ ├── img1.jpg │ ├── img2.jpeg │ ├── img3.jpeg │ ├── img4.jpg │ ├── img5.jpeg │ ├── img6.jpeg │ ├── last.jpg │ ├── middle.jpg │ ├── pgs.png │ ├── real-estate .css │ └── real-estate.html ├── facebook-login │ ├── facebbok.css │ ├── facebook.html │ └── style.css ├── hamberger.html ├── index.html ├── navbar.html └── style.css ├── 03. Git & Github ├── Github.pptx └── README.md ├── 04. Javascript ├── .vscode │ └── settings.json ├── 02. JS.txt ├── Drum-kit │ ├── README.md │ ├── images.rar │ ├── images │ │ ├── crash.png │ │ ├── kick.png │ │ ├── snare.png │ │ ├── tom1.png │ │ ├── tom2.png │ │ ├── tom3.png │ │ └── tom4.png │ ├── index.html │ ├── index.js │ ├── sounds.rar │ ├── sounds │ │ ├── crash.mp3 │ │ ├── kick-bass.mp3 │ │ ├── snare.mp3 │ │ ├── tom-1.mp3 │ │ ├── tom-2.mp3 │ │ ├── tom-3.mp3 │ │ └── tom-4.mp3 │ └── styles.css ├── cheatsheet.js ├── index.html ├── practice │ ├── .vscode │ │ └── settings.json │ ├── 1 time.html │ ├── 10 number.html │ ├── 11 array.html │ ├── 12 Form Valid.html │ ├── 13 Function.html │ ├── 2 intro.html │ ├── 3 Script.html │ ├── 4 Var.html │ ├── 5 Number.html │ ├── 6 plus var.html │ ├── 7 opt.html │ ├── 8 obj.html │ └── 9 string.html └── simpleCalc │ ├── index.css │ ├── index.html │ └── index.js ├── 04. jQuery ├── cheatsheet.js ├── jquery.txt └── ufoGame │ ├── craft.jpg │ ├── index.html │ ├── scriptApproach1.js │ └── scriptApproach2.js ├── 05. Firebase ├── Intro │ ├── Firebase.PNG │ ├── auth.PNG │ ├── firebase power.PNG │ └── firebase.txt └── chat_app │ ├── index.css │ ├── index.html │ └── index.js ├── 06. Intro To Backend └── Intro to Backend.pptx ├── 07. PHP ├── Contact-Form │ ├── bootstrap.min.css │ ├── index.php │ └── mailSetup.txt ├── PHP Basics │ ├── 0.Installation.txt │ ├── 1-hello.php │ ├── 10-function.php │ ├── 11-array.php │ ├── 12-sort.php │ ├── 13-date.php │ ├── 2-hellotag.php │ ├── 3-case.php │ ├── 4-var.php │ ├── 5-echo.php │ ├── 6-string.php │ ├── 7-if-else.php │ ├── 8-switch-case.php │ ├── 9-loop.php │ ├── form-get-post │ │ ├── Cross-Site-ScriptingXSS.png │ │ ├── form.php │ │ ├── get_post.php │ │ └── post.php │ ├── include and required │ │ ├── aboutUs.php │ │ ├── contactUs.php │ │ ├── include │ │ │ ├── footer.php │ │ │ └── header.php │ │ └── index.php │ └── superglobals.txt ├── PHP_syllabus.txt └── intro to PHP.pptx ├── 08. Databsase ├── Intro to Database.pptx ├── SQL.pptx ├── sql vs nosql.PNG └── students.sql ├── 09. PHP_mysql Project ├── addPost.php ├── config │ ├── config.php │ └── db.php ├── editpost.php ├── index.php ├── post.php └── templates │ ├── bootstrap.css │ ├── footer.php │ ├── header.php │ └── navbar.php ├── 10. Ajax ├── Ajax.pptx ├── JSON vs XML.pptx ├── ajax.txt └── practice │ ├── AJAX_JSON │ ├── index.html │ └── index.json │ ├── AJAX_PHP │ ├── index.php │ └── suggest.php │ └── AJAX_XML │ ├── index.html │ └── note.xml ├── 11. Node ├── Expressjs.pptx ├── Functional Expression.js ├── Node js.pptx ├── expressRoute │ ├── .gitignore │ ├── Routes.js │ ├── package-lock.json │ ├── package.json │ └── views │ │ └── index.html ├── modules and require │ ├── count.js │ ├── index.js │ └── stuff.js ├── notes.txt ├── reqRes.png ├── serverWithExpress │ ├── .gitignore │ ├── express.js │ ├── index.html │ ├── package-lock.json │ └── package.json └── serverWithNode │ ├── index.html │ └── index.js ├── 12. EJS └── intro │ ├── .gitignore │ ├── index.js │ ├── notes.txt │ ├── package-lock.json │ ├── package.json │ ├── todo.txt │ └── views │ ├── Home.ejs │ ├── contact.ejs │ ├── partials │ ├── footer.ejs │ ├── header.ejs │ └── nav.ejs │ └── profile.ejs ├── 13. Mongo ├── APIs.pptx ├── Todo-List-App │ ├── .gitignore │ ├── config │ │ └── db.js │ ├── controllers │ │ └── todo_conroller.js │ ├── index.js │ ├── model │ │ └── todoSchema.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── assets │ │ │ ├── styles.css │ │ │ └── todo-list.js │ ├── todo.txt │ └── views │ │ └── todo.ejs ├── TodoListWithMongo │ ├── .gitignore │ ├── config │ │ └── db.js │ ├── controllers │ │ └── todo_conroller.js │ ├── index.js │ ├── model │ │ └── todoSchema.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── assets │ │ │ ├── styles.css │ │ │ └── todo-list.js │ ├── routes │ │ └── todoRoute.js │ ├── todo.txt │ └── views │ │ └── todo.ejs ├── mogo.pptx └── todo.txt ├── 14. Project-Node-EJS ├── .gitignore ├── app.js ├── config │ └── db.js ├── controller │ └── index.js ├── index.js ├── models │ └── posts.js ├── package-lock.json ├── package.json ├── public │ └── css │ │ └── styles.css └── views │ ├── compose.ejs │ ├── contact.ejs │ ├── home.ejs │ └── partials │ ├── footer.ejs │ └── header.ejs ├── 15. React ├── React.pptx ├── Redux.pptx └── Tutorial │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── index.html │ └── styles.css │ └── src │ ├── App.js │ ├── components │ ├── Button │ │ └── Button.jsx │ ├── ClassCompoenet.jsx │ ├── CodeWithJSX.jsx │ ├── CodeWithoutJsx.jsx │ ├── Functional component.jsx │ └── Props │ │ ├── Parent.jsx │ │ └── Profile.jsx │ ├── index.css │ ├── index.js │ └── pages │ ├── About.jsx │ └── Home.jsx ├── 16. Vue ├── Basics-cdn │ ├── intro │ │ ├── Basics1 │ │ │ ├── index.html │ │ │ └── index.js │ │ └── Basics2 │ │ │ ├── assets │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ └── 3.jpg │ │ │ ├── index2.html │ │ │ ├── index2.js │ │ │ └── style.css │ └── randomUserGenerator │ │ ├── index.css │ │ ├── index.html │ │ └── index.js ├── Basics-cli │ └── Task-Tracer-vue │ │ ├── .gitignore │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── db.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── AddTask.vue │ │ │ ├── Button.vue │ │ │ ├── Footer.vue │ │ │ ├── Header.vue │ │ │ ├── Task.vue │ │ │ └── Tasks.vue │ │ ├── main.js │ │ ├── router │ │ │ └── index.js │ │ ├── todo.txt │ │ └── views │ │ │ ├── About.vue │ │ │ └── Home.vue │ │ └── vue.config.js ├── Vue.pptx └── notes.txt ├── 17. MERN Project ├── LICENSE ├── README.md ├── client │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── App.test.js │ │ ├── assets │ │ ├── About.png │ │ ├── Bug.png │ │ ├── Feature.png │ │ ├── Login_1.png │ │ ├── Login_2.png │ │ ├── Notfound.png │ │ ├── Signup_1.png │ │ ├── Signup_2.png │ │ ├── Signup_3.png │ │ └── home.png │ │ ├── component │ │ ├── BugForm.js │ │ ├── BugIllistration.js │ │ ├── FeatureForm.js │ │ ├── Footer.js │ │ ├── Navbar.js │ │ ├── NewNote.js │ │ ├── NewnoteBox.js │ │ ├── NotFoundIllistration.js │ │ └── NotesCard.js │ │ ├── history.js │ │ ├── index.js │ │ ├── redux │ │ ├── actionTypes │ │ │ ├── notesConstants.js │ │ │ └── userConstants.js │ │ ├── actions │ │ │ ├── notesAction.js │ │ │ └── userAction.js │ │ ├── reducers │ │ │ ├── NotesReducer.js │ │ │ └── userReducer.js │ │ └── store.js │ │ ├── screen │ │ ├── Bug.js │ │ ├── EditNoteScreen.js │ │ ├── Home.js │ │ ├── LoginScreen.js │ │ ├── NewNoteScreen.js │ │ ├── Notfound.js │ │ └── SigninScreen.js │ │ ├── scrolltotop.js │ │ ├── setupTests.js │ │ └── styles │ │ ├── FooterStyling.js │ │ ├── LoginScreenStyle.js │ │ ├── NavbarStyling.js │ │ ├── NewnoteStyling.js │ │ └── NotesStyling.js ├── server │ ├── .gitignore │ ├── config │ │ ├── db.js │ │ └── sendgrid.js │ ├── controller │ │ ├── NotesController.js │ │ ├── UserController.js │ │ └── resetPasswordController.js │ ├── http_tests │ │ ├── NotesRoutetest.http │ │ ├── forgetPasstest.http │ │ └── userRoutetest.http │ ├── index.js │ ├── mailer │ │ └── forgetPassword_mailer.js │ ├── middleware │ │ └── authenticate.js │ ├── models │ │ ├── notesModel.js │ │ ├── resetPasswordModel.js │ │ └── userModel.js │ ├── package-lock.json │ ├── package.json │ ├── routes │ │ ├── authRouter.js │ │ ├── forgetPassRouter.js │ │ ├── homeRoute.js │ │ └── notesRoute.js │ └── utils │ │ └── generateToken.js └── todo.md ├── CODE_OF_CONDUCT.md ├── Course content.docx ├── LICENSE ├── Project-1-Photo-Gallery ├── index.html └── styles.css └── README.md /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /00. Introduction/0.1 Intro.txt: -------------------------------------------------------------------------------- 1 | Self intro 2 | What is web dev 3 | Front end 4 | backend 5 | 6 | What's in the module 7 | timeline 8 | Chrome dev tools 9 | how to become a better developer 10 | What is i get stuck 11 | site for practice and tutorials 12 | 13 | 14 | -------------------------------------------------------------------------------- /00. Introduction/PPT Personal .pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/00. Introduction/PPT Personal .pptx -------------------------------------------------------------------------------- /01.HTML/HTML.txt: -------------------------------------------------------------------------------- 1 | ########### CONTENT ############## 2 | 3 | 1. Introduction 4 | 2. What is HTML 5 | 3. EDITOR for coding & Syntax and structure (code 1st in notepad next in vs code)and 6 | 4. head, body tag, title and meta tag (Rest code from here) 7 | 5. Your 1st web page 8 | 6. Heading and paragraph (h1 - h6 p) 9 | 7. Other HTML tags 10 | - b, br, hr, i 11 | 9. The img tags and audio tags 12 | 10. HTML Attributes 13 | - src in img 14 | - href in anchor tag 15 | - data- custom Attributes 16 | - and many more ... 17 | 11. HTML comments 18 | 12. HTML links (anchor tags) 19 | 13. HTML list (li tag) 20 | - Ordered 21 | - Unordered 22 | 14. Block Level elements and Inline ELements (like div and span tag) 23 | 15. HTML Tables 24 | 14. ID's and Classes 25 | 15. HTML Form 26 | 16. Adding CSS 27 | - Inline 28 | - Internal 29 | - External 30 | 17. Adding JS 31 | - Internal 32 | - External 33 | 34 | 35 | 36 | 44 | 45 | 46 | SHORTCUTS of Vs code 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /01.HTML/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Html Practice 11 | 12 | 13 |

Hello World

14 | 15 | 16 | -------------------------------------------------------------------------------- /01.HTML/testImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/01.HTML/testImage.png -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/cover.jpg -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/img1.jpg -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/img2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/img2.jpeg -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/img3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/img3.jpeg -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/img4.jpg -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/img5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/img5.jpeg -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/img6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/img6.jpeg -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/last.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/last.jpg -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/middle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/middle.jpg -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/pgs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/02. CSS__Bootstrap/Real-Estate-Bootstrap/pgs.png -------------------------------------------------------------------------------- /02. CSS__Bootstrap/Real-Estate-Bootstrap/real-estate .css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | #left { 7 | padding-top: 32px; 8 | margin-bottom: 25px; 9 | font-family: cursive; 10 | float: left; 11 | margin-left: 30px; 12 | font-size: 30px; 13 | } 14 | 15 | .navbar-nav { 16 | color: #fff; 17 | font-size: 20px; 18 | padding: 10px; 19 | } 20 | 21 | .cover { 22 | background-image: url("./cover.jpg"); 23 | height: 90vh; 24 | width: 100%; 25 | background-repeat: no-repeat; 26 | background-size: cover; 27 | background-position: center; 28 | } 29 | 30 | .heading-1 { 31 | text-align: center; 32 | font-size: 60px; 33 | text-shadow: 1px 1px 2px black; 34 | padding: 50px; 35 | color: silver; 36 | } 37 | -------------------------------------------------------------------------------- /02. CSS__Bootstrap/facebook-login/facebook.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Facebook Login Page 13 | 14 | 15 | 16 |
17 |
18 |

facebook

19 |

20 | Facebook helps you connect and share
with the people in your 21 | life. 22 |

23 |
24 | 25 |
26 |
27 | 28 |
29 | 30 | 33 | Forgot Password ? 34 | 37 |
38 |

Create a Page for a celebrity, band or business

39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /02. CSS__Bootstrap/hamberger.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hamburger 8 | 19 | 20 | 21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /02. CSS__Bootstrap/navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Navbar 5 | 33 | 34 | 35 |
36 | 37 |
Home
38 | 39 | 40 |
HTML
41 | 42 | 43 |
CSS
44 | 45 | 46 |
Bootstrap
47 | 48 | 49 |
JS
50 | 51 | 52 |
MORE
53 | 54 |
55 | 56 |

57 | A Flexible Layout must have a parent element with the 58 | display property set to flex. 59 |

60 | 61 |

62 | Direct child elements(s) of the flexible container automatically becomes 63 | flexible items. 64 |

65 | 66 | 67 | -------------------------------------------------------------------------------- /03. Git & Github/Github.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/03. Git & Github/Github.pptx -------------------------------------------------------------------------------- /04. Javascript/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/README.md: -------------------------------------------------------------------------------- 1 | # Drum-kit 2 | A small project for drum lovers. This is a virtual drum kit with typical drum sounds combined with appropriate instruments 3 | 4 | demo:https://prasundas99.github.io/Drum-kit/ 5 | -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/images.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/images.rar -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/images/crash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/images/crash.png -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/images/kick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/images/kick.png -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/images/snare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/images/snare.png -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/images/tom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/images/tom1.png -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/images/tom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/images/tom2.png -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/images/tom3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/images/tom3.png -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/images/tom4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/images/tom4.png -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Drum Kit 9 | 10 | 11 | 12 | 13 |

Drum Kit

14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/sounds.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/sounds.rar -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/sounds/crash.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/sounds/crash.mp3 -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/sounds/kick-bass.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/sounds/kick-bass.mp3 -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/sounds/snare.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/sounds/snare.mp3 -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/sounds/tom-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/sounds/tom-1.mp3 -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/sounds/tom-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/sounds/tom-2.mp3 -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/sounds/tom-3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/sounds/tom-3.mp3 -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/sounds/tom-4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. Javascript/Drum-kit/sounds/tom-4.mp3 -------------------------------------------------------------------------------- /04. Javascript/Drum-kit/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #0e1322; 4 | } 5 | 6 | h1 { 7 | font-size: 5rem; 8 | color: #DBEDF3; 9 | font-family: "Arvo", cursive; 10 | text-shadow: 3px 0 #a7064e; 11 | 12 | } 13 | 14 | footer { 15 | color: #c6d6db; 16 | font-family: sans-serif; 17 | } 18 | 19 | .w { 20 | background-image: url("images/tom1.png"); 21 | } 22 | 23 | .a { 24 | background-image: url("images/tom2.png"); 25 | } 26 | 27 | .s { 28 | background-image: url("images/tom3.png"); 29 | } 30 | 31 | .d { 32 | background-image: url("images/tom4.png"); 33 | } 34 | 35 | .j { 36 | background-image: url("images/snare.png"); 37 | } 38 | 39 | .k { 40 | background-image: url("images/crash.png"); 41 | } 42 | 43 | .l { 44 | background-image: url("images/kick.png"); 45 | } 46 | 47 | .set { 48 | margin: 10% auto; 49 | } 50 | 51 | .pressed { 52 | box-shadow: 0 3px 4px 0 #DBEDF3; 53 | opacity: 0.5; 54 | } 55 | 56 | .red { 57 | color: rgb(255, 8, 132); 58 | } 59 | 60 | .drum { 61 | outline: none; 62 | border: 10px solid #2e4585; 63 | font-size: 5rem; 64 | font-family: 'Arvo', cursive; 65 | line-height: 2; 66 | font-weight: 900; 67 | color: #be286c; 68 | text-shadow: 3px 0 #DBEDF3; 69 | border-radius: 15px; 70 | display: inline-block; 71 | width: 150px; 72 | height: 150px; 73 | text-align: center; 74 | margin: 10px; 75 | background-color: white; 76 | } 77 | 78 | a{ 79 | color: #be286c; 80 | } -------------------------------------------------------------------------------- /04. Javascript/practice/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /04. Javascript/practice/1 time.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

My First JavaScript

5 | 6 | 12 | 13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /04. Javascript/practice/10 number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

JavaScript Numbers

5 | 6 |

Floating point arithmetic is not always 100% accurate.

7 | 8 |

9 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /04. Javascript/practice/11 array.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

JavaScript Arrays

5 | 6 |

7 | 8 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /04. Javascript/practice/12 Form Valid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | Name: 7 | 8 |
9 | 10 | 19 | 20 | -------------------------------------------------------------------------------- /04. Javascript/practice/13 Function.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

A function can be stored in a variable:

5 |

6 | 7 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /04. Javascript/practice/2 intro.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

What is javascript?

5 | 6 |

JavaScript can change HTML content.

7 | 8 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /04. Javascript/practice/3 Script.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

JavaScript in Body

5 | 6 |

HI

7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /04. Javascript/practice/4 Var.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 |

My First Web Page

12 |

My First Paragraph.

13 | 14 |

15 | 16 | 17 | 18 | 19 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /04. Javascript/practice/5 Number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

JavaScript Numbers

5 | 6 |

Number can be written with or without decimals.

7 | 8 |

9 | 10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /04. Javascript/practice/6 plus var.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

JavaScript Variables

5 | 6 |

In this example, x, y, and z are variables.

7 | 8 |

9 | 10 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /04. Javascript/practice/7 opt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

The + Operator

5 | 6 |

7 | 8 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /04. Javascript/practice/8 obj.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

JavaScript Objects

5 | 6 |

7 | 8 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /04. Javascript/practice/9 string.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

JavaScript String Properties

5 | 6 |

The length property returns the length of a string:

7 | 8 |

9 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /04. Javascript/simpleCalc/index.js: -------------------------------------------------------------------------------- 1 | function dis(val) { 2 | document.getElementById("input").value += val; 3 | } 4 | 5 | function displayAnswer() { 6 | let x = document.getElementById("input").value; 7 | console.log(typeof x); 8 | let y = eval(x); 9 | document.getElementById("input").value = y; 10 | } 11 | 12 | function clearAnswer() { 13 | document.getElementById("input").value = ""; 14 | } 15 | 16 | function backspaceEmple() { 17 | var element = document.getElementById("input").value; //79 18 | document.getElementById("input").value = element.substring( 19 | 0, 20 | element.length - 1 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /04. jQuery/jquery.txt: -------------------------------------------------------------------------------- 1 | 1. Intro 2 | - simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. 3 | - Contains:- 4 | HTML/DOM manipulation 5 | CSS manipulation 6 | HTML event methods 7 | Effects and animations 8 | AJAX 9 | Utilities 10 | 11 | 12 | 2. Why jQuery 13 | - Companies 14 | * Google 15 | * IBM 16 | * Microsoft 17 | * Netflix 18 | 19 | 20 | 3. Syntax 21 | - $(selector).action() 22 | - $(document).ready(function(){ // run any jQuery code after document is finished loading (is ready). 23 | 24 | // jQuery methods will be here... 25 | 26 | }); 27 | EX:- 28 | { 29 | $('p').click(function) 30 | } 31 | 32 | console.log(jQuery) == console.log($) 33 | 34 | 35 | 4. jQuery Events (generally actions) 36 | - $(selector).click() 37 | - $(selector).dbclick() 38 | - $(selector).mouseenter() 39 | - $(selector).mouseleave() 40 | - $(selector).mouseup() 41 | - $(selector).mousedown() 42 | 43 | 44 | 5. GET and SET content 45 | - .text() 46 | - .html() 47 | - .val() 48 | - .attr() 49 | 50 | 51 | 6. Add Html content 52 | - .append() 53 | - .prepend() 54 | - .after(), before() 55 | 56 | 57 | 7. Manipulating CSS 58 | - .css() 59 | - .addClass() 60 | - .removeClass() 61 | - toggleClass() 62 | 63 | 8. Animation 64 | - .hide(speed, callback) -.show(speed, callback) - .toggle(speed, callback) 65 | - slideDown(speed, callback) - slideUp(speed, callback) - slideToggle(speed, callback) 66 | - .animate({params}, speed, callback); 67 | 68 | projects: 69 | - ufoGame -------------------------------------------------------------------------------- /04. jQuery/ufoGame/craft.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/04. jQuery/ufoGame/craft.jpg -------------------------------------------------------------------------------- /04. jQuery/ufoGame/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spaceship Game 7 | 21 | 22 | 23 |

Spaceship

24 | 25 | 26 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /04. jQuery/ufoGame/scriptApproach1.js: -------------------------------------------------------------------------------- 1 | /* In js: 2 | document.getElementByID("spaceship"); 3 | in jQuery 4 | $('#spaceship) 5 | */ 6 | $(document).ready(function () { 7 | var spaceship = $("#spaceship"); 8 | 9 | //Changing css via jQuery 10 | spaceship.css({ 11 | //css function 12 | position: "absolute", // Which is static by default 13 | left: 500, 14 | top: 200, 15 | width: 160, 16 | height: 120, 17 | }); 18 | 19 | //Now i want to change the spaceship position using my keys 20 | var ismovingRight = false; 21 | var ismovingDown = false; 22 | var ismovingUp = false; 23 | var ismovingLeft = false; 24 | //keydown event 25 | $(document).on("keydown", function (e) { 26 | /*Cheaking keyCode */ 27 | console.log(e.keyCode); 28 | 29 | var kc = e.keyCode; 30 | if (kc == 39) { 31 | ismovingRight = true; 32 | } 33 | if (kc == 40) { 34 | ismovingDown = true; 35 | } 36 | if (kc == 37) { 37 | ismovingLeft = true; 38 | } 39 | if (kc == 38) { 40 | ismovingUp = true; 41 | } 42 | }); 43 | 44 | //keyup event 45 | $(document).on("keyup", function (e) { 46 | var kc = e.keyCode; 47 | if (kc == 39) { 48 | ismovingRight = false; 49 | } 50 | if (kc == 40) { 51 | ismovingDown = false; 52 | } 53 | if (kc == 37) { 54 | ismovingLeft = false; 55 | } 56 | if (kc == 38) { 57 | ismovingUp = false; 58 | } 59 | }); 60 | 61 | //writing function for smooth flow of spaceship 62 | var speed = 6; 63 | function move() { 64 | if (ismovingRight) { 65 | spaceship.css("left", spaceship.position().left + speed); 66 | } 67 | if (ismovingDown) { 68 | spaceship.css("top", spaceship.position().top + speed); 69 | } 70 | if (ismovingUp) { 71 | spaceship.css("top", spaceship.position().top - speed); 72 | } 73 | if (ismovingLeft) { 74 | spaceship.css("left", spaceship.position().left - speed); 75 | } 76 | } 77 | 78 | setInterval(move, 10); 79 | }); 80 | 81 | // Can also be used to make snake games 82 | -------------------------------------------------------------------------------- /04. jQuery/ufoGame/scriptApproach2.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | const spaceship = $("#spaceship"); 3 | 4 | // jquery code 5 | spaceship.css({ 6 | position: "absolute", 7 | left: 500, 8 | top: 200, 9 | width: 160, 10 | height: 120, 11 | }); 12 | 13 | var interval; 14 | 15 | $(document).on("keydown", function (e) { 16 | console.log(e.originalEvent.keyCode); 17 | var keyCode = e.originalEvent.keyCode; 18 | 19 | interval = setInterval(move, 100, keyCode); // infinitely cholbe 20 | }); 21 | 22 | $(document).on("keyup", function (e) { 23 | console.log(e.originalEvent.key); 24 | 25 | clearInterval(interval); 26 | }); 27 | 28 | let speed = 6; 29 | function move(keyCode) { 30 | if (keyCode === 39) { 31 | spaceship.css("left", spaceship.position().left + speed); 32 | } 33 | if (keyCode === 40) { 34 | spaceship.css("top", spaceship.position().top + speed); 35 | } 36 | if (keyCode === 38) { 37 | spaceship.css("top", spaceship.position().top - speed); 38 | } 39 | if (keyCode === 37) { 40 | spaceship.css("left", spaceship.position().left - speed); 41 | } 42 | } 43 | }); 44 | 45 | // 1. Spaceship css jaate ota page er middle a chole ase 46 | // 2. key up event r key down er event 47 | 48 | // key-down --> key press (key te haath ta press kore rekhechi) 49 | // key-up --> key un-press (key theke haath ta chere debe jokhon) 50 | -------------------------------------------------------------------------------- /05. Firebase/Intro/Firebase.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/05. Firebase/Intro/Firebase.PNG -------------------------------------------------------------------------------- /05. Firebase/Intro/auth.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/05. Firebase/Intro/auth.PNG -------------------------------------------------------------------------------- /05. Firebase/Intro/firebase power.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/05. Firebase/Intro/firebase power.PNG -------------------------------------------------------------------------------- /05. Firebase/Intro/firebase.txt: -------------------------------------------------------------------------------- 1 | college Project 2 | 3 | Backend as service 4 | 5 | hosted on GCP 6 | extention of gcp 7 | moto- : the best code is no code at all 8 | 9 | 1.Deploy 10 | 2.Auth 11 | 3.db 12 | 4. Cloud storage 13 | 14 | 15 | We will work on database(most common)... 16 | rest will depend upto u jokhon lagbe bole debo cause we will do them in backend 17 | 18 | 19 | 20 | main db 21 | 22 | secondary : hosting auth 23 | 24 | reference: https://fireship.io/lessons/firebase-quickstart/ 25 | 26 | 27 | 28 | 29 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /05. Firebase/chat_app/index.css: -------------------------------------------------------------------------------- 1 | #site-title { 2 | padding-top: 40px; 3 | width: 100%; 4 | margin: auto; 5 | text-align: center; 6 | font-family: "Roboto", sans-serif; 7 | color: #0064c9; 8 | font-weight: 900; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: rgb(238, 238, 238); 14 | font-family: "Helvetica Neue", "Roboto", sans-serif; 15 | height: 800px; 16 | } 17 | 18 | #container { 19 | width: 360px; 20 | height: 540px; 21 | overflow-y: auto; 22 | margin: 0px auto; 23 | background-color: rgb(222, 238, 253); 24 | border-radius: 10px; 25 | padding: 20px 20px 20px 20px; 26 | box-shadow: 4px 8px 22px 0 rgba(0, 0, 0, 0.3); 27 | } 28 | 29 | #main-container { 30 | width: 320px; 31 | height: 350px; 32 | overflow-y: auto; 33 | margin: 0px auto; 34 | background-color: #fff; 35 | border-radius: 4px; 36 | padding: 10px 20px 10px 20px; 37 | color: #000; 38 | } 39 | 40 | .bubble-left { 41 | margin-top: 5px; 42 | width: 75%; 43 | border-radius: 15px; 44 | padding: 10px 20px 10px 20px; 45 | display: flex; 46 | box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); 47 | float: left; 48 | background-color: #1289fe; 49 | color: #fff; 50 | } 51 | 52 | .bubble-right { 53 | margin-top: 5px; 54 | width: 75%; 55 | border-radius: 15px; 56 | padding: 10px 20px 10px 20px; 57 | display: flex; 58 | box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25); 59 | float: right; 60 | background-color: #1289fe; 61 | color: #fff; 62 | } 63 | 64 | #controller { 65 | width: 320px; 66 | height: 100px; 67 | margin: 0px auto; 68 | margin-top: 7px; 69 | } 70 | 71 | .form-control { 72 | border: none; 73 | } 74 | 75 | textarea { 76 | margin-top: 20px; 77 | resize: none; 78 | } 79 | 80 | #send { 81 | margin-top: 14px; 82 | float: left; 83 | } 84 | -------------------------------------------------------------------------------- /05. Firebase/chat_app/index.js: -------------------------------------------------------------------------------- 1 | var database = firebase.database(); 2 | 3 | console.log(database); 4 | 5 | //Taking name of user 6 | var Name = prompt("Enter your name : ", ""); 7 | 8 | //Write data to database 9 | function writeUserData() { 10 | var message = document.getElementById("message").value; 11 | database.ref("messages/").push().set({ 12 | message: message, 13 | name: Name, 14 | }); 15 | document.getElementById("message").value = ""; 16 | } 17 | 18 | 19 | // read data 20 | database.ref("messages/").on('value', (snapshot) => { 21 | const messages = snapshot.val(); 22 | console.log(messages); 23 | // previous message delete 24 | document.getElementById("main-container").innerHTML = ""; 25 | 26 | for (var key in messages) { 27 | var message = messages[key]; 28 | console.log(message.message); 29 | console.log(message.name); 30 | 31 | const x = document.createElement("p"); 32 | x.innerHTML = message.name + ": " + message.message; 33 | console.log(x); 34 | if (message.name === Name) { 35 | x.classList.add("bubble-right"); 36 | } else { 37 | x.classList.add("bubble-left"); 38 | } 39 | 40 | // add to html document 41 | document.getElementById("main-container").appendChild(x); 42 | 43 | } 44 | }); 45 | 46 | 47 | 48 | 49 | // JS Template Literal 50 | 51 | // Arrow function - JS ES6 52 | 53 | // BaaS - Backend As a Service 54 | 55 | // GOAL 56 | // 1. Add data to database of firebase 57 | // 2. Show or Read data from database to the client side 58 | -------------------------------------------------------------------------------- /06. Intro To Backend/Intro to Backend.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/06. Intro To Backend/Intro to Backend.pptx -------------------------------------------------------------------------------- /07. PHP/Contact-Form/mailSetup.txt: -------------------------------------------------------------------------------- 1 | => Steps to Send Mail From Localhost XAMPP Using Gmail: 2 | 3 | 1. Open XAMPP Installation Directory. 4 | 2. Go to C:\xampp\php and open the php.ini file. 5 | 3. Find [mail function] in the file 6 | 4. Search and pass the following values: 7 | 8 | - SMTP=smtp.gmail.com 9 | smtp_port=587 10 | sendmail_from = YourGmailId@gmail.com 11 | sendmail_path = "\"C:\xampp\sendmail\sendmail.exe\" -t" 12 | 13 | 5. Now, go to C:\xampp\sendmail and open sendmail.ini file. 14 | 6. Find [sendmail] in the file 15 | 7. Search and pass the following values 16 | - smtp_server=smtp.gmail.com 17 | smtp_port=587 18 | error_logfile=error.log 19 | debug_logfile=debug.log 20 | auth_username=YourGmailId@gmail.com 21 | auth_password=Your-Gmail-Password 22 | force_sender=YourGmailId@gmail.com(optional) 23 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/0.Installation.txt: -------------------------------------------------------------------------------- 1 | Install XAMPP (EASIER TO GET STARTED) 2 | move to htdocs 3 | open localhost 4 | 5 | Chamge root user password privilages from xamp myphpadmin and 6 | then change the password in C:\xampp\phpMyAdmin\config.inc.php file. 7 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/1-hello.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello by PHP
"; 6 | echo "

Hello by PHP

"; 7 | ?> 8 | 9 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/10-function.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | "; 23 | } 24 | familyName("Jani"); 25 | familyName("Hege"); 26 | familyName("Stale"); 27 | familyName("Kai Jim"); 28 | familyName("Borge"); 29 | familyName(10000); 30 | 31 | 32 | echo "

"; 33 | 34 | 35 | // return in function 36 | function multiplyNum($num1, $num2) { 37 | return $num1 * $num2 ; 38 | } 39 | echo multiplyNum(4, 5) . "

"; 40 | 41 | 42 | // reference in functions 43 | $myNum = 1; 44 | function addNum(&$num) { 45 | $num += 2; 46 | } 47 | addNum($myNum); 48 | 49 | echo "Global value 'myNum' changed to: $myNum"; 50 | 51 | ?> 52 | 53 | 54 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/11-array.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
"; 10 | 11 | // method 2 12 | $people = ["John", "Ram", "Jennifer"]; 13 | echo $people[2] . "

"; 14 | 15 | //Add items 16 | $people[3] = "Sam"; 17 | $people[] = "Shubham"; // by default add data to last 18 | 19 | // count 20 | echo count($people) . "

"; 21 | 22 | // print the whole array 23 | print_r($people); 24 | 25 | echo "

"; 26 | 27 | // print the whole array and also tell about data type of each value in the array 28 | // it dumbs the information of the variable 29 | var_dump($people); 30 | 31 | echo "

"; 32 | 33 | // Assciative Array 34 | $person = ["Shubham" => 20, "John" => 20]; 35 | $person["Ram"] = 18; 36 | var_dump($person); 37 | 38 | echo "

"; 39 | 40 | 41 | // Multi-Dimensional Array 42 | $cars = array( 43 | array("Honda", 22, 11), 44 | array("Toyota", 22, 11), 45 | array("Swift", 22, 11) 46 | ); 47 | echo $cars[1][0]; 48 | 49 | ?> 50 | 51 | 52 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/12-sort.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | "; 13 | } 14 | ?> 15 | 16 | 17 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/13-date.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | "; // day 10 | echo "Month is: " . date("m") . "
"; // month 11 | echo "Year is: " . date("Y") . "
"; // year 12 | echo "Day Of the week is " . date("l"). "

"; // Day Of th eeek 13 | 14 | // Combination od day month and year 15 | echo "Today is " . date("Y/m/d") . "
"; 16 | echo "Today is " . date("Y.m.d") . "
"; 17 | echo "Today is " . date("Y-m-d") . "


"; 18 | 19 | 20 | 21 | // Time 22 | echo "Time". "
"; 23 | 24 | // set time zone 25 | date_default_timezone_set("Asia/Kolkata"); 26 | 27 | // get time zone 28 | echo "Time Zone: ". date_default_timezone_get() . "
"; 29 | 30 | echo "Now Hour is " . date("h") . "
"; 31 | echo "Now Minute is " . date("i") . "
"; 32 | echo "Now Seconds is " . date("s") . "
"; 33 | echo "AM/PM is " . date("a") . "

"; 34 | // Full Time 35 | echo "Today is (date and time): " . date("h:i:sa") . "


"; 36 | 37 | 38 | 39 | // Timestamp 40 | /* - It is a long integer containing number of seconds 41 | between the UNIX Epoch (January 1 1970 00:00:00 GMT) 42 | and the time specified 43 | */ 44 | echo "Timestamp". "
"; 45 | $timestamp = mktime(10, 30, 50, 11, 15, 2000); 46 | echo "Time in seconds: ". $timestamp. "


"; 47 | 48 | 49 | 50 | // Date and time with timestamp 51 | echo "Date with Time (by timestamp)". "
"; 52 | echo "My Date Of Birth: ". date("d/m/Y - h:i:s a", $timestamp) 53 | 54 | 55 | ?> 56 | 57 | 58 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/2-hellotag.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

My first PHP page

6 | 7 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/3-case.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 20 | 21 | "; 23 | echo "Hello World!
"; 24 | EcHo "Hello World!
"; 25 | ?> 26 | 27 | 28 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/4-var.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | "; 19 | 20 | 21 | // float 22 | $float = 3.4; 23 | echo $float . "
"; 24 | 25 | 26 | // boolean 27 | $bool = true; 28 | echo $bool. "

"; 29 | 30 | 31 | // string 32 | $string1 = "Web Dev"; 33 | $string2 = "Training"; 34 | 35 | // concatenation of string 36 | $greet1 = $string1 . " " . $string2 . "
"; // method1 37 | $greet2 = "$string1 $string2

"; // method2 (use double string as it parse variables) 38 | echo $greet1; 39 | echo $greet2; 40 | 41 | // escape character 42 | $string3 = 'We\'r here' . "
"; 43 | $string4 = "We'r here" . "

"; 44 | echo $string3; 45 | echo $string4; 46 | 47 | 48 | // constant variable 49 | define('GREET', "Hello This is Constant variable!!"); 50 | echo GREET; 51 | 52 | ?> 53 | 54 | 55 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/5-echo.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | " . $txt1 . ""; 12 | echo "Study PHP at " . $txt2 . "
"; 13 | echo $x + $y; 14 | 15 | print "

$x PHP is Fun!

"; 16 | print "Hello world!
"; 17 | print "I'm about to learn PHP!"; 18 | ?> 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/6-string.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | "; 8 | 9 | // no. of word in a string 10 | echo str_word_count("Hello world")."
"; 11 | 12 | // reverse a string 13 | echo strrev("Hello world!"); 14 | ?> 15 | 16 | 17 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/7-if-else.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
"; 19 | }else echo '5 not passed' . "

"; 20 | 21 | 22 | # nesting ifs 23 | 24 | $num = 4; 25 | if($num >= 5) { 26 | if($num < 10) { 27 | echo $num.' passed

'; 28 | } 29 | echo 'pass 1

'; 30 | }else { 31 | echo 'no pass

'; 32 | }; 33 | 34 | 35 | /* logical operators 36 | and && 37 | or || 38 | xor 39 | */ 40 | $num = 6; 41 | if($num > 4 xor $num < 15) { 42 | echo $num.' passed'; 43 | } else { 44 | echo $num. ' no pass'; 45 | } 46 | 47 | ?> 48 | 49 | 50 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/8-switch-case.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/9-loop.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
"; 19 | for ($x = 0; $x <= 10; $x++) { 20 | echo "The number is: $x
"; 21 | } 22 | 23 | 24 | echo "


"; 25 | 26 | 27 | # while loop 28 | # @params - condition 29 | echo "WHILE loop

"; 30 | $i = 5; 31 | while($i < 10) { 32 | echo $i . "
"; 33 | $i++; 34 | } 35 | 36 | 37 | echo "


"; 38 | 39 | 40 | # do-while loop 41 | # @params - condition 42 | echo "Do.While loop

"; 43 | $i = 1; 44 | do{ 45 | echo $i . "
"; 46 | $i++; 47 | }while($i < 10); 48 | 49 | 50 | echo "


"; 51 | 52 | 53 | # foreach loop 54 | # @params - for arrays 55 | echo "Foreach loop

"; 56 | $people = ["Shubham", "John", "William"]; 57 | foreach ($people as $person) { 58 | # code... 59 | echo $person . "
"; 60 | } 61 | 62 | 63 | echo "


"; 64 | 65 | 66 | # @params - for associative arrays 67 | echo "Foreach loop in associative array

"; 68 | $people = ["Shubham" => "sd@gmail.com", "John" => "john@gmaail.com", "William" => "will@gmail.com"]; 69 | foreach ($people as $person => $email) { 70 | # code... 71 | echo $person . " : " . $email . "
"; 72 | } 73 | 74 | echo "


"; 75 | 76 | ?> 77 | 78 | 79 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/form-get-post/Cross-Site-ScriptingXSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/07. PHP/PHP Basics/form-get-post/Cross-Site-ScriptingXSS.png -------------------------------------------------------------------------------- /07. PHP/PHP Basics/form-get-post/form.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | get post 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 | 21 |
22 | 23 |
24 | 25 | 26 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/form-get-post/get_post.php: -------------------------------------------------------------------------------- 1 | GET REQUEST: " . "
"; 26 | echo "Name: " . $name . "
"; 27 | // echo "Email: " . $email ; 28 | }; 29 | 30 | 31 | // POST REQUEST 32 | // if(isset($_POST["name"])){ 33 | // $name = htmlentities($_POST['name']); 34 | // $email = htmlentities($_POST['email']); 35 | // echo "POST REQUEST: " . "
"; 36 | // echo "Name: " . $name . "
"; 37 | // echo "Email: " . $email; 38 | // } 39 | 40 | 41 | // $_REQUEST works with either POST/GET request 42 | // if(isset($_REQUEST['name'])){ 43 | // $name = htmlentities($_REQUEST['name']); 44 | // $email = htmlentities($_REQUEST['email']); 45 | // echo "REQUEST: " . "
"; 46 | // echo "Name: " . $name . "
"; 47 | // echo "Email: " . $email ; 48 | // } 49 | 50 | 51 | // Query String (after ? in URL) 52 | echo "
" . $_SERVER['QUERY_STRING'] . "
"; 53 | 54 | ?> -------------------------------------------------------------------------------- /07. PHP/PHP Basics/form-get-post/post.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Welcome
5 | Your email address is: 6 | 7 | 8 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/include and required/aboutUs.php: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | 5 |

6 | 7 | 8 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/include and required/contactUs.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

5 | 6 |

7 | 8 | 9 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/include and required/include/footer.php: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/include and required/include/header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | PHP Tutorials 8 | 9 | 10 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/include and required/index.php: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |

Home Page

8 | 9 | 10 | -------------------------------------------------------------------------------- /07. PHP/PHP Basics/superglobals.txt: -------------------------------------------------------------------------------- 1 | Superglobals in PHP 2 | 3 | Some predefined variables in PHP are "superglobals", 4 | which means that they are always accessible, regardless 5 | of scope - and you can access them from any function, 6 | class or file without having to do anything special. 7 | 8 | 9 | The PHP superglobal variables are: 10 | 11 | $GLOBALS 12 | $_SERVER 13 | $_REQUEST 14 | $_POST 15 | $_GET 16 | $_FILES 17 | $_ENV 18 | $_COOKIE 19 | $_SESSION 20 | -------------------------------------------------------------------------------- /07. PHP/PHP_syllabus.txt: -------------------------------------------------------------------------------- 1 | - Basic Principles 2 | - PHP / Apache / MySQL Setup 3 | - Code Systax (vars, arrays, loops, conditionals, functions) 4 | - Procedural & OOP 5 | - Dynamic pages 6 | - Form Submissions / Supergoals 7 | - Working with Directories 8 | - Mini Project 9 | * Contact Form 10 | * User Login System -------------------------------------------------------------------------------- /07. PHP/intro to PHP.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/07. PHP/intro to PHP.pptx -------------------------------------------------------------------------------- /08. Databsase/Intro to Database.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/08. Databsase/Intro to Database.pptx -------------------------------------------------------------------------------- /08. Databsase/SQL.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/08. Databsase/SQL.pptx -------------------------------------------------------------------------------- /08. Databsase/sql vs nosql.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/08. Databsase/sql vs nosql.PNG -------------------------------------------------------------------------------- /08. Databsase/students.sql: -------------------------------------------------------------------------------- 1 | CREATE DATABASE test2 ; 2 | 3 | USE test2; 4 | 5 | ///////////////////////////////////// Create Table //////////////////////////////////////////////// 6 | 7 | CREATE TABLE `students` ( 8 | `student_name` VARCHAR(255) NOT NULL , 9 | `student_roll` INT(200) NOT NULL , 10 | `marks` INT(100) NOT NULL , 11 | `percenntage` INT(100) NOT NULL , 12 | PRIMARY KEY (`student_roll`) 13 | ); 14 | 15 | 16 | 17 | ///////////////////////////////////// INSERT new Row in the table //////////////////////////////// 18 | 19 | INSERT INTO `students` ( 20 | `student_name`, `student_roll`, `marks`, `percenntage` 21 | ) VALUES ('Avik', '12', '99', '99'); 22 | 23 | 24 | INSERT INTO `students` ( 25 | `student_name`, `student_roll`, `marks`, `percenntage` 26 | ) VALUES ('Akash', '11', '100', '100'); 27 | 28 | 29 | 30 | ///////////////////////////////////// DELETE particular Row ///////////////////////////////////// 31 | 32 | DELETE FROM `students` WHERE `students`.`student_roll` = 11"; 33 | 34 | 35 | 36 | ///////////////////////////////////// UPDATE COL in particular Row ///////////////////////////////////// 37 | 38 | UPDATE `students` SET `student_name` = 'Avik2' WHERE `students`.`student_roll` = 12; 39 | 40 | 41 | 42 | ///////////////////////////////////// READ particular row from the table ///////////////////////////////////// 43 | 44 | SELECT * FROM `students`; 45 | 46 | SELECT * FROM `students` WHERE col_name = value; -------------------------------------------------------------------------------- /09. PHP_mysql Project/addPost.php: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | 31 |
32 |

Add Blog Post

33 |
34 |
35 |
36 | 37 | 38 |
39 |
40 | 41 | 42 |
43 |
44 | 45 | 46 |
47 | 48 |
49 |
50 |
51 | 52 | -------------------------------------------------------------------------------- /09. PHP_mysql Project/config/config.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /09. PHP_mysql Project/config/db.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /09. PHP_mysql Project/index.php: -------------------------------------------------------------------------------- 1 | 25 | 26 | 27 | 28 | 29 |
30 |

All Blogs

31 | 32 | 33 |
34 |

35 | 36 |

37 | 38 | 39 | Created on 40 | by 41 | 42 | 43 | 44 |

45 |

46 | 47 |

48 | 51 | Read more ... 52 | 53 |
54 | 55 |
56 | 57 | 58 |
59 | 60 | -------------------------------------------------------------------------------- /09. PHP_mysql Project/templates/footer.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /09. PHP_mysql Project/templates/header.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | PHP blog readout 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /09. PHP_mysql Project/templates/navbar.php: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /10. Ajax/Ajax.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/10. Ajax/Ajax.pptx -------------------------------------------------------------------------------- /10. Ajax/JSON vs XML.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/10. Ajax/JSON vs XML.pptx -------------------------------------------------------------------------------- /10. Ajax/ajax.txt: -------------------------------------------------------------------------------- 1 | Ajax Mechanism:- 2 | 3 | 1. User sends a request from the HTML and a javascript call goes to XMLHttpRequest object. 4 | 2. HTTP Request is sent to the server by XMLHttpRequest object. 5 | 3. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc. 6 | 4. Data is retrieved. 7 | 5. Server sends XML data or JSON data to the XMLHttpRequest callback function. 8 | 6. HTML and CSS data is displayed on the browser. 9 | -------------------------------------------------------------------------------- /10. Ajax/practice/AJAX_JSON/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | AJAX JSON 5 | 6 | 7 | Date:
8 | Time:
9 | 10 | 11 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /10. Ajax/practice/AJAX_JSON/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "date": "05-17-2021", 3 | "milliseconds_since_epoch": 1621272855139, 4 | "time": "05:34:15 PM" 5 | } 6 | -------------------------------------------------------------------------------- /10. Ajax/practice/AJAX_PHP/index.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | search user 7 | 8 | 26 | 27 | 28 |
29 |

Search Users

30 |
31 | Search User: 32 |
33 |

Suggestions:

34 |
35 | 36 | -------------------------------------------------------------------------------- /10. Ajax/practice/AJAX_PHP/suggest.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

The XMLHttpRequest Object

5 | 6 |

Retrieve data from XML file

7 | 8 |

Status:

9 |

Status text:

10 |

Response:

11 | 12 | 13 | 14 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /10. Ajax/practice/AJAX_XML/note.xml: -------------------------------------------------------------------------------- 1 | 2 | Tove 3 | Jani 4 | Reminder 5 | Don't forget me this weekend! 6 | -------------------------------------------------------------------------------- /11. Node/Expressjs.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/11. Node/Expressjs.pptx -------------------------------------------------------------------------------- /11. Node/Functional Expression.js: -------------------------------------------------------------------------------- 1 | //Normal function statement 2 | function sayHello(){ 3 | console.log('Hello'); 4 | } 5 | sayHello(); 6 | 7 | //Functionl expression 8 | var sayBye = function(){ 9 | console.log("Byee"); 10 | } 11 | sayBye(); 12 | 13 | 14 | function callFunction(fun){ 15 | fun(); 16 | } 17 | 18 | callFunction(sayBye); -------------------------------------------------------------------------------- /11. Node/Node js.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/11. Node/Node js.pptx -------------------------------------------------------------------------------- /11. Node/expressRoute/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /11. Node/expressRoute/Routes.js: -------------------------------------------------------------------------------- 1 | //Creating Server Using express 2 | 3 | const express = require("express"); 4 | 5 | /* 6 | New method based on ES6 7 | include express from 'express'; 8 | */ 9 | 10 | const app = express(); 11 | 12 | app.get("/", function (req, res) { 13 | res.send("Hello World"); 14 | }); 15 | 16 | app.get("/about", function (req, res) { 17 | res.send("about us"); 18 | }); 19 | 20 | app.get("/heyy", function (req, res) { 21 | res.send("heyyy"); 22 | }); 23 | 24 | /*Route params*/ 25 | app.get("/profile/:id", function (req, res) { 26 | res.send(`the requested id is: ${req.params.id}`); 27 | }); 28 | 29 | app.get("/users/:userId", function (req, res) { 30 | res.send(`the requested id is: ${req.params.userId}`); 31 | }); 32 | 33 | //viewing html file 34 | app.get("/contact", function (req, res) { 35 | res.sendFile(__dirname + "/views/index.html"); 36 | }); 37 | 38 | app.listen(3000); 39 | console.log("Server started at port 3000"); 40 | 41 | //For continuous running of server : NODEMON 42 | -------------------------------------------------------------------------------- /11. Node/expressRoute/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "express-route", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "Routes.js", 6 | "dependencies": { 7 | "express": "^4.17.1" 8 | }, 9 | "devDependencies": {}, 10 | "scripts": { 11 | "start": "node Routes.js" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC" 16 | } 17 | -------------------------------------------------------------------------------- /11. Node/expressRoute/views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact 8 | 14 | 15 | 16 |

Contact Us

17 | 18 |

19 | For helpline contact : 543162 20 | 21 |

22 | 23 | -------------------------------------------------------------------------------- /11. Node/modules and require/count.js: -------------------------------------------------------------------------------- 1 | var counter = function(arr){ 2 | return 'There are ' + arr.length + 'element in this array'; 3 | }; 4 | 5 | module.exports = counter; -------------------------------------------------------------------------------- /11. Node/modules and require/index.js: -------------------------------------------------------------------------------- 1 | var counter = require('./count'); 2 | //var stuff = require('./stuff'); 3 | 4 | console.log(counter(['shaun', 'crystal' , 'ryu'])); 5 | 6 | //console.log(stuff.sub(5,6)) 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /11. Node/modules and require/stuff.js: -------------------------------------------------------------------------------- 1 | var adder = function(a,b){ 2 | return `The sum of the 2number is ${a+b}`; 3 | } 4 | 5 | var pi = 3.142; 6 | 7 | var sub = function(a,b){ 8 | return `The value is ${a-b}`; 9 | } 10 | 11 | module.exports.adder = adder; 12 | 13 | module.exports.sub = sub; 14 | 15 | module.exports.pi = pi; 16 | 17 | /* 18 | module.exports = { 19 | adder:adder, 20 | sub:sub, 21 | pi:pi 22 | } 23 | 24 | */ -------------------------------------------------------------------------------- /11. Node/notes.txt: -------------------------------------------------------------------------------- 1 | 1. Intro to node 2 | 3 | 2. Functional Expression 4 | 5 | 3. Modules and require 6 | 7 | 4. Creating server in node js only 8 | 9 | 5. whats more in node js 10 | - inbuilt module of node: 11 | http -> helps to create server 12 | os -> gives details of os 13 | fs -> helps to manage file system 14 | Reading, writing, creating and deleting files 15 | 16 | 17 | 18 | 6. npm - 19 | - npm == node package manager 20 | - It is a 3rd party package system means 21 | open source of library for node js which helps us to perform certain types of task 22 | We can find anything in it 23 | * site: https://www.npmjs.com 24 | 25 | - 1st initialize npm in particular project with `npm init` 26 | - Then install whatever package you are using 27 | 28 | 29 | 30 | 7. Express js - popular framework for building web applications in NodeJS 31 | 32 | i. Creating server in express js and nodemon 33 | ii. Express Middleware 34 | iii. GET Request (Discuss POST request in ejs module) 35 | iv. Express Routes 36 | - Routing is how you direct the user's requested URL to retrieve the appropriate 'page' 37 | or save the submitted form 38 | v. Express routes params 39 | vi. Render html page using routes 40 | vii. Serving static files in Express 41 | - To serve static files such as images, CSS files, and JavaScript, html files, 42 | use the express.static built-in middleware function in Express. 43 | 44 | 45 | 46 | 8. ES6 :- 47 | - ES6 is a set of rules for writing modern js (optional needs to learn vanilla js first) 48 | - Configure ES6 in project 49 | * add (type: module) in package.json file 50 | 51 | 52 | 9. gitignore 53 | - Specifies intentionally untracked files to ignore 54 | - It basically hides particular files from git 55 | - we dont push information sensative files to github that's why we use .gitignore 56 | - node modules folder have been generated which we don't push to github 57 | 58 | 59 | 10. Intro to template engine - EJS (next module) 60 | -------------------------------------------------------------------------------- /11. Node/reqRes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/11. Node/reqRes.png -------------------------------------------------------------------------------- /11. Node/serverWithExpress/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /11. Node/serverWithExpress/express.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | /* 4 | include express from 'express'; 5 | */ 6 | 7 | const app = express(); 8 | 9 | // serving static files from views folder 10 | app.use(express.static("views")); 11 | 12 | // adding get request 13 | app.get("/", (req, res) => { 14 | res.send("Hello This is my first express server"); 15 | }); 16 | 17 | // about us page 18 | app.get("/about", (req, res) => { 19 | res.send("Hello This is about us page"); 20 | }); 21 | 22 | // listening to port 23 | const port = 3000; 24 | app.listen(port, () => { 25 | console.log("Successfully listening on port " + port); 26 | }); 27 | 28 | //For contineous running of server : NODEMON 29 | -------------------------------------------------------------------------------- /11. Node/serverWithExpress/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | node js Server 8 | 9 | 10 |

Hello This is my first web server with nodejs

11 | 12 | 13 | -------------------------------------------------------------------------------- /11. Node/serverWithExpress/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server-with-express", 3 | "version": "1.0.0", 4 | "description": "Web server with express", 5 | "main": "express.js", 6 | "scripts": { 7 | "start": "node express.js" 8 | }, 9 | "author": "Shubham Dutta", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.17.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /11. Node/serverWithNode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | node js Server 8 | 9 | 10 |

Hello This is my first web server with nodejs

11 | 12 | 13 | -------------------------------------------------------------------------------- /11. Node/serverWithNode/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Protocols: It is a set of communication rules,that two sides agree to use when communicating 4 | like http/tcp 5 | 6 | Ports: A Program running on a computer can listen for requests sent to a particular port number 7 | eg: 172.0.0.1.3000 8 | 9 | localhost: 127.0.0.1 or localhost 10 | 11 | https://www.hostinger.in/tutorials/what-is-localhost 12 | 13 | */ 14 | 15 | const http = require("http"); 16 | const fs = require("fs"); 17 | const port = 5000; 18 | const host = "127.0.0.1"; 19 | 20 | // for creating server and read html file 21 | const server = http.createServer((req, res) => { 22 | if (req.url == "/" && req.method == "GET") { 23 | fs.readFile("index.html", (err, data) => { 24 | if (err) { 25 | res.writeHead(404, { "Content-Type": "text/plain" }); 26 | res.write("ERROR: FIle not found"); 27 | } else { 28 | res.writeHead(200, { "Content-Type": "text/html" }); //http status: 200 ,Type of content providing i.e html json etc 29 | res.write(data); 30 | } 31 | res.end(); 32 | }); 33 | } 34 | }); 35 | 36 | // for server listening on port 5000 37 | server.listen(port, host, (err) => { 38 | if (err) { 39 | console.log("Something went wrong ", err); 40 | } else { 41 | console.log("Server is successfully listening on port " + port); 42 | } 43 | }); 44 | -------------------------------------------------------------------------------- /12. EJS/intro/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /12. EJS/intro/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | //For accessing http post body 4 | var bodyParser = require("body-parser"); 5 | 6 | const app = express(); 7 | 8 | // we call app.use(...) before defining our route. 9 | // This will ensure that the body-parser will run before our route, 10 | // which ensures that our route can then access the parsed HTTP POST body. 11 | app.use(bodyParser.urlencoded({ extended: true })); 12 | 13 | //Telling express that we are using EJS 14 | app.set("view engine", "ejs"); 15 | 16 | // GET Route 17 | app.get("/", function (req, res) { 18 | res.render("Home"); 19 | }); 20 | 21 | // Route params 22 | /* 23 | app.get('/profile/:name', function(req , res){ 24 | res.send(`the requested id is: ${req.params.name}`); 25 | }) 26 | */ 27 | 28 | //For EJS 29 | app.get("/profile/:name", function (req, res) { 30 | data = { 31 | age: 27, 32 | job: "Developer", 33 | hobbies: ["eating", "fighting", "sleeping"], 34 | }; 35 | res.render("profile", { person: req.params.name, data: data }); // res.render() will look in a views folder for the view. 36 | }); 37 | 38 | //Post Request (for submitting contact form) 39 | app.post("/contact", function (req, res) { 40 | const { name } = req.body; 41 | console.log(name); 42 | res.render("contact"); 43 | }); 44 | 45 | // Get Route of contact Page 46 | app.get("/contact", function (req, res) { 47 | res.render("contact"); 48 | }); 49 | 50 | // listening ... 51 | app.listen(3000, function (req, res) { 52 | console.log("Server is running on port 3000"); 53 | }); 54 | -------------------------------------------------------------------------------- /12. EJS/intro/notes.txt: -------------------------------------------------------------------------------- 1 | * EJS:- 2 | - html integrated with js templating 3 | 4 | * Install EJS 5 | - npm install ejs 6 | 7 | - app.set("view engine", "ejs"); - Telling express that we are using EJS 8 | 9 | - Render ejs page with res.render('fileName', data(optional)) 10 | Pass data from server file to ejs file through 2nd parameter as an object 11 | 12 | - res.render() will look in a views folder for the view of html/ejs file. 13 | So create a view folder for your ejs files 14 | 15 | - Tags - Throgh these we can pass dynamic content through ejs file 16 | * <% %> 17 | - Control flow 18 | - Can use here loop, if-else statement etc. 19 | 20 | * <%= name %> 21 | - Outputs the value into the template 22 | - view any variable in ejs file 23 | 24 | * <%- %> 25 | - Outputs the unescaped value into the template 26 | - Used for include other templating page 27 | 28 | * <%# This is a comment %> 29 | - Comment tag, no execution, no output 30 | 31 | 32 | * body-parser 33 | - Node.js middleware for parsing incoming body request. 34 | 35 | - bodyparser.urlencoded({extended: true}) 36 | * Data in this encoding is formatted like a query string you'd see in a URL ( as key-value pair) 37 | * For example: name=Shubham&state=wb 38 | 39 | - bodyParser.json() - Parses JSON-formatted text for bodies 40 | - bodyParser.text() - Parses plain-text for bodies 41 | 42 | - we call app.use(...) before defining our route. 43 | This will ensure that the body-parser will run before our route, 44 | which ensures that our route can then access the parsed HTTP POST body. 45 | 46 | -------------------------------------------------------------------------------- /12. EJS/intro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "11.ejs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "body-parser": "^1.19.0", 8 | "ejs": "^3.1.6", 9 | "express": "^4.17.1", 10 | "nodemon": "^2.0.7" 11 | }, 12 | "devDependencies": {}, 13 | "scripts": { 14 | "start": "node index.js", 15 | "start-dev": "nodemon index.js" 16 | }, 17 | "author": "", 18 | "license": "ISC" 19 | } 20 | -------------------------------------------------------------------------------- /12. EJS/intro/todo.txt: -------------------------------------------------------------------------------- 1 | What is ejs 2 | 3 | What is view 4 | 5 | Pass dynamic content through ejs 6 | 7 | Post request 8 | 9 | body praser 10 | -------------------------------------------------------------------------------- /12. EJS/intro/views/Home.ejs: -------------------------------------------------------------------------------- 1 | <%- include('./partials/header.ejs') %> 2 | <%- include('./partials/nav.ejs') %> 3 | 4 |

This is Home Page

5 | 6 | <%- include('./partials/footer.ejs') %> 7 | -------------------------------------------------------------------------------- /12. EJS/intro/views/contact.ejs: -------------------------------------------------------------------------------- 1 | <%- include('./partials/header.ejs') %> <%- include('./partials/nav.ejs') %> 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | <%- include('./partials/footer.ejs') %> 10 | -------------------------------------------------------------------------------- /12. EJS/intro/views/partials/footer.ejs: -------------------------------------------------------------------------------- 1 |

© Copyright 2021 Shubham Dutta

2 | 3 | 4 | -------------------------------------------------------------------------------- /12. EJS/intro/views/partials/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | Profile 14 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /12. EJS/intro/views/partials/nav.ejs: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /12. EJS/intro/views/profile.ejs: -------------------------------------------------------------------------------- 1 | 5 | 6 | <%- include('./partials/header.ejs') %> 7 | <%- include('./partials/nav.ejs') %> 8 | 9 |

You are viewing the profile of <%= person %>

10 |

11 | Age: 12 | <%= data.age %> 13 |

14 |

15 | Job: 16 | <%= data.job %> 17 |

18 |

19 | Hobbies : 20 | 21 | <% data.hobbies.forEach(function(item){ %> 22 | <%= item %> 23 | <% }) %> 24 |

25 | 26 | <%- include('./partials/footer.ejs') %> 27 | -------------------------------------------------------------------------------- /13. Mongo/APIs.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/13. Mongo/APIs.pptx -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/config/db.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | var dotenv = require('dotenv'); 3 | 4 | dotenv.config(); 5 | 6 | mongoose.set("useCreateIndex", true); 7 | mongoose.set("useFindAndModify", false); 8 | 9 | module.exports = dbConnect = async () => { 10 | try { 11 | const connect = await mongoose.connect(process.env.DB_URI, { 12 | useUnifiedTopology: true, 13 | useNewUrlParser: true, 14 | useCreateIndex: true, 15 | }); 16 | 17 | console.log(`MongoDb Connected Successfully: ${connect.connection.host}`); 18 | } catch (error) { 19 | console.log(`Error while connecting to DB: ${error.message}`); 20 | process.exit(1); 21 | } 22 | }; 23 | 24 | -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/controllers/todo_conroller.js: -------------------------------------------------------------------------------- 1 | var bodyParser = require('body-parser'); 2 | var mongoose = require('mongoose'); 3 | var Todo = require('../model/todoSchema') 4 | 5 | 6 | /* 7 | // How to save something to DB 8 | var ItemOne = Todo({item:'buy flowers'}).save(function(err){ 9 | if(err) throw err; 10 | console.log('item saved'); 11 | }) 12 | 13 | */ 14 | 15 | var urlencodedParser = bodyParser.urlencoded({ extended: false }) 16 | 17 | module.exports = function(app){ 18 | 19 | app.get('/todo', function(req, res){ 20 | //get data from mongodb and pass it to the view 21 | Todo.find({},function(err , data){ 22 | if(err) 23 | throw err; 24 | res.render('todo', {todos:data}) 25 | }) 26 | // find({}) -> fetch all items in db find({item : 'buy flowers})--> Find specific item in db 27 | 28 | }); 29 | 30 | app.post('/todo', urlencodedParser, function (req, res) { 31 | //get data from the veiw and add it to mongodb 32 | 33 | var newTodo = Todo(req.body).save(function(err,data){ 34 | if (err) throw err; 35 | res.json(data); 36 | }); 37 | //data.push(req.body); 38 | 39 | }) 40 | 41 | app.delete('/todo/:item',function(req,res){ 42 | //delete the requested item from db 43 | 44 | Todo.find({item:req.params.item}).remove(function(err,data){ 45 | console.log(req.params.item); 46 | if(err) throw err; 47 | res.json(data); 48 | }); 49 | }); 50 | 51 | 52 | 53 | } 54 | -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var todoController = require('./controllers/todo_conroller'); 3 | var dbConnect = require('./config/db'); 4 | 5 | var app = express(); 6 | 7 | //set up template engine 8 | app.set('view engine', 'ejs'); 9 | 10 | //static files: https://expressjs.com/en/starter/static-files.html 11 | app.use(express.static('public')) 12 | 13 | //db connect 14 | dbConnect() 15 | 16 | //Fire controllers 17 | todoController(app) 18 | 19 | //listen to port 20 | app.listen(3000); 21 | console.log("Server started at port 3000"); 22 | 23 | 24 | //MVC structure: https://stackoverflow.com/questions/3623172/why-is-mvc-so-popular#:~:text=In%20MVC%2C%20the%20Controller%20and,0%20dependencies%20on%20the%20View. 25 | // alternative to it : https://blog.ircmaxell.com/2014/11/alternatives-to-mvc.html -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/model/todoSchema.js: -------------------------------------------------------------------------------- 1 | //Create a schema -- This is like a blueprint 2 | var mongoose = require('mongoose'); 3 | 4 | var todoSchema = new mongoose.Schema({ 5 | item : { 6 | type: String, 7 | required: true, 8 | minlength: 1, 9 | trim: true 10 | } 11 | }); 12 | 13 | //creating a model 14 | var Todo = mongoose.model('Todo', todoSchema); 15 | module.exports = Todo -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-list", 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": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.19.0", 13 | "dotenv": "^8.2.0", 14 | "ejs": "^3.1.6", 15 | "express": "^4.17.1", 16 | "mongoose": "^5.12.6" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/public/assets/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #0d1521; 3 | font-family: tahoma; 4 | color: #989898; 5 | } 6 | 7 | #todo-table{ 8 | position: relative; 9 | width: 95%; 10 | background: #090d13; 11 | margin: 0 auto; 12 | padding: 20px; 13 | box-sizing: border-box; 14 | } 15 | 16 | #todo-table form:after{ 17 | margin: 0; 18 | content: ''; 19 | display: block; 20 | clear: both; 21 | } 22 | 23 | input[type="text"]{ 24 | width: 70%; 25 | padding: 20px; 26 | background:#181c22; 27 | border: 0; 28 | float: left; 29 | font-size: 20px; 30 | color: #989898; 31 | } 32 | 33 | button{ 34 | padding: 20px 15px; 35 | width: 20%; 36 | float: right; 37 | background: #23282e; 38 | border: 0; 39 | box-sizing: border-box; 40 | color: #fff; 41 | cursor: pointer; 42 | font-size: 20px; 43 | } 44 | 45 | ul{ 46 | list-style-type: none; 47 | padding: 0; 48 | margin: 0; 49 | } 50 | 51 | li{ 52 | width: 100%; 53 | padding: 20px; 54 | box-sizing: border-box; 55 | font-family: arial; 56 | font-size: 20px; 57 | cursor: pointer; 58 | letter-spacing: 1px; 59 | } 60 | 61 | li:hover{ 62 | text-decoration: line-through; 63 | background: rgba(0,0,0,0.2); 64 | } 65 | 66 | h1{ 67 | margin-bottom: 1rem; 68 | color: #fff; 69 | text-align: center; 70 | 71 | } -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/public/assets/todo-list.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | $('form').on('submit', function(){ 4 | 5 | var item = $('form input'); 6 | var todo = {item: item.val()}; 7 | console.log(todo); 8 | $.ajax({ 9 | type: 'POST', 10 | url: '/todo', 11 | data: todo, 12 | success: function(data){ 13 | //do something with the data via front-end framework 14 | location.reload(); 15 | } 16 | 17 | }); 18 | 19 | return false; 20 | 21 | }); 22 | 23 | $('li').on('click', function(){ 24 | var item = $(this).text(); 25 | console.log(item); 26 | $.ajax({ 27 | type: 'DELETE', 28 | url: '/todo/' + item, 29 | success: function(data){ 30 | //do something with the data via front-end framework 31 | location.reload(); 32 | } 33 | }); 34 | }); 35 | 36 | }); 37 | -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/todo.txt: -------------------------------------------------------------------------------- 1 | added mongo using mongodb 2 | 3 | intro to .env -------------------------------------------------------------------------------- /13. Mongo/Todo-List-App/views/todo.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ToDo list 8 | 9 | 10 | 11 |
12 |

TODO

13 |
14 | 15 | 16 | 17 | 18 |
19 | 20 | 29 | 30 | 31 | 32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/config/db.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose" 2 | import dotenv from "dotenv" 3 | 4 | dotenv.config(); 5 | 6 | export const dbConnect = async () => { 7 | try { 8 | const connect = await mongoose.connect(process.env.DB_URI, { 9 | useUnifiedTopology: true, 10 | useNewUrlParser: true, 11 | useCreateIndex: true, 12 | }); 13 | 14 | console.log(`MongoDb Connected Successfully: ${connect.connection.host}`); 15 | } catch (error) { 16 | console.log(`Error while connecting to DB: ${error.message}`); 17 | process.exit(1); 18 | } 19 | }; 20 | 21 | -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/controllers/todo_conroller.js: -------------------------------------------------------------------------------- 1 | import Todo from "../model/todoSchema.js" 2 | 3 | export const getTodoController = async (req, res) => { 4 | //get data from mongodb and pass it to the view 5 | try { 6 | const todos = await Todo.find(); 7 | res.render('todo', { todos: todos }) 8 | } catch (error) { 9 | console.log(error); 10 | res.json(error) 11 | } 12 | } 13 | 14 | 15 | export const postTodoController = async (req, res) => { 16 | //post data to mongodb and pass it to the view 17 | const { item } = req.body; 18 | 19 | console.log(item); 20 | 21 | try { 22 | const todo = new Todo({ 23 | item: item 24 | }); 25 | await todo.save(); 26 | 27 | res.json(todo) 28 | } catch (error) { 29 | console.log(error); 30 | res.json(error) 31 | } 32 | } 33 | 34 | 35 | export const deleteTodoController = async (req, res) => { 36 | //get data from mongodb and pass it to the view 37 | const { id } = req.params; 38 | 39 | try { 40 | const todo = await Todo.deleteOne({ _id: id }) 41 | res.json(todo) 42 | } catch (error) { 43 | console.log(error); 44 | res.json(error) 45 | } 46 | } -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/index.js: -------------------------------------------------------------------------------- 1 | import express from "express" 2 | import { dbConnect } from "./config/db.js" 3 | import bodyParser from "body-parser"; 4 | import todoRouter from "./routes/todoRoute.js" 5 | 6 | var app = express(); 7 | 8 | app.use(bodyParser.urlencoded({ extended: false })) 9 | 10 | //set up template engine 11 | app.set('view engine', 'ejs'); 12 | 13 | //static files: https://expressjs.com/en/starter/static-files.html 14 | app.use(express.static('public')) 15 | 16 | //db connect 17 | dbConnect() 18 | 19 | // routes 20 | app.use("/todo", todoRouter); 21 | 22 | //listen to port 23 | app.listen(3000); 24 | console.log("Server started at port 3000"); 25 | 26 | 27 | //MVC structure: https://stackoverflow.com/questions/3623172/why-is-mvc-so-popular#:~:text=In%20MVC%2C%20the%20Controller%20and,0%20dependencies%20on%20the%20View. 28 | // alternative to it : https://blog.ircmaxell.com/2014/11/alternatives-to-mvc.html -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/model/todoSchema.js: -------------------------------------------------------------------------------- 1 | //Create a schema -- This is like a blueprint 2 | import mongoose from "mongoose" 3 | 4 | var todoSchema = new mongoose.Schema({ 5 | item: { 6 | type: String, 7 | required: true, 8 | minlength: 1, 9 | trim: true 10 | } 11 | }, { 12 | timestamps: true 13 | }); 14 | 15 | //creating a model 16 | var Todo = mongoose.model('Todo', todoSchema); 17 | export default Todo -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-list", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "type": "module", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node index.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "body-parser": "^1.19.0", 14 | "dotenv": "^8.6.0", 15 | "ejs": "^3.1.6", 16 | "express": "^4.17.1", 17 | "mongoose": "^5.12.6" 18 | }, 19 | "keywords": [], 20 | "description": "" 21 | } 22 | -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/public/assets/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #0d1521; 3 | font-family: tahoma; 4 | color: #989898; 5 | } 6 | 7 | #todo-table{ 8 | position: relative; 9 | width: 95%; 10 | background: #090d13; 11 | margin: 0 auto; 12 | padding: 20px; 13 | box-sizing: border-box; 14 | } 15 | 16 | #todo-table form:after{ 17 | margin: 0; 18 | content: ''; 19 | display: block; 20 | clear: both; 21 | } 22 | 23 | input[type="text"]{ 24 | width: 70%; 25 | padding: 20px; 26 | background:#181c22; 27 | border: 0; 28 | float: left; 29 | font-size: 20px; 30 | color: #989898; 31 | } 32 | 33 | button{ 34 | padding: 20px 15px; 35 | width: 20%; 36 | float: right; 37 | background: #23282e; 38 | border: 0; 39 | box-sizing: border-box; 40 | color: #fff; 41 | cursor: pointer; 42 | font-size: 20px; 43 | } 44 | 45 | ul{ 46 | list-style-type: none; 47 | padding: 0; 48 | margin: 0; 49 | } 50 | 51 | li{ 52 | width: 100%; 53 | padding: 20px; 54 | box-sizing: border-box; 55 | font-family: arial; 56 | font-size: 20px; 57 | cursor: pointer; 58 | letter-spacing: 1px; 59 | } 60 | 61 | li:hover{ 62 | text-decoration: line-through; 63 | background: rgba(0,0,0,0.2); 64 | } 65 | 66 | h1{ 67 | margin-bottom: 1rem; 68 | color: #fff; 69 | text-align: center; 70 | 71 | } -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/public/assets/todo-list.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | $('form').on('submit', function(){ 4 | 5 | var item = $('form input'); 6 | var todo = {item: item.val()}; 7 | console.log(todo); 8 | $.ajax({ 9 | type: 'POST', 10 | url: '/todo', 11 | data: todo, 12 | success: function(data){ 13 | //do something with the data via front-end framework 14 | location.reload(); 15 | } 16 | 17 | }); 18 | 19 | return false; 20 | 21 | }); 22 | 23 | $('li').on('click', function(){ 24 | var item = $(this).text(); 25 | console.log(item); 26 | $.ajax({ 27 | type: 'DELETE', 28 | url: '/todo/' + item, 29 | success: function(data){ 30 | //do something with the data via front-end framework 31 | location.reload(); 32 | } 33 | }); 34 | }); 35 | 36 | }); 37 | -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/routes/todoRoute.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import { deleteTodoController, getTodoController, postTodoController } from "../controllers/todo_conroller.js"; 3 | const router = express.Router(); 4 | 5 | router.get("/", getTodoController) 6 | router.post("/", postTodoController) 7 | router.delete("/:id", deleteTodoController) 8 | 9 | // With es5 format 10 | // module.exports = router; 11 | 12 | // with es6 format 13 | export default router -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/todo.txt: -------------------------------------------------------------------------------- 1 | added mongo using mongodb 2 | 3 | intro to .env -------------------------------------------------------------------------------- /13. Mongo/TodoListWithMongo/views/todo.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ToDo list 8 | 9 | 10 | 11 |
12 |

TODO

13 |
14 | 15 | 16 |
17 | 18 | 24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /13. Mongo/mogo.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/13. Mongo/mogo.pptx -------------------------------------------------------------------------------- /13. Mongo/todo.txt: -------------------------------------------------------------------------------- 1 | What is mongo 2 | 3 | connecting to atlas 4 | 5 | Crud operations 6 | 7 | adding database to our project 8 | 9 | APIs -------------------------------------------------------------------------------- /14. Project-Node-EJS/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .env -------------------------------------------------------------------------------- /14. Project-Node-EJS/app.js: -------------------------------------------------------------------------------- 1 | //jshint esversion:6 2 | const express = require("express"); 3 | const bodyParser = require("body-parser"); 4 | const dotenv = require("dotenv"); 5 | const mongoose = require("mongoose"); 6 | const Postmodel = require("./models/posts"); 7 | 8 | const homeStartingContent = 9 | "My journal is a flexible journal entry app. Write, save without wasting time."; 10 | 11 | dotenv.config(); 12 | 13 | const CONNECTION_URL = process.env.DB_URI; 14 | const PORT = process.env.PORT || 5000; 15 | 16 | mongoose 17 | .connect(CONNECTION_URL, { 18 | useNewUrlParser: true, 19 | useUnifiedTopology: true, 20 | }) 21 | .then(() => 22 | app.listen(PORT, () => console.log(`server running on port ${PORT}`)) 23 | ) 24 | .catch((error) => console.log(error.message)); 25 | 26 | mongoose.set("useFindAndModify", false); 27 | 28 | const app = express(); 29 | 30 | app.set("view engine", "ejs"); 31 | 32 | app.use(bodyParser.urlencoded({ limit: "30mb", extended: true })); 33 | app.use(bodyParser.json({ limit: "30mb", extended: true })); 34 | app.use(express.static("public")); 35 | 36 | let posts = []; 37 | 38 | app.get("/", async (req, res) => { 39 | try { 40 | const posts = await Postmodel.find(); 41 | res.render("home", { 42 | startingContent: homeStartingContent, 43 | posts: posts, 44 | }); 45 | } catch (error) { 46 | console.log(error); 47 | } 48 | }); 49 | 50 | app.get("/about", function (req, res) { 51 | res.render("about", { aboutContent: "hello" }); 52 | }); 53 | 54 | app.get("/contact", function (req, res) { 55 | res.render("contact", { contactContent: "contactContent" }); 56 | }); 57 | 58 | app.get("/compose", async (req, res) => { 59 | res.render("compose"); 60 | }); 61 | 62 | // app.post("/compose", async (req, res) => { 63 | // const post = req.body; 64 | // const newPost = new Postmodel({ 65 | // Title: req.body.title, 66 | // Message: req.body.message, 67 | // }); 68 | // console.log(newPost); 69 | // try { 70 | // await newPost.save(); 71 | // // res.json(newPost); 72 | // res.redirect("/"); 73 | // }); 74 | // } catch (error) { 75 | // console.log(error); 76 | // } 77 | // // res.redirect("/"); 78 | // }); 79 | -------------------------------------------------------------------------------- /14. Project-Node-EJS/config/db.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | var dotenv = require('dotenv'); 3 | 4 | dotenv.config(); 5 | 6 | mongoose.set("useCreateIndex", true); 7 | mongoose.set("useFindAndModify", false); 8 | 9 | module.exports = dbConnect = async () => { 10 | try { 11 | const connect = await mongoose.connect(process.env.DB_URI, { 12 | useUnifiedTopology: true, 13 | useNewUrlParser: true, 14 | useCreateIndex: true, 15 | }); 16 | 17 | console.log(`MongoDb Connected Successfully: ${connect.connection.host}`); 18 | } catch (error) { 19 | console.log(`Error while connecting to DB: ${error.message}`); 20 | process.exit(1); 21 | } 22 | }; 23 | 24 | -------------------------------------------------------------------------------- /14. Project-Node-EJS/controller/index.js: -------------------------------------------------------------------------------- 1 | const Postmodel = require("../models/posts"); 2 | 3 | 4 | module.exports = function(app){ 5 | 6 | app.get("/", async (req, res) => { 7 | 8 | try { 9 | const posts = await Postmodel.find(); 10 | res.render("home", { 11 | startingContent: homeStartingContent, 12 | posts: posts 13 | }); 14 | } catch (error) { 15 | console.log(error); 16 | } 17 | }); 18 | 19 | app.get("/about", function(req, res){ 20 | res.render("about", {aboutContent: aboutContent}); 21 | }); 22 | 23 | app.get("/contact", function(req, res){ 24 | res.render("contact", {contactContent: contactContent}); 25 | }); 26 | 27 | 28 | app.get("/compose", async (req, res) => { 29 | res.render("compose"); 30 | }); 31 | 32 | 33 | app.post("/compose", async (req, res)=>{ 34 | const newPost = new Postmodel({ 35 | Title: req.body.title, 36 | Message: req.body.message 37 | }) 38 | console.log(newPost); 39 | try { 40 | await newPost.save(); 41 | res.json(newPost); 42 | }catch (error){ 43 | console.log(error); 44 | } 45 | res.redirect("/"); 46 | }); 47 | 48 | 49 | } -------------------------------------------------------------------------------- /14. Project-Node-EJS/index.js: -------------------------------------------------------------------------------- 1 | ///Modularised code 2 | var express = require('express'); 3 | //Db connection 4 | var dbConnect = require('./config/db'); 5 | //import controller 6 | var controllers = require('./controller/index'); 7 | 8 | var app = express(); 9 | 10 | //set up template engine --remember to use it after app 11 | app.set('view engine', 'ejs'); 12 | 13 | //db connection 14 | dbConnect(); 15 | 16 | //Applying middleware 17 | app.use(bodyParser.urlencoded({ limit:"30mb",extended: true})); 18 | app.use(bodyParser.json({ limit:"30mb",extended: true})); 19 | app.use(express.static("public")); 20 | 21 | //Fire controllers 22 | controllers(app) 23 | 24 | 25 | // 26 | app.listen(5010,function(){ 27 | console.log("server is running on port 5010"); 28 | }); 29 | 30 | -------------------------------------------------------------------------------- /14. Project-Node-EJS/models/posts.js: -------------------------------------------------------------------------------- 1 | const mongoose = require('mongoose'); 2 | const Postschema = mongoose.Schema({ 3 | Title: { 4 | type: String, 5 | required: true 6 | }, 7 | Message: { 8 | type: String, 9 | required: true 10 | }, 11 | 12 | }); 13 | 14 | 15 | 16 | const Postmodel = mongoose.model("Postmodel", Postschema); 17 | 18 | module.exports = Postmodel; -------------------------------------------------------------------------------- /14. Project-Node-EJS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ejs-challenge", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "nodemon app.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "body-parser": "^1.18.3", 14 | "dotenv": "^8.2.0", 15 | "ejs": "^2.6.1", 16 | "express": "^4.16.3", 17 | "lodash": "^4.17.21", 18 | "mongoose": "^5.11.8" 19 | }, 20 | "devDependencies": { 21 | "nodemon": "^2.0.6" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /14. Project-Node-EJS/public/css/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | min-height: 100%; 3 | position: relative; 4 | } 5 | 6 | .container-fluid { 7 | padding-top: 70px; 8 | padding-bottom: 70px; 9 | } 10 | .navbar { 11 | padding-top: 15px; 12 | padding-bottom: 15px; 13 | border: 0; 14 | border-radius: 0; 15 | margin-bottom: 0; 16 | font-size: 15px; 17 | letter-spacing: 3px; 18 | } 19 | .navbar-nav li a:hover { 20 | color: #1791b6 !important; 21 | } 22 | 23 | .card{ 24 | box-shadow: 0 9px 12px rgba(61, 61, 61, 0.3); 25 | padding: 1rem; 26 | border-radius: 10px; 27 | margin-left: 0.6rem; 28 | margin-top: 30px; 29 | transition: background-color .5s, box-shadow .5s, margin-left .5s; 30 | } 31 | .card:hover{ 32 | margin-left: 0.9rem; 33 | background-color: #ffff; 34 | box-shadow: 0 21px 21px rgba(44, 44, 44, 0.3); 35 | transition: background-color .5s, box-shadow .5s, margin-left .9s; 36 | } 37 | 38 | .footer-padding { 39 | padding-bottom: 60px; 40 | } 41 | 42 | .footer { 43 | position: absolute; 44 | text-align: center; 45 | bottom: 0; 46 | width: 100%; 47 | height: 60px; 48 | background-color: #1abc9c; 49 | } 50 | 51 | .footer p { 52 | margin-top: 25px; 53 | font-size: 12px; 54 | color: rgba(209, 208, 208, 0.801); 55 | } 56 | -------------------------------------------------------------------------------- /14. Project-Node-EJS/views/compose.ejs: -------------------------------------------------------------------------------- 1 | 2 | <%- include("partials/header"); -%> 3 |

Compose

4 |
5 |
6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | <%- include("partials/footer"); -%> 15 | -------------------------------------------------------------------------------- /14. Project-Node-EJS/views/contact.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partials/header"); -%> 2 |

Contact

3 |

4 | 5 | 6 | 7 |

8 | <%- include("partials/footer"); -%> 9 | -------------------------------------------------------------------------------- /14. Project-Node-EJS/views/home.ejs: -------------------------------------------------------------------------------- 1 | 2 | <%- include("partials/header"); -%> 3 |

Home

4 |

<%= startingContent %>

5 | 6 | 7 | <% posts.forEach(function(post){ %> 8 |
9 |

<%=post.Title%>

10 | 11 | 12 |

<%=post.Message%>

13 | 14 | 15 |
16 | <% }) %> 17 | 18 | 19 | <%- include("partials/footer"); -%> 20 | -------------------------------------------------------------------------------- /14. Project-Node-EJS/views/partials/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |

Made with ♥ by Prasun Das

6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /14. Project-Node-EJS/views/partials/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My Journal 7 | 8 | 9 | 10 | 23 | 24 | 25 |
26 | -------------------------------------------------------------------------------- /15. React/React.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/15. React/React.pptx -------------------------------------------------------------------------------- /15. React/Redux.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/15. React/Redux.pptx -------------------------------------------------------------------------------- /15. React/Tutorial/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /15. React/Tutorial/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "bootstrap": "^4.5.2", 10 | "react": "^16.13.1", 11 | "react-dom": "^16.13.1", 12 | "react-router-dom": "^5.3.0", 13 | "react-scripts": "3.4.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /15. React/Tutorial/public/styles.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | /*Footer*/ 4 | 5 | #footer{ 6 | position: relative; 7 | height: auto; 8 | padding: 3%; 9 | background-image: linear-gradient(120deg ,#7e03f9, #e9195f); 10 | } 11 | 12 | 13 | .footer-icons{ 14 | display: flex; 15 | position: relative; 16 | left: 60%; 17 | top: 10%; 18 | padding: 2% 1% 2%; 19 | font-size: 1.5rem; 20 | text-align: center; 21 | } 22 | 23 | #footer img{ 24 | height: 70px; 25 | width: 70px; 26 | } 27 | 28 | .footer-icons-class:hover 29 | { 30 | text-shadow: 0.5px 0.5px rgb(150, 150, 150); 31 | } 32 | 33 | .copyright-text 34 | { 35 | font-family: 'Montserrat', sans-serif; 36 | font-weight: 600; 37 | line-height: 1.2; 38 | color: #8d8d8def; 39 | } 40 | 41 | strong{ 42 | color: white; 43 | font-size:20px; 44 | 45 | } 46 | 47 | 48 | .social-icons{ 49 | text-align: center; 50 | 51 | } 52 | #name{ 53 | color: white; 54 | font-size: 25px; 55 | font-weight: bold; 56 | } 57 | #subtitle{ 58 | color: azure; 59 | font-size: 15px; 60 | white-space: pre; 61 | } 62 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Home } from "./pages/Home"; 3 | import { About } from "./pages/About"; 4 | 5 | import CodeWithJSX from "./components/CodeWithJSX"; 6 | import CodeWithoutJsx from "./components/CodeWithoutJsx"; 7 | import Functionalcomponent from "./components/Functional component"; 8 | import ClassCompoenet from "./components/ClassCompoenet"; 9 | 10 | import { 11 | BrowserRouter as Router, 12 | Route, 13 | Switch, 14 | } from "react-router-dom"; 15 | import Parent from "./components/Props/Parent"; 16 | 17 | function App() { 18 | return ( 19 | <> 20 | {/* */} 21 | {/* */} 22 | {/* */} 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ); 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/components/Button/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Button = () => { 4 | return ( 5 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/components/ClassCompoenet.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | 4 | export default class ClassCompoenet extends Component { 5 | 6 | render() { 7 | return ( 8 |
9 |

Class Based Component

10 |
11 | ) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/components/CodeWithJSX.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function CodeWithJSX() { 4 | return ( 5 |
6 |

Hello world

7 |
8 | ) 9 | } 10 | 11 | export default CodeWithJSX 12 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/components/CodeWithoutJsx.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function CodeWithoutJsx() { 4 | return React.createElement( 5 | "div", 6 | null, 7 | React.createElement("h1", null, "Hello World") 8 | ); 9 | } 10 | 11 | export default CodeWithoutJsx; 12 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/components/Functional component.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Functionalcomponent() { 4 | return ( 5 |
6 |

Functional Component

7 |
8 | ) 9 | } 10 | 11 | export default Functionalcomponent 12 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/components/Props/Parent.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Profile from './Profile' 3 | 4 | // Prop Drilling 5 | // --> Pass data from parent element to child element 6 | 7 | // parent element 8 | function Parent() { 9 | const name = "SD"; 10 | const age = 18 11 | 12 | return ( 13 |
14 |

Hello This is Parent element

15 | 16 |
17 | ) 18 | } 19 | 20 | export default Parent 21 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/components/Props/Profile.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Profile({ name, age }) { 4 | 5 | return ( 6 |
7 | Hello , {name}, 8 | Your age is {age} 9 |
10 | ) 11 | } 12 | 13 | export default Profile 14 | 15 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/index.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | /*Footer*/ 4 | 5 | #footer{ 6 | position: relative; 7 | height: auto; 8 | padding: 5%; 9 | background-color: #000; 10 | } 11 | 12 | 13 | .footer-icons{ 14 | padding: 2% 1% 2%; 15 | font-size: 1.5rem; 16 | text-align: center; 17 | } 18 | 19 | #footer img{ 20 | height: 70px; 21 | width: 70px; 22 | } 23 | 24 | .footer-icons-class:hover 25 | { 26 | text-shadow: 0.5px 0.5px rgb(150, 150, 150); 27 | } 28 | 29 | .copyright-text 30 | { 31 | font-family: 'Montserrat', sans-serif; 32 | font-weight: 600; 33 | line-height: 1.2; 34 | color: #8d8d8def; 35 | } 36 | 37 | strong{ 38 | color: white; 39 | font-size:16px; 40 | 41 | } 42 | 43 | 44 | .social-icons{ 45 | text-align: center; 46 | 47 | } 48 | #name{ 49 | color: white; 50 | font-size: 25px; 51 | font-weight: bold; 52 | } 53 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import "./index.css" 5 | 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | -------------------------------------------------------------------------------- /15. React/Tutorial/src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const About = () => { 4 | return ( 5 | <> 6 |

About Page

7 | 8 | ) 9 | } 10 | 11 | // React Fragments 12 | // <> -------------------------------------------------------------------------------- /15. React/Tutorial/src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from '../components/Button/Button' 3 | 4 | export const Home = () => { 5 | return ( 6 | <> 7 |

Home Page

8 | 34 |
35 |
36 | 37 | 38 |
39 |

Age: {{age}}

40 |
41 | 42 | 43 | 47 |
48 | 49 | 50 |
Showing Age...
51 | 52 |
53 |
54 | 55 | 56 |
57 | mouseover (enter) 58 |
59 |
mouseleave
60 |
double click me
61 |
62 | position {{ x }} {{ y }} 63 |
64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /16. Vue/Basics-cdn/intro/Basics2/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/16. Vue/Basics-cdn/intro/Basics2/assets/1.jpg -------------------------------------------------------------------------------- /16. Vue/Basics-cdn/intro/Basics2/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/16. Vue/Basics-cdn/intro/Basics2/assets/2.jpg -------------------------------------------------------------------------------- /16. Vue/Basics-cdn/intro/Basics2/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/16. Vue/Basics-cdn/intro/Basics2/assets/3.jpg -------------------------------------------------------------------------------- /16. Vue/Basics-cdn/intro/Basics2/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue 6 | 7 | 8 | 9 |

My Book Store

10 | 11 |
12 | 13 |
14 | 27 |
28 |
29 | 30 | 31 |

My Favourite Books

32 |
  • 33 | 34 |

    {{ favBook.title }}

    35 |

    {{ favBook.author }}

    36 |
    • 37 |
    38 |
    39 |

    Click the button below to show books

    40 |
    41 | 42 | 43 | 47 |
    48 |
    49 | 50 | 51 | Connect with me on github 52 |
    53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /16. Vue/Basics-cdn/intro/Basics2/index2.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | data() { 3 | return { 4 | url: "https://github.com/Shubhamdutta2000/", 5 | showBooks: true, 6 | books: [ 7 | { 8 | title: "name of the wind", 9 | author: "patrick rothfuss", 10 | img: "./assets/1.jpg", 11 | isFav: true, 12 | }, 13 | { 14 | title: "the way of kings", 15 | author: "brandon sanderson", 16 | img: "./assets/2.jpg", 17 | isFav: false, 18 | }, 19 | { 20 | title: "the final empire", 21 | author: "brandon sanderson", 22 | img: "./assets/3.jpg", 23 | isFav: true, 24 | }, 25 | ], 26 | }; 27 | }, 28 | methods: { 29 | toggleShowBooks() { 30 | this.showBooks = !this.showBooks; 31 | }, 32 | 33 | // for toggling fav (onclick style changes of each list) 34 | toggleFav(book) { 35 | book.isFav = !book.isFav; 36 | }, 37 | }, 38 | 39 | // computed property is a way to define a data property inside our components that depends on other data thatwe have inside that component 40 | computed: { 41 | filteredBooks() { 42 | console.log(this.books.filter((book) => book.isFav)); 43 | return this.books.filter((book) => book.isFav); 44 | }, 45 | }, 46 | }); 47 | 48 | app.mount("#app"); 49 | -------------------------------------------------------------------------------- /16. Vue/Basics-cdn/intro/Basics2/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eee; 3 | max-width: 960px; 4 | margin: 20px auto; 5 | } 6 | p, 7 | h3, 8 | ul { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | li { 13 | list-style-type: none; 14 | background: #fff; 15 | margin: 20px auto; 16 | padding: 10px 20px; 17 | border-radius: 10px; 18 | display: flex; 19 | align-items: center; 20 | justify-content: space-between; 21 | } 22 | li.fav { 23 | background: #96a0ff; 24 | color: white; 25 | } 26 | 27 | button { 28 | cursor: pointer; 29 | display: inline-block; 30 | background: #333; 31 | color: white; 32 | font-size: 18px; 33 | border: 0; 34 | padding: 1rem 1.5rem; 35 | margin-top: 20px; 36 | border-radius: 10px; 37 | } 38 | -------------------------------------------------------------------------------- /16. Vue/Basics-cdn/randomUserGenerator/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | html, 8 | body { 9 | font-family: Arial, Helvetica, sans-serif; 10 | background-color: rgb(236, 236, 236); 11 | } 12 | 13 | #app { 14 | width: 400px; 15 | height: 100vh; 16 | margin: auto; 17 | text-align: center; 18 | display: flex; 19 | flex-direction: column; 20 | justify-content: center; 21 | align-items: center; 22 | } 23 | 24 | h1, 25 | h3 { 26 | margin-bottom: 1rem; 27 | font-weight: normal; 28 | } 29 | 30 | img { 31 | border-radius: 50%; 32 | border: 5px #333 solid; 33 | margin-bottom: 1rem; 34 | } 35 | 36 | .male { 37 | border-color: rgb(0, 140, 255); 38 | background-color: rgb(0, 140, 255); 39 | } 40 | 41 | .female { 42 | border-color: pink; 43 | background-color: pink; 44 | color: #333; 45 | } 46 | 47 | button { 48 | cursor: pointer; 49 | display: inline-block; 50 | background: #333; 51 | color: white; 52 | font-size: 18px; 53 | border: 0; 54 | padding: 1rem 1.5rem; 55 | } 56 | 57 | button:focus { 58 | outline: none; 59 | } 60 | 61 | button:hover { 62 | transform: scale(0.98); 63 | } 64 | -------------------------------------------------------------------------------- /16. Vue/Basics-cdn/randomUserGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Learn Vue with cdn 8 | 9 | 10 | 11 |
    12 | 13 |

    Name: {{firstName}} {{lastName}}

    14 |

    Email: {{email}}

    15 | 16 |
    17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /16. Vue/Basics-cdn/randomUserGenerator/index.js: -------------------------------------------------------------------------------- 1 | const app = Vue.createApp({ 2 | data() { 3 | return { 4 | firstName: "Shubham", 5 | lastName: "Dutta", 6 | email: "shubhamduttanovember@gmail.com", 7 | gender: "male", 8 | image: "https://avatars.githubusercontent.com/u/62681943?v=4", 9 | }; 10 | }, 11 | 12 | methods: { 13 | async getUser() { 14 | const res = await fetch("https://randomuser.me/api/"); 15 | const { results } = await res.json(); 16 | console.log(results); 17 | 18 | this.firstName = results[0].name.first; 19 | this.lastName = results[0].name.last; 20 | this.email = results[0].email; 21 | this.gender = results[0].gender; 22 | this.image = results[0].picture.large; 23 | }, 24 | }, 25 | }); 26 | 27 | app.mount("#app"); 28 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/README.md: -------------------------------------------------------------------------------- 1 | # task-tracer-vue 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "tasks": [ 3 | { 4 | "id": 1, 5 | "text": "Doctor Appointment", 6 | "day": "May 21, 2021", 7 | "reminder": true 8 | }, 9 | { 10 | "id": 2, 11 | "text": "Meeting for Project Demonstate", 12 | "day": "May 23, 2021", 13 | "reminder": true 14 | }, 15 | { 16 | "id": 97, 17 | "text": "Go For Shopping ", 18 | "day": "22 May 2021", 19 | "reminder": true 20 | } 21 | ] 22 | } -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "task-tracer-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "serve-backend": "json-server --watch db.json" 10 | }, 11 | "dependencies": { 12 | "core-js": "^3.6.5", 13 | "json-server": "^0.16.3", 14 | "serve": "^11.3.2", 15 | "vue": "^3.0.0", 16 | "vue-router": "^4.0.8" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "~4.5.0", 20 | "@vue/cli-plugin-eslint": "~4.5.0", 21 | "@vue/cli-service": "~4.5.0", 22 | "@vue/compiler-sfc": "^3.0.0", 23 | "babel-eslint": "^10.1.0", 24 | "eslint": "^6.7.2", 25 | "eslint-plugin-vue": "^7.0.0" 26 | }, 27 | "eslintConfig": { 28 | "root": true, 29 | "env": { 30 | "node": true 31 | }, 32 | "extends": [ 33 | "plugin:vue/vue3-essential", 34 | "eslint:recommended" 35 | ], 36 | "parserOptions": { 37 | "parser": "babel-eslint" 38 | }, 39 | "rules": {} 40 | }, 41 | "browserslist": [ 42 | "> 1%", 43 | "last 2 versions", 44 | "not dead" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/16. Vue/Basics-cli/Task-Tracer-vue/public/favicon.ico -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 16 | 17 | 18 | 25 |
    26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 43 | 44 | 87 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/16. Vue/Basics-cli/Task-Tracer-vue/src/assets/logo.png -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/components/AddTask.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 56 | 57 | 91 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/components/Button.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | 24 | 29 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 57 | 58 | 66 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/components/Task.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 28 | 29 | 50 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/components/Tasks.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 31 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router/index"; 4 | 5 | createApp(App) 6 | .use(router) 7 | .mount("#app"); 8 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/router/index.js: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from "vue-router"; 2 | 3 | import Home from "../views/Home.vue"; 4 | import About from "../views/About.vue"; 5 | 6 | const routes = [ 7 | { 8 | path: "/", 9 | name: "Home", 10 | component: Home, 11 | }, 12 | { 13 | path: "/about", 14 | name: "About", 15 | component: About, 16 | }, 17 | ]; 18 | 19 | const router = createRouter({ 20 | history: createWebHistory(process.env.BASE_URL), 21 | routes, 22 | }); 23 | 24 | export default router; 25 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/todo.txt: -------------------------------------------------------------------------------- 1 | 1. Structure of app 2 | 2. Header component 3 | 3. Component Props 4 | 4. Button Component 5 | 5. Events 6 | 6. Add initial Task Data with created() method 7 | 7. View Task Data in screen with v-for loop 8 | 8. Add Single task Component for viewing each task 9 | 9. Dynamic Classes for reminder of particular task 10 | 10. Delete Task: Emit event and event listener in App 11 | 11. Toggle Reminder Task: Emit event and event listener in App 12 | 12. Add Task: add another component, AddTask & v-model ( for form binding) 13 | 13. Toggle 'New Task' button onClick 14 | - add showForm data on App.vue 15 | - emit event 'btn-click' onClick Button 16 | - event listener of 'btn-click' on Header Component and emit another event 'toggle-add-task' 17 | - event listener of 'toggle-add-task' on App and toggle showForm value 18 | - Change in text and color of button dynamically in Header Component by passing props of showForm from App.vue 19 | 20 | 14. Build for Production and run build files with serve npm package 21 | - serve -d dist 22 | 15. Backend Setup with json-server (fake api) and implement CRUD operation 23 | 16. Implementing the Router 24 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 23 | -------------------------------------------------------------------------------- /16. Vue/Basics-cli/Task-Tracer-vue/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devServer: { 3 | proxy: { 4 | "^/api": { 5 | target: "http://localhost:3000", 6 | changeOrigin: true, 7 | logLevel: "debug", 8 | pathRewrite: { "^/api": "/" }, 9 | }, 10 | }, 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /16. Vue/Vue.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/16. Vue/Vue.pptx -------------------------------------------------------------------------------- /17. MERN Project/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Prasun Das 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /17. MERN Project/README.md: -------------------------------------------------------------------------------- 1 | # Note Taking App 2 | 3 | A Personal note webapp where user can write their own things uniquely 4 | 5 | ## Features 6 | 7 | - Users can create an account and log in. 8 | - User can view all entries to their note. 9 | - Users can view the contents of a note entry. 10 | - Users can add or modify an entry. 11 | - Users can delete an entry 12 | 13 | ## Additional Features 14 | 15 | - Forget Password 16 | - Email Verification 17 | 18 | ## Tech Stack 19 | 20 | - [Node.js](https://nodejs.org/) 21 | - [Express.js](https://expressjs.com/) 22 | - [MongoDb](https://www.mongodb.com/cloud/atlas/lp/try2-in?utm_source=google&utm_campaign=gs_apac_india_search_core_brand_atlas_desktop&utm_term=mongodb&utm_medium=cpc_paid_search&utm_ad=e&utm_ad_campaign_id=12212624347) 23 | - [React](https://reactjs.org/) 24 | - Redux 25 | - MUI 26 | 27 | ## API Endpoints 28 | 29 | | Endpoint | Functionality | 30 | | ------------------------- | -------------------- | 31 | | POST `/users/signup` | Register a user | 32 | | POST `/users/login` | Login a user | 33 | | GET `users/notes` | Fetch all entries | 34 | | GET `users/notes/` | Fetch a single entry | 35 | | POST `users/notes` | Create an entry | 36 | | PATCH `users/notes/` | Modify an entry | 37 | | DELETE `users/notes/` | Delete an entry | 38 | | POST `reset/pass` | For Password Reset | 39 | | DELETE `/email-verify` | verify email | 40 | 41 | ## Api 42 | 43 | For more details about the test cases and datas to pass please refer [here](https://github.com/Shubhamdutta2000/Web-Training/tree/main/17.%20MERN%20Project/server/http_tests) 44 | 45 | ## Build Setup 46 | 47 | ``` 48 | # Clone repo and cd into directory 49 | git clone https://github.com/Shubhamdutta2000/Web-Training.git 50 | ``` 51 | 52 | ``` 53 | # Change Direcrty 54 | cd client || cd server 55 | 56 | # Install dependencies 57 | npm install 58 | 59 | # Serve in development environment 60 | npm run dev 61 | 62 | # Build for production 63 | npm run build 64 | ``` 65 | 66 | ## License 67 | 68 | - MIT 69 | -------------------------------------------------------------------------------- /17. MERN Project/client/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /17. MERN Project/client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.11.4", 7 | "@material-ui/icons": "^4.11.2", 8 | "@testing-library/jest-dom": "^5.12.0", 9 | "@testing-library/react": "^11.2.6", 10 | "@testing-library/user-event": "^12.8.3", 11 | "axios": "^0.21.1", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-redux": "^7.2.4", 15 | "react-router-dom": "^5.2.0", 16 | "react-scripts": "4.0.3", 17 | "redux": "^4.1.0", 18 | "redux-devtools-extension": "^2.13.9", 19 | "redux-thunk": "^2.3.0", 20 | "web-vitals": "^1.1.1" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /17. MERN Project/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/17. MERN Project/client/public/favicon.ico -------------------------------------------------------------------------------- /17. MERN Project/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | Note Taking App 15 | 16 | 17 | 18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /17. MERN Project/client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/17. MERN Project/client/public/logo192.png -------------------------------------------------------------------------------- /17. MERN Project/client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubhamdutta2000/Web-Training/7089108e8d8231fb00dd2a7530f69dc87208360a/17. MERN Project/client/public/logo512.png -------------------------------------------------------------------------------- /17. MERN Project/client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /17. MERN Project/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /17. MERN Project/client/src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom"; 2 | import { useSelector } from "react-redux"; 3 | 4 | import { MuiThemeProvider, createMuiTheme } from "@material-ui/core"; 5 | import history from './history'; 6 | import ScrollToTop from "./scrolltotop"; 7 | import LoginScreen from "./screen/LoginScreen"; 8 | import SigninScreen from "./screen/SigninScreen"; 9 | import Navbar from "./component/Navbar"; 10 | import Footer from "./component/Footer"; 11 | import Home from "./screen/Home"; 12 | import NewNoteScreen from "./screen/NewNoteScreen"; 13 | import EditNoteScreen from "./screen/EditNoteScreen"; 14 | import Notfound from "./screen/Notfound"; 15 | import Bug from "./screen/Bug"; 16 | 17 | function App() { 18 | const { userInfo } = useSelector((state) => state.userLogin); 19 | const theme = createMuiTheme({ 20 | typography: { 21 | fontFamily: '"Segoe UI "', 22 | }, 23 | palette: { 24 | primary: { main: "rgb(38 98 137)" }, 25 | secondary: { main: "#fffafa" }, 26 | }, 27 | }); 28 | 29 | return ( 30 | 31 | 32 | 33 | 34 | 35 | {!userInfo && } 36 | 37 | 38 | 39 | <> 40 | 41 | 42 | 43 | 44 | 45 | 46 |