├── .gitignore ├── CSS-My-Site ├── CSS │ └── styles.css ├── favicon.ico ├── images │ ├── Parv.jpg │ ├── angela.png │ ├── chillies.png │ ├── cloud.png │ ├── computer.png │ └── mountain.png └── index.html ├── Daily-Journal ├── app.js ├── package-lock.json ├── package.json ├── public │ └── css │ │ └── styles.css └── views │ ├── about.ejs │ ├── compose.ejs │ ├── contact.ejs │ ├── home.ejs │ ├── partials │ ├── footer.ejs │ └── header.ejs │ └── post.ejs ├── Dicee-Challenge ├── dicee.html ├── images │ ├── dice1.png │ ├── dice2.png │ ├── dice3.png │ ├── dice4.png │ ├── dice5.png │ └── dice6.png ├── index.js └── styles.css ├── Drum-Kit ├── images │ ├── crash.png │ ├── kick.png │ ├── snare.png │ ├── tom1.png │ ├── tom2.png │ ├── tom3.png │ └── tom4.png ├── index.html ├── index.js ├── sounds │ ├── crash.mp3 │ ├── kick-bass.mp3 │ ├── snare.mp3 │ ├── tom-1.mp3 │ ├── tom-2.mp3 │ ├── tom-3.mp3 │ └── tom-4.mp3 └── styles.css ├── Git-Cheatsheet.pdf ├── Newsletter-signup ├── Procfile ├── app.js ├── failure.html ├── package-lock.json ├── package.json ├── public │ ├── css │ │ └── signin.css │ └── images │ │ └── icon.png ├── signup.html └── success.html ├── Practice ├── Calculator │ ├── bmiCalculator.html │ ├── calculator.js │ ├── index.html │ ├── package-lock.json │ └── package.json ├── DOM │ ├── index.html │ ├── index.js │ └── styles.css ├── Fruits-Project │ ├── app.js │ ├── package-lock.json │ └── package.json ├── HTML-Personal-Sites │ ├── Contact.html │ ├── Hobbies.html │ ├── Parv.jpg │ ├── index.html │ └── mainCss.css ├── JQuery │ ├── index.html │ ├── index.js │ └── styles.css ├── TodoList-V1 │ ├── Procfile │ ├── app.js │ ├── date.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── css │ │ │ └── styles.css │ └── views │ │ ├── about.ejs │ │ ├── footer.ejs │ │ ├── header.ejs │ │ └── list.ejs ├── my-express-server │ ├── package-lock.json │ ├── package.json │ └── server.js └── weather-project │ ├── app.js │ ├── index.html │ ├── package-lock.json │ └── package.json ├── README.md ├── React ├── changing-complex-state-practice │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ └── App.jsx │ │ └── index.js ├── changing-complex-state │ ├── .codesandbox │ │ └── workspace.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ └── App.jsx │ │ └── index.js ├── conditional-rendering-practice │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ └── Form.jsx │ │ └── index.js ├── conditional-rendering │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ ├── Input.jsx │ │ └── Login.jsx │ │ └── index.js ├── es6-arrow-functions │ ├── .codesandbox │ │ └── workspace.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ └── Entry.jsx │ │ ├── emojipedia.js │ │ └── index.js ├── es6-destructuring │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── data.js │ │ ├── index.js │ │ └── practice.js ├── es6-spread-operator-practice │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ └── App.jsx │ │ └── index.js ├── es6-spread-operator │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ └── App.jsx │ │ └── index.js ├── event-handling-in-react │ ├── .codesandbox │ │ └── workspace.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ └── App.jsx │ │ └── index.js ├── keeper-app-part-1 │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ ├── Footer.jsx │ │ ├── Header.jsx │ │ └── Note.jsx │ │ └── index.js ├── keeper-app-part-2 │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.js │ │ ├── Footer.js │ │ ├── Header.js │ │ └── Note.js │ │ ├── index.js │ │ └── notes.js ├── keeper-part-3 │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ ├── CreateArea.jsx │ │ ├── Footer.jsx │ │ ├── Header.jsx │ │ └── Note.jsx │ │ └── index.js ├── managing-a-component-tree-practice │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ ├── InputArea.jsx │ │ └── ToDoItem.jsx │ │ └── index.js ├── managing-a-component-tree │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ └── TodoItem.jsx │ │ └── index.js ├── map-filter-reduce │ ├── .codesandbox │ │ └── workspace.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── emojipedia.js │ │ └── index.js ├── mapping-components-practice │ ├── .codesandbox │ │ └── workspace.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ └── Entry.jsx │ │ ├── emojipedia.js │ │ └── index.js ├── mapping-components │ ├── .codesandbox │ │ └── workspace.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ ├── Avatar.jsx │ │ ├── Card.jsx │ │ └── Detail.jsx │ │ ├── contacts.js │ │ └── index.js ├── react-devtools │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ ├── App.jsx │ │ ├── Avatar.jsx │ │ └── Card.jsx │ │ ├── contacts.js │ │ └── index.js ├── react-forms │ ├── .codesandbox │ │ └── workspace.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ └── App.jsx │ │ └── index.js ├── react-props-practice │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ └── App.jsx │ │ ├── contacts.js │ │ └── index.js ├── react-props │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ └── index.js ├── usestate-hook-practice │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ └── App.jsx │ │ └── index.js ├── usestate-hook │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── src │ │ ├── components │ │ └── App.jsx │ │ └── index.js └── using-pre-built-react-components │ ├── build │ ├── asset-manifest.json │ ├── index.html │ ├── precache-manifest.cfbc72f77b74b32112506c007450f0a0.js │ ├── service-worker.js │ ├── static │ │ └── js │ │ │ ├── 2.0f60d888.chunk.js │ │ │ ├── 2.0f60d888.chunk.js.LICENSE.txt │ │ │ ├── 2.0f60d888.chunk.js.map │ │ │ ├── main.3625d365.chunk.js │ │ │ ├── main.3625d365.chunk.js.map │ │ │ ├── runtime-main.342c7561.js │ │ │ └── runtime-main.342c7561.js.map │ └── styles.css │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── index.html │ └── styles.css │ └── src │ ├── components │ ├── App.jsx │ ├── CreateArea.jsx │ ├── Footer.jsx │ ├── Header.jsx │ └── Note.jsx │ └── index.js ├── Secrets ├── app.js ├── package-lock.json ├── package.json ├── public │ └── css │ │ ├── bootstrap-social.css │ │ └── styles.css └── views │ ├── home.ejs │ ├── login.ejs │ ├── partials │ ├── footer.ejs │ └── header.ejs │ ├── register.ejs │ ├── secrets.ejs │ └── submit.ejs ├── Simon-Game ├── Simon-Game.html ├── game.js ├── sounds │ ├── blue.mp3 │ ├── green.mp3 │ ├── red.mp3 │ ├── wrong.mp3 │ └── yellow.mp3 └── styles.css ├── TinDog ├── css │ └── styles.css ├── favicon.ico ├── images │ ├── TechCrunch.png │ ├── bizinsider.png │ ├── dog-img.jpg │ ├── iphone6.png │ ├── lady-img.jpg │ ├── mashable.png │ └── tnw.png └── index.html ├── TodoList-V2 ├── .gitignore ├── Procfile ├── app.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── css │ │ └── styles.css └── views │ ├── about.ejs │ ├── footer.ejs │ ├── header.ejs │ └── list.ejs ├── Wiki-API ├── app.js ├── package-lock.json └── package.json └── atlassian-git-cheatsheet.pdf /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Web-development Playlist.m3u 3 | temp/ 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | lerna-debug.log* 11 | 12 | # Diagnostic reports (https://nodejs.org/api/report.html) 13 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 14 | 15 | # Runtime data 16 | pids 17 | *.pid 18 | *.seed 19 | *.pid.lock 20 | 21 | # Directory for instrumented libs generated by jscoverage/JSCover 22 | lib-cov 23 | 24 | # Coverage directory used by tools like istanbul 25 | coverage 26 | *.lcov 27 | 28 | # nyc test coverage 29 | .nyc_output 30 | 31 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 32 | .grunt 33 | 34 | # Bower dependency directory (https://bower.io/) 35 | bower_components 36 | 37 | # node-waf configuration 38 | .lock-wscript 39 | 40 | # Compiled binary addons (https://nodejs.org/api/addons.html) 41 | build/Release 42 | 43 | # Dependency directories 44 | node_modules/ 45 | jspm_packages/ 46 | 47 | # Snowpack dependency directory (https://snowpack.dev/) 48 | web_modules/ 49 | 50 | # TypeScript cache 51 | *.tsbuildinfo 52 | 53 | # Optional npm cache directory 54 | .npm 55 | 56 | # Optional eslint cache 57 | .eslintcache 58 | 59 | # Microbundle cache 60 | .rpt2_cache/ 61 | .rts2_cache_cjs/ 62 | .rts2_cache_es/ 63 | .rts2_cache_umd/ 64 | 65 | # Optional REPL history 66 | .node_repl_history 67 | 68 | # Output of 'npm pack' 69 | *.tgz 70 | 71 | # Yarn Integrity file 72 | .yarn-integrity 73 | 74 | # dotenv environment variables file 75 | .env 76 | .env.test 77 | 78 | # parcel-bundler cache (https://parceljs.org/) 79 | .cache 80 | .parcel-cache 81 | 82 | # Next.js build output 83 | .next 84 | out 85 | 86 | # Nuxt.js build / generate output 87 | .nuxt 88 | dist 89 | 90 | # Gatsby files 91 | .cache/ 92 | # Comment in the public line in if your project uses Gatsby and not Next.js 93 | # https://nextjs.org/blog/next-9-1#public-directory-support 94 | # public 95 | 96 | # vuepress build output 97 | .vuepress/dist 98 | 99 | # Serverless directories 100 | .serverless/ 101 | 102 | # FuseBox cache 103 | .fusebox/ 104 | 105 | # DynamoDB Local files 106 | .dynamodb/ 107 | 108 | # TernJS port file 109 | .tern-port 110 | 111 | # Stores VSCode versions used for testing VSCode extensions 112 | .vscode-test 113 | 114 | # yarn v2 115 | 116 | .yarn/cache 117 | .yarn/unplugged 118 | .yarn/build-state.yml 119 | .pnp.* -------------------------------------------------------------------------------- /CSS-My-Site/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/CSS-My-Site/favicon.ico -------------------------------------------------------------------------------- /CSS-My-Site/images/Parv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/CSS-My-Site/images/Parv.jpg -------------------------------------------------------------------------------- /CSS-My-Site/images/angela.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/CSS-My-Site/images/angela.png -------------------------------------------------------------------------------- /CSS-My-Site/images/chillies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/CSS-My-Site/images/chillies.png -------------------------------------------------------------------------------- /CSS-My-Site/images/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/CSS-My-Site/images/cloud.png -------------------------------------------------------------------------------- /CSS-My-Site/images/computer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/CSS-My-Site/images/computer.png -------------------------------------------------------------------------------- /CSS-My-Site/images/mountain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/CSS-My-Site/images/mountain.png -------------------------------------------------------------------------------- /CSS-My-Site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Parv Garg 8 | 9 | 10 | 12 | 13 | 14 | 15 |
16 | cloud image 17 |

I'm Parv

18 |

a Programmer

19 | cloud image 20 | mountain image 21 |
22 |
23 |
24 | Parv's Image 25 |

Hello.

26 |

I want to be a Blockchain Developer.
And I love to explore
new things :). 27 |

28 |
29 |
30 |
31 |

My Skills.

32 |
33 | Skill1 35 |

Blockchain

36 |

I have already learned to code smart contracts and know how to make a Dapp on Blockchain. Also, I 37 | have written two chapter related to blockchain.

38 |
39 |
40 | Skill2 42 |

Web Development

43 |

I have good idea of HTML-CSS, JavaScript, Node.JS andd React Framework.

44 |
45 |
46 |
47 |
48 |

Get In Touch

49 |

For any queries please contact me

50 | CONTACT ME 51 |
52 |
53 | 54 | 55 |
56 | LinkedIn 57 | Twitter 58 | Website 59 |

© 2018 Parv Garg.

60 |
61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /Daily-Journal/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ejs-challenge", 3 | "version": "1.0.0", 4 | "main": "app.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "dependencies": { 11 | "body-parser": "^1.19.0", 12 | "ejs": "^2.7.4", 13 | "express": "^4.17.1", 14 | "lodash": "^4.17.15", 15 | "mongoose": "^5.9.10" 16 | }, 17 | "devDependencies": {}, 18 | "keywords": [], 19 | "description": "" 20 | } 21 | -------------------------------------------------------------------------------- /Daily-Journal/public/css/styles.css: -------------------------------------------------------------------------------- 1 | .container-fluid { 2 | padding-top: 70px; 3 | padding-bottom: 70px; 4 | } 5 | 6 | .navbar { 7 | padding-top: 15px; 8 | padding-bottom: 15px; 9 | border: 0; 10 | border-radius: 0; 11 | margin-bottom: 0; 12 | font-size: 12px; 13 | letter-spacing: 5px; 14 | } 15 | 16 | .navbar-nav li a:hover { 17 | color: #1abc9c !important; 18 | } 19 | 20 | .footer-padding { 21 | padding-bottom: 60px; 22 | } 23 | 24 | .footer { 25 | position: absolute; 26 | text-align: center; 27 | bottom: 0; 28 | width: 100%; 29 | height: 60px; 30 | background-color: #1abc9c; 31 | } 32 | 33 | .footer p { 34 | margin-top: 25px; 35 | font-size: 12px; 36 | color: #fff; 37 | } -------------------------------------------------------------------------------- /Daily-Journal/views/about.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partials/header") -%> 2 | 3 |

About

4 |

<%= content %>

5 | 6 | <%- include("partials/footer") -%> -------------------------------------------------------------------------------- /Daily-Journal/views/compose.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partials/header") -%> 2 | 3 |

Compose

4 | 5 |
6 |
7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 | 15 |
16 | 17 | <%- include("partials/footer") -%> -------------------------------------------------------------------------------- /Daily-Journal/views/contact.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partials/header") -%> 2 | 3 |

Contact

4 |

<%= content %>

5 | 6 | <%- include("partials/footer") -%> -------------------------------------------------------------------------------- /Daily-Journal/views/home.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partials/header") -%> 2 | 3 |

Home

4 |

<%= content %>

5 | 6 | <% for(let i = 0; i < posts.length ; i++){ %> 7 |

<%= posts[i].title %>

8 |

<%= posts[i].content.substring(0,100) + ' ... '%>Read More

9 | 10 | <% } %> <%- include("partials/footer") -%> 11 | -------------------------------------------------------------------------------- /Daily-Journal/views/partials/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Daily-Journal/views/partials/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Daily Journal 7 | 8 | 9 | 10 | 23 | 24 | 25 |
26 | -------------------------------------------------------------------------------- /Daily-Journal/views/post.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partials/header") -%> 2 | 3 |

<%= title %>

4 |

<%= content %>

5 | 6 | <%- include("partials/footer") -%> 7 | -------------------------------------------------------------------------------- /Dicee-Challenge/dicee.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dicee 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Hit refresh to see the next roll 🎲

15 |

Refresh Me

16 | 17 |
18 |

Player 1

19 | 20 |
21 | 22 |
23 |

Player 2

24 | 25 |
26 | 27 |
28 | 29 | 30 | 31 | 32 | 35 | 36 | -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Dicee-Challenge/images/dice1.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Dicee-Challenge/images/dice2.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Dicee-Challenge/images/dice3.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Dicee-Challenge/images/dice4.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Dicee-Challenge/images/dice5.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Dicee-Challenge/images/dice6.png -------------------------------------------------------------------------------- /Dicee-Challenge/index.js: -------------------------------------------------------------------------------- 1 | var randomNumer1 = Math.floor(Math.random()*6)+1; 2 | var randomNumer2 = Math.floor(Math.random()*6)+1; 3 | // console.log(randomNumer); 4 | 5 | if (randomNumer1 > randomNumer2) { 6 | document.querySelector("h1").innerHTML = " Player 1 Wins"; 7 | document.querySelector("div.container").classList.add("container2"); 8 | 9 | }else if (randomNumer1 < randomNumer2){ 10 | document.querySelector("h1").innerHTML = "Player 2 Wins "; 11 | document.querySelector("div.container").classList.add("container2"); 12 | } else{ 13 | document.querySelector("h1").innerHTML = "Draw"; 14 | document.querySelector("div.container").classList.add("container2"); 15 | } 16 | 17 | document.querySelector(".img1").setAttribute("src", "images/dice"+randomNumer1+".png"); 18 | document.querySelector(".img2").setAttribute("src", "images/dice"+randomNumer2+".png"); -------------------------------------------------------------------------------- /Dicee-Challenge/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 70%; 3 | margin: auto; 4 | text-align: center; 5 | } 6 | 7 | .container2 { 8 | width: 90%; 9 | } 10 | 11 | .dice { 12 | text-align: center; 13 | display: inline-block; 14 | } 15 | 16 | body { 17 | background-color: #393E46; 18 | } 19 | 20 | h1 { 21 | margin: 30px; 22 | font-family: 'Lobster', cursive; 23 | text-shadow: 5px 0 #232931; 24 | font-size: 8rem; 25 | color: #4ECCA3; 26 | } 27 | 28 | p { 29 | font-size: 2rem; 30 | color: #4ECCA3; 31 | font-family: 'Indie Flower', cursive; 32 | } 33 | 34 | img { 35 | width: 80%; 36 | } 37 | 38 | footer { 39 | margin-top: 5%; 40 | color: #EEEEEE; 41 | text-align: center; 42 | font-family: 'Indie Flower', cursive; 43 | } -------------------------------------------------------------------------------- /Drum-Kit/images/crash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/images/crash.png -------------------------------------------------------------------------------- /Drum-Kit/images/kick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/images/kick.png -------------------------------------------------------------------------------- /Drum-Kit/images/snare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/images/snare.png -------------------------------------------------------------------------------- /Drum-Kit/images/tom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/images/tom1.png -------------------------------------------------------------------------------- /Drum-Kit/images/tom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/images/tom2.png -------------------------------------------------------------------------------- /Drum-Kit/images/tom3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/images/tom3.png -------------------------------------------------------------------------------- /Drum-Kit/images/tom4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/images/tom4.png -------------------------------------------------------------------------------- /Drum-Kit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Drum Kit 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Drum 🥁 Kit

14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Drum-Kit/index.js: -------------------------------------------------------------------------------- 1 | 2 | for (var i = 0; i < document.querySelectorAll(".drum").length; i++) { 3 | 4 | document.querySelectorAll(".drum")[i].addEventListener("click", function () { 5 | playSound(this.innerHTML); 6 | buttonAnimation(this.innerHTML); 7 | }); 8 | } 9 | 10 | document.addEventListener("keypress", function(e){ 11 | playSound(e.key); 12 | buttonAnimation(e.key); 13 | }); 14 | 15 | function playSound (str){ 16 | switch (str) { 17 | case "w": 18 | var audio = new Audio("sounds/tom-1.mp3") 19 | break; 20 | case "a": 21 | var audio = new Audio("sounds/tom-2.mp3") 22 | break; 23 | case "s": 24 | var audio = new Audio("sounds/tom-3.mp3") 25 | break; 26 | case "d": 27 | var audio = new Audio("sounds/tom-4.mp3") 28 | break; 29 | case "j": 30 | var audio = new Audio("sounds/kick-bass.mp3") 31 | break; 32 | case "k": 33 | var audio = new Audio("sounds/crash.mp3") 34 | break; 35 | case "l": 36 | var audio = new Audio("sounds/snare.mp3") 37 | break; 38 | 39 | default: 40 | break; 41 | } 42 | audio.play(); 43 | } 44 | 45 | function buttonAnimation(str) { 46 | document.querySelector("."+str).classList.add("pressed"); 47 | setTimeout(function (){ 48 | document.querySelector("."+str).classList.remove("pressed"); 49 | }, 100); 50 | } -------------------------------------------------------------------------------- /Drum-Kit/sounds/crash.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/sounds/crash.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/kick-bass.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/sounds/kick-bass.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/snare.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/sounds/snare.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/tom-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/sounds/tom-1.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/tom-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/sounds/tom-2.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/tom-3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/sounds/tom-3.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/tom-4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Drum-Kit/sounds/tom-4.mp3 -------------------------------------------------------------------------------- /Drum-Kit/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #283149; 4 | } 5 | 6 | h1 { 7 | font-size: 5rem; 8 | color: #DBEDF3; 9 | font-family: "Arvo", cursive; 10 | text-shadow: 3px 0 #DA0463; 11 | } 12 | 13 | footer { 14 | color: #DBEDF3; 15 | font-family: sans-serif; 16 | } 17 | 18 | .w { 19 | background-image: url(images/tom1.png); 20 | } 21 | 22 | .a { 23 | background-image: url(images/tom2.png); 24 | } 25 | 26 | .s { 27 | background-image: url(images/tom3.png); 28 | } 29 | 30 | .d { 31 | background-image: url(images/tom4.png); 32 | } 33 | 34 | .j { 35 | background-image: url(images/kick.png); 36 | } 37 | 38 | .k { 39 | background-image: url(images/crash.png); 40 | } 41 | 42 | .l { 43 | background-image: url(images/snare.png); 44 | } 45 | 46 | .set { 47 | margin: 10% auto; 48 | } 49 | 50 | .game-over { 51 | background-color: red; 52 | opacity: 0.8; 53 | } 54 | 55 | .pressed { 56 | box-shadow: 0 3px 4px 0 #DBEDF3; 57 | opacity: 0.5; 58 | } 59 | 60 | .red { 61 | color: red; 62 | } 63 | 64 | .drum { 65 | outline: none; 66 | border: 10px solid #404B69; 67 | font-size: 5rem; 68 | font-family: 'Arvo', cursive; 69 | line-height: 2; 70 | font-weight: 900; 71 | color: #DA0463; 72 | text-shadow: 3px 0 #DBEDF3; 73 | border-radius: 15px; 74 | display: inline-block; 75 | width: 150px; 76 | height: 150px; 77 | text-align: center; 78 | margin: 10px; 79 | background-color: white; 80 | } -------------------------------------------------------------------------------- /Git-Cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Git-Cheatsheet.pdf -------------------------------------------------------------------------------- /Newsletter-signup/Procfile: -------------------------------------------------------------------------------- 1 | web: node app.js -------------------------------------------------------------------------------- /Newsletter-signup/app.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const bodyParser = require("body-parser"); 3 | const request = require("request"); 4 | const https = require("https"); 5 | 6 | const app = express(); 7 | app.use(bodyParser.urlencoded({ extended: true })); 8 | 9 | app.use(express.static("public")) 10 | 11 | app.get("/", (req, res) => { 12 | res.sendFile(__dirname + "/signup.html"); 13 | }) 14 | 15 | app.post("/", (req, res) => { 16 | const dataShortcut = req.body; 17 | const fName = dataShortcut.fName; 18 | const sName = dataShortcut.sName; 19 | const email = dataShortcut.email; 20 | 21 | const userData = { 22 | members: [ 23 | { 24 | email_address: email, 25 | status: "subscribed", 26 | merge_feilds: { 27 | FNAME: fName, 28 | LNAME: sName 29 | } 30 | } 31 | ] 32 | } 33 | 34 | const jsonData = JSON.stringify(userData); 35 | 36 | const url = "https://us4.api.mailchimp.com/3.0/lists/9660118054"; 37 | 38 | const options = { 39 | method: "POST", 40 | auth: "parv3213:f007cceda3aae0c781f67fa2f14f6713-us4" 41 | } 42 | 43 | const request = https.request(url, options, (response) => { 44 | console.log(response.statusCode); 45 | if (response.statusCode === 200) { 46 | res.sendFile(__dirname + "/success.html"); 47 | } else { 48 | res.sendFile(__dirname + "/failure.html"); 49 | } 50 | 51 | 52 | response.on("data", (data) => { 53 | console.log(JSON.parse(data)); 54 | }); 55 | }); 56 | request.write(jsonData); 57 | request.end(); 58 | }); 59 | 60 | app.post("/failure", (req,res) => { 61 | res.redirect("/"); 62 | }); 63 | 64 | 65 | app.listen(process.env.PORT || 3000, () => { 66 | console.log("Server is running"); 67 | }); 68 | 69 | // f007cceda3aae0c781f67fa2f14f6713-us4 70 | // 9660118054 -------------------------------------------------------------------------------- /Newsletter-signup/failure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Failure 8 | 10 | 11 | 12 | 13 |
14 |
15 |

Uh oh!

16 |

There was a problem signing you up.

17 |
18 | 19 |
20 |
21 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /Newsletter-signup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "newsletter-signup", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.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 | "express": "^4.17.1", 14 | "request": "^2.88.2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Newsletter-signup/public/css/signin.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | display: -ms-flexbox; 8 | display: flex; 9 | -ms-flex-align: center; 10 | align-items: center; 11 | padding-top: 40px; 12 | padding-bottom: 40px; 13 | background-color: #f5f5f5; 14 | } 15 | 16 | .form-signin { 17 | width: 100%; 18 | max-width: 330px; 19 | padding: 15px; 20 | margin: auto; 21 | } 22 | .form-signin .checkbox { 23 | font-weight: 400; 24 | } 25 | .form-signin .form-control { 26 | position: relative; 27 | box-sizing: border-box; 28 | height: auto; 29 | padding: 10px; 30 | font-size: 16px; 31 | } 32 | .form-signin .form-control:focus { 33 | z-index: 2; 34 | } 35 | .top{ 36 | margin-bottom: -1px; 37 | border-bottom-right-radius: 0; 38 | border-bottom-left-radius: 0; 39 | } 40 | .middle{ 41 | border-bottom-right-radius: 0; 42 | border-bottom-left-radius: 0; 43 | border-top-left-radius: 0; 44 | border-top-right-radius: 0; 45 | } 46 | 47 | .buttom { 48 | margin-bottom: 10px; 49 | border-top-left-radius: 0; 50 | border-top-right-radius: 0; 51 | } -------------------------------------------------------------------------------- /Newsletter-signup/public/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Newsletter-signup/public/images/icon.png -------------------------------------------------------------------------------- /Newsletter-signup/success.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Success! 8 | 10 | 11 | 12 | 13 |
14 |
15 |

Awesome!

16 |

You are successfully subscribed to our newsletter

17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Practice/Calculator/bmiCalculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bmi-caculator 8 | 9 | 10 | 11 |

BMI Calculator

12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Practice/Calculator/calculator.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const bodyParser = require("body-parser"); 3 | 4 | const app = express(); 5 | app.use(bodyParser.urlencoded({ extended: true })); 6 | 7 | app.get("/", function (req, res) { 8 | res.sendFile(__dirname + "/index.html"); 9 | }); 10 | 11 | app.get("/bmiCalculator", function(req,res){ 12 | res.sendFile(__dirname+"/bmiCalculator.html"); 13 | }); 14 | 15 | app.post("/", function (req, res) { 16 | var num1 = Number(req.body.num1); 17 | var num2 = Number(req.body.num2); 18 | var result = num1 + num2; 19 | res.send("The Answer is: " + result); 20 | }); 21 | 22 | app.post("/bmiCalculator", (req,res) => { 23 | var weight = parseFloat(req.body.weight); 24 | var height = parseFloat(req.body.height); 25 | var bmi = weight / (height*height); 26 | console.log(weight); 27 | console.log(height); 28 | console.log(bmi); 29 | res.send("Your BMI is: "+bmi); 30 | }); 31 | 32 | app.listen(3000, function () { 33 | console.log("Local server running at port 3000"); 34 | }); -------------------------------------------------------------------------------- /Practice/Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Calculator

10 |
11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Practice/Calculator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calculator", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "calculator.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 | "express": "^4.17.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Practice/DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My Website 6 | 7 | 8 | 9 | 10 | 11 |

Hello

12 | 13 | 14 | 15 | 16 | 17 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Practice/DOM/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Practice/DOM/index.js -------------------------------------------------------------------------------- /Practice/DOM/styles.css: -------------------------------------------------------------------------------- 1 | .huge{ 2 | font-size: 10rem; 3 | } -------------------------------------------------------------------------------- /Practice/Fruits-Project/app.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | 3 | mongoose.connect("mongodb://localhost:27017/fruitsDB", { 4 | useNewUrlParser: true, 5 | useUnifiedTopology: true, 6 | }); 7 | 8 | const fruitSchema = new mongoose.Schema({ 9 | name: { 10 | type: String, 11 | required: [true, "Please check your data entry, no name specified"], 12 | }, 13 | rating: { 14 | type: Number, 15 | min: 1, 16 | max: 10, 17 | }, 18 | review: String, 19 | }); 20 | 21 | const Fruit = mongoose.model("Fruit", fruitSchema); 22 | 23 | const fruit = new Fruit({ 24 | name: "", 25 | rating: 7, 26 | review: "Pretty solid", 27 | }); 28 | 29 | //------Multiple Addition-------- 30 | // const kiwi = new Fruit({ 31 | // name: "kiwi", 32 | // rating: 10, 33 | // review: "Best Fruit", 34 | // }); 35 | 36 | const banana = new Fruit({ 37 | name: "Banana", 38 | rating: 8, 39 | review: "Umm IDK", 40 | }); 41 | 42 | // ------Saving Multiple Files-------- 43 | // Fruit.insertMany([kiwi,banana], (e) => { 44 | // if (e){ 45 | // console.log(e); 46 | // } else{ 47 | // console.log("Success"); 48 | // } 49 | // }); 50 | 51 | // ------Saving to DB-------- 52 | // fruit.save(); 53 | 54 | //------UPDATE-------- 55 | // Fruit.updateOne( 56 | // { 57 | // _id: "5ea36c6ff0468476cf400738", 58 | // }, 59 | // { 60 | // rating: 1, 61 | // review: "I don;t like it ", 62 | // }, 63 | // (e) => { 64 | // if (e) { 65 | // console.log(e); 66 | // } else { 67 | // console.log("Successfully changes"); 68 | // } 69 | // } 70 | // ); 71 | 72 | // ------Deleting in DB-------- 73 | // Fruit.deleteOne({ name: "Apple" }, (e) => { 74 | // if (e) { 75 | // console.log(e); 76 | // } else { 77 | // console.log("Success"); 78 | // } 79 | // }); 80 | 81 | // ------Finding in DB-------- 82 | Fruit.find((e, fruits) => { 83 | if (e) { 84 | console.log(e); 85 | } else { 86 | mongoose.connection.close(); 87 | fruits.forEach((fruit) => { 88 | console.log(fruit.name); 89 | }); 90 | } 91 | }); 92 | 93 | // ------Example with person Schema------- 94 | const personSchema = new mongoose.Schema({ 95 | name: String, 96 | age: Number, 97 | skill: String, 98 | favouriteFruit: fruitSchema, 99 | }); 100 | 101 | const Person = new mongoose.model("Person", personSchema); 102 | 103 | const person = new Person({ 104 | name: "Sanjana", 105 | age: 21, 106 | skill: "Programming", 107 | favouriteFruit: banana, 108 | }); 109 | 110 | // person.save(); 111 | 112 | // ------Multiple Delete-------- 113 | // Person.deleteMany({ name: "Parv" }, (e) => {}); 114 | -------------------------------------------------------------------------------- /Practice/Fruits-Project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fruits-project", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "mongoose": "^5.9.10" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Practice/HTML-Personal-Sites/Contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

11 | Contract: 12 |

13 |

Email: Parv3213@gmail.com

14 |

Link to: Profile

15 |
16 | 17 | 18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /Practice/HTML-Personal-Sites/Hobbies.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

Hobbies

11 |
    12 |
  1. Coding
    2. 13 |
  2. Youtubing
    3. 14 |
  3. Learning new things
    4. 15 |
16 | 17 | -------------------------------------------------------------------------------- /Practice/HTML-Personal-Sites/Parv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/Practice/HTML-Personal-Sites/Parv.jpg -------------------------------------------------------------------------------- /Practice/HTML-Personal-Sites/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Parv's Personal Site 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 |
Parv's Image 16 |

Parv Garg

17 |

Scholar at ICFAI Hyderabad

18 | Contract 19 |
20 |

I want to become a blockchain web developer.

21 |
24 |
25 |
26 |

Books and Heading

27 | 31 | Hobbies 32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
DateWork
2019Started working on Blockchain
2020Published papers and chapters on Blockchain
52 | 53 | 54 | -------------------------------------------------------------------------------- /Practice/HTML-Personal-Sites/mainCss.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------tag-selectors-------------------------------------*/ 2 | body { 3 | background-color: #eaf6f6; 4 | } 5 | 6 | hr { 7 | color: #DDDDDD; 8 | border-style: dotted; 9 | border-width: 5px 0 0 0; 10 | width: 10%; 11 | } 12 | 13 | h3 { 14 | color: #66b6b6; 15 | } 16 | 17 | h1 { 18 | color: #66b6b6; 19 | } 20 | 21 | a:hover{ 22 | color: red; 23 | } 24 | 25 | /*------------------------------------class-selectors-------------------------------------*/ 26 | 27 | .myImg{ 28 | border-radius: 100px; 29 | } 30 | 31 | 32 | 33 | 34 | /*------------------------------------id-selectors-------------------------------------*/ 35 | 36 | -------------------------------------------------------------------------------- /Practice/JQuery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JQuery 7 | 8 | 9 | 10 |

check

11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Practice/JQuery/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | $("h1").css("color","red"); 5 | 6 | $(document).on("keypress",function (e) { 7 | $("h1").text(e.key); 8 | }); -------------------------------------------------------------------------------- /Practice/JQuery/styles.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | font-size: 100px; 3 | color : yellow; 4 | } -------------------------------------------------------------------------------- /Practice/TodoList-V1/Procfile: -------------------------------------------------------------------------------- 1 | web: node app.js -------------------------------------------------------------------------------- /Practice/TodoList-V1/app.js: -------------------------------------------------------------------------------- 1 | const express = require("./node_modules/express"); 2 | const bodyParser = require("./node_modules/body-parser"); 3 | const date = require(__dirname + "/date.js"); 4 | 5 | const app = express(); 6 | 7 | app.set("view engine", "ejs"); 8 | 9 | app.use(express.static("public")); 10 | app.use(bodyParser.urlencoded({ extended: true })); 11 | 12 | const todos = ["Buy Food", "Cook Food", "Eat Food"]; 13 | var workItems = []; 14 | 15 | app.get("/", (req, res) => { 16 | res.render("list", { listTitle: date.getDate(), todos: todos }); 17 | }); 18 | 19 | app.post("/", (req, res) => { 20 | const newTodo = req.body.newTodo; 21 | 22 | if (req.body.list === "Work List") { 23 | workItems.push(newTodo); 24 | res.redirect("/work"); 25 | } else { 26 | todos.push(newTodo); 27 | res.redirect("/"); 28 | } 29 | }); 30 | 31 | app.get("/work", (req, res) => { 32 | res.render("list", { listTitle: "Work List", todos: workItems }); 33 | }); 34 | 35 | app.post("/work", (req, res) => { 36 | res.redirect("/work"); 37 | }); 38 | 39 | app.get("/about", (req, res) => { 40 | res.render("about"); 41 | }); 42 | 43 | app.listen(process.env.PORT || 3000, () => { 44 | console.log("Server running on port 3000"); 45 | }); 46 | -------------------------------------------------------------------------------- /Practice/TodoList-V1/date.js: -------------------------------------------------------------------------------- 1 | exports.getDate = () => { 2 | const options = { 3 | weekday: 'long', 4 | month: "long", 5 | day: "numeric" 6 | } 7 | const today = new Date(); 8 | return today.toLocaleDateString("en-US", options); 9 | } 10 | -------------------------------------------------------------------------------- /Practice/TodoList-V1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To Do List 7 | 8 | 9 |

10 | 11 | -------------------------------------------------------------------------------- /Practice/TodoList-V1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todilist-v1", 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 | "ejs": "^3.0.2", 14 | "express": "^4.17.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Practice/TodoList-V1/public/css/styles.css: -------------------------------------------------------------------------------- 1 | .body-color { 2 | /* background-color: #f9ed69; */ 3 | background-image: -webkit-linear-gradient(65deg,#eaffd0 50%,#f9ed69 50%); 4 | min-height: 1000px; 5 | } 6 | 7 | .center-align{ 8 | margin: 0 auto; 9 | text-align: center; 10 | } 11 | 12 | .paragraph-background{ 13 | background-color: #ffffd2; 14 | } 15 | 16 | .align-right { 17 | text-align: right; 18 | } 19 | 20 | .heading-div { 21 | text-align: center; 22 | /* width: 500px; */ 23 | margin: 100px auto; 24 | /* background-color: #024249; */ 25 | } 26 | 27 | .heading { 28 | display: inline-block; 29 | font-family: 'Comic Neue', cursive; 30 | width: 500px; 31 | padding: 1% 2%; 32 | background-color: #f38181; 33 | color: #95e1d3; 34 | border-radius: 10px; 35 | } 36 | 37 | .todo-div { 38 | width: 500px; 39 | margin: 0 auto; 40 | } 41 | 42 | .todo-background { 43 | background-color: #ffffd2; 44 | } 45 | 46 | .checkbox-strikethrough { 47 | margin: 0 5% 0 0; 48 | display: inline-block; 49 | background-color: #ffffd2; 50 | } 51 | 52 | 53 | .checkbox-strikethrough:checked+p.p-inline { 54 | text-decoration: line-through; 55 | } 56 | 57 | .p-inline { 58 | display: inline-block; 59 | font-family: 'Montserrat', sans-serif; 60 | color: #3ec1d3; 61 | font-size: 1.5rem; 62 | line-height: 2; 63 | margin: auto 0; 64 | } 65 | 66 | ::placeholder { 67 | text-align: center; 68 | color: #aa96da; 69 | font-family: 'Montserrat', sans-serif; 70 | } 71 | 72 | #border-fix-1 { 73 | border-bottom-left-radius: 0%; 74 | border-bottom-right-radius: 0%; 75 | } 76 | 77 | .border-fix-2 { 78 | border-top: none; 79 | } 80 | 81 | .form-background { 82 | background-color: #ffffd2; 83 | } 84 | 85 | .input-todo { 86 | background-color: #ffffd2; 87 | border: 0; 88 | text-align: center; 89 | height: 100%; 90 | width: 100%; 91 | } 92 | 93 | .add-button { 94 | padding: 10px 15px; 95 | text-align: center; 96 | background-color: #f38181; 97 | color: #95e1d3; 98 | border-radius: 100%; 99 | border-color: #ffffd2; 100 | } 101 | 102 | footer{ 103 | text-align: center; 104 | padding: 10% 0 5%; 105 | } -------------------------------------------------------------------------------- /Practice/TodoList-V1/views/about.ejs: -------------------------------------------------------------------------------- 1 | <%- include("header") -%> 2 | 3 |
4 |

About

5 | 6 |
7 | 8 |
9 | 10 |
11 | 12 |

Designed by Parv Garg.

13 |
Mail
14 | 15 |
16 |
17 | 18 | 19 | 20 | <%- include("footer") -%> -------------------------------------------------------------------------------- /Practice/TodoList-V1/views/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /Practice/TodoList-V1/views/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To Do List 8 | 9 | 10 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Practice/TodoList-V1/views/list.ejs: -------------------------------------------------------------------------------- 1 | <%- include("header") -%> 2 | 3 |
4 |

<%= listTitle %>

5 |
6 | 7 |
8 | 17 |
18 | 19 |
20 |
21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 | 31 | <%- include("footer") -%> -------------------------------------------------------------------------------- /Practice/my-express-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-express-server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.js" 9 | }, 10 | "author": "Parv", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.17.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Practice/my-express-server/server.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | const app = express(); 4 | 5 | app.get("/", function(req,res){ 6 | res.send("

Hello World

"); 7 | }); 8 | 9 | app.get("/contact", function(req,res) { 10 | res.send("contact me at parv3213@gmail.com"); 11 | }) 12 | 13 | app.get("/about", function(req,res) { 14 | res.send("My name is Parv, I love coding"); 15 | }) 16 | 17 | app.listen(3000, function() { 18 | console.log("Server started at port: 3000"); 19 | }); -------------------------------------------------------------------------------- /Practice/weather-project/app.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const https = require("https"); 3 | const bodyParser = require("body-parser"); 4 | 5 | const app = express(); 6 | app.use(bodyParser.urlencoded({extended: true})); 7 | 8 | app.get("/", (req, res) => { 9 | res.sendFile(__dirname+"/index.html"); 10 | }); 11 | 12 | app.post("/",(req,res) => { 13 | console.log(req.body); 14 | const cityName = req.body.cityName; 15 | 16 | const url = "https://api.openweathermap.org/data/2.5/weather?q="+cityName+"&units=metric&appid=cd67d84da7ad7a32c9596d86fc970618"; 17 | https.get(url, (response) => { 18 | response.on("data", (data) => { 19 | const parsedData = JSON.parse(data); 20 | const temp = parsedData.main.temp; 21 | const weatherDes = parsedData.weather[0].description; 22 | const icon = parsedData.weather[0].icon; 23 | res.write("

Weather in "+cityName+" is "+temp+" degree celsius

") 24 | res.write("

Description: "+weatherDes+"

"); 25 | res.write(""); 26 | res.send(); 27 | }); 28 | }); 29 | 30 | }); 31 | 32 | 33 | // const url = "https://api.openweathermap.org/data/2.5/weather?q=hyderabad&units=metric&appid=cd67d84da7ad7a32c9596d86fc970618"; 34 | 35 | // https.get(url, (response) => { 36 | // response.on("data", (data) => { 37 | // const parsedData = JSON.parse(data); 38 | // const temp = parsedData.main.temp; 39 | // const weatherDescription = parsedData.weather[0].description; 40 | 41 | // res.write("

The Weather in Hyderabad is "+temp+" degree celcius.


"+"

It is "+weatherDescription+" there.

") 42 | // res.write(""); 43 | // res.send(); 44 | 45 | // }); 46 | // }); 47 | 48 | 49 | 50 | app.listen(3000, () => { 51 | console.log("Server is running on port 3000"); 52 | }) -------------------------------------------------------------------------------- /Practice/weather-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather App 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Practice/weather-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weather-project", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.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 | "express": "^4.17.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web-Development 2 | 3 | ### Following Dr. Angela Yu. 4 | 5 | #### [React](https://github.com/parv3213/Web-development/tree/master/React) 6 | 7 | ->All the react related projects are in this folder 8 | 9 | ##### [⭐️Todo List (react)](https://parv3213.github.io/react-todo-list/) 10 | 11 | ->A simple Todo-List🔥 12 | ->Skills: React, HTML, CSS, Bootstrap 13 | 14 | ##### [⭐️Tindog Website](https://parv3213.github.io/Web-development/TinDog/index.html) 15 | 16 | ->A beautiful front-end similar to tinder🔥 17 | ->Skills: HTML, CSS, Bootstrap 18 | 19 | ##### [⭐️Dicee Chalange](https://parv3213.github.io/Web-development/Dicee-Challenge/dicee.html) 20 | 21 | ->Alternate for a coin toss 🎲 22 | ->Skills: HTML, CSS, JavaScript 23 | 24 | ##### [⭐️Drum-Kit](https://parv3213.github.io/Web-development/Drum-Kit/index.html) 25 | 26 | ->A simple drum-kit 🥁 27 | ->Skills: HTML, CSS, JavaScript 28 | 29 | ##### [⭐️Simon-Game](https://parv3213.github.io/Web-development/Simon-Game/Simon-Game.html) 30 | 31 | ->Simon-Game 🎮 32 | ->Skills: HTML, CSS, JavaScript, JQuery 33 | 34 | ##### [⭐️Newsletter-App](https://newsletter-app-parv.herokuapp.com/) 35 | 36 | ->Newsletter Subscribe using the MailChimp-API 📪 37 | ->Skills: HTML, CSS, Bootstrap, JavaScript, Express, APIs', Heroku 38 | 39 | ##### [⭐️Daily Journal](https://daily-journal-parv.herokuapp.com/) 40 | 41 | ->Journal for adding and reading articles 📒 42 | ->Skills: HTML, CSS, Bootstrap, JavaScript, Express, EJS, Mongoose, Heroku 43 | 44 | ##### [⭐️TodoList](https://todolist-parv.herokuapp.com/) 45 | 46 | ->A To-do list Application 📋 47 | ->Skills: HTML, CSS, Bootstrap, JavaScript, Express, EJS, Mongoose-Atlis, Heroku 48 | 49 | ##### [CSS-My-Site](https://parv3213.github.io/Web-development/CSS-My-Site/index.html) 50 | 51 | ->About me! 👤 52 | ->Skills: HTML, CSS 53 | 54 | ##### [HTML_PERSONAL_SITES](https://parv3213.github.io/Web-development/Practice/HTML-Personal-Sites/) 55 | 56 | ->My resume 📃 57 | ->Skills: HTML, Basic CSS 58 | -------------------------------------------------------------------------------- /React/changing-complex-state-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "changing-complex-state-practice", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } -------------------------------------------------------------------------------- /React/changing-complex-state-practice/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/changing-complex-state-practice/public/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-weight: 300; 6 | } 7 | 8 | body { 9 | font-family: "Source Sans Pro", sans-serif; 10 | color: white; 11 | font-weight: 300; 12 | background: #50a3a2; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .container { 18 | margin: 10% auto; 19 | padding: 80px 0; 20 | text-align: center; 21 | } 22 | 23 | .container h1 { 24 | font-size: 40px; 25 | font-weight: 200; 26 | } 27 | 28 | input { 29 | border: 1px solid rgba(252, 252, 252, 0.4); 30 | background-color: rgba(252, 252, 252, 0.2); 31 | width: 250px; 32 | border-radius: 3px; 33 | font-family: "Source Sans Pro", sans-serif; 34 | padding: 10px 15px; 35 | margin: 0 auto 10px auto; 36 | display: block; 37 | text-align: center; 38 | font-size: 18px; 39 | color: white; 40 | font-weight: 300; 41 | } 42 | 43 | button { 44 | appearance: none; 45 | outline: 0; 46 | background-color: white; 47 | border: 0; 48 | padding: 10px 15px; 49 | color: #50a3a2; 50 | border-radius: 3px; 51 | width: 250px; 52 | font-size: 18px; 53 | } 54 | -------------------------------------------------------------------------------- /React/changing-complex-state-practice/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | function App() { 4 | const [contact, setContact] = useState({ 5 | fName: "", 6 | lName: "", 7 | email: "", 8 | }); 9 | 10 | function handleChange(event) { 11 | const { name, value } = event.target; 12 | 13 | setContact((prevValue) => { 14 | if (name === "fName") { 15 | return { fName: value, lName: prevValue.lName, email: prevValue.email }; 16 | } else if (name === "lName") { 17 | return { fName: prevValue.fName, lName: value, email: prevValue.email }; 18 | } else { 19 | return { fName: prevValue.fName, lName: prevValue.lName, email: value }; 20 | } 21 | }); 22 | } 23 | 24 | return ( 25 |
26 |

27 | Hello {contact.fName} {contact.lName} 28 |

29 |

{contact.email}

30 |
31 | 32 | 33 | 34 | 35 |
36 |
37 | ); 38 | } 39 | 40 | export default App; 41 | -------------------------------------------------------------------------------- /React/changing-complex-state-practice/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | 7 | //CHALLENGE: Make the code in App.jsx work. 8 | //The final app should have a single contact 9 | //with fName, lName and email. 10 | 11 | //HINT: You'll need to apply the following things you learnt: 12 | //1. Using JS Objects with state. 13 | //2. Making use of previous state when changing state. 14 | //3. Working with forms in React. 15 | //4. Handing events 16 | -------------------------------------------------------------------------------- /React/changing-complex-state/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "preview": [ 3 | { 4 | "views": [ 5 | { 6 | "id": "codesandbox.browser" 7 | }, 8 | { 9 | "id": "codesandbox.tests" 10 | } 11 | ] 12 | }, 13 | { 14 | "views": [ 15 | { 16 | "id": "codesandbox.problems" 17 | }, 18 | { 19 | "id": "codesandbox.console" 20 | }, 21 | { 22 | "id": "codesandbox.react-devtools" 23 | } 24 | ] 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /React/changing-complex-state/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "changing-complex-state", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /React/changing-complex-state/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/changing-complex-state/public/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-weight: 300; 6 | } 7 | 8 | body { 9 | font-family: "Source Sans Pro", sans-serif; 10 | color: white; 11 | font-weight: 300; 12 | background: #50a3a2; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .container { 18 | margin: 10% auto; 19 | padding: 80px 0; 20 | text-align: center; 21 | } 22 | 23 | .container h1 { 24 | font-size: 40px; 25 | font-weight: 200; 26 | } 27 | 28 | input { 29 | border: 1px solid rgba(252, 252, 252, 0.4); 30 | background-color: rgba(252, 252, 252, 0.2); 31 | width: 250px; 32 | border-radius: 3px; 33 | font-family: "Source Sans Pro", sans-serif; 34 | padding: 10px 15px; 35 | margin: 0 auto 10px auto; 36 | display: block; 37 | text-align: center; 38 | font-size: 18px; 39 | color: white; 40 | font-weight: 300; 41 | } 42 | 43 | button { 44 | appearance: none; 45 | outline: 0; 46 | background-color: white; 47 | border: 0; 48 | padding: 10px 15px; 49 | color: #50a3a2; 50 | border-radius: 3px; 51 | width: 250px; 52 | font-size: 18px; 53 | } 54 | -------------------------------------------------------------------------------- /React/changing-complex-state/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | function App() { 4 | const [fullName, setFullName] = useState({ 5 | fName: "", 6 | lName: "", 7 | }); 8 | 9 | function handleChange(event) { 10 | const { value, name } = event.target; 11 | 12 | setFullName((prevValue) => { 13 | if (name === "fName") { 14 | return { fName: value, lName: prevValue.lName }; 15 | } else { 16 | return { fName: prevValue.fName, lName: value }; 17 | } 18 | }); 19 | } 20 | 21 | return ( 22 |
23 |

24 | Hello {fullName.fName} {fullName.lName} 25 |

26 |
27 | 28 | 29 | 30 |
31 |
32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /React/changing-complex-state/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | -------------------------------------------------------------------------------- /React/conditional-rendering-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "conditional-rendering-practice", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /React/conditional-rendering-practice/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/conditional-rendering-practice/public/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-weight: 300; 6 | } 7 | 8 | body { 9 | font-family: "Source Sans Pro", sans-serif; 10 | color: white; 11 | font-weight: 300; 12 | background: #50a3a2; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .container { 18 | margin: 10% auto; 19 | padding: 80px 0; 20 | text-align: center; 21 | } 22 | 23 | .container h1 { 24 | font-size: 40px; 25 | font-weight: 200; 26 | } 27 | 28 | form { 29 | padding: 20px 0; 30 | position: relative; 31 | } 32 | form input { 33 | border: 1px solid rgba(252, 252, 252, 0.4); 34 | background-color: rgba(252, 252, 252, 0.2); 35 | width: 250px; 36 | border-radius: 3px; 37 | font-family: "Source Sans Pro", sans-serif; 38 | padding: 10px 15px; 39 | margin: 0 auto 10px auto; 40 | display: block; 41 | text-align: center; 42 | font-size: 18px; 43 | color: white; 44 | font-weight: 300; 45 | } 46 | 47 | form button { 48 | appearance: none; 49 | outline: 0; 50 | background-color: white; 51 | border: 0; 52 | padding: 10px 15px; 53 | color: #50a3a2; 54 | border-radius: 3px; 55 | width: 250px; 56 | font-size: 18px; 57 | } 58 | -------------------------------------------------------------------------------- /React/conditional-rendering-practice/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Form from "./Form"; 3 | 4 | var userIsRegistered = false; 5 | 6 | function App() { 7 | return ( 8 |
9 |
10 |
11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /React/conditional-rendering-practice/src/components/Form.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Form(props) { 4 | return ( 5 | 6 | 7 | 8 | {!props.userIsRegistered && } 9 | 10 | 11 | ); 12 | } 13 | 14 | export default Form; 15 | -------------------------------------------------------------------------------- /React/conditional-rendering-practice/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | 7 | //Challenge: Without moving the userIsRegistered variable, 8 | //1. Show Login as the button text if userIsRegistered is true. 9 | //Show Register as the button text if userIsRegistered is false. 10 | //2. Only show the Confirm Password input if userIsRegistered is false. 11 | //Don't show it if userIsRegistered is true. 12 | -------------------------------------------------------------------------------- /React/conditional-rendering/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "conditional-rendering", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /React/conditional-rendering/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/conditional-rendering/public/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-weight: 300; 6 | } 7 | 8 | body { 9 | font-family: "Source Sans Pro", sans-serif; 10 | color: white; 11 | font-weight: 300; 12 | background: #50a3a2; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .container { 18 | margin: 10% auto; 19 | padding: 80px 0; 20 | text-align: center; 21 | } 22 | 23 | .container h1 { 24 | font-size: 40px; 25 | font-weight: 200; 26 | } 27 | 28 | form { 29 | padding: 20px 0; 30 | position: relative; 31 | } 32 | form input { 33 | border: 1px solid rgba(252, 252, 252, 0.4); 34 | background-color: rgba(252, 252, 252, 0.2); 35 | width: 250px; 36 | border-radius: 3px; 37 | font-family: "Source Sans Pro", sans-serif; 38 | padding: 10px 15px; 39 | margin: 0 auto 10px auto; 40 | display: block; 41 | text-align: center; 42 | font-size: 18px; 43 | color: white; 44 | font-weight: 300; 45 | } 46 | 47 | form button { 48 | appearance: none; 49 | outline: 0; 50 | background-color: white; 51 | border: 0; 52 | padding: 10px 15px; 53 | color: #50a3a2; 54 | border-radius: 3px; 55 | width: 250px; 56 | font-size: 18px; 57 | } 58 | -------------------------------------------------------------------------------- /React/conditional-rendering/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Login from "./Login"; 3 | 4 | var isLoggedIn = false; 5 | 6 | function App() { 7 | return
{isLoggedIn ?

Hello

: }
; 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /React/conditional-rendering/src/components/Input.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Input(props) { 4 | return ; 5 | } 6 | 7 | export default Input; 8 | -------------------------------------------------------------------------------- /React/conditional-rendering/src/components/Login.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Input from "./Input"; 3 | 4 | function Login() { 5 | return ( 6 |
7 | 8 | 9 | 10 |
11 | ); 12 | } 13 | 14 | export default Login; 15 | -------------------------------------------------------------------------------- /React/conditional-rendering/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | -------------------------------------------------------------------------------- /React/es6-arrow-functions/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "preview": [ 3 | { 4 | "views": [ 5 | { 6 | "id": "codesandbox.browser" 7 | }, 8 | { 9 | "id": "codesandbox.tests" 10 | } 11 | ] 12 | }, 13 | { 14 | "views": [ 15 | { 16 | "id": "codesandbox.problems" 17 | }, 18 | { 19 | "id": "codesandbox.console" 20 | }, 21 | { 22 | "id": "codesandbox.react-devtools" 23 | } 24 | ] 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /React/es6-arrow-functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es6-arrow-functions", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /React/es6-arrow-functions/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/es6-arrow-functions/public/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Montserrat", sans-serif; 3 | font-weight: 400; 4 | line-height: 1.666; 5 | background: #c0d2d4; 6 | color: #555; 7 | } 8 | 9 | h1 { 10 | font-weight: 900; 11 | font-size: 500%; 12 | text-align: center; 13 | margin-top: 4rem; 14 | color: #fff; 15 | line-height: 1.2; 16 | } 17 | 18 | h1 span { 19 | padding: 5px 15px; 20 | background: #2ec2b0; 21 | } 22 | 23 | .dictionary { 24 | display: flex; 25 | flex-wrap: wrap; 26 | justify-content: space-between; 27 | margin: 4rem auto; 28 | max-width: 90%; 29 | } 30 | 31 | .dictionary > .term { 32 | text-align: center; 33 | max-width: 20rem; 34 | margin-bottom: 3rem; 35 | padding: 2rem; 36 | border-radius: 3px; 37 | box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), 0 5px 20px rgba(0, 0, 0, 0.1); 38 | background-color: #fff; 39 | transition: all 100ms ease-in-out; 40 | } 41 | 42 | .dictionary > .term > dt { 43 | margin-bottom: 1rem; 44 | } 45 | 46 | dt { 47 | color: #2ec2b0; 48 | line-height: 1; 49 | } 50 | 51 | dt span { 52 | font-size: 200%; 53 | font-weight: 900; 54 | } 55 | 56 | .emoji { 57 | margin: 0 auto 20px; 58 | display: block; 59 | font-size: 400%; 60 | } 61 | 62 | dd { 63 | font-size: 92.5%; 64 | margin-left: 0; 65 | } 66 | 67 | dd dt { 68 | margin-top: 1rem; 69 | margin-bottom: 0.25rem; 70 | font-weight: 600; 71 | font-size: inherit; 72 | } 73 | 74 | dd dl { 75 | font-size: 90%; 76 | margin: 1rem auto 0 auto; 77 | letter-spacing: 0.33px; 78 | max-width: 15rem; 79 | } 80 | 81 | dd dl .term { 82 | margin-bottom: 1rem; 83 | } 84 | -------------------------------------------------------------------------------- /React/es6-arrow-functions/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Entry from "./Entry"; 3 | import emojipedia from "../emojipedia"; 4 | 5 | function createEntry(emojiTerm) { 6 | return ( 7 | 13 | ); 14 | } 15 | 16 | function App() { 17 | return ( 18 |
19 |

20 | emojipedia 21 |

22 |
{emojipedia.map(createEntry)}
23 |
24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /React/es6-arrow-functions/src/components/Entry.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Entry(props) { 4 | return ( 5 |
6 |
7 | 8 | {props.emoji} 9 | 10 | {props.name} 11 |
12 |
{props.description}
13 |
14 | ); 15 | } 16 | 17 | export default Entry; 18 | -------------------------------------------------------------------------------- /React/es6-arrow-functions/src/emojipedia.js: -------------------------------------------------------------------------------- 1 | const emojipedia = [ 2 | { 3 | id: 1, 4 | emoji: "💪", 5 | name: "Tense Biceps", 6 | meaning: 7 | "“You can do that!” or “I feel strong!” Arm with tense biceps. Also used in connection with doing sports, e.g. at the gym." 8 | }, 9 | { 10 | id: 2, 11 | emoji: "🙏", 12 | name: "Person With Folded Hands", 13 | meaning: 14 | "Two hands pressed together. Is currently very introverted, saying a prayer, or hoping for enlightenment. Is also used as a “high five” or to say thank you." 15 | }, 16 | { 17 | id: 3, 18 | emoji: "🤣", 19 | name: "Rolling On The Floor, Laughing", 20 | meaning: 21 | "This is funny! A smiley face, rolling on the floor, laughing. The face is laughing boundlessly. The emoji version of “rofl“. Stands for „rolling on the floor, laughing“." 22 | } 23 | ]; 24 | 25 | export default emojipedia; 26 | -------------------------------------------------------------------------------- /React/es6-arrow-functions/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | 7 | // var numbers = [3, 56, 2, 48, 5]; 8 | 9 | ////Map -Create a new array by doing something with each item in an array. 10 | // const newNumbers = numbers.map(function (x) { 11 | // return x * 2; 12 | // }); 13 | 14 | //////Filter - Create a new array by keeping the items that return true. 15 | // const newNumbers = numbers.filter(function(num) { 16 | // return num < 10; 17 | // }); 18 | 19 | //Reduce - Accumulate a value by doing something to each item in an array. 20 | // var newNumber = numbers.reduce(function (accumulator, currentNumber) { 21 | // return accumulator + currentNumber; 22 | // }) 23 | 24 | ////Find - find the first item that matches from an array. 25 | // const newNumber = numbers.find(function (num) { 26 | // return num > 10; 27 | // }) 28 | 29 | ////FindIndex - find the index of the first item that matches. 30 | // const newNumber = numbers.findIndex(function (num) { 31 | // return num > 10; 32 | // }) 33 | -------------------------------------------------------------------------------- /React/es6-destructuring/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es6-destructuring", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /React/es6-destructuring/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /React/es6-destructuring/public/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/6f04c3f02af9a6ae88ac1430de6860ce605e811f/React/es6-destructuring/public/styles.css -------------------------------------------------------------------------------- /React/es6-destructuring/src/data.js: -------------------------------------------------------------------------------- 1 | const animals = [ 2 | { name: "cat", sound: "meow" }, 3 | { name: "dog", sound: "woof" } 4 | ]; 5 | -------------------------------------------------------------------------------- /React/es6-destructuring/src/index.js: -------------------------------------------------------------------------------- 1 | // CHALLENGE: uncomment the code below and see the car stats rendered 2 | import React from "react"; 3 | import ReactDOM from "react-dom"; 4 | import cars from "./practice"; 5 | 6 | const [honda, tesla] = cars; 7 | const { 8 | speedStats: { TopColour: hondaTopSpeed }, 9 | } = honda; 10 | const { 11 | speedStats: { TopColour: teslaTopSpeed }, 12 | } = tesla; 13 | const { 14 | coloursByPopularity: [teslaTopColour], 15 | } = tesla; 16 | const { 17 | coloursByPopularity: [hondaTopColour], 18 | } = honda; 19 | 20 | ReactDOM.render( 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
BrandTop Speed
{tesla.model}{teslaTopSpeed}{teslaTopColour}
{honda.model}{hondaTopSpeed}{hondaTopColour}
, 37 | document.getElementById("root") 38 | ); 39 | -------------------------------------------------------------------------------- /React/es6-destructuring/src/practice.js: -------------------------------------------------------------------------------- 1 | const cars = [ 2 | { 3 | model: "Honda Civic", 4 | //The top colour refers to the first item in the array below: 5 | //i.e. hondaTopColour = "black" 6 | coloursByPopularity: ["black", "silver"], 7 | speedStats: { 8 | topSpeed: 140, 9 | zeroToSixty: 8.5, 10 | }, 11 | }, 12 | { 13 | model: "Tesla Model 3", 14 | coloursByPopularity: ["red", "white"], 15 | speedStats: { 16 | topSpeed: 150, 17 | zeroToSixty: 3.2, 18 | }, 19 | }, 20 | ]; 21 | 22 | export default cars; 23 | -------------------------------------------------------------------------------- /React/es6-spread-operator-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es6-spread-operator-practice", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } -------------------------------------------------------------------------------- /React/es6-spread-operator-practice/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/es6-spread-operator-practice/public/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffeaa7; 3 | min-height: 70vh; 4 | padding: 1rem; 5 | box-sizing: border-box; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | color: hsl(198, 1%, 29%); 10 | font-family: "Architects Daughter", cursive; 11 | text-align: center; 12 | font-size: 130%; 13 | } 14 | 15 | .container { 16 | width: 100%; 17 | height: auto; 18 | min-height: 500px; 19 | max-width: 500px; 20 | min-width: 250px; 21 | background: #f1f5f8; 22 | background-image: radial-gradient(#bfc0c1 7.2%, transparent 0); 23 | background-size: 25px 25px; 24 | border-radius: 20px; 25 | box-shadow: 4px 3px 7px 2px #00000040; 26 | padding: 1rem; 27 | box-sizing: border-box; 28 | } 29 | .heading { 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | margin-bottom: 1rem; 34 | } 35 | .heading h1 { 36 | transform: rotate(2deg); 37 | padding: 0.2rem 1.2rem; 38 | border-radius: 20% 5% 20% 5%/5% 20% 25% 20%; 39 | background-color: #fdcb6e; 40 | font-size: 1.5rem; 41 | } 42 | 43 | .form input { 44 | box-sizing: border-box; 45 | background-color: transparent; 46 | padding: 0.7rem; 47 | border-bottom-right-radius: 15px 3px; 48 | border-bottom-left-radius: 3px 15px; 49 | border: solid 3px transparent; 50 | border-bottom: dashed 3px #fdcb6e; 51 | font-family: "Architects Daughter", cursive; 52 | font-size: 1rem; 53 | color: hsla(260, 2%, 25%, 0.7); 54 | width: 70%; 55 | margin-bottom: 20px; 56 | } 57 | 58 | button { 59 | padding: 0; 60 | border: none; 61 | font-family: "Architects Daughter", cursive; 62 | text-decoration: none; 63 | padding-bottom: 3px; 64 | border-radius: 5px; 65 | background-color: #ffeaa7; 66 | } 67 | button span { 68 | background: #f1f5f8; 69 | display: block; 70 | padding: 0.5rem 1rem; 71 | border-radius: 5px; 72 | border: 2px solid hsl(198, 1%, 29%); 73 | } 74 | 75 | li { 76 | text-align: left; 77 | position: relative; 78 | padding: 0.5rem; 79 | } 80 | -------------------------------------------------------------------------------- /React/es6-spread-operator-practice/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function App() { 4 | const [item, setItem] = React.useState(""); 5 | const [todoList, setTodoList] = React.useState([]); 6 | 7 | function handleChange(event) { 8 | setItem(event.target.value); 9 | } 10 | 11 | function handleSubmit(event) { 12 | setTodoList((prevValue) => [...prevValue, item]); 13 | setItem(""); 14 | event.preventDefault(); 15 | } 16 | 17 | return ( 18 |
19 |
20 |

To-Do List

21 |
22 |
23 |
24 | 25 | 28 |
29 |
30 |
31 |
    32 | {todoList.map((todo, index) => ( 33 |
  • {todo}
    • 34 | ))} 35 |
36 |
37 |
38 | ); 39 | } 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /React/es6-spread-operator-practice/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | 7 | //CHALLENGE: Make this app work by applying what you've learnt. 8 | //1. When new text is written into the input, its state should be saved. 9 | //2. When the add button is pressed, the current data in the input should be 10 | //added to an array. 11 | //3. The
    should display all the array items as
  • s 12 | -------------------------------------------------------------------------------- /React/es6-spread-operator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es6-spread-operator", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /React/es6-spread-operator/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/es6-spread-operator/public/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-weight: 300; 6 | } 7 | 8 | body { 9 | font-family: "Source Sans Pro", sans-serif; 10 | color: white; 11 | font-weight: 300; 12 | background: #50a3a2; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .container { 18 | margin: 10% auto; 19 | padding: 80px 0; 20 | text-align: center; 21 | } 22 | 23 | .container h1 { 24 | font-size: 40px; 25 | font-weight: 200; 26 | } 27 | 28 | input { 29 | border: 1px solid rgba(252, 252, 252, 0.4); 30 | background-color: rgba(252, 252, 252, 0.2); 31 | width: 250px; 32 | border-radius: 3px; 33 | font-family: "Source Sans Pro", sans-serif; 34 | padding: 10px 15px; 35 | margin: 0 auto 10px auto; 36 | display: block; 37 | text-align: center; 38 | font-size: 18px; 39 | color: white; 40 | font-weight: 300; 41 | } 42 | 43 | button { 44 | appearance: none; 45 | outline: 0; 46 | background-color: white; 47 | border: 0; 48 | padding: 10px 15px; 49 | color: #50a3a2; 50 | border-radius: 3px; 51 | width: 250px; 52 | font-size: 18px; 53 | } 54 | -------------------------------------------------------------------------------- /React/es6-spread-operator/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | function App() { 4 | const [contact, setContact] = useState({ 5 | fName: "", 6 | lName: "", 7 | email: "", 8 | }); 9 | 10 | function handleChange(event) { 11 | const { name, value } = event.target; 12 | 13 | setContact((prevValue) => { 14 | return { 15 | ...prevValue, 16 | [name]: value, 17 | }; 18 | }); 19 | } 20 | 21 | return ( 22 |
    23 |

    24 | Hello {contact.fName} {contact.lName} 25 |

    26 |

    {contact.email}

    27 |
    28 | 29 | 30 | 31 | 32 |
    33 |
    34 | ); 35 | } 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /React/es6-spread-operator/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | -------------------------------------------------------------------------------- /React/event-handling-in-react/.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "preview": [ 3 | { 4 | "views": [ 5 | { 6 | "id": "codesandbox.browser" 7 | }, 8 | { 9 | "id": "codesandbox.tests" 10 | } 11 | ] 12 | }, 13 | { 14 | "views": [ 15 | { 16 | "id": "codesandbox.problems" 17 | }, 18 | { 19 | "id": "codesandbox.console" 20 | }, 21 | { 22 | "id": "codesandbox.react-devtools" 23 | } 24 | ] 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /React/event-handling-in-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "event-handling-in-react", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "3.2.0" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /React/event-handling-in-react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/event-handling-in-react/public/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-weight: 300; 6 | } 7 | 8 | body { 9 | font-family: "Source Sans Pro", sans-serif; 10 | color: white; 11 | font-weight: 300; 12 | background: #50a3a2; 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .container { 18 | margin: 10% auto; 19 | padding: 80px 0; 20 | text-align: center; 21 | } 22 | 23 | .container h1 { 24 | font-size: 40px; 25 | font-weight: 200; 26 | } 27 | 28 | input { 29 | border: 1px solid rgba(252, 252, 252, 0.4); 30 | background-color: rgba(252, 252, 252, 0.2); 31 | width: 250px; 32 | border-radius: 3px; 33 | font-family: "Source Sans Pro", sans-serif; 34 | padding: 10px 15px; 35 | margin: 0 auto 10px auto; 36 | display: block; 37 | text-align: center; 38 | font-size: 18px; 39 | color: white; 40 | font-weight: 300; 41 | } 42 | 43 | button { 44 | appearance: none; 45 | outline: 0; 46 | background-color: white; 47 | border: 0; 48 | padding: 10px 15px; 49 | color: #50a3a2; 50 | border-radius: 3px; 51 | width: 250px; 52 | font-size: 18px; 53 | } 54 | -------------------------------------------------------------------------------- /React/event-handling-in-react/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function App() { 4 | const [headingText, setHeadingText] = React.useState("Hello"); 5 | const [isMouseOver, setMouseOver] = React.useState(false); 6 | 7 | function handleClick() { 8 | setHeadingText("Submitted"); 9 | } 10 | 11 | function handleMouseOver() { 12 | setMouseOver(true); 13 | } 14 | function handleMouseOut() { 15 | setMouseOver(false); 16 | } 17 | 18 | return ( 19 |
    20 |

    {headingText}

    21 | 22 | 30 |
    31 | ); 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /React/event-handling-in-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("root")); 6 | -------------------------------------------------------------------------------- /React/keeper-app-part-1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "keeper-app-part-1-starting", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.8.6", 9 | "react-dom": "16.8.6", 10 | "react-scripts": "^3.4.1" 11 | }, 12 | "devDependencies": { 13 | "typescript": "3.3.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /React/keeper-app-part-1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Keeper App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/keeper-app-part-1/public/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | html { 7 | font-family: "Montserrat", sans-serif; 8 | } 9 | body { 10 | background: #eee; 11 | padding: 0 16px; 12 | } 13 | 14 | header { 15 | background-color: #f5ba13; 16 | margin: auto -16px; 17 | padding: 16px 32px; 18 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); 19 | } 20 | 21 | header h1 { 22 | color: #fff; 23 | font-family: "McLaren", cursive; 24 | font-weight: 200; 25 | } 26 | 27 | footer { 28 | position: absolute; 29 | text-align: center; 30 | bottom: 0; 31 | width: 100%; 32 | height: 2.5rem; 33 | } 34 | 35 | footer p { 36 | color: #ccc; 37 | } 38 | .note { 39 | background: #fff; 40 | border-radius: 7px; 41 | box-shadow: 0 2px 5px #ccc; 42 | padding: 10px; 43 | width: 240px; 44 | margin: 16px; 45 | float: left; 46 | } 47 | .note h1 { 48 | font-size: 1.1em; 49 | margin-bottom: 6px; 50 | } 51 | .note p { 52 | font-size: 1.1em; 53 | margin-bottom: 10px; 54 | white-space: pre-wrap; 55 | word-wrap: break-word; 56 | } 57 | -------------------------------------------------------------------------------- /React/keeper-app-part-1/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Header from "./Header"; 3 | import Footer from "./Footer"; 4 | import Note from "./Note"; 5 | 6 | function App() { 7 | return ( 8 |
    9 |
    10 | 11 |
    12 |
    13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /React/keeper-app-part-1/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Footer() { 4 | const year = new Date().getFullYear(); 5 | return ( 6 |
    7 |

    Copyright ⓒ {year}

    8 |
    9 | ); 10 | } 11 | 12 | export default Footer; 13 | -------------------------------------------------------------------------------- /React/keeper-app-part-1/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Header() { 4 | return ( 5 |
    6 |

    Keeper

    7 |
    8 | ); 9 | } 10 | 11 | export default Header; 12 | -------------------------------------------------------------------------------- /React/keeper-app-part-1/src/components/Note.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Note() { 4 | return ( 5 |
    6 |

    Note Title

    7 |

    Note Content

    8 |
    9 | ); 10 | } 11 | 12 | export default Note; 13 | -------------------------------------------------------------------------------- /React/keeper-app-part-1/src/index.js: -------------------------------------------------------------------------------- 1 | //1. Create a new React app. 2 | //2. Create a App.jsx component. 3 | //3. Create a Header.jsx component that renders a
    element 4 | //to show the Keeper App name in an

    . 5 | //4. Create a Footer.jsx component that renders a