├── Practice ├── DOM │ ├── index.js │ ├── styles.css │ └── index.html ├── TodoList-V1 │ ├── Procfile │ ├── views │ │ ├── footer.ejs │ │ ├── header.ejs │ │ ├── about.ejs │ │ └── list.ejs │ ├── date.js │ ├── index.html │ ├── package.json │ ├── app.js │ └── public │ │ └── css │ │ └── styles.css ├── JQuery │ ├── styles.css │ ├── index.js │ └── index.html ├── HTML-Personal-Sites │ ├── Parv.jpg │ ├── Hobbies.html │ ├── mainCss.css │ ├── Contact.html │ └── index.html ├── Fruits-Project │ ├── package.json │ └── app.js ├── Calculator │ ├── package.json │ ├── index.html │ ├── bmiCalculator.html │ └── calculator.js ├── weather-project │ ├── package.json │ ├── index.html │ └── app.js └── my-express-server │ ├── package.json │ └── server.js ├── React ├── react-props │ ├── public │ │ ├── styles.css │ │ └── index.html │ ├── package.json │ └── src │ │ └── index.js ├── es6-destructuring │ ├── public │ │ ├── styles.css │ │ └── index.html │ ├── src │ │ ├── data.js │ │ ├── practice.js │ │ └── index.js │ └── package.json ├── map-filter-reduce │ ├── public │ │ ├── styles.css │ │ └── index.html │ ├── .codesandbox │ │ └── workspace.json │ ├── src │ │ ├── index.js │ │ └── emojipedia.js │ └── package.json ├── react-forms │ ├── src │ │ ├── index.js │ │ └── components │ │ │ └── App.jsx │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── .codesandbox │ │ └── workspace.json │ └── package.json ├── keeper-part-3 │ ├── src │ │ ├── index.js │ │ └── components │ │ │ ├── Header.jsx │ │ │ ├── Footer.jsx │ │ │ ├── Note.jsx │ │ │ ├── App.jsx │ │ │ └── CreateArea.jsx │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── mapping-components │ ├── src │ │ ├── components │ │ │ ├── Detail.jsx │ │ │ ├── Avatar.jsx │ │ │ ├── App.jsx │ │ │ └── Card.jsx │ │ ├── index.js │ │ └── contacts.js │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── .codesandbox │ │ └── workspace.json │ └── package.json ├── react-devtools │ ├── src │ │ ├── index.js │ │ ├── components │ │ │ ├── Avatar.jsx │ │ │ ├── Card.jsx │ │ │ └── App.jsx │ │ └── contacts.js │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── usestate-hook │ ├── src │ │ ├── index.js │ │ └── components │ │ │ └── App.jsx │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── changing-complex-state │ ├── src │ │ ├── index.js │ │ └── components │ │ │ └── App.jsx │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── .codesandbox │ │ └── workspace.json │ └── package.json ├── conditional-rendering │ ├── src │ │ ├── index.js │ │ └── components │ │ │ ├── Input.jsx │ │ │ ├── App.jsx │ │ │ └── Login.jsx │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── es6-spread-operator │ ├── src │ │ ├── index.js │ │ └── components │ │ │ └── App.jsx │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── event-handling-in-react │ ├── src │ │ ├── index.js │ │ └── components │ │ │ └── App.jsx │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── .codesandbox │ │ └── workspace.json │ └── package.json ├── managing-a-component-tree │ ├── src │ │ ├── index.js │ │ └── components │ │ │ ├── TodoItem.jsx │ │ │ └── App.jsx │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── mapping-components-practice │ ├── src │ │ ├── index.js │ │ ├── components │ │ │ ├── Entry.jsx │ │ │ └── App.jsx │ │ └── emojipedia.js │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── .codesandbox │ │ └── workspace.json │ └── package.json ├── using-pre-built-react-components │ ├── src │ │ ├── index.js │ │ └── components │ │ │ ├── Footer.jsx │ │ │ ├── Header.jsx │ │ │ ├── Note.jsx │ │ │ ├── App.jsx │ │ │ └── CreateArea.jsx │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── build │ │ ├── precache-manifest.cfbc72f77b74b32112506c007450f0a0.js │ │ ├── asset-manifest.json │ │ ├── service-worker.js │ │ ├── static │ │ │ └── js │ │ │ │ ├── 2.0f60d888.chunk.js.LICENSE.txt │ │ │ │ ├── runtime-main.342c7561.js │ │ │ │ └── main.3625d365.chunk.js │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── keeper-app-part-2 │ ├── src │ │ ├── components │ │ │ ├── Header.js │ │ │ ├── Note.js │ │ │ ├── Footer.js │ │ │ └── App.js │ │ ├── index.js │ │ └── notes.js │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── keeper-app-part-1 │ ├── src │ │ ├── components │ │ │ ├── Header.jsx │ │ │ ├── Note.jsx │ │ │ ├── Footer.jsx │ │ │ └── App.jsx │ │ └── index.js │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── react-props-practice │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── src │ │ ├── index.js │ │ ├── contacts.js │ │ └── components │ │ │ └── App.jsx │ └── package.json ├── usestate-hook-practice │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── src │ │ ├── components │ │ │ └── App.jsx │ │ └── index.js │ └── package.json ├── conditional-rendering-practice │ ├── src │ │ ├── components │ │ │ ├── App.jsx │ │ │ └── Form.jsx │ │ └── index.js │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── managing-a-component-tree-practice │ ├── src │ │ ├── components │ │ │ ├── ToDoItem.jsx │ │ │ ├── InputArea.jsx │ │ │ └── App.jsx │ │ └── index.js │ ├── public │ │ ├── index.html │ │ └── styles.css │ └── package.json ├── es6-arrow-functions │ ├── src │ │ ├── components │ │ │ ├── Entry.jsx │ │ │ └── App.jsx │ │ ├── emojipedia.js │ │ └── index.js │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── .codesandbox │ │ └── workspace.json │ └── package.json ├── changing-complex-state-practice │ ├── public │ │ ├── index.html │ │ └── styles.css │ ├── src │ │ ├── index.js │ │ └── components │ │ │ └── App.jsx │ └── package.json └── es6-spread-operator-practice │ ├── public │ ├── index.html │ └── styles.css │ ├── src │ ├── index.js │ └── components │ │ └── App.jsx │ └── package.json ├── TodoList-V2 ├── Procfile ├── .gitignore ├── views │ ├── footer.ejs │ ├── header.ejs │ ├── about.ejs │ └── list.ejs ├── index.html ├── package.json └── public │ └── css │ └── styles.css ├── Newsletter-signup ├── Procfile ├── public │ ├── images │ │ └── icon.png │ └── css │ │ └── signin.css ├── package.json ├── success.html ├── failure.html └── app.js ├── Secrets ├── views │ ├── partials │ │ ├── footer.ejs │ │ └── header.ejs │ ├── home.ejs │ ├── secrets.ejs │ ├── submit.ejs │ ├── login.ejs │ └── register.ejs ├── public │ └── css │ │ └── styles.css └── package.json ├── Git-Cheatsheet.pdf ├── TinDog ├── favicon.ico └── images │ ├── tnw.png │ ├── dog-img.jpg │ ├── iphone6.png │ ├── lady-img.jpg │ ├── mashable.png │ ├── TechCrunch.png │ └── bizinsider.png ├── CSS-My-Site ├── favicon.ico ├── images │ ├── Parv.jpg │ ├── angela.png │ ├── cloud.png │ ├── chillies.png │ ├── computer.png │ └── mountain.png └── index.html ├── Drum-Kit ├── images │ ├── kick.png │ ├── tom1.png │ ├── tom2.png │ ├── tom3.png │ ├── tom4.png │ ├── crash.png │ └── snare.png ├── sounds │ ├── crash.mp3 │ ├── snare.mp3 │ ├── tom-1.mp3 │ ├── tom-2.mp3 │ ├── tom-3.mp3 │ ├── tom-4.mp3 │ └── kick-bass.mp3 ├── index.html ├── styles.css └── index.js ├── Simon-Game ├── sounds │ ├── blue.mp3 │ ├── red.mp3 │ ├── green.mp3 │ ├── wrong.mp3 │ └── yellow.mp3 ├── styles.css ├── Simon-Game.html └── game.js ├── atlassian-git-cheatsheet.pdf ├── Dicee-Challenge ├── images │ ├── dice1.png │ ├── dice2.png │ ├── dice3.png │ ├── dice4.png │ ├── dice5.png │ └── dice6.png ├── styles.css ├── index.js └── dicee.html ├── Daily-Journal ├── views │ ├── about.ejs │ ├── contact.ejs │ ├── post.ejs │ ├── partials │ │ ├── footer.ejs │ │ └── header.ejs │ ├── home.ejs │ └── compose.ejs ├── package.json ├── public │ └── css │ │ └── styles.css └── app.js ├── Wiki-API └── package.json ├── README.md └── .gitignore /Practice/DOM/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /React/react-props/public/styles.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /TodoList-V2/Procfile: -------------------------------------------------------------------------------- 1 | web: node app.js -------------------------------------------------------------------------------- /Newsletter-signup/Procfile: -------------------------------------------------------------------------------- 1 | web: node app.js -------------------------------------------------------------------------------- /React/es6-destructuring/public/styles.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /React/map-filter-reduce/public/styles.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Practice/TodoList-V1/Procfile: -------------------------------------------------------------------------------- 1 | web: node app.js -------------------------------------------------------------------------------- /Practice/DOM/styles.css: -------------------------------------------------------------------------------- 1 | .huge{ 2 | font-size: 10rem; 3 | } -------------------------------------------------------------------------------- /Secrets/views/partials/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /TodoList-V2/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | npm-debug.log 3 | .DS_Store 4 | /*.env -------------------------------------------------------------------------------- /Practice/JQuery/styles.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | font-size: 100px; 3 | color : yellow; 4 | } -------------------------------------------------------------------------------- /Git-Cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Git-Cheatsheet.pdf -------------------------------------------------------------------------------- /TinDog/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/TinDog/favicon.ico -------------------------------------------------------------------------------- /TinDog/images/tnw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/TinDog/images/tnw.png -------------------------------------------------------------------------------- /CSS-My-Site/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/CSS-My-Site/favicon.ico -------------------------------------------------------------------------------- /Drum-Kit/images/kick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/images/kick.png -------------------------------------------------------------------------------- /Drum-Kit/images/tom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/images/tom1.png -------------------------------------------------------------------------------- /Drum-Kit/images/tom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/images/tom2.png -------------------------------------------------------------------------------- /Drum-Kit/images/tom3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/images/tom3.png -------------------------------------------------------------------------------- /Drum-Kit/images/tom4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/images/tom4.png -------------------------------------------------------------------------------- /TodoList-V2/views/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /Drum-Kit/images/crash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/images/crash.png -------------------------------------------------------------------------------- /Drum-Kit/images/snare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/images/snare.png -------------------------------------------------------------------------------- /Drum-Kit/sounds/crash.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/sounds/crash.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/snare.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/sounds/snare.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/tom-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/sounds/tom-1.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/tom-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/sounds/tom-2.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/tom-3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/sounds/tom-3.mp3 -------------------------------------------------------------------------------- /Drum-Kit/sounds/tom-4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/sounds/tom-4.mp3 -------------------------------------------------------------------------------- /Simon-Game/sounds/blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Simon-Game/sounds/blue.mp3 -------------------------------------------------------------------------------- /Simon-Game/sounds/red.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Simon-Game/sounds/red.mp3 -------------------------------------------------------------------------------- /TinDog/images/dog-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/TinDog/images/dog-img.jpg -------------------------------------------------------------------------------- /TinDog/images/iphone6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/TinDog/images/iphone6.png -------------------------------------------------------------------------------- /TinDog/images/lady-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/TinDog/images/lady-img.jpg -------------------------------------------------------------------------------- /TinDog/images/mashable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/TinDog/images/mashable.png -------------------------------------------------------------------------------- /CSS-My-Site/images/Parv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/CSS-My-Site/images/Parv.jpg -------------------------------------------------------------------------------- /CSS-My-Site/images/angela.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/CSS-My-Site/images/angela.png -------------------------------------------------------------------------------- /CSS-My-Site/images/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/CSS-My-Site/images/cloud.png -------------------------------------------------------------------------------- /Drum-Kit/sounds/kick-bass.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Drum-Kit/sounds/kick-bass.mp3 -------------------------------------------------------------------------------- /Practice/TodoList-V1/views/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /Simon-Game/sounds/green.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Simon-Game/sounds/green.mp3 -------------------------------------------------------------------------------- /Simon-Game/sounds/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Simon-Game/sounds/wrong.mp3 -------------------------------------------------------------------------------- /Simon-Game/sounds/yellow.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Simon-Game/sounds/yellow.mp3 -------------------------------------------------------------------------------- /TinDog/images/TechCrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/TinDog/images/TechCrunch.png -------------------------------------------------------------------------------- /TinDog/images/bizinsider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/TinDog/images/bizinsider.png -------------------------------------------------------------------------------- /atlassian-git-cheatsheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/atlassian-git-cheatsheet.pdf -------------------------------------------------------------------------------- /CSS-My-Site/images/chillies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/CSS-My-Site/images/chillies.png -------------------------------------------------------------------------------- /CSS-My-Site/images/computer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/CSS-My-Site/images/computer.png -------------------------------------------------------------------------------- /CSS-My-Site/images/mountain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/CSS-My-Site/images/mountain.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Dicee-Challenge/images/dice1.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Dicee-Challenge/images/dice2.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Dicee-Challenge/images/dice3.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Dicee-Challenge/images/dice4.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Dicee-Challenge/images/dice5.png -------------------------------------------------------------------------------- /Dicee-Challenge/images/dice6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Dicee-Challenge/images/dice6.png -------------------------------------------------------------------------------- /Practice/HTML-Personal-Sites/Parv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Practice/HTML-Personal-Sites/Parv.jpg -------------------------------------------------------------------------------- /Newsletter-signup/public/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parv3213/Web-development/HEAD/Newsletter-signup/public/images/icon.png -------------------------------------------------------------------------------- /React/es6-destructuring/src/data.js: -------------------------------------------------------------------------------- 1 | const animals = [ 2 | { name: "cat", sound: "meow" }, 3 | { name: "dog", sound: "woof" } 4 | ]; 5 | -------------------------------------------------------------------------------- /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 | }); -------------------------------------------------------------------------------- /Daily-Journal/views/about.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partials/header") -%> 2 | 3 |

About

4 |

<%= content %>

5 | 6 | <%- 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/post.ejs: -------------------------------------------------------------------------------- 1 | <%- include("partials/header") -%> 2 | 3 |

<%= title %>

4 |

<%= content %>

5 | 6 | <%- include("partials/footer") -%> 7 | -------------------------------------------------------------------------------- /React/react-forms/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-part-3/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/mapping-components/src/components/Detail.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Detail(props) { 4 | return

{props.detailInfo}

; 5 | } 6 | 7 | export default Detail; 8 | -------------------------------------------------------------------------------- /React/react-devtools/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/usestate-hook/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 | -------------------------------------------------------------------------------- /Daily-Journal/views/partials/footer.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |

Made with ❤️ by Parv

6 |
7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /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/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-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/mapping-components/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/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/managing-a-component-tree/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/mapping-components-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 | -------------------------------------------------------------------------------- /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/using-pre-built-react-components/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/react-devtools/src/components/Avatar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Avatar(props) { 4 | return avatar_img; 5 | } 6 | 7 | export default Avatar; 8 | -------------------------------------------------------------------------------- /React/mapping-components/src/components/Avatar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Avatar(props) { 4 | return avatar_img; 5 | } 6 | 7 | export default Avatar; 8 | -------------------------------------------------------------------------------- /React/keeper-app-part-2/src/components/Header.js: -------------------------------------------------------------------------------- 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-part-3/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/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-2/src/components/Note.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Note(props) { 4 | return ( 5 |
6 |

{props.title}

7 |

{props.content}

8 |
9 | ); 10 | } 11 | 12 | export default Note; 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /TodoList-V2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To Do List 7 | 8 | 9 |

10 | 11 | -------------------------------------------------------------------------------- /Practice/TodoList-V1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To Do List 7 | 8 | 9 |

10 | 11 | -------------------------------------------------------------------------------- /React/keeper-part-3/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-2/src/components/Footer.js: -------------------------------------------------------------------------------- 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/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/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-2/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. Render all the notes inside notes.js as a seperate Note 8 | //component. 9 | -------------------------------------------------------------------------------- /Secrets/public/css/styles.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background-color: #E8ECEF; 4 | } 5 | 6 | .centered { 7 | padding-top: 200px; 8 | text-align: center; 9 | } 10 | 11 | .secret-text { 12 | text-align: center; 13 | font-size: 2rem; 14 | color: #fff; 15 | background-color: #000; 16 | } 17 | -------------------------------------------------------------------------------- /React/using-pre-built-react-components/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/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/managing-a-component-tree/src/components/TodoItem.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function TodoItem(props) { 4 | return ( 5 |
  • { 7 | props.onChecked(props.id); 8 | }} 9 | > 10 | {props.item} {props.index} 11 |
    • 12 | ); 13 | } 14 | 15 | export default TodoItem; 16 | -------------------------------------------------------------------------------- /React/react-devtools/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 6 | 7 | 8 | 9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /React/react-props/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 6 | 7 | 8 | 9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /React/usestate-hook/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 6 | 7 | 8 | 9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /React/mapping-components/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 6 | 7 | 8 | 9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /React/react-props-practice/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 6 | 7 | 8 | 9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /React/es6-destructuring/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 6 | 7 | 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /React/usestate-hook-practice/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 6 | 7 | 8 | 9 |
    10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /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/using-pre-built-react-components/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import HighlightIcon from "@material-ui/icons/Highlight"; 3 | 4 | function Header() { 5 | return ( 6 |
    7 |

    8 | 9 | Keeper 10 |

    11 |
    12 | ); 13 | } 14 | 15 | export default Header; 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /React/managing-a-component-tree-practice/src/components/ToDoItem.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function ToDoItem(props) { 4 | return ( 5 |
    { 7 | props.onChecked(props.id); 8 | }} 9 | > 10 |
  • {props.text}
    • 11 |
    12 | ); 13 | } 14 | 15 | export default ToDoItem; 16 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/managing-a-component-tree-practice/src/components/InputArea.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function InputArea(props) { 4 | return ( 5 |
    6 | 7 | 10 |
    11 | ); 12 | } 13 | 14 | export default InputArea; 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /React/mapping-components-practice/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.meaning}
    13 |
    14 | ); 15 | } 16 | 17 | export default Entry; 18 | -------------------------------------------------------------------------------- /React/keeper-part-3/src/components/Note.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Note(props) { 4 | return ( 5 |
    6 |

    {props.title}

    7 |

    {props.content}

    8 | 16 |
    17 | ); 18 | } 19 | 20 | export default Note; 21 | -------------------------------------------------------------------------------- /React/using-pre-built-react-components/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Keeper App 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /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/react-forms/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/map-filter-reduce/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/changing-complex-state/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /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/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /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-spread-operator/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/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /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/mapping-components-practice/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Wiki-API/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Wiki-API", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "keywords": [], 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.19.0", 13 | "ejs": "^3.1.2", 14 | "express": "^4.17.1", 15 | "mongoose": "^5.9.10" 16 | }, 17 | "devDependencies": {}, 18 | "description": "" 19 | } 20 | -------------------------------------------------------------------------------- /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/conditional-rendering-practice/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/keeper-app-part-2/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Header from "./Header"; 3 | import Footer from "./Footer"; 4 | import Note from "./Note"; 5 | import notes from "../notes"; 6 | 7 | function App() { 8 | return ( 9 |
    10 |
    11 | {notes.map((note) => { 12 | return ; 13 | })} 14 |
    15 |
    16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /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/managing-a-component-tree/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /React/managing-a-component-tree-practice/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | React App 5 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /React/keeper-part-3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Keeper App 5 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /React/keeper-app-part-2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Keeper App 5 | 8 | 9 | 10 | 11 | 12 |
    13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /React/using-pre-built-react-components/src/components/Note.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import DeleteIcon from "@material-ui/icons/Delete"; 3 | 4 | function Note(props) { 5 | function handleClick() { 6 | props.onDelete(props.id); 7 | } 8 | 9 | return ( 10 |
    11 |

    {props.title}

    12 |

    {props.content}

    13 | 16 |
    17 | ); 18 | } 19 | 20 | export default Note; 21 | -------------------------------------------------------------------------------- /React/usestate-hook/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function App() { 4 | const [count, setCount] = React.useState(0); 5 | 6 | function increase() { 7 | setCount(count + 1); 8 | } 9 | 10 | function decrease() { 11 | setCount(count - 1); 12 | } 13 | 14 | return ( 15 |
    16 |

    {count}

    17 | 18 | 19 |
    20 | ); 21 | } 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | }); -------------------------------------------------------------------------------- /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/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/mapping-components-practice/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Entry from "./Entry"; 3 | import emojipedia from "../emojipedia"; 4 | 5 | function emojiEntry(emoji) { 6 | return ; 7 | } 8 | 9 | function App() { 10 | return ( 11 |
      12 |

      13 | emojipedia 14 |

      15 |
      {emojipedia.map(emojiEntry)}
      16 |
      17 | ); 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /Secrets/views/home.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') %> 2 | 3 | 4 |
      5 |
      6 | 7 |

      Secrets

      8 |

      Don't keep your secrets, share them anonymously!

      9 |
      10 | Register 11 | Login 12 | 13 |
      14 |
      15 | 16 | <%- include('partials/footer') %> 17 | -------------------------------------------------------------------------------- /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/react-forms/.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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /React/map-filter-reduce/.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/.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/.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/mapping-components/.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 | } -------------------------------------------------------------------------------- /TodoList-V2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todolist-v1", 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 | "engines": { 11 | "node": "12.13.0" 12 | }, 13 | "dependencies": { 14 | "body-parser": "^1.18.3", 15 | "ejs": "^2.6.1", 16 | "express": "^4.16.3", 17 | "lodash": "^4.17.15", 18 | "mongoose": "^5.3.4" 19 | }, 20 | "devDependencies": {}, 21 | "keywords": [], 22 | "description": "" 23 | } 24 | -------------------------------------------------------------------------------- /Practice/Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

      Calculator

      10 |
      11 | 12 | 13 | 14 |
      15 | 16 | 17 | -------------------------------------------------------------------------------- /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/mapping-components-practice/.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/mapping-components/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "./Card"; 3 | import contacts from "../contacts"; 4 | 5 | function createCard(contact) { 6 | return ( 7 | 14 | ); 15 | } 16 | 17 | function App() { 18 | return ( 19 |
      20 |

      My Contacts

      21 | {contacts.map(createCard)} 22 |
      23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /React/usestate-hook-practice/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function App() { 4 | let currentTime = new Date().toLocaleTimeString(); 5 | 6 | const [time, setTime] = React.useState(currentTime); 7 | 8 | function updateTime() { 9 | const newTime = new Date().toLocaleTimeString(); 10 | setTime(newTime); 11 | } 12 | 13 | setInterval(updateTime, 1000); 14 | 15 | return ( 16 |
      17 |

      {time}

      18 | 19 |
      20 | ); 21 | } 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /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/react-props-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 | //1. Apply CSS styles to App.jsx component 8 | //to match the appearance on the completed app: 9 | //https://c6fkx.csb.app/ 10 | //2. Extract the contact card as a reusable Card component. 11 | //3. Use props to render the default Beyonce contact card 12 | //so the Card component can be reused for other contacts. 13 | //4. Import the contacts.js file to create card components. 14 | -------------------------------------------------------------------------------- /React/usestate-hook/public/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: normal 14px/100% "Andale Mono", AndaleMono, monospace; 3 | color: #fff; 4 | padding: 50px; 5 | width: 300px; 6 | margin: 0 auto; 7 | background-color: #374954; 8 | text-align: center; 9 | } 10 | 11 | h1 { 12 | font-size: 100px; 13 | } 14 | 15 | .container { 16 | margin: 60% auto; 17 | } 18 | 19 | button { 20 | display: inline-block; 21 | background-color: #6bbe92; 22 | border: 0; 23 | width: 60px; 24 | margin: 10px; 25 | text-align: center; 26 | color: #fff; 27 | font-weight: bold; 28 | font-size: 50px; 29 | } 30 | -------------------------------------------------------------------------------- /React/react-devtools/src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Avatar from "./Avatar"; 3 | 4 | function Card(props) { 5 | return ( 6 |
      7 |
      8 |

      {props.name}

      9 | 10 |
      11 |
      12 |

      {props.tel}

      13 |

      {props.email}

      14 |
      15 |
      16 | ); 17 | } 18 | 19 | export default Card; 20 | -------------------------------------------------------------------------------- /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") -%> -------------------------------------------------------------------------------- /Practice/DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My Website 6 | 7 | 8 | 9 | 10 | 11 |

      Hello

      12 | 13 | 14 | 15 | 16 | 17 |
        18 |
      • 19 | Google 20 |
        • 21 |
      • Second
        • 22 |
      • Third
        • 23 |
      24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /React/usestate-hook-practice/public/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: normal 14px/100% "Andale Mono", AndaleMono, monospace; 3 | color: #fff; 4 | padding: 50px; 5 | width: 300px; 6 | margin: 0 auto; 7 | background-color: #374954; 8 | text-align: center; 9 | } 10 | 11 | h1 { 12 | font-size: 100px; 13 | } 14 | 15 | .container { 16 | margin: 60% auto; 17 | } 18 | 19 | button { 20 | display: inline; 21 | background-color: #6bbe92; 22 | border: 0; 23 | border-radius: 10px; 24 | box-shadow: 5px; 25 | margin: 10px; 26 | text-align: center; 27 | color: #fff; 28 | font-weight: bold; 29 | font-size: 50px; 30 | } 31 | -------------------------------------------------------------------------------- /React/map-filter-reduce/src/index.js: -------------------------------------------------------------------------------- 1 | import emojipedia from "./emojipedia"; 2 | 3 | var numbers = [3, 56, 2, 48, 5]; 4 | 5 | //Map -Create a new array by doing something with each item in an array. 6 | 7 | //Filter - Create a new array by keeping the items that return true. 8 | 9 | //Reduce - Accumulate a value by doing something to each item in an array. 10 | 11 | //Find - find the first item that matches from an array. 12 | 13 | //FindIndex - find the index of the first item that matches. 14 | 15 | const meaningTruncate = emojipedia.map((emoji) => { 16 | return emoji.meaning.substring(0, 100); 17 | }); 18 | console.log(meaningTruncate); 19 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /Secrets/views/secrets.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') %> 2 | 3 |
      4 |
      5 | 6 |

      You've Discovered My Secret!

      7 | 8 | <% usersWithSecrets.forEach((user) => { %> 9 |

      <%= user.secret %>

      10 | <%})%> 11 | 12 |
      13 | 14 | Log Out 15 | Submit a Secret 16 |
      17 |
      18 | 19 | <%- include('partials/footer') %> 20 | -------------------------------------------------------------------------------- /TodoList-V2/views/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To Do List 8 | 9 | 10 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Secrets/views/submit.ejs: -------------------------------------------------------------------------------- 1 | <%- include('partials/header') %> 2 | 3 |
      4 |
      5 | 6 |

      Secrets

      7 |

      Don't keep your secrets, share them anonymously!

      8 | 9 |
      10 | 11 |
      12 | 13 |
      14 | 15 |
      16 | 17 | 18 |
      19 |
      20 | <%- include('partials/footer') %> 21 | -------------------------------------------------------------------------------- /TodoList-V2/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/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To Do List 8 | 9 | 10 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /React/react-forms/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-forms", 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/react-props/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-props", 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 | -------------------------------------------------------------------------------- /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") -%> -------------------------------------------------------------------------------- /React/mapping-components/src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Avatar from "./Avatar"; 3 | import Detail from "./Detail"; 4 | 5 | function Card(props) { 6 | return ( 7 |
      8 |
      9 |

      {props.key}

      10 |

      {props.name}

      11 | 12 |
      13 |
      14 | 15 | 16 |
      17 |
      18 | ); 19 | } 20 | 21 | export default Card; 22 | -------------------------------------------------------------------------------- /React/usestate-hook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usestate-hook", 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/react-devtools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-devtools", 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/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/keeper-part-3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "keeper-part-3-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.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/map-filter-reduce/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "map-filter-reduce", 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/mapping-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mapping-components", 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/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/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-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/react-props-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-props-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/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/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/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-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "keeper-app-part-2-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.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/usestate-hook-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usestate-hook-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/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/managing-a-component-tree/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "managing-a-component-tree", 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-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/mapping-components-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mapping-components-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/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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /React/managing-a-component-tree-practice/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "managing-a-component-tree-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/using-pre-built-react-components/build/precache-manifest.cfbc72f77b74b32112506c007450f0a0.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "b032b281fd5494505aaf5a77a3be39fc", 4 | "url": "/index.html" 5 | }, 6 | { 7 | "revision": "9eaa39e634b95e2d2b03", 8 | "url": "/static/js/2.0f60d888.chunk.js" 9 | }, 10 | { 11 | "revision": "1260a01290ac0c0454e9a7627323041c", 12 | "url": "/static/js/2.0f60d888.chunk.js.LICENSE.txt" 13 | }, 14 | { 15 | "revision": "1b2b759ad9e024b583eb", 16 | "url": "/static/js/main.3625d365.chunk.js" 17 | }, 18 | { 19 | "revision": "272b2118ce1a3384d9bd", 20 | "url": "/static/js/runtime-main.342c7561.js" 21 | } 22 | ]); -------------------------------------------------------------------------------- /React/react-forms/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function App() { 4 | const [name, setName] = React.useState(""); 5 | const [publishName, setPublishName] = React.useState(""); 6 | 7 | function handleChange(event) { 8 | setName(event.target.value); 9 | } 10 | 11 | function handleSubmit(event) { 12 | setPublishName(name); 13 | event.preventDefault(); 14 | } 15 | 16 | return ( 17 |
      18 |

      Hello {publishName}

      19 |
      20 | 21 | 22 |
      23 |
      24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /React/usestate-hook-practice/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | //Challenge: 6 | //1. Given that you can get the current time using: 7 | 8 | // function renderTime() {} 9 | // setInterval(renderTime, 1000); 10 | 11 | ReactDOM.render(, document.getElementById("root")); 12 | 13 | //Show the latest time in the

      when the Get Time button 14 | //is pressed. 15 | 16 | //2. Given that you can get code to be called every second 17 | //using the setInterval method. 18 | //Can you get the time in your

      to update every second? 19 | 20 | //e.g. uncomment the code below to see Hey printed every second. 21 | // function sayHi() { 22 | // console.log("Hey"); 23 | // } 24 | // setInterval(sayHi, 1000); 25 | -------------------------------------------------------------------------------- /React/using-pre-built-react-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "using-pre-built-react-components", 3 | "version": "1.0.0", 4 | "description": "", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "@material-ui/core": "^4.9.13", 9 | "@material-ui/icons": "^4.9.1", 10 | "react": "16.8.6", 11 | "react-dom": "16.8.6", 12 | "react-scripts": "^3.4.1" 13 | }, 14 | "devDependencies": { 15 | "typescript": "3.3.3" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /React/react-devtools/src/contacts.js: -------------------------------------------------------------------------------- 1 | const contacts = [ 2 | { 3 | id: 1, 4 | name: "Beyonce", 5 | imgURL: 6 | "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg", 7 | phone: "+123 456 789", 8 | email: "b@beyonce.com" 9 | }, 10 | { 11 | id: 2, 12 | name: "Jack Bauer", 13 | imgURL: 14 | "https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg", 15 | phone: "+987 654 321", 16 | email: "jack@nowhere.com" 17 | }, 18 | { 19 | id: 3, 20 | name: "Chuck Norris", 21 | imgURL: 22 | "https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png", 23 | phone: "+918 372 574", 24 | email: "gmail@chucknorris.com" 25 | } 26 | ]; 27 | 28 | export default contacts; 29 | -------------------------------------------------------------------------------- /React/mapping-components/src/contacts.js: -------------------------------------------------------------------------------- 1 | const contacts = [ 2 | { 3 | id: 1, 4 | name: "Beyonce", 5 | imgURL: 6 | "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg", 7 | phone: "+123 456 789", 8 | email: "b@beyonce.com" 9 | }, 10 | { 11 | id: 2, 12 | name: "Jack Bauer", 13 | imgURL: 14 | "https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg", 15 | phone: "+987 654 321", 16 | email: "jack@nowhere.com" 17 | }, 18 | { 19 | id: 3, 20 | name: "Chuck Norris", 21 | imgURL: 22 | "https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png", 23 | phone: "+918 372 574", 24 | email: "gmail@chucknorris.com" 25 | } 26 | ]; 27 | 28 | export default contacts; 29 | -------------------------------------------------------------------------------- /React/react-props-practice/src/contacts.js: -------------------------------------------------------------------------------- 1 | const contacts = [ 2 | { 3 | name: "Beyonce", 4 | imgURL: 5 | "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg", 6 | phone: "+123 456 789", 7 | email: "b@beyonce.com", 8 | }, 9 | { 10 | name: "Jack Bauer", 11 | imgURL: "https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg", 12 | phone: "+987 654 321", 13 | email: "jack@nowhere.com", 14 | }, 15 | { 16 | name: "Chuck Norris", 17 | imgURL: "https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png", 18 | phone: "+918 372 574", 19 | email: "gmail@chucknorris.com", 20 | }, 21 | ]; 22 | 23 | export default contacts; 24 | -------------------------------------------------------------------------------- /React/keeper-app-part-2/src/notes.js: -------------------------------------------------------------------------------- 1 | const notes = [ 2 | { 3 | key: 1, 4 | title: "Delegation", 5 | content: 6 | "Q. How many programmers does it take to change a light bulb? A. None – It’s a hardware problem", 7 | }, 8 | { 9 | key: 2, 10 | title: "Loops", 11 | content: 12 | "How to keep a programmer in the shower forever. Show him the shampoo bottle instructions: Lather. Rinse. Repeat.", 13 | }, 14 | { 15 | key: 3, 16 | title: "Arrays", 17 | content: "Q. Why did the programmer quit his job? A. Because he didn't get arrays.", 18 | }, 19 | { 20 | key: 4, 21 | title: "Hardware vs. Software", 22 | content: 23 | "What's the difference between hardware and software? You can hit your hardware with a hammer, but you can only curse at your software.", 24 | }, 25 | ]; 26 | 27 | export default notes; 28 | -------------------------------------------------------------------------------- /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 |
      26 | Made with ❤️ by Parv - 27 | Following Angila 28 |
      29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /React/managing-a-component-tree-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: I have extracted the Input Area, including the and 8 | // 30 | 31 | ); 32 | } 33 | 34 | export default App; 35 | -------------------------------------------------------------------------------- /React/mapping-components-practice/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 | -------------------------------------------------------------------------------- /Daily-Journal/views/partials/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Daily Journal 7 | 8 | 9 | 10 | 23 | 24 | 25 |
      26 | -------------------------------------------------------------------------------- /Simon-Game/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #011F3F; 4 | } 5 | 6 | #level-title { 7 | font-family: 'Press Start 2P', cursive; 8 | font-size: 3rem; 9 | margin: 5%; 10 | color: #FEF2BF; 11 | } 12 | 13 | .container { 14 | display: block; 15 | width: 50%; 16 | margin: auto; 17 | 18 | } 19 | 20 | .btn { 21 | margin: 25px; 22 | display: inline-block; 23 | height: 200px; 24 | width: 200px; 25 | border: 10px solid black; 26 | border-radius: 20%; 27 | } 28 | 29 | .game-over { 30 | background-color: red; 31 | opacity: 0.8; 32 | } 33 | 34 | .red { 35 | background-color: red; 36 | } 37 | 38 | .green { 39 | background-color: green; 40 | } 41 | 42 | .blue { 43 | background-color: blue; 44 | } 45 | 46 | .yellow { 47 | background-color: yellow; 48 | } 49 | 50 | .pressed { 51 | box-shadow: 0 0 20px white; 52 | background-color: grey; 53 | } 54 | -------------------------------------------------------------------------------- /React/map-filter-reduce/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/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 | -------------------------------------------------------------------------------- /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"); -------------------------------------------------------------------------------- /Secrets/views/partials/header.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Secrets 6 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 |
      33 | www 🎲 App Brewery 🎲 com 34 |
      35 | 36 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /React/using-pre-built-react-components/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.js": "/static/js/main.3625d365.chunk.js", 4 | "main.js.map": "/static/js/main.3625d365.chunk.js.map", 5 | "runtime-main.js": "/static/js/runtime-main.342c7561.js", 6 | "runtime-main.js.map": "/static/js/runtime-main.342c7561.js.map", 7 | "static/js/2.0f60d888.chunk.js": "/static/js/2.0f60d888.chunk.js", 8 | "static/js/2.0f60d888.chunk.js.map": "/static/js/2.0f60d888.chunk.js.map", 9 | "index.html": "/index.html", 10 | "precache-manifest.cfbc72f77b74b32112506c007450f0a0.js": "/precache-manifest.cfbc72f77b74b32112506c007450f0a0.js", 11 | "service-worker.js": "/service-worker.js", 12 | "static/js/2.0f60d888.chunk.js.LICENSE.txt": "/static/js/2.0f60d888.chunk.js.LICENSE.txt" 13 | }, 14 | "entrypoints": [ 15 | "static/js/runtime-main.342c7561.js", 16 | "static/js/2.0f60d888.chunk.js", 17 | "static/js/main.3625d365.chunk.js" 18 | ] 19 | } -------------------------------------------------------------------------------- /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/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/react-props/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | function Card(props) { 5 | return ( 6 |
      7 |

      {props.name}

      8 | {props.alt} 9 |

      {props.number}

      10 |

      {props.email}

      11 |
      12 | ); 13 | } 14 | 15 | ReactDOM.render( 16 |
      17 | 24 | 31 |
      , 32 | document.getElementById("root") 33 | ); 34 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /Simon-Game/Simon-Game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simon 7 | 8 | 9 | 10 | 11 | 12 |

      Press A Key to Start

      13 |
      14 |
      15 | 16 |
      17 | 18 |
      19 | 20 |
      21 | 22 |
      23 |
      24 | 25 |
      26 | 27 |
      28 | 29 |
      30 |
      31 | 32 |
      33 | 34 |
      35 | 36 |
      37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /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 | }); -------------------------------------------------------------------------------- /React/keeper-part-3/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 | import CreateArea from "./CreateArea"; 6 | 7 | function App() { 8 | const [notes, setNotes] = React.useState([]); 9 | 10 | function handleNoteSubmit(note) { 11 | setNotes((prevValue) => [...prevValue, { title: note.title, content: note.content }]); 12 | } 13 | 14 | function handleNoteDelete(indexToDelete) { 15 | setNotes((prevValue) => { 16 | return prevValue.filter((note, index) => { 17 | return index !== indexToDelete; 18 | }); 19 | }); 20 | } 21 | 22 | return ( 23 |
      24 |
      25 | 26 | {notes.map((note, index) => { 27 | return ( 28 | 35 | ); 36 | })} 37 |
      38 |
      39 | ); 40 | } 41 | 42 | export default App; 43 | -------------------------------------------------------------------------------- /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-2/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 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /Practice/TodoList-V1/views/list.ejs: -------------------------------------------------------------------------------- 1 | <%- include("header") -%> 2 | 3 |
      4 |

      <%= listTitle %>

      5 |
      6 | 7 |
      8 |
        9 | <% for(var i = 0; i 10 |
        11 | 12 |

        <%= todos[i] %>

        13 | 14 |
        15 | <% } %> 16 |
      17 |
      18 | 19 |
      20 |
      21 |
      22 | 23 |
      24 |
      25 | 26 |
      27 |
      28 | 29 |
      30 | 31 | <%- include("footer") -%> -------------------------------------------------------------------------------- /React/using-pre-built-react-components/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Header from "./Header"; 3 | import Footer from "./Footer"; 4 | import Note from "./Note"; 5 | import CreateArea from "./CreateArea"; 6 | import HighlightIcon from "@material-ui/icons/Highlight"; 7 | 8 | function App() { 9 | const [notes, setNotes] = useState([]); 10 | 11 | function addNote(newNote) { 12 | setNotes((prevNotes) => { 13 | return [...prevNotes, newNote]; 14 | }); 15 | } 16 | 17 | function deleteNote(id) { 18 | setNotes((prevNotes) => { 19 | return prevNotes.filter((noteItem, index) => { 20 | return index !== id; 21 | }); 22 | }); 23 | } 24 | 25 | return ( 26 |
      27 |
      28 | 29 | {notes.map((noteItem, index) => { 30 | return ( 31 | 38 | ); 39 | })} 40 |
      41 |
      42 | ); 43 | } 44 | 45 | export default App; 46 | -------------------------------------------------------------------------------- /React/keeper-part-3/src/components/CreateArea.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function CreateArea(props) { 4 | const [note, setNotes] = React.useState({ title: "", content: "" }); 5 | 6 | function handleChange(event) { 7 | const { name, value } = event.target; 8 | setNotes((prevValue) => { 9 | if (name === "title") { 10 | return { title: value, content: prevValue.content }; 11 | } else { 12 | return { title: prevValue.title, content: value }; 13 | } 14 | }); 15 | } 16 | 17 | return ( 18 |
      19 |
      { 22 | props.noteSubmit(note, event); 23 | setNotes({ title: "", content: "" }); 24 | event.preventDefault(); 25 | }} 26 | > 27 | 28 |