├── 12-hangman ├── .nvmrc ├── .vscode │ └── settings.json ├── styles │ ├── components │ │ ├── _word.scss │ │ ├── _others.scss │ │ ├── _lives.scss │ │ ├── _start.scss │ │ └── _hangman.scss │ ├── utils │ │ ├── _misc.scss │ │ └── _flex.scss │ ├── settings │ │ ├── _variables.scss │ │ └── _reset.scss │ ├── main.scss │ └── layouts │ │ └── _container.scss ├── components │ ├── navbar.js │ └── game │ │ ├── start.js │ │ ├── word.js │ │ ├── letters.js │ │ ├── lives.js │ │ ├── layout.js │ │ └── index.js ├── app.js ├── webpack.config.js ├── index.html ├── package.json └── .gitignore ├── 15-docker ├── .gitignore └── node-express-application │ ├── .dockerignore │ ├── docker-compose.yml │ ├── src │ └── index.js │ ├── package.json │ └── Dockerfile ├── 11-responsive-web-dev ├── lecture-5 │ ├── style.css │ ├── .gitignore │ ├── scss │ │ ├── settings │ │ │ ├── _font.scss │ │ │ └── _colors.scss │ │ └── main.scss │ ├── package.json │ ├── .sass-cache │ │ └── 1c663db36aa7ef15afcd4965a63b54df14024e87 │ │ │ └── main.scssc │ ├── index.html │ ├── dist │ │ ├── index.html │ │ ├── main.77bb5cfd.css │ │ ├── main.77bb5cfd.css.map │ │ ├── main.77bb5cfd.js │ │ └── main.77bb5cfd.js.map │ └── .cache │ │ ├── 39 │ │ └── 79c466aa54ca26e0de387b42bb814c.json │ │ └── a5 │ │ └── 6012ae3843c288b51658c44e66d332.json ├── lecture-4 │ ├── .vscode │ │ └── settings.json │ ├── animation-2.css │ ├── styles.css │ ├── yinyang.css │ ├── animation.css │ └── index.html ├── lecture-3 │ ├── secondary-styles.css │ ├── styles.css │ ├── styles2.css │ └── index.html ├── lecture-2 │ ├── index.html │ └── styles.css └── lecture-1 │ ├── index.html │ └── styles.css ├── 08-node-basics ├── fs-basics │ ├── data.txt │ ├── readfile.js │ └── writefile.js ├── import-export-browser │ ├── main.js │ ├── lib.js │ └── index.html ├── asg-file-sorter │ ├── sorted-example.txt │ ├── 2.txt │ ├── 3.txt │ ├── file-sorter.js │ └── 1.txt ├── import-export-nodejs-future │ ├── main.mjs │ └── lib.mjs ├── import-export-nodejs-current │ ├── main.js │ └── lib.js └── scripts │ ├── hello.js │ └── index.html ├── .DS_Store ├── 02-html-css-link ├── style.css ├── collapsing-list │ ├── style.css │ └── index.html ├── selectors │ ├── style.css │ └── index.html └── index.html ├── 06-react-ii ├── src │ ├── components │ │ ├── example.js │ │ ├── Body.js │ │ ├── NavBar.js │ │ ├── Background.js │ │ ├── Todo.js │ │ ├── index.js │ │ ├── NewComponent.js │ │ └── Todos.js │ ├── style │ │ ├── todo.css │ │ └── background.css │ ├── images │ │ └── bg.jpeg │ ├── App.css │ ├── index.js │ ├── index.css │ ├── App.js │ └── logo.svg ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── package.json └── README.md ├── 13-typescript ├── typescript-react-1 │ ├── src │ │ ├── react-app-env.d.ts │ │ ├── App.tsx │ │ ├── setupTests.ts │ │ ├── App.test.tsx │ │ ├── index.css │ │ ├── TextField.tsx │ │ ├── reportWebVitals.ts │ │ ├── index.tsx │ │ ├── App.css │ │ └── logo.svg │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── index.html │ ├── .gitignore │ ├── tsconfig.json │ ├── package.json │ └── README.md ├── package.json ├── index.js ├── index.ts └── tsconfig.json ├── 07-react-movie-db ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── styles │ │ ├── movie-card.css │ │ ├── movie-list.css │ │ ├── movie-details.css │ │ └── navbar.css │ ├── App.css │ ├── pages │ │ ├── About.js │ │ ├── Home.js │ │ ├── Movie.js │ │ └── MovieDetails.js │ ├── components │ │ ├── index.js │ │ ├── NavBar.js │ │ ├── MovieList.js │ │ └── MovieCard.js │ ├── index.css │ ├── index.js │ ├── App.js │ └── logo.svg ├── package.json └── README.md ├── README.md ├── 10-express-middlewares-routers ├── express-app-routes │ ├── package.json │ ├── routes │ │ ├── teachers.js │ │ └── students.js │ └── server.js └── express-app-middlewares │ ├── package.json │ ├── server.js │ └── server2.js ├── 13-hangman-frontend ├── components │ ├── navbar.js │ └── game │ │ ├── lives.js │ │ ├── word.js │ │ ├── letters.js │ │ ├── start.js │ │ └── index.js ├── app.js ├── index.html ├── webpack.config.js ├── package.json ├── api │ └── sessions.js └── .gitignore ├── 14-testing └── cabfare │ ├── src │ ├── utils.js │ └── server.js │ ├── package.json │ ├── test │ └── utils.test.js │ └── public_html │ ├── script.js │ └── index.html ├── 03-css-fun ├── transforms │ ├── style.css │ └── index.html └── 3d-elevated-button │ ├── index.html │ └── style.css ├── 09-node-express-server ├── task-list-http-server │ ├── package.json │ └── server.js └── basic-server │ ├── package.json │ └── server.js ├── .gitignore ├── 05-todo-js ├── advanced │ ├── index.html │ └── script.js └── basic │ ├── index.html │ └── script.js ├── 04-css-advanced ├── game-css │ ├── index.html │ └── style.css ├── index.html └── style.css └── 01-html-101 └── index.html /12-hangman/.nvmrc: -------------------------------------------------------------------------------- 1 | v14.18.2 -------------------------------------------------------------------------------- /15-docker/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /15-docker/node-express-application/.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /08-node-basics/fs-basics/data.txt: -------------------------------------------------------------------------------- 1 | abcdefgh 2 | ABCDEFGH 3 | 01234567 -------------------------------------------------------------------------------- /12-hangman/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /12-hangman/styles/components/_word.scss: -------------------------------------------------------------------------------- 1 | .word { 2 | font-size: 5rem; 3 | } -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/.DS_Store -------------------------------------------------------------------------------- /02-html-css-link/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | font-size: 30pt; 3 | color: green !important; 4 | } -------------------------------------------------------------------------------- /06-react-ii/src/components/example.js: -------------------------------------------------------------------------------- 1 | function myFunc() { 2 | console.log("Hello"); 3 | } 4 | -------------------------------------------------------------------------------- /08-node-basics/import-export-browser/main.js: -------------------------------------------------------------------------------- 1 | console.log(greet()) 2 | console.log(greet('Arnav')) -------------------------------------------------------------------------------- /06-react-ii/src/style/todo.css: -------------------------------------------------------------------------------- 1 | .todo { 2 | padding: 1rem; 3 | border: 1rem solid grey; 4 | } 5 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-4/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /06-react-ii/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /08-node-basics/asg-file-sorter/sorted-example.txt: -------------------------------------------------------------------------------- 1 | 3 2 | 6 3 | 45 4 | 78 5 | 345 6 | 678 7 | 3578 8 | 7950 -------------------------------------------------------------------------------- /07-react-movie-db/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/scss/settings/_font.scss: -------------------------------------------------------------------------------- 1 | $font-small: 10px; 2 | $font-med: 15px; 3 | $font-large: 20px; -------------------------------------------------------------------------------- /07-react-movie-db/src/styles/movie-card.css: -------------------------------------------------------------------------------- 1 | .movie-card { 2 | margin-right: 2rem; 3 | margin-bottom: 2rem; 4 | } 5 | -------------------------------------------------------------------------------- /06-react-ii/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/06-react-ii/public/favicon.ico -------------------------------------------------------------------------------- /06-react-ii/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/06-react-ii/public/logo192.png -------------------------------------------------------------------------------- /06-react-ii/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/06-react-ii/public/logo512.png -------------------------------------------------------------------------------- /06-react-ii/src/images/bg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/06-react-ii/src/images/bg.jpeg -------------------------------------------------------------------------------- /12-hangman/styles/utils/_misc.scss: -------------------------------------------------------------------------------- 1 | .display-none { 2 | display: none; 3 | } 4 | 5 | .word-flex { 6 | margin-bottom: 5rem; 7 | } -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | EDGE WebDev 2021 2 | ================ 3 | 4 | This repository is a common store for all code written during classes. 5 | -------------------------------------------------------------------------------- /07-react-movie-db/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/07-react-movie-db/public/favicon.ico -------------------------------------------------------------------------------- /07-react-movie-db/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/07-react-movie-db/public/logo192.png -------------------------------------------------------------------------------- /07-react-movie-db/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/07-react-movie-db/public/logo512.png -------------------------------------------------------------------------------- /10-express-middlewares-routers/express-app-routes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "express": "^4.17.2" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /12-hangman/styles/settings/_variables.scss: -------------------------------------------------------------------------------- 1 | $dark-color: #323232; 2 | $pink-dark: #FA4EAB; 3 | $pink: #FE83C6; 4 | $pink-light: #FFF2F9; -------------------------------------------------------------------------------- /06-react-ii/src/components/Body.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Body() { 4 | return
Body
; 5 | } 6 | -------------------------------------------------------------------------------- /07-react-movie-db/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1b2634; 3 | color: #eee; 4 | } 5 | 6 | .main { 7 | width: 100vw; 8 | } 9 | -------------------------------------------------------------------------------- /10-express-middlewares-routers/express-app-middlewares/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "express": "^4.17.2" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /08-node-basics/import-export-nodejs-future/main.mjs: -------------------------------------------------------------------------------- 1 | import { greet } from './lib.mjs'; 2 | 3 | console.log(greet()) 4 | console.log(greet('Arnav')) -------------------------------------------------------------------------------- /12-hangman/components/navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Navbar() { 4 | return ( 5 | <> 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /08-node-basics/import-export-nodejs-current/main.js: -------------------------------------------------------------------------------- 1 | const lib = require('./lib.js') 2 | 3 | 4 | console.log(lib.greet()) 5 | console.log(lib.greet('Arnav')) -------------------------------------------------------------------------------- /13-hangman-frontend/components/navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Navbar() { 4 | return ( 5 | <> 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /07-react-movie-db/src/pages/About.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function About() { 4 | return
Hi from About Page
; 5 | } 6 | -------------------------------------------------------------------------------- /07-react-movie-db/src/styles/movie-list.css: -------------------------------------------------------------------------------- 1 | .movie-list { 2 | padding: 2rem; 3 | display: flex; 4 | flex-wrap: wrap; 5 | background-color: #243240; 6 | } 7 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/13-typescript/typescript-react-1/public/favicon.ico -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/13-typescript/typescript-react-1/public/logo192.png -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scaleracademy/edge-webdev-2021/HEAD/13-typescript/typescript-react-1/public/logo512.png -------------------------------------------------------------------------------- /06-react-ii/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | /* color: white; */ 10 | } 11 | -------------------------------------------------------------------------------- /06-react-ii/src/style/background.css: -------------------------------------------------------------------------------- 1 | .background { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | height: 100vh; 6 | width: 100vw; 7 | z-index: -1; 8 | } 9 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | $red: red; 2 | $white: white; 3 | $primary: blue; 4 | 5 | $colors: ( 6 | red: $red, 7 | whiye: $white, 8 | primary: $primary 9 | ) -------------------------------------------------------------------------------- /02-html-css-link/collapsing-list/style.css: -------------------------------------------------------------------------------- 1 | li li { 2 | height: 0; 3 | visibility: hidden; 4 | } 5 | 6 | li:hover > * > li { 7 | height: auto; 8 | visibility: visible; 9 | } 10 | 11 | -------------------------------------------------------------------------------- /07-react-movie-db/src/styles/movie-details.css: -------------------------------------------------------------------------------- 1 | .movie-details { 2 | padding: 4rem; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | -------------------------------------------------------------------------------- /08-node-basics/import-export-browser/lib.js: -------------------------------------------------------------------------------- 1 | function greet(name) { 2 | if (typeof name === "string") { 3 | return `Hello, ${name}!`; 4 | } else { 5 | return "Hello, Guest!"; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /12-hangman/styles/components/_others.scss: -------------------------------------------------------------------------------- 1 | .message { 2 | display: block; 3 | text-align: center; 4 | color: $pink-light; 5 | font-size: 4rem; 6 | margin-bottom: 2rem; 7 | width: 100%; 8 | } -------------------------------------------------------------------------------- /08-node-basics/fs-basics/readfile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | fs.readFile('data.txt', (err, data) => { 4 | if (err) throw err; 5 | console.log(data); 6 | console.log(data.toString()); 7 | }) -------------------------------------------------------------------------------- /08-node-basics/import-export-nodejs-future/lib.mjs: -------------------------------------------------------------------------------- 1 | export function greet(name) { 2 | if (typeof name === "string") { 3 | return `Hello, ${name}!`; 4 | } else { 5 | return "Hello, Guest!"; 6 | } 7 | } -------------------------------------------------------------------------------- /07-react-movie-db/src/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export default function Home() { 5 | return Movie list page; 6 | } 7 | -------------------------------------------------------------------------------- /13-hangman-frontend/components/game/lives.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Lives({ livesLeft }) { 4 | return ( 5 |
6 | Lives: {livesLeft} 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /07-react-movie-db/src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as NavBar } from "./NavBar"; 2 | export { default as MovieList } from "./MovieList"; 3 | 4 | /** 5 | * import NavBar from "./NavBar" 6 | * export { NavBar } 7 | */ 8 | -------------------------------------------------------------------------------- /08-node-basics/fs-basics/writefile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | fs.writeFile('abcd/data.txt', 'Hello World!', (err) => { 4 | if (err) throw err; 5 | else console.log('File saved!'); 6 | }) 7 | 8 | // mai kya kar raha hu ? -------------------------------------------------------------------------------- /08-node-basics/asg-file-sorter/2.txt: -------------------------------------------------------------------------------- 1 | 576 2 | 35 3 | 624 4 | 62 5 | 653 6 | 746 7 | 846 8 | 846 9 | 946 10 | 846 11 | 76 12 | 3 13 | 735 14 | 35 15 | 635 16 | 653 17 | 635 18 | 753 19 | 7357537 20 | 356 21 | 356 22 | 356 23 | 357357 -------------------------------------------------------------------------------- /06-react-ii/src/components/NavBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function NavBar({ title, logo }) { 4 | return ( 5 |
6 |

{title}

7 |

{logo}

8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /15-docker/node-express-application/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3' 2 | services: 3 | web: 4 | build: . 5 | ports: 6 | - "8080:8080" 7 | db: 8 | image: "mysql" 9 | environment: 10 | MYSQL_ROOT_PASSWORD: password -------------------------------------------------------------------------------- /08-node-basics/asg-file-sorter/3.txt: -------------------------------------------------------------------------------- 1 | 7595 2 | 647 3 | 674 4 | 673 5 | 5735753 6 | 63 7 | 5653 8 | 735 9 | 736 10 | 763 11 | 763 12 | 763 13 | 83683 14 | 683 15 | 35683 16 | 6836 17 | 87356 18 | 35 19 | 73 20 | 68648743 21 | 735 22 | 7357 23 | 3673 24 | -------------------------------------------------------------------------------- /12-hangman/styles/utils/_flex.scss: -------------------------------------------------------------------------------- 1 | .display-flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | 6 | .justify-content-center { 7 | justify-content: center; 8 | } 9 | 10 | .justify-content-around { 11 | justify-content: space-around; 12 | } -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TextField } from './TextField'; 3 | 4 | const App: React.FC = () => { 5 | return
6 | 7 |
; 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /07-react-movie-db/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Monteserrat", sans-serif; 9 | } 10 | 11 | a { 12 | color: #eee; 13 | } 14 | 15 | a:active { 16 | color: #eee; 17 | } 18 | -------------------------------------------------------------------------------- /08-node-basics/scripts/hello.js: -------------------------------------------------------------------------------- 1 | // console.log("hello world") 2 | // console.log(Math.max(123,457,6584,23)) 3 | // console.log(process.argv) 4 | 5 | if (process.argv.length < 3) { 6 | console.log("Hello Guest") 7 | } else { 8 | console.log("Hello " + process.argv[2]) 9 | } -------------------------------------------------------------------------------- /08-node-basics/asg-file-sorter/file-sorter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create a program that does the following - 3 | * 1. Read files 1.txt, 2.txt, 3.txt and all the numbers inside them 4 | * 2. Sort the numbers in ascending order 5 | * 3. Write the sorted numbers to a file called sorted.txt 6 | */ -------------------------------------------------------------------------------- /08-node-basics/import-export-nodejs-current/lib.js: -------------------------------------------------------------------------------- 1 | function greet(name) { 2 | if (typeof name === "string") { 3 | return `Hello, ${name}!`; 4 | } else { 5 | return "Hello, Guest!"; 6 | } 7 | } 8 | let a = 10; 9 | 10 | module.exports = { 11 | greet, 12 | a 13 | } -------------------------------------------------------------------------------- /06-react-ii/src/components/Background.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "../style/background.css"; 4 | import background from "../images/bg.jpeg"; 5 | 6 | export default function Background() { 7 | return background img; 8 | } 9 | -------------------------------------------------------------------------------- /06-react-ii/src/components/Todo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "../style/todo.css"; 4 | 5 | export default function Todo({ todo }) { 6 | return ( 7 |
8 | {todo.id} 9 | {". "} 10 | {todo.title} 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /06-react-ii/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /06-react-ii/src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Navbar } from "./NavBar"; 2 | export { default as Body } from "./Body"; 3 | export { default as Background } from "./Background"; 4 | export { default as Todos } from "./Todos"; 5 | // import Navbar from "./NavBar"; 6 | 7 | // export { Navbar }; 8 | -------------------------------------------------------------------------------- /07-react-movie-db/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /12-hangman/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom' 3 | import Game from './components/game' 4 | import './styles/main.scss' 5 | 6 | const App = () => ( 7 | <> 8 | 9 | 10 | 11 | ); 12 | 13 | ReactDOM.render(, document.getElementById("app")); 14 | -------------------------------------------------------------------------------- /08-node-basics/asg-file-sorter/1.txt: -------------------------------------------------------------------------------- 1 | 2375 2 | 356 3 | 35 4 | 2346 5 | 35 6 | 747 7 | 356 8 | 3456 9 | 34563 10 | 63 11 | 573 12 | 57 13 | 467 14 | 4684 15 | 6864 16 | 7436 17 | 73 18 | 563 19 | 563 20 | 7 21 | 4567846 22 | 873 23 | 46 24 | 3563 25 | 56 26 | 3456 27 | 26 28 | 35736 29 | 8736 30 | 735 31 | 635 32 | 6 -------------------------------------------------------------------------------- /07-react-movie-db/src/pages/Movie.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MovieList } from "../components"; 3 | 4 | export default function Movie({ movieList, isLoading }) { 5 | return ( 6 |
7 | Movie List page 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /13-hangman-frontend/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom' 3 | import Game from './components/game' 4 | 5 | const App = () => ( 6 | <> 7 |
8 | Hello World ! 9 |
10 | 11 | 12 | 13 | ); 14 | 15 | ReactDOM.render(, document.getElementById("app")); 16 | -------------------------------------------------------------------------------- /07-react-movie-db/src/styles/navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | display: flex; 3 | padding: 2rem; 4 | justify-content: space-between; 5 | align-items: center; 6 | width: 100%; 7 | } 8 | 9 | .search-bar { 10 | outline: none; 11 | border: none; 12 | background: none; 13 | 14 | background-color: #1b2634; 15 | color: #eee; 16 | } 17 | -------------------------------------------------------------------------------- /13-hangman-frontend/components/game/word.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Word({ 4 | maskedWord 5 | }) { 6 | return ( 7 |
8 | {maskedWord.map((letter) => ( 9 | <> 10 |  {letter}  11 | 12 | ))} 13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /14-testing/cabfare/src/utils.js: -------------------------------------------------------------------------------- 1 | 2 | function calcFare(kms, mins) { 3 | kms = parseInt(kms); 4 | let result = 25; 5 | 6 | if (kms > 2) { 7 | result += ((kms - 2) * 10); 8 | } 9 | 10 | if (mins > 15) { 11 | result += ((mins - 15)); 12 | } 13 | 14 | return result; 15 | } 16 | 17 | module.exports = { 18 | calcFare 19 | }; -------------------------------------------------------------------------------- /12-hangman/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import "settings/reset"; 2 | @import "settings/variables"; 3 | 4 | @import "layouts/container"; 5 | 6 | @import "components/start"; 7 | @import "components/hangman"; 8 | @import "components/word"; 9 | @import "components/lives"; 10 | @import "components/others"; 11 | 12 | @import "utils/flex"; 13 | @import "utils/misc"; -------------------------------------------------------------------------------- /02-html-css-link/selectors/style.css: -------------------------------------------------------------------------------- 1 | .right { 2 | text-align: right; 3 | } 4 | 5 | #two { 6 | color: red; 7 | } 8 | 9 | .small { 10 | font-size: 7pt; 11 | } 12 | 13 | .outer > .inner { 14 | background-color: aqua; 15 | } 16 | 17 | div + p { 18 | color: green; 19 | } 20 | 21 | div ~ p { 22 | /* font-weight: bold; */ 23 | color: red; 24 | } -------------------------------------------------------------------------------- /13-hangman-frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hangman 6 | 7 | 8 |
9 | 10 | 12 | 13 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /12-hangman/components/game/start.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Start({ onStart, isRunning }) { 4 | return ( 5 |
6 | 12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /15-docker/node-express-application/src/index.js: -------------------------------------------------------------------------------- 1 | const app = require('express')(); 2 | 3 | app.get('/', (req, res) => { 4 | res.json({ 5 | message: 'Docker is simple!!!' 6 | }) 7 | }); 8 | 9 | const port = process.env.PORT || 8080; 10 | 11 | app.listen( 12 | port, 13 | () => { 14 | console.log(`app listening on port ${port}`) 15 | } 16 | ) 17 | 18 | -------------------------------------------------------------------------------- /13-typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "13-typescript", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "create-react-app": "^5.0.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /15-docker/node-express-application/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-express-application", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node src/index.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.18.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /13-hangman-frontend/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | entry: "./app.js", 4 | module: { 5 | rules: [ 6 | { 7 | test: /\.js/, 8 | loader: "babel-loader", 9 | exclude: /node_modules/, 10 | options: { 11 | presets: ['@babel/preset-react'] 12 | } 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /03-css-fun/transforms/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | height: 50px; 3 | width: 50px; 4 | margin: 30px; 5 | background-color: midnightblue; 6 | } 7 | 8 | #two { 9 | transform: translateY(30px) translateX(-20px); 10 | } 11 | 12 | #four { 13 | transform: rotate(45deg); 14 | } 15 | 16 | #six { 17 | transform: skewX(10deg); 18 | } 19 | 20 | #eight { 21 | transform: scale(2); 22 | } -------------------------------------------------------------------------------- /09-node-express-server/task-list-http-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "task-list-http-server", 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 | "express": "^4.17.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /15-docker/node-express-application/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12 2 | # Base Image - which our current image would be cascaded on top of 3 | 4 | WORKDIR /app 5 | 6 | COPY package*.json ./ 7 | 8 | RUN npm install 9 | # spawns a terminal inside the docker file system and runs the command on it 10 | 11 | COPY . . 12 | 13 | ENV PORT=8080 14 | 15 | EXPOSE 8080 16 | 17 | CMD ["npm", "start"] -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-4/animation-2.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | display: flex; 3 | flex-wrap: no-wrap; 4 | background-color: grey; 5 | animation: animate-margin 2000ms alternate infinite; 6 | } 7 | 8 | @keyframes animate-margin { 9 | 100% { 10 | margin-top: 300px; 11 | } 12 | } 13 | 14 | @keyframes animate-transform { 15 | 100% { 16 | transform: translateY(300px); 17 | } 18 | } -------------------------------------------------------------------------------- /03-css-fun/3d-elevated-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Click Me!
12 | 13 | -------------------------------------------------------------------------------- /08-node-basics/scripts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Hello

12 | 13 | -------------------------------------------------------------------------------- /14-testing/cabfare/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cabfare", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jest", 8 | "start": "node src/server.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.17.3" 14 | }, 15 | "devDependencies": { 16 | "jest": "^27.5.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | **/node_modules/** 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /08-node-basics/import-export-browser/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /09-node-express-server/basic-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "basic-server", 3 | "version": "0.0.1", 4 | "description": "This is a basic HTTP server in NodeJS ", 5 | "main": "server.js ", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Arnav Gupta ", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.17.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /06-react-ii/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /06-react-ii/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { Navbar, Todos, Background } from "./components"; 3 | import NewComponent from "./components/NewComponent"; 4 | 5 | function App() { 6 | return ( 7 |
8 | {/* */} 9 | {/* */} 10 | 11 | {/*

Footer

*/} 12 |
13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /12-hangman/styles/components/_lives.scss: -------------------------------------------------------------------------------- 1 | .lives { 2 | position: absolute; 3 | bottom: 0; 4 | right: 2rem; 5 | background: url('https://www.freeiconspng.com/thumbs/heart-png/heart-png-15.png'); 6 | height: 50px; 7 | background-size: 50px; 8 | background-repeat: repeat no-repeat; 9 | background-blend-mode: luminosity; 10 | } 11 | 12 | @for $i from 1 through 6 { 13 | .lives-#{$i} { 14 | width: 50px * $i; 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lecture-5", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "parcel index.html", 8 | "build": "parcel build index.html" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "sass": "^1.48.0" 15 | }, 16 | "dependencies": { 17 | "parcel-bundler": "^1.12.5" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /14-testing/cabfare/test/utils.test.js: -------------------------------------------------------------------------------- 1 | const { calcFare } = require("../src/utils"); 2 | 3 | test('0km, 0min = Rs. 25', () => { 4 | expect(calcFare(0, 0)).toEqual(25); 5 | }); 6 | 7 | test('3km, 0min = Rs. 35', () => { 8 | expect(calcFare(3, 0)).toEqual(35); 9 | }); 10 | 11 | test('2km, 20min = Rs. 30', () => { 12 | expect(calcFare(2, 20)).toEqual(30); 13 | }); 14 | 15 | test('3km, 20min = Rs. 40', () => { 16 | expect(calcFare(3, 20)).toEqual(40); 17 | }); -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/TextField.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Person { 4 | name: string 5 | } 6 | 7 | interface Props { 8 | text: string; 9 | ok?: boolean; 10 | random?: number; 11 | fn?: (x: number) => string; 12 | alias?: Person; 13 | } 14 | 15 | export const TextField: React.FC = () => { 16 | // React.FC represents a React Functional Component 17 | return ( 18 |
19 | 20 |
21 | ) 22 | } -------------------------------------------------------------------------------- /14-testing/cabfare/public_html/script.js: -------------------------------------------------------------------------------- 1 | const dispFare = document.getElementById('dispFare'); 2 | const inpKm = document.getElementById('inpKm'); 3 | const inpMin = document.getElementById('inpMin'); 4 | const btnSubmit = document.getElementById('btnSubmit'); 5 | 6 | btnSubmit.onclick = function () { 7 | const kms = inpKm.value; 8 | const mins = inpMin.value; 9 | 10 | axios.get(`/fare?kms=${kms}&mins=${mins}`) 11 | .then((resp) => { 12 | dispFare.innerText = `Fare : Rs. ${resp.data.fare}` 13 | }); 14 | }; -------------------------------------------------------------------------------- /13-hangman-frontend/components/game/letters.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const ALL_ALPHABETS = [..."abcdefghijklmnopqrstuvwxyz"]; 4 | 5 | export default function Letters({ 6 | playedLetters, onSelect 7 | }) { 8 | return ( 9 |
10 | {ALL_ALPHABETS.map((alphabet) => ( 11 | 17 | ))} 18 |
19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /13-hangman-frontend/components/game/start.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | 3 | export default function Start({ onStart }) { 4 | const [name, setName] = useState(""); 5 | 6 | return ( 7 |
8 | setName(e.target.name)} 12 | name={name} 13 | /> 14 | 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /13-hangman-frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hangman", 3 | "version": "1.0.0", 4 | "description": "An awesome game developed by awesome developers", 5 | "scripts": { 6 | "build": "webpack" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "dependencies": { 11 | "@babel/preset-react": "^7.16.7", 12 | "babel": "^6.23.0", 13 | "babel-loader": "^8.2.3", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "webpack": "^5.67.0", 17 | "webpack-cli": "^4.9.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /05-todo-js/advanced/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Task List

12 | 13 | 14 | 15 |
    16 | 17 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /12-hangman/components/game/word.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Word({ 4 | actualWord, playedLetters 5 | }) { 6 | return ( 7 |
    8 | {[...actualWord].map((letter) => ( 9 | <> 10 | {playedLetters.has(letter) ? ( 11 |
    {letter}
    12 | ) : ( 13 |
     _ 
    14 | )} 15 | 16 | ))} 17 |
    18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /12-hangman/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | entry: "./app.js", 4 | watch: true, 5 | module: { 6 | rules: [ 7 | { 8 | test: /\.js/, 9 | loader: "babel-loader", 10 | exclude: /node_modules/, 11 | options: { 12 | presets: ['@babel/preset-react'] 13 | } 14 | }, 15 | { 16 | test: /\.s[ac]ss/, 17 | use: ['style-loader', 'css-loader', 'sass-loader'], 18 | exclude: /node_modules/ 19 | } 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /05-todo-js/basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |

    Todo List

    13 |

    This is a task list

    14 | 15 | 16 |
      17 |
    • sample
      • 18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /03-css-fun/3d-elevated-button/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | margin: 100px; 3 | padding: 20px; 4 | font-size: 38pt; 5 | font-family: sans-serif; 6 | 7 | height: 80px; 8 | width: 400px; 9 | background-color: dodgerblue; 10 | 11 | color: white; 12 | 13 | box-shadow: 5px 5px 5px black; 14 | transition: 1s; 15 | } 16 | 17 | div:hover { 18 | transform: translateX(-10px) translateY(-10px); 19 | box-shadow: 15px 15px 10px black; 20 | } 21 | 22 | div:active { 23 | transform: translateX(3px) translateY(3px); 24 | box-shadow: 2px 2px 2px black; 25 | transition: 0.2s; 26 | } -------------------------------------------------------------------------------- /04-css-advanced/game-css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /12-hangman/styles/layouts/_container.scss: -------------------------------------------------------------------------------- 1 | .game-wrapper { 2 | height: 100vh; 3 | width: 100vw; 4 | background: $dark-color; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | overflow: hidden; 9 | font-family: 'Mochiy Pop P One', sans-serif; 10 | align-content: center; 11 | flex-wrap: wrap; 12 | } 13 | 14 | .left-pane { 15 | width: 30%; 16 | height: 100vh; 17 | background: $pink-light; 18 | display: flex; 19 | align-items: flex-end; 20 | position: relative; 21 | } 22 | 23 | .right-pane { 24 | flex: 1; 25 | color: white; 26 | } -------------------------------------------------------------------------------- /12-hangman/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hangman 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 15 | 16 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-3/secondary-styles.css: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | 5 | .grid-element { 6 | border-radius: 15px; 7 | overflow: hidden; 8 | border: 1px solid #666; 9 | position: relative; 10 | background: grey; 11 | } 12 | 13 | .grid-element span { 14 | position: absolute; 15 | background-color: rgba(200, 200, 200, 0.6); 16 | height: 80px; 17 | width: 80px; 18 | font-size: 3rem; 19 | color: black; 20 | font-weight: 700; 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | bottom: 10px; 25 | right: 10px; 26 | border-radius: 50%; 27 | } 28 | -------------------------------------------------------------------------------- /12-hangman/components/game/letters.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const ALL_ALPHABETS = [..."abcdefghijklmnopqrstuvwxyz"]; 4 | 5 | export default function Letters({ 6 | playedLetters, onSelect 7 | }) { 8 | return ( 9 |
    10 | {ALL_ALPHABETS.map((alphabet) => ( 11 | 18 | ))} 19 |
    20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /06-react-ii/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /07-react-movie-db/src/components/NavBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "../styles/navbar.css"; 4 | 5 | export default function NavBar({ setInputValue, inputValue, search }) { 6 | return ( 7 |
    8 | MOVIE DB 9 | { 11 | // inputValue = e.target.value; // wrong 12 | setInputValue(e.target.value); 13 | }} 14 | onKeyPress={search} 15 | type="text" 16 | placeholder="Search..." 17 | className="search-bar" 18 | /> 19 |
    20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /07-react-movie-db/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | 16 | // If you want to start measuring performance in your app, pass a function 17 | // to log results (for example: reportWebVitals(console.log)) 18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 19 | reportWebVitals(); 20 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-4/styles.css: -------------------------------------------------------------------------------- 1 | #one { 2 | /* 0100 */ 3 | color: yellow; 4 | } 5 | 6 | .last { 7 | color: blue; 8 | } 9 | 10 | .heading.heading-1 { 11 | /* 0020 */ 12 | color: green; 13 | } 14 | 15 | div.heading-1 { 16 | /* 0011 */ 17 | color: brown; 18 | } 19 | 20 | .heading { 21 | /* 0010 */ 22 | color: cyan; 23 | } 24 | 25 | .heading-1 { 26 | /* 0010 */ 27 | color: black; 28 | } 29 | 30 | div { 31 | /* 0001 */ 32 | color: blue; 33 | } 34 | 35 | div { 36 | /* 0001 */ 37 | color: red; 38 | } 39 | 40 | div div div div div div div div div div div div { 41 | color: red !important; 42 | } 43 | 44 | .last:hover { 45 | color: aqua; 46 | } -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/.sass-cache/1c663db36aa7ef15afcd4965a63b54df14024e87/main.scssc: -------------------------------------------------------------------------------- 1 | 3.7.4 2 | da39a3ee5e6b4b0d3255bfef95601890afd80709 3 | o:Sass::Tree::RootNode :@children[:@filename0: @options{:@templateI":ET: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"scss/main.scss; 6 | T:@importero: Sass::Importers::Filesystem: 7 | @rootI"X/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5; 8 | T:@real_rootI"X/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5; 9 | T:@same_name_warningso:Set: 10 | @hash}F -------------------------------------------------------------------------------- /04-css-advanced/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
    1
    12 |
    2
    13 |
    3
    14 |
    4
    15 |
    5
    16 |
    6
    17 |
    7
    18 |
    8
    19 |
    9
    20 |
    21 |
    22 |
    23 |
    24 |
    25 |
    26 |
    27 |
    28 | 29 | -------------------------------------------------------------------------------- /07-react-movie-db/src/components/MovieList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "../styles/movie-list.css"; 4 | import MovieCard from "./MovieCard"; 5 | 6 | export default function MovieList({ movieList, isLoading }) { 7 | if (isLoading) { 8 | return "Loading Movies please wait!"; 9 | } else { 10 | return ( 11 |
    12 | {movieList.map((movie) => ( 13 | 14 | ))} 15 |
    16 | ); 17 | } 18 | } 19 | /** 20 | * const newArr = [1,2,3,4].forEach(()=>{}) // undefined 21 | * const newArr = [1,2,3,4].map(value=>value+1) // [2,3,4,5] 22 | * 23 | */ 24 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /06-react-ii/src/components/NewComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | import axios from "axios"; 4 | 5 | export default class NewComponent extends Component { 6 | state = { 7 | count: 0, 8 | isLoading: true, 9 | data: [], 10 | }; 11 | async componentDidMount() { 12 | let res = await axios.get("udbdj"); 13 | this.setState({ data: res.data, isLoading: false }); 14 | } 15 | render() { 16 | return ( 17 | 24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /12-hangman/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hangman", 3 | "version": "1.0.0", 4 | "description": "An awesome game developed by awesome developers", 5 | "scripts": { 6 | "build": "webpack" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "dependencies": { 11 | "@babel/core": "^7.16.12", 12 | "@babel/preset-env": "^7.16.11", 13 | "@babel/preset-react": "^7.16.7", 14 | "babel-loader": "^8.2.3", 15 | "css-loader": "^6.5.1", 16 | "node-sass": "^7.0.1", 17 | "react": "^17.0.2", 18 | "react-dom": "^17.0.2", 19 | "sass-loader": "^12.4.0", 20 | "style-loader": "^3.3.1", 21 | "webpack": "^5.67.0", 22 | "webpack-cli": "^4.9.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /03-css-fun/transforms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
    12 |
    13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 |
    25 |
    26 |
    27 | 28 | -------------------------------------------------------------------------------- /10-express-middlewares-routers/express-app-middlewares/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | 4 | function checkIfKnownPerson(req, res, next) { 5 | if (req.query.key === '42') { 6 | next(); 7 | } else { 8 | res.send('You are not a known person'); 9 | } 10 | } 11 | 12 | function sayHello(req, res) { 13 | res.send('Hello World!'); 14 | } 15 | 16 | function welcomeInside(req, res) { 17 | res.send('Welcome to the secret world of Scalerverse!') 18 | } 19 | 20 | app.get('/public', sayHello) 21 | app.get('/private', checkIfKnownPerson, welcomeInside) 22 | 23 | app.listen(7788, () => { 24 | console.log('server started on http://localhost:7788'); 25 | }) -------------------------------------------------------------------------------- /02-html-css-link/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 19 | 20 | 21 | 22 | 23 | 24 |

    para 1

    25 |

    para 2

    26 |

    para 3

    27 |

    para 4

    28 |
    div 1
    29 |
    div 2
    30 |
    div 3
    31 |
    div 4
    32 | 33 | 34 | -------------------------------------------------------------------------------- /14-testing/cabfare/src/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const { calcFare } = require('./utils'); 4 | 5 | const app = express(); 6 | 7 | app.use('/', express.static(path.join(__dirname, '../public_html'))); 8 | 9 | app.get('/fare', (req, res) => { 10 | 11 | const kms = req.query.kms 12 | const mins = req.query.mins 13 | 14 | if (!kms || !mins) { 15 | return res.status(400).json({ 16 | error: 'Passing "kms" and "mins" is mandatory' 17 | }) 18 | } 19 | 20 | const fare = calcFare(kms, mins) 21 | 22 | return res.json({ 23 | fare 24 | }) 25 | 26 | }); 27 | 28 | app.listen(4567, () => { 29 | console.log('Server started on http://localhost:4567'); 30 | }); -------------------------------------------------------------------------------- /12-hangman/components/game/lives.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Lives({ livesLeft }) { 4 | return ( 5 | <> 6 |
    7 |
    8 |
    9 |
    10 |
    11 |
    12 |
    13 |
    14 |
    15 |
    16 |
    17 |
    18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /10-express-middlewares-routers/express-app-routes/routes/teachers.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const route = express.Router(); 4 | 5 | const teacherList = [ 6 | {name: 'Satyasai', topic: 'DBMS'}, 7 | {name: 'Sahil', topic: 'OOP'}, 8 | {name: 'Paridhi', topic: 'Recursion'}, 9 | {name: 'Arnav', topic: 'NodeJS'}, 10 | ] 11 | 12 | route.get('/', (req, res) => { 13 | res.send(teacherList); 14 | }) 15 | 16 | route.get('/:id', (req, res) => { 17 | const id = Number(req.params.id) 18 | if (isNaN(id)) { 19 | return res.status(400).send('Invalid id') 20 | } 21 | if (id < 0 || id >= teacherList.length) { 22 | return res.status(404).send('Teacher not found') 23 | } 24 | res.send(teacherList[id]) 25 | }) 26 | 27 | module.exports = route; -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /07-react-movie-db/src/components/MovieCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | import "../styles/movie-card.css"; 5 | /** 6 | * 7 | * { 8 | "Title": "Avatar", 9 | "Year": "2009", 10 | "imdbID": "tt0499549", 11 | "Type": "movie", 12 | "Poster": "https://m.media-amazon.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg" 13 | }, 14 | kebab-case 15 | 16 | */ 17 | export default function MovieCard({ movie }) { 18 | return ( 19 | 20 |
    21 | {movie.Title} 22 |

    {movie.Title}

    23 |

    Year: {movie.Year}

    24 |
    25 | {/* My link */} 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /10-express-middlewares-routers/express-app-routes/routes/students.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const route = express.Router(); 4 | 5 | const studentList = [ 6 | {name: 'Roop', college: 'SNU'}, 7 | {name: 'Abhishek', college: 'TSEC'}, 8 | {name: 'Lakshya', college: 'NIT Jaipur'}, 9 | {name: 'Apoorv', college: 'NIT Silchar'}, 10 | {name: 'Avinit', college: 'NIT Agartala'}, 11 | ] 12 | 13 | route.get('/', (req, res) => { 14 | res.send(studentList); 15 | }) 16 | 17 | route.get('/:id', (req, res) => { 18 | const id = Number(req.params.id) 19 | if (isNaN(id)) { 20 | return res.status(400).send('Invalid id') 21 | } 22 | if (id < 0 || id >= studentList.length) { 23 | return res.status(404).send('Student not found') 24 | } 25 | res.send(studentList[id]) 26 | }) 27 | 28 | module.exports = route; -------------------------------------------------------------------------------- /13-hangman-frontend/api/sessions.js: -------------------------------------------------------------------------------- 1 | const BASE_URL = "http://ocalhost:8000/api/sessions"; 2 | 3 | async function createSession(name) { 4 | const response = await fetch(`${BASE_URL}/`, { 5 | method: "POST", 6 | headers: { 7 | 'Content-Type': 'application/json' 8 | }, 9 | body: JSON.stringify({ 10 | name 11 | }) 12 | }); 13 | const session = response.json(); 14 | 15 | return session; 16 | } 17 | 18 | async function playInSession(id, letter) { 19 | const response = await fetch(`${BASE_URL}/${id}/play`, { 20 | method: "POST", 21 | headers: { 22 | 'Content-Type': 'application/json' 23 | }, 24 | body: JSON.stringify({ 25 | letter 26 | }) 27 | }); 28 | const session = response.json(); 29 | 30 | return session; 31 | } 32 | 33 | module.exports = { 34 | createSession, 35 | playInSession 36 | } 37 | -------------------------------------------------------------------------------- /10-express-middlewares-routers/express-app-routes/server.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Lets say we have these students 3 | * - Aakif 4 | * - Abhishek 5 | * - Anshul 6 | * - Apoorv 7 | * - Arnab 8 | * - Ashutosh 9 | * 10 | * Lets say we have these teachers 11 | * - Satyasai 12 | * - Sahil 13 | * - Paridhi 14 | * - Arnav 15 | * 16 | * On GET /teachers show all teachers 17 | * On GET /teachers/:id show particular teacher 18 | * 19 | * On GET /students show all students 20 | * On GET /students/:id show particular student 21 | */ 22 | 23 | const express = require('express'); 24 | const app = express(); 25 | 26 | const studentRoute = require('./routes/students') 27 | const teacherRoute = require('./routes/teachers') 28 | 29 | app.use('/students', studentRoute) 30 | app.use('/teachers', teacherRoute) 31 | 32 | app.listen(4876, () => { 33 | console.log('Server started at http://localhost:4876'); 34 | }) -------------------------------------------------------------------------------- /02-html-css-link/collapsing-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
      12 |
    1. one 13 |
        14 |
      • one one
        • 15 |
      • one two 16 |
          17 |
        1. one two one
          2. 18 |
        2. one two two
          3. 19 |
        20 |
        • 21 |
      • one three
        • 22 |
      23 |
      2. 24 |
    2. two 25 |
        26 |
      1. two one 27 |
          28 |
        1. two one one
          2. 29 |
        2. one two one
          3. 30 |
        31 |
        2. 32 |
      2. two two
        3. 33 |
      3. two three
        4. 34 |
      35 |
      3. 36 |
    3. three
      4. 37 |
    4. four
      5. 38 |
    39 | 40 | -------------------------------------------------------------------------------- /14-testing/cabfare/public_html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 17 | 18 | 19 |

    Cab Fare Calculator

    20 |
    21 |
    24 |
    25 |
    28 | 29 |
    30 | 31 | -------------------------------------------------------------------------------- /06-react-ii/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "netflix", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "axios": "^0.24.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "4.0.3", 13 | "web-vitals": "^1.0.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 19 | 20 |
    21 | 22 |
    23 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, cupiditate reiciendis ratione non molestiae incidunt 24 |
    25 |
    26 | 27 | -------------------------------------------------------------------------------- /12-hangman/components/game/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Lives from './lives'; 3 | import Word from './word'; 4 | import Letters from './letters'; 5 | import Start from './start'; 6 | 7 | export default function Layout({ 8 | lives, actualWord, played_set, guess, start, isWon, isRunning 9 | }) { 10 | return ( 11 | <> 12 |
    13 | { 14 | isRunning && <> 15 |
    16 | 17 |
    18 |
    19 | 20 | 21 |
    22 | 23 | } 24 | 25 | { 26 | actualWord && isWon && <> 27 |
    You Won!
    28 | 29 | } 30 | 31 | 32 | 33 |
    34 | 35 | ) 36 | } -------------------------------------------------------------------------------- /13-hangman-frontend/components/game/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Lives from './lives'; 3 | import Word from './word'; 4 | import Letters from './letters'; 5 | import Start from './start'; 6 | import { createSession, playInSession } from '../../api/sessions'; 7 | 8 | const MAX_LIVES = 6; 9 | export default function Game() { 10 | const [session, setSession] = useState(null) 11 | const isRunning = !!session; 12 | 13 | const guess = async letter => { 14 | const updatedSession = await playInSession(session.id, letter) 15 | setSession(updatedSession) 16 | } 17 | const start = async (name) => { 18 | const session = await createSession(name); 19 | setSession(session) 20 | } 21 | 22 | return ( 23 | <> 24 | {isRunning && <> 25 | 26 | 27 | 28 | } 29 | {!isRunning && <> 30 | 31 | } 32 | 33 | ) 34 | } 35 | -------------------------------------------------------------------------------- /09-node-express-server/basic-server/server.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | const app = express(); 4 | 5 | app.use(express.urlencoded({extended: true})) 6 | app.use(express.json()) 7 | 8 | 9 | app.get("/", (req, res) => { 10 | console.log("HTTP METHOD = " + req.method); 11 | res.send("Hello World!"); 12 | }); 13 | 14 | app.get("/abcd", (req, res) => { 15 | res.send({ 16 | a: 10, 17 | b: true, 18 | c: "Asdsad", 19 | d: { 20 | e: "ASdsa" 21 | } 22 | }); 23 | }); 24 | 25 | app.post("/abcd", (req, res) => { 26 | console.log(req.body) 27 | res.send("WOW! You posted to abcd"); 28 | }); 29 | 30 | app.get("/greet", (req, res) => { 31 | console.log(req.query); 32 | if (req.query["name"] == undefined) res.send("Hello guest"); 33 | else res.send("Hello " + req.query["name"]); 34 | }); 35 | 36 | app.get('/arr', (req, res) => { 37 | res.send([ 38 | 'asdasd', 39 | 'asdasd', 40 | 'sfnsfnsf' 41 | ]) 42 | }) 43 | 44 | app.listen(3000, () => { 45 | console.log("Example app listening on port 3000!"); 46 | }); 47 | -------------------------------------------------------------------------------- /07-react-movie-db/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-movie-db", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "axios": "^0.24.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-router": "^6.0.2", 13 | "react-router-dom": "^6.0.2", 14 | "react-scripts": "4.0.3", 15 | "web-vitals": "^1.0.1" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-3/styles.css: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | display: grid; 3 | /* grid-template-rows: 100px; */ 4 | /* grid-auto-rows: auto; */ 5 | gap: 1rem; 6 | /* grid-column-gap: 2rem; 7 | grid-row-gap: 5rem; */ 8 | } 9 | 10 | .grid-element-span-2 { 11 | grid-column: span 2; 12 | } 13 | 14 | @media (min-width: 500px) { 15 | .grid-container { 16 | grid-template-columns: repeat(4, 1fr); 17 | } 18 | 19 | .grid-element-1 { 20 | grid-column: span 3; 21 | } 22 | 23 | .grid-element-2 { 24 | grid-column: span 2; 25 | } 26 | 27 | .grid-element-3 { 28 | grid-column: span 1; 29 | } 30 | 31 | .grid-element-5 { 32 | grid-column: 4 / -1; 33 | /* start / end */ 34 | grid-row: 1 / 4; 35 | } 36 | } 37 | 38 | @media (min-width: 1000px) { 39 | .grid-element-1 { 40 | /* grid-column-start: 1; 41 | grid-column-end: -1; */ 42 | /* -1 represents the end of the grid */ 43 | grid-column: span 2; 44 | } 45 | 46 | .grid-element-3 { 47 | grid-column: span 3; 48 | } 49 | 50 | .grid-element-4 { 51 | grid-column: span 3; 52 | } 53 | } -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-3/styles2.css: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | display: grid; 3 | gap: 1rem; 4 | /* grid-template-columns: repeat(3, 100px); */ 5 | grid-template-areas: 6 | "one" 7 | "two" 8 | "three" 9 | "four" 10 | "five"; 11 | /* justify-content: start; 12 | justify-items: start; */ 13 | /* align-items: start; 14 | place-items: center center; 15 | grid-template-rows: 400px 400px; */ 16 | } 17 | 18 | .grid-element { 19 | height: 200px; 20 | } 21 | 22 | .grid-element-1 { 23 | grid-area: one; 24 | background: red; 25 | } 26 | .grid-element-2 { 27 | grid-area: two; 28 | background: blue; 29 | } 30 | .grid-element-3 { 31 | grid-area: three; 32 | background: cyan; 33 | } 34 | .grid-element-4 { 35 | grid-area: four; 36 | background-color: green; 37 | } 38 | .grid-element-5 { 39 | grid-area: five; 40 | background: yellow; 41 | } 42 | 43 | 44 | 45 | @media (min-width: 1000px) { 46 | .grid-container { 47 | grid-template-areas: 48 | "one one two five" 49 | "three three three five" 50 | "four four four five"; 51 | } 52 | } -------------------------------------------------------------------------------- /02-html-css-link/selectors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

    para one

    12 |

    para two

    13 |

    para three

    14 |

    para four

    15 |

    para five

    16 |
    17 | 18 |
    19 |
    20 |

    21 | inner para in outer div 22 |

    23 |
    24 |
    25 | 26 |
    27 |

    28 | inner para in outer div 29 |

    30 |
    31 | 32 | 33 | 34 |
    35 | this is a div 36 |
    37 |

    38 | this is a para after a div 39 |

    40 | italic 41 | bold 42 | 43 |

    44 | yet another para 45 |

    46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /04-css-advanced/game-css/style.css: -------------------------------------------------------------------------------- 1 | .playarea { 2 | height: 600px; 3 | width: 800px; 4 | background-color: aqua; 5 | } 6 | 7 | .box { 8 | display: inline-block; 9 | height: 50px; 10 | width: 50px; 11 | } 12 | 13 | .enemy { 14 | margin-left: 180px; 15 | background-color: red; 16 | animation-name: updown; 17 | animation-iteration-count: infinite; 18 | animation-duration: 4s; 19 | animation-timing-function: linear; 20 | } 21 | .enemy:nth-child(2) { 22 | animation-duration: 3s; 23 | } 24 | 25 | .enemy:nth-child(3) { 26 | animation-duration: 2s; 27 | } 28 | 29 | .player { 30 | animation-name: leftright; 31 | animation-timing-function: linear; 32 | animation-iteration-count: infinite; 33 | animation-duration: 8s; 34 | animation-play-state: paused; 35 | position: absolute; 36 | top: 275px; 37 | left: 10px; 38 | background-color: blue; 39 | } 40 | 41 | @keyframes updown { 42 | 50% { 43 | transform: translateY(550px); 44 | } 45 | } 46 | 47 | @keyframes leftright { 48 | 50% { 49 | transform: translateX(750px); 50 | } 51 | } 52 | 53 | .playarea:active .player { 54 | animation-play-state: running; 55 | } -------------------------------------------------------------------------------- /10-express-middlewares-routers/express-app-middlewares/server2.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | 4 | function base64toASCII(input) { 5 | return Buffer.from(input, 'base64').toString('ascii'); 6 | } 7 | 8 | function ASCIItobase64(input) { 9 | return Buffer.from(input, 'ascii').toString('base64'); 10 | } 11 | 12 | function decodeQuery(req, res, next) { 13 | console.log(req.query) 14 | Object.keys(req.query).forEach(key => { 15 | req.query[key] = base64toASCII(req.query[key]); 16 | }) 17 | console.log(req.query) 18 | next() 19 | } 20 | 21 | function checkForKey(req, res, next) { 22 | if (req.query.key === '42') { 23 | next() 24 | } else { 25 | res.send('You are not authorized to access this page') 26 | } 27 | } 28 | 29 | app.use(decodeQuery) 30 | 31 | app.get('/public', (req, res) => { 32 | res.send('Hello ' + req.query.name); 33 | }) 34 | 35 | app.get('/private', checkForKey, (req, res) => { 36 | res.send('Hi ' + req.query.name + ', welcome to the secret world of Scalerverse!'); 37 | }) 38 | 39 | 40 | app.listen(8877, () => { 41 | console.log('server started on http://localhost:8877'); 42 | }) 43 | 44 | -------------------------------------------------------------------------------- /06-react-ii/src/components/Todos.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | 3 | import axios from "axios"; 4 | import Todo from "./Todo"; 5 | const API_URL = "https://jsonplaceholder.typicode.com/todos"; 6 | 7 | // [value, func] 8 | 9 | export default function Todos() { 10 | const [isLoading, setIsLoading] = useState(true); 11 | const [todos, setTodos] = useState([]); 12 | const fetchData = async () => { 13 | let res = await axios.get(API_URL); 14 | setTodos(res.data); 15 | setIsLoading(false); 16 | }; 17 | console.log(todos); 18 | 19 | useEffect(() => { 20 | fetchData(); 21 | }, []); 22 | 23 | if (isLoading) { 24 | return

    Loading

    ; 25 | } else { 26 | return ( 27 |
    28 | {todos.map((todo, index) => { 29 | return ; 30 | })} 31 |
    32 | ); 33 | } 34 | } 35 | /** 36 | * const arr = [1,2,3,4] 37 | * const [firstVal, secondVal] = arr; // firstVal -> 1 38 | * const obj = {name: "sunny", age: 24} 39 | * const {name} = obj // name => sunny 40 | * func myname(){ 41 | * console.log("any") 42 | * } 43 | * myName() 44 | */ 45 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript-react-1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.2.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "@types/jest": "^27.5.0", 10 | "@types/node": "^16.11.33", 11 | "@types/react": "^18.0.9", 12 | "@types/react-dom": "^18.0.3", 13 | "react": "^18.1.0", 14 | "react-dom": "^18.1.0", 15 | "react-scripts": "5.0.1", 16 | "typescript": "^4.6.4", 17 | "web-vitals": "^2.1.4" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /12-hangman/styles/settings/_reset.scss: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; 20 | } 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; 25 | } 26 | body { 27 | line-height: 1; 28 | } 29 | ol, ul { 30 | list-style: none; 31 | } 32 | blockquote, q { 33 | quotes: none; 34 | } 35 | blockquote:before, blockquote:after, 36 | q:before, q:after { 37 | content: ''; 38 | content: none; 39 | } 40 | table { 41 | border-collapse: collapse; 42 | border-spacing: 0; 43 | } -------------------------------------------------------------------------------- /05-todo-js/basic/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | document -> DOM = Document Object Model 3 | window -> BOM = Browser Object Model 4 | 5 | 6 | */ 7 | 8 | let inpTask = document.getElementById("inpTask"); 9 | let listTasks = document.getElementById("listTasks"); 10 | 11 | function addItemToList(taskName /* String */) { 12 | let newTaskListItem = document.createElement("li"); 13 | newTaskListItem.innerText = taskName; 14 | listTasks.appendChild(newTaskListItem); 15 | } 16 | 17 | function getNewTaskName() { 18 | return inpTask.value; 19 | } /* return String */ 20 | 21 | /** 22 | * when add is clicked, 23 | * 1. read input with getNewTaskName() 24 | * 2. save that to "newTaskName" 25 | * 3. call addItemToList(newTaskName) 26 | * 4. clear input 27 | */ 28 | 29 | let btnAdd = document.getElementById("btnAdd"); 30 | btnAdd.onclick = function () { 31 | let newTaskName = getNewTaskName(); 32 | addItemToList(newTaskName); 33 | inpTask.value = ""; 34 | } 35 | 36 | /** 37 | * Further requirements: 38 | * 1. When enter button is clicked (cursor is on inpTask), 39 | * also do the same steps as add button 40 | * 2. When input is empty, show an alert message that input 41 | * cannot be empty. 42 | * 43 | */ -------------------------------------------------------------------------------- /04-css-advanced/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | height: 70px; 3 | width: 70px; 4 | margin: 30px; 5 | background-color: blue; 6 | color: white; 7 | padding: 5px; 8 | font-size: 30pt; 9 | transition: 2s; 10 | } 11 | 12 | div:nth-child(1) { 13 | transform: rotate(45deg); 14 | } 15 | 16 | div:nth-child(2) { 17 | transform: rotateY(45deg); 18 | } 19 | 20 | div:nth-child(3) { 21 | transform: scaleX(0.67); 22 | } 23 | 24 | div:nth-child(4) { 25 | transform: skewX(10deg); 26 | } 27 | 28 | div:nth-child(5):hover { 29 | transform: rotateZ(360deg); 30 | } 31 | 32 | div:nth-child(6):hover { 33 | transform: translateY(100px); 34 | } 35 | 36 | div:nth-child(7):hover { 37 | margin-top: 130px; 38 | } 39 | 40 | div:nth-child(8):hover { 41 | transform: rotateZ(360deg) translateX(100px); 42 | } 43 | 44 | div:nth-child(9) { 45 | animation-name: wheel; 46 | animation-duration: 4s; 47 | animation-iteration-count: infinite; 48 | } 49 | 50 | @keyframes wheel { 51 | 0% { 52 | } 53 | 25% { 54 | transform: scale(2) rotateZ(180deg); 55 | } 56 | 50% { 57 | transform: translateX(100px) rotateZ(360deg); 58 | } 59 | 75% { 60 | transform: scale(0.5) rotateZ(180deg); 61 | } 62 | 100% { 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
    12 |
    13 |
    Soomething
    14 |
    15 | Responsive 16 |
    17 |
    18 |
    19 | Lorem ipsum dolor sit amet consectetur adipisicing elit. In, quaerat voluptatibus! Repellendus tempore molestiae culpa quidem dolorum modi, velit doloribus nihil. Quis eos, perferendis voluptates consequuntur sit ex necessitatibus veritatis? 20 |
    21 |
    22 | 23 | 24 | 25 | 26 | 27 | 32 | 33 | 35 | 36 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 26 | 27 | 28 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-4/yinyang.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #444; 3 | display: grid; 4 | place-items: center; 5 | height: 100vh; 6 | width: 100vw; 7 | } 8 | 9 | .circle { 10 | margin-top: 3rem; 11 | box-sizing: border-box; 12 | height: 200px; 13 | width: 200px; 14 | border-radius: 50%; 15 | padding-left: 50px; 16 | background: linear-gradient(to left, 17 | #fff, 18 | #fff 50%, 19 | #000 50%, 20 | #000); 21 | } 22 | 23 | .yinyang { 24 | position: relative; 25 | background: #fff; 26 | height: 100px; 27 | width: 100px; 28 | border-radius: 50%; 29 | background-image: linear-gradient(to left, 30 | #fff, 31 | #fff 50%, 32 | #000 50%, 33 | #000); 34 | } 35 | 36 | .yinyang:before { 37 | content: ''; 38 | position: absolute; 39 | top: 0; 40 | left: 50%; 41 | transform: translateX(-50%); 42 | background: #fff; 43 | height: 14px; 44 | width: 14px; 45 | border-radius: 50%; 46 | border: 18px solid #000; 47 | } 48 | 49 | .yinyang:after { 50 | content: ''; 51 | position: absolute; 52 | top: 50%; 53 | left: 50%; 54 | transform: translateX(-50%); 55 | background: #000; 56 | height: 14px; 57 | width: 14px; 58 | border-radius: 50%; 59 | border: 18px solid #fff; 60 | } -------------------------------------------------------------------------------- /12-hangman/components/game/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Layout from './layout'; 3 | 4 | const MAX_LIVES = 6; 5 | export default function Game() { 6 | const [actualWord, setActualWord] = useState(""); 7 | const [playedLetters, setPlayedLetters] = useState([]); 8 | 9 | const word_set = new Set([...actualWord]); 10 | const played_set = new Set([...playedLetters]) 11 | const wrongLetters = playedLetters.filter((letter) => { 12 | return !word_set.has(letter); 13 | }) 14 | const lives = MAX_LIVES - wrongLetters.length 15 | const isWon = lives && [...word_set].reduce((acc, curr) => { 16 | if (!played_set.has(curr)) return false; 17 | return acc; 18 | }, true) 19 | const isRunning = actualWord && lives > 0 && !isWon; 20 | 21 | const guess = letter => { 22 | setPlayedLetters((prev) => [...prev, letter]) 23 | } 24 | const start = () => { 25 | setActualWord("house") 26 | setPlayedLetters([]) 27 | } 28 | 29 | return ( 30 | <> 31 | 40 | 41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 26 | 27 | 28 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /05-todo-js/advanced/script.js: -------------------------------------------------------------------------------- 1 | let inpTask = document.getElementById('inpTask'); 2 | let btnAdd = document.getElementById('btnAdd'); 3 | let btnClear = document.getElementById('btnClear'); 4 | let listTasks = document.getElementById('listTasks'); 5 | 6 | let tasks = [] 7 | 8 | function saveTaskList() { 9 | localStorage.setItem("tasks", JSON.stringify(tasks)); 10 | } 11 | 12 | function retrieveList() { 13 | let retrievedTasks = localStorage.getItem("tasks"); 14 | if (retrievedTasks) { 15 | tasks = JSON.parse(retrievedTasks); 16 | } 17 | } 18 | 19 | function clearTaskList() { 20 | tasks = []; 21 | renderTaskList(); 22 | saveTaskList(); 23 | } 24 | 25 | 26 | function renderTaskList() { 27 | listTasks.innerHTML = ""; 28 | for (let i = 0; i < tasks.length; i++) { 29 | let li = document.createElement('li'); 30 | li.innerText = tasks[i]; 31 | listTasks.appendChild(li); 32 | } 33 | } 34 | 35 | function addTask() { 36 | let task = inpTask.value; 37 | tasks.push(task); 38 | renderTaskList(); 39 | saveTaskList(); 40 | } 41 | 42 | btnAdd.onclick = function () { 43 | addTask(); 44 | } 45 | 46 | btnClear.onclick = function () { 47 | clearTaskList(); 48 | } 49 | 50 | inpTask.addEventListener("keyup", function (event) { 51 | if (event.keyCode === 13) { 52 | addTask(); 53 | } 54 | }); 55 | 56 | 57 | retrieveList(); 58 | renderTaskList(); -------------------------------------------------------------------------------- /07-react-movie-db/src/pages/MovieDetails.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useParams } from "react-router"; 3 | import axios from "axios"; 4 | 5 | import "../styles/movie-details.css"; 6 | 7 | export default function MovieDetails() { 8 | const [isLoading, setIsLoading] = useState(true); 9 | const [movieDetails, setMovieDetails] = useState(null); 10 | const { id } = useParams(); 11 | 12 | useEffect(() => { 13 | const fetchMovieDetails = async () => { 14 | setIsLoading(true); 15 | const res = await axios.get( 16 | `https://www.omdbapi.com/?i=${id}&apikey=aa660442` 17 | ); 18 | setMovieDetails(res.data); 19 | setIsLoading(false); 20 | console.log(res.data); 21 | }; 22 | 23 | fetchMovieDetails(); 24 | }, [id]); 25 | 26 | if (isLoading) { 27 | return

    Movie details are being loaded, please wait....

    ; 28 | } else if (movieDetails) { 29 | return ( 30 |
    31 | {movieDetails.Title} 32 |

    {movieDetails.Title}

    33 |

    Actors: {movieDetails.Actors}

    34 |

    Awards: {movieDetails.Awards}

    35 |
    36 | ); 37 | } else { 38 | return null; 39 | } 40 | } 41 | 42 | /** 43 | * const obj = {imdbID: "value", name:"movie"}; 44 | * const {imdbDB} = obj; 45 | */ 46 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-4/animation.css: -------------------------------------------------------------------------------- 1 | .outer { 2 | height: 200px; 3 | width: 200px; 4 | background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); 5 | } 6 | 7 | .inner { 8 | height: 100px; 9 | width: 100px; 10 | background: black; 11 | } 12 | 13 | .inner { 14 | animation: transformer-animation 1000ms ease-in-out forwards alternate infinite; 15 | } 16 | 17 | .outer:hover .inner { 18 | animation-play-state: paused; 19 | } 20 | 21 | @keyframes transformer-animation { 22 | 33% { 23 | transform: translateY(100%); 24 | } 25 | 66% { 26 | transform: translateX(100%) translateY(100%); 27 | background-color: grey; 28 | } 29 | 100% { 30 | transform: translateX(100%); 31 | background-color: white; 32 | } 33 | } 34 | 35 | /* .timing-function-wrapper { 36 | border: 1px solid green; 37 | width: 100%; 38 | } */ 39 | 40 | /* .timing-function { 41 | height: 100px; 42 | width: 300px; 43 | background: red; 44 | } 45 | 46 | .timing-function-1 { 47 | background: orange; 48 | transition: width 2s ease-in-out; 49 | } 50 | 51 | .timing-function-2 { 52 | background: yellow; 53 | transition: width 2s linear; 54 | } 55 | 56 | .timing-function-3 { 57 | background: purple; 58 | transition: width 2s ease-in; 59 | } 60 | 61 | .timing-function-4 { 62 | transition: width 2s ease-out; 63 | } 64 | 65 | .timing-functions-wrapper:hover .timing-function { 66 | width: 500px; 67 | } */ -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-1/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-size: 16px; 3 | /* root font size */ 4 | } 5 | 6 | .wrapper { 7 | font-size: 2em; 8 | } 9 | 10 | .header { 11 | font-size: 1em; 12 | } 13 | 14 | .title { 15 | font-size: 15%; 16 | margin-bottom: 2em; 17 | } 18 | 19 | .subtitle { 20 | font-size: 1.5em; 21 | } 22 | 23 | .body { 24 | font-size: 0.5rem; 25 | } 26 | 27 | button { 28 | padding: 1.5em 2.5em; 29 | display: block; 30 | font-size: 0.25em; 31 | margin: 0 2.5rem; 32 | } 33 | 34 | .button--small { 35 | font-size: 1em; 36 | } 37 | 38 | .button--large { 39 | font-size: 3em; 40 | } 41 | 42 | .parent { 43 | height: 100px; 44 | width: 500px; 45 | border: 1px solid black; 46 | } 47 | 48 | .box { 49 | background: red; 50 | height: 100%; 51 | min-height: 100px; 52 | width: 50vw; 53 | } 54 | 55 | body { 56 | color: red; 57 | } 58 | 59 | .main { 60 | font-size: 15vw; 61 | } 62 | 63 | .secondary { 64 | font-size: 3rem; 65 | } 66 | 67 | /* Media query with width */ 68 | @media (max-width: 500px) { 69 | body { 70 | color: blue; 71 | } 72 | 73 | .main { 74 | font-size: 3rem; 75 | } 76 | } 77 | 78 | /* Media Query with print */ 79 | /* @media print { 80 | body { 81 | color: blue; 82 | } 83 | } */ 84 | 85 | /* Media Queries with orientation */ 86 | /* @media (orientation: landscape) and (orientation: portrait){ 87 | .main { 88 | color: cyan; 89 | } 90 | } */ -------------------------------------------------------------------------------- /12-hangman/styles/components/_start.scss: -------------------------------------------------------------------------------- 1 | .start-button { 2 | font-family: 'Mochiy Pop P One', sans-serif; 3 | background: $pink-light; 4 | padding: 1rem 2.5rem; 5 | display: inline-grid; 6 | place-items: center; 7 | font-size: 2rem; 8 | color: $dark-color; 9 | border-radius: 15px; 10 | border: 2px solid $pink-dark; 11 | position: relative; 12 | transform-style: preserve-3d; 13 | transition: transform 150ms ease-in-out, background 150ms ease-in-out; 14 | cursor: pointer; 15 | 16 | &::before { 17 | content: ""; 18 | width: 100%; 19 | height: 100%; 20 | position: absolute; 21 | background: repeating-linear-gradient(to right, transparent, transparent 5px, $pink-dark 5px, $pink-dark 10px), $pink; 22 | border: 2px solid $pink-dark; 23 | border-radius: 15px; 24 | transform: translate3d(0, 1.5rem, -2rem); 25 | box-shadow: 0px 15px 4px -2px rgba($pink, 0.25); 26 | transition: transform 150ms ease-in-out, box-shadow 150ms ease-in-out; 27 | } 28 | 29 | &:active, &:hover { 30 | transform: translate(0, 0.5rem); 31 | background: darken($pink-light, 2.5%); 32 | 33 | &::before { 34 | transform: translate3d(0, 1rem, -2rem); 35 | box-shadow: 0px 10px 4px -2px rgba($pink, 0.25); 36 | } 37 | } 38 | 39 | &--letter { 40 | padding: 1rem 1.5rem; 41 | margin-bottom: 2rem; 42 | margin-left: 0.5rem; 43 | margin-right: 0.5rem; 44 | } 45 | } -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/scss/main.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | @import 'settings/colors'; 3 | @import 'settings/font'; 4 | 5 | $red: #555445; 6 | 7 | $breakpoints: ( 8 | small: 576px, 9 | medium: 768px, 10 | large: 992px 11 | ); 12 | 13 | div { 14 | p { 15 | color: $red; 16 | } 17 | } 18 | 19 | .wrapper { 20 | font-size: 3rem; 21 | 22 | &:hover { 23 | color: blue; 24 | } 25 | } 26 | 27 | .box { 28 | height: 200px; 29 | aspect-ratio: 1; 30 | 31 | &__small-box { 32 | height: 100px; 33 | aspect-ratio: 1; 34 | 35 | &--green { 36 | background: green; 37 | } 38 | } 39 | } 40 | 41 | %button { 42 | cursor: pointer; 43 | padding: 1rem 1.5rem; 44 | font-weight: bold; 45 | } 46 | 47 | .button-primary { 48 | @extend %button; 49 | 50 | background: blue; 51 | color: white; 52 | } 53 | 54 | .button-secondary { 55 | @extend %button; 56 | 57 | border: 1px solid blue; 58 | color: blue; 59 | } 60 | 61 | @mixin apply_media_query($key) { 62 | $size: map.get($breakpoints, $key); 63 | 64 | @media screen and (max-width: $size){ 65 | @content; 66 | } 67 | } 68 | 69 | .red { 70 | @include apply_media_query(large){ 71 | background: blue; 72 | font-size: $font-large; 73 | } 74 | } 75 | 76 | @for $i from 1 through 12 { 77 | .col-#{$i} { 78 | flex: 0 0 (100/(12/$i)); 79 | } 80 | } 81 | 82 | @each $key, $value in $colors { 83 | .text-#{$key} { 84 | color: $value; 85 | } 86 | } -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/.cache/a5/6012ae3843c288b51658c44e66d332.json: -------------------------------------------------------------------------------- 1 | {"id":"index.html","dependencies":[{"name":"./scss/main.scss","dynamic":true,"resolved":"/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5/scss/main.scss","parent":"/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5/index.html"}],"generated":{"html":"\n\n\n \n \n \n Document\n \n \n \n \n\n\n \n\n\n\n"},"sourceMaps":null,"error":null,"hash":"ea4751cf24a20e69bf7308ef5cb796e9","cacheData":{}} -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 | 16 | 1 17 |
    18 |
    19 | 20 | 2 21 |
    22 |
    23 | 24 | 3 25 |
    26 |
    27 | 28 | 4 29 |
    30 |
    31 | 32 | 5 33 |
    34 |
    35 | 36 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/dist/main.77bb5cfd.css: -------------------------------------------------------------------------------- 1 | div p { 2 | color: #555445; 3 | } 4 | 5 | .wrapper { 6 | font-size: 3rem; 7 | } 8 | .wrapper:hover { 9 | color: blue; 10 | } 11 | 12 | .box { 13 | height: 200px; 14 | aspect-ratio: 1; 15 | } 16 | .box__small-box { 17 | height: 100px; 18 | aspect-ratio: 1; 19 | } 20 | .box__small-box--green { 21 | background: green; 22 | } 23 | 24 | .button-secondary, .button-primary { 25 | cursor: pointer; 26 | padding: 1rem 1.5rem; 27 | font-weight: bold; 28 | } 29 | 30 | .button-primary { 31 | background: blue; 32 | color: white; 33 | } 34 | 35 | .button-secondary { 36 | border: 1px solid blue; 37 | color: blue; 38 | } 39 | 40 | @media screen and (max-width: 992px) { 41 | .red { 42 | background: blue; 43 | font-size: 20px; 44 | } 45 | } 46 | 47 | .col-1 { 48 | flex: 0 0 8.3333333333; 49 | } 50 | 51 | .col-2 { 52 | flex: 0 0 16.6666666667; 53 | } 54 | 55 | .col-3 { 56 | flex: 0 0 25; 57 | } 58 | 59 | .col-4 { 60 | flex: 0 0 33.3333333333; 61 | } 62 | 63 | .col-5 { 64 | flex: 0 0 41.6666666667; 65 | } 66 | 67 | .col-6 { 68 | flex: 0 0 50; 69 | } 70 | 71 | .col-7 { 72 | flex: 0 0 58.3333333333; 73 | } 74 | 75 | .col-8 { 76 | flex: 0 0 66.6666666667; 77 | } 78 | 79 | .col-9 { 80 | flex: 0 0 75; 81 | } 82 | 83 | .col-10 { 84 | flex: 0 0 83.3333333333; 85 | } 86 | 87 | .col-11 { 88 | flex: 0 0 91.6666666667; 89 | } 90 | 91 | .col-12 { 92 | flex: 0 0 100; 93 | } 94 | 95 | .text-red { 96 | color: red; 97 | } 98 | 99 | .text-whiye { 100 | color: white; 101 | } 102 | 103 | .text-primary { 104 | color: blue; 105 | } 106 | 107 | /*# sourceMappingURL=/main.77bb5cfd.css.map */ -------------------------------------------------------------------------------- /07-react-movie-db/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { useState } from "react"; 3 | import { NavBar } from "./components"; 4 | 5 | import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; 6 | import axios from "axios"; 7 | import About from "./pages/About"; 8 | import Home from "./pages/Home"; 9 | import Movie from "./pages/Movie"; 10 | import MovieDetails from "./pages/MovieDetails"; 11 | 12 | const API_BASE_URL = "https://www.omdbapi.com"; 13 | // &apikey=aa660442 14 | 15 | function App() { 16 | const [isLoading, setIsLoading] = useState(false); 17 | const [movies, setMovies] = useState([]); 18 | const [inputValue, setInputValue] = useState(""); 19 | 20 | /** 21 | * 22 | * function search(){ 23 | * } 24 | */ 25 | const search = async (e) => { 26 | if (e.code === "Enter") { 27 | // https://www.omdbapi.com/?s=avatar&apikey=aa660442 28 | setIsLoading(true); 29 | const response = await axios.get( 30 | API_BASE_URL + "/?s=" + inputValue + "&apikey=aa660442" 31 | ); 32 | // set datay 33 | setMovies(response.data.Search); 34 | setIsLoading(false); 35 | } 36 | }; 37 | 38 | return ( 39 |
    40 | 45 | 46 | 47 | } 50 | /> 51 | } /> 52 | } /> 53 | } /> 54 | 55 | 56 |
    57 | ); 58 | } 59 | 60 | export default App; 61 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/dist/main.77bb5cfd.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["scss/main.scss","scss/settings/_font.scss","scss/settings/_colors.scss"],"names":[],"mappings":"AAaE;EACE,OAVE;;;AAcN;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EAGE;EACA;;;AAGF;EAGE;EACA;;;AAMA;EAKF;IAEI;IACA,WCrES;;;;AD0EX;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAKF;EACE,OE/EK;;;AF8EP;EACE,OE/EK;;;AF8EP;EACE,OE/EK","file":"main.77bb5cfd.css","sourceRoot":"..","sourcesContent":["@use 'sass:map';\n@import 'settings/colors';\n@import 'settings/font';\n\n$red: #555445;\n\n$breakpoints: (\n small: 576px,\n medium: 768px,\n large: 992px\n);\n\ndiv {\n p {\n color: $red;\n }\n}\n\n.wrapper {\n font-size: 3rem;\n\n &:hover {\n color: blue;\n }\n}\n\n.box {\n height: 200px;\n aspect-ratio: 1;\n\n &__small-box {\n height: 100px;\n aspect-ratio: 1;\n\n &--green {\n background: green;\n }\n }\n}\n\n%button {\n cursor: pointer;\n padding: 1rem 1.5rem;\n font-weight: bold;\n}\n\n.button-primary {\n @extend %button;\n\n background: blue;\n color: white;\n}\n\n.button-secondary {\n @extend %button;\n \n border: 1px solid blue;\n color: blue;\n}\n\n@mixin apply_media_query($key) {\n $size: map.get($breakpoints, $key);\n\n @media screen and (max-width: $size){\n @content;\n }\n}\n\n.red {\n @include apply_media_query(large){\n background: blue;\n font-size: $font-large;\n }\n}\n\n@for $i from 1 through 12 {\n .col-#{$i} {\n flex: 0 0 (100/(12/$i));\n }\n}\n\n@each $key, $value in $colors {\n .text-#{$key} {\n color: $value;\n }\n}","$font-small: 10px;\n$font-med: 15px;\n$font-large: 20px;","$red: red;\n$white: white;\n$primary: blue;\n\n$colors: (\n red: $red,\n whiye: $white,\n primary: $primary\n)"]} -------------------------------------------------------------------------------- /09-node-express-server/task-list-http-server/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const app = express() 3 | 4 | /** 5 | * Imagine there is a list of tasks like this: 6 | * 1. Enroll to Scaler 7 | * 2. Learn Node.js 8 | * 3. Learn React.js 9 | * 4. Get a job 10 | * 5. Get a girlfriend/boyfriend 11 | * 12 | */ 13 | 14 | /** 15 | * When GET request is sent to 127.0.0.1:4114/tasks, 16 | * response will be 17 | * [ 18 | * 'Enroll to Scaler', 19 | * 'Learn Node.js', 20 | * 'Learn React.js', 21 | * 'Get a job', 22 | * 'Get a girlfriend/boyfriend' 23 | * ] 24 | */ 25 | app.get('/tasks', (req, res) => { 26 | 27 | }) 28 | 29 | /** 30 | * If GET request is sent to 127.0.0.1:4114/tasks/1, 31 | * Then response will be 32 | * 33 | * 'Enroll to Scaler' 34 | * 35 | * If GET request is sent to 127.0.0.1:4114/tasks/2 36 | * Then response will be 37 | * 38 | * 'Learn Node.js' 39 | */ 40 | 41 | app.get('/tasks/:id', (req, res) => { 42 | 43 | // BONUS: figure out how `:id` part works 44 | }) 45 | 46 | app.delete('/tasks/:id', (req, res) => { 47 | 48 | // Delete task with given id 49 | }) 50 | 51 | /** 52 | * When POST request is sent to 127.0.0.1:4114/tasks, 53 | * with the body: 54 | * { "task": "Complete NodeJS Assignment" } 55 | * 56 | * Then a new task will be added to the list. 57 | * 58 | * 6. Complete NodeJS Assignment 59 | */ 60 | 61 | app.post('/tasks', (req, res) => { 62 | 63 | }) 64 | 65 | app.listen(4114, () => { 66 | console.log('server started on http://127.0.0.1:4114') 67 | }) 68 | 69 | /** 70 | * BONUS: 71 | * - Save the tasks to a file tasks.json 72 | * - Update the file every time a new task is created/deleted 73 | * - When server is restarted, old tasks should be available 74 | * - Read the file at server start to load the saved tasks 75 | */ -------------------------------------------------------------------------------- /06-react-ii/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Netflix Landing 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /07-react-movie-db/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /13-typescript/index.js: -------------------------------------------------------------------------------- 1 | var __assign = (this && this.__assign) || function () { 2 | __assign = Object.assign || function(t) { 3 | for (var s, i = 1, n = arguments.length; i < n; i++) { 4 | s = arguments[i]; 5 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 6 | t[p] = s[p]; 7 | } 8 | return t; 9 | }; 10 | return __assign.apply(this, arguments); 11 | }; 12 | // Strict Type Assignment 13 | var abc = 23; 14 | // abc = "something"; 15 | console.log(abc); 16 | // Strict Typing Lists 17 | var list1 = [45, 56, 78]; 18 | // let list2: string[] = ["bipin", "is", "teaching", 5] 19 | var list3 = [45, true, "s"]; 20 | console.log(list1, list3); 21 | var random = "random"; 22 | random = 24; 23 | // random = true; 24 | var font = "italic"; 25 | var myCar; 26 | // myCar.something = true; 27 | // myCar.something = "random"; 28 | // myCar.random = "random"; 29 | // Strong Typing a Function 30 | function addtwo(x, y) { 31 | return (x + y).toString(); 32 | } 33 | console.log(addtwo(2, 3)); 34 | var newTuple = [23, "b", true, 54]; 35 | // Angle brackets contain the generic part 36 | // Generics in functions 37 | // function getArray(items: any[]): any[] { 38 | // return new Array().concat(items) 39 | // } 40 | var lastElement = function (arr) { 41 | return arr[arr.length - 1]; 42 | }; 43 | var l1 = lastElement([1, 2, 3]); 44 | var l2 = lastElement(['a', 'b', 'c']); 45 | var l3 = lastElement([1, 'a', 3]); 46 | var makeArray = function (x, y) { 47 | return [x, y]; 48 | }; 49 | var a1 = makeArray(5, 6); 50 | var a2 = makeArray(5, 'b'); 51 | var a3 = makeArray(null, '5'); // You can add unions while calling a function with generic type 52 | ; 53 | var makeFullName = function (obj) { 54 | return __assign(__assign({}, obj), { fullName: obj.firstName + " " + obj.lastName }); 55 | }; 56 | var f1 = makeFullName({ 57 | firstName: "something", 58 | lastName: "sinclair", 59 | age: 25, 60 | random: true 61 | }); 62 | var something; 63 | var me; 64 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-2/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-size: 14px; 3 | } 4 | 5 | /* button { 6 | background: unset; 7 | border: unset; 8 | } */ 9 | 10 | .flex-container { 11 | display: flex; 12 | position: relative; 13 | border: 1px solid black; 14 | justify-content: space-evenly; 15 | align-items: center; 16 | /* justify-content: space-evenly; 17 | align-items: start; 18 | align-content: start; 19 | flex-wrap: wrap; 20 | height: 100vh; */ 21 | height: 100vh; 22 | flex-direction: column; 23 | 24 | } 25 | 26 | .box { 27 | background: grey; 28 | border: 2px solid red; 29 | width: 100px; 30 | color: white; 31 | font-weight: 7000; 32 | } 33 | 34 | .box-1 { 35 | min-height: 100px; 36 | /* flex-shrink: 0; */ 37 | /* flex: 1; */ 38 | /* align-self: flex-start; */ 39 | justify-self: center; 40 | } 41 | 42 | .box-2 { 43 | min-height: 200px; 44 | /* min-width: 100px; */ 45 | /* flex-grow: 2; */ 46 | /* flex-basis: 300px; */ 47 | justify-self: flex-start; 48 | } 49 | 50 | .box-3 { 51 | min-height: 300px; 52 | /* flex-grow: 1; */ 53 | /* flex-basis: 0; */ 54 | align-self: flex-end; 55 | } 56 | 57 | .main-axis { 58 | position: absolute; 59 | top: 50%; 60 | left: 0; 61 | width: 100%; 62 | height: 2px; 63 | background: pink; 64 | } 65 | 66 | .cross-axis { 67 | position: absolute; 68 | top: 0; 69 | left: 50%; 70 | width: 2px; 71 | height: 100%; 72 | background: cyan; 73 | } 74 | 75 | button { 76 | border: 1px solid blue; 77 | border-radius: 2px; 78 | padding: 5px 10px; 79 | } 80 | 81 | button:hover { 82 | background: blue; 83 | color: white; 84 | } 85 | 86 | .container { 87 | border: 1px solid red; 88 | /* height: 100px; */ 89 | max-width: 600px; 90 | margin: 0 auto; 91 | height: 100vh; 92 | position: relative; 93 | /* if there is any absolute item inside, position it relative to this parent */ 94 | } 95 | 96 | img { 97 | max-width: 100%; 98 | height: 200px; 99 | position: absolute; 100 | bottom: 0; 101 | right: 0; 102 | } 103 | 104 | @media (min-width: 1000px) { 105 | .container { 106 | display: flex; 107 | } 108 | 109 | img { 110 | margin-right: 30px; 111 | } 112 | } -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /06-react-ii/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /07-react-movie-db/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /13-typescript/typescript-react-1/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /12-hangman/styles/components/_hangman.scss: -------------------------------------------------------------------------------- 1 | .hangman-container { 2 | position: relative; 3 | padding-left: 10rem; 4 | padding-top: 8rem; 5 | box-sizing: border-box; 6 | height: calc(760px + 2rem); 7 | } 8 | 9 | .pole { 10 | position: absolute; 11 | height: 750px; 12 | top: 2rem; 13 | left: 3rem; 14 | border-left: 10px solid $pink-dark; 15 | border-top: 10px solid $pink-dark; 16 | width: 10rem; 17 | // z-index: -1; 18 | 19 | &::after { 20 | content: ""; 21 | height: 5.5rem; 22 | width: 10px; 23 | background: $pink-dark; 24 | position: absolute; 25 | right: 0; 26 | } 27 | } 28 | 29 | .hangman { 30 | position: relative; 31 | 32 | &__element { 33 | opacity: 0.25; 34 | 35 | &:nth-child(1) { 36 | height: 100px; 37 | width: 100px; 38 | border-radius: 50%; 39 | border: 10px solid $dark-color; 40 | } 41 | 42 | &:not(:first-child) { 43 | height: 100px; 44 | width: 10px; 45 | background: $dark-color; 46 | } 47 | 48 | &:nth-child(2) { 49 | position: absolute; 50 | height: 300px; 51 | left: 55px; 52 | } 53 | 54 | &:nth-child(3) { 55 | position: absolute; 56 | transform: rotate(45deg); 57 | top: 150px; 58 | left: 20px; 59 | } 60 | 61 | &:nth-child(4) { 62 | position: absolute; 63 | transform: rotate(-45deg); 64 | top: 150px; 65 | left: 90px; 66 | } 67 | 68 | &:nth-child(5) { 69 | position: absolute; 70 | transform: rotate(45deg); 71 | top: 400px; 72 | left: 20px; 73 | } 74 | 75 | &:nth-child(6) { 76 | position: absolute; 77 | transform: rotate(-45deg); 78 | top: 400px; 79 | left: 90px; 80 | } 81 | } 82 | } 83 | 84 | @for $i from 1 through 6 { 85 | .hangman-#{$i} { 86 | @for $j from 1 through $i { 87 | .hangman__element:nth-child(#{$j}) { 88 | opacity: 1; 89 | } 90 | } 91 | 92 | @if $i == 6 { 93 | .hangman__element:nth-child(1) { 94 | &::after { 95 | content: "● ●"; 96 | font-size: 3rem; 97 | color: $dark-color; 98 | position: absolute; 99 | } 100 | 101 | &::before { 102 | content: "("; 103 | font-size: 3rem; 104 | position: absolute; 105 | font-family: sans-serif; 106 | transform: rotate(90deg); 107 | font-weight: bold; 108 | top: 60px; 109 | left: 50px; 110 | } 111 | } 112 | } 113 | } 114 | } -------------------------------------------------------------------------------- /12-hangman/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | -------------------------------------------------------------------------------- /13-hangman-frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | -------------------------------------------------------------------------------- /01-html-101/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

    heading 1

    12 |

    heading 2

    13 |

    heading 3

    14 |

    heading 4

    15 |
    heading 5
    16 |
    heading 6
    17 | this is some normal text 18 |

    this is a paragraph

    19 |
    this is a div
    20 | this is a span 21 | 22 | This is bold text 23 |
    24 | This is italic text 25 |
    26 | This is underline text 27 |
    28 | JS 29 | 30 |

    Lists

    31 | 32 |
      33 |
    1. aidgf
      2. 34 |
    2. aidgf
      3. 35 |
    3. aidgf
      4. 36 |
    4. aidgf
      5. 37 |
    38 | 39 |
      40 |
    1. aidgf
      2. 41 |
    2. aidgf
      3. 42 |
    3. aidgf
      4. 43 |
    4. aidgf
      5. 44 |
    45 | 46 |
      47 |
    1. aidgf
      2. 48 |
    2. aidgf
      3. 49 |
    3. aidgf
      4. 50 |
    4. aidgf
      5. 51 |
    52 | 53 | 54 |
      55 |
    • aidgf
      • 56 |
    • aidgf
      • 57 |
    • aidgf
      • 58 |
    • aidgf
      • 59 |
    60 | 61 |
      62 |
    • aidgf
      • 63 |
    • aidgf
      • 64 |
    • aidgf
      • 65 |
    • aidgf
      • 66 |
    67 | 68 |
      69 |
    • aidgf
      • 70 |
    • aidgf
      • 71 |
    • aidgf
      • 72 |
    • aidgf
      • 73 |
    74 | 75 |

    Nested Lists

    76 | 77 |
      78 |
    1. one 79 |
        80 |
      1. one point one
        2. 81 |
      2. one point two
        3. 82 |
      83 |
      2. 84 |
    2. two
      3. 85 |
    3. three
      4. 86 |
    87 | 88 |

    Form Elements

    89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |
    97 | 98 | A
    99 | B
    100 | C
    101 | 102 | A
    103 | B
    104 | C
    105 | 106 | Apple
    107 | Banana
    108 | Chikoo
    109 | 110 |
    Google Search
    111 |
    112 | 113 | 114 |
    115 | 116 | 117 | -------------------------------------------------------------------------------- /06-react-ii/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /07-react-movie-db/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `yarn build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 43 | 44 |
    45 |
    46 |
    47 | 48 | 54 | 55 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /13-typescript/index.ts: -------------------------------------------------------------------------------- 1 | // Strict Type Assignment 2 | let abc: number = 23; 3 | // abc = "something"; 4 | 5 | console.log(abc); 6 | 7 | // Strict Typing Lists 8 | let list1: number[] = [45,56,78]; 9 | // let list2: string[] = ["bipin", "is", "teaching", 5] 10 | let list3: any[] = [45, true, "s"] 11 | 12 | console.log(list1, list3); 13 | // console.log(something) 14 | 15 | // Custom Types 16 | type style = number | string; // Union of two types 17 | type decoration = "bold" | "italic"; 18 | 19 | let random: style = "random"; 20 | random = 24; 21 | // random = true; 22 | 23 | let font: decoration = "italic"; 24 | 25 | // let a: number = 24; 26 | // console.log(a.toString()); 27 | 28 | // Custom Types for Objects 29 | interface Car { 30 | year: number, 31 | model: string, 32 | electric: boolean, 33 | [key: string]: any // This would give me capability to add extra key value pairs to my object 34 | } 35 | 36 | let myCar: Car; 37 | // myCar.something = true; 38 | // myCar.something = "random"; 39 | // myCar.random = "random"; 40 | 41 | // Strong Typing a Function 42 | function addtwo(x: number, y: number): string { 43 | return (x+y).toString(); 44 | } 45 | 46 | console.log(addtwo(2,3)) 47 | 48 | // TypeScript has Tuples 49 | // A tuple is a fixed length list with datatype of each element predefined 50 | type myTuple = [number, string, boolean, number?]; // ? -> Makes an element optional 51 | let newTuple: myTuple = [23, "b", true, 54] 52 | // let newerTuple: myTuple = []; 53 | 54 | 55 | // GENERICS IN TYPESCRIPT 56 | type numArray = Array; 57 | type numnumArray = Array; 58 | // Angle brackets contain the generic part 59 | 60 | // Generics in functions 61 | // function getArray(items: any[]): any[] { 62 | // return new Array().concat(items) 63 | // } 64 | 65 | const lastElement = (arr: Array) => { 66 | return arr[arr.length - 1] 67 | } 68 | 69 | const l1 = lastElement([1,2,3]); 70 | const l2 = lastElement(['a','b','c']); 71 | const l3 = lastElement([1,'a',3]); 72 | 73 | const makeArray = (x: X, y: Y) => { 74 | return [x, y]; 75 | } 76 | 77 | const a1 = makeArray(5,6); 78 | const a2 = makeArray(5,'b'); 79 | const a3 = makeArray(null, '5'); // You can add unions while calling a function with generic type 80 | 81 | // Extension in generics -> Interfaces 82 | 83 | // const makeFullName = (obj: { 84 | // firstName: string; 85 | // lastName: string; 86 | // }) => { 87 | // return { 88 | // ...obj, 89 | // fullName: obj.firstName + " " + obj.lastName 90 | // } 91 | // } 92 | 93 | // const f1 = makeFullName({ 94 | // firstName: "something", 95 | // lastName: "sinclair", 96 | // age: 25 97 | // }) 98 | 99 | // We need to ensure that two fields exist for sure but other fields can also exist 100 | 101 | interface basics { 102 | firstName: string; 103 | lastName: string; 104 | }; 105 | 106 | const makeFullName = (obj: T) => { 110 | return { 111 | ...obj, 112 | fullName: obj.firstName + " " + obj.lastName 113 | } 114 | } 115 | 116 | const f1 = makeFullName({ 117 | firstName: "something", 118 | lastName: "sinclair", 119 | age: 25, 120 | random: true 121 | }) 122 | 123 | // Generics with Interfaces 124 | interface Tablet { 125 | id: string; 126 | position: number; 127 | data: T 128 | } 129 | 130 | type numberTablet = Tablet; 131 | 132 | let something: numberTablet; 133 | 134 | // Debatable feature of interfaces 135 | interface Person { 136 | name: string; 137 | hungry: boolean; 138 | } 139 | 140 | interface Person { 141 | hangry: boolean 142 | } 143 | 144 | // Interface declaration merging in TS 145 | 146 | type personType = Person; 147 | let me: personType; -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/.cache/39/79c466aa54ca26e0de387b42bb814c.json: -------------------------------------------------------------------------------- 1 | {"id":"scss/main.scss","dependencies":[{"name":"/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5/scss/main.scss","includedInParent":true,"mtime":1642264286540},{"name":"/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5/scss/settings/_colors.scss","includedInParent":true,"mtime":1642264195521},{"name":"/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5/scss/settings/_font.scss","includedInParent":true,"mtime":1642263742696},{"name":"_css_loader","parent":"/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5/scss/main.scss","resolved":"/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5/node_modules/parcel-bundler/src/builtins/css-loader.js"},{"name":"/Users/bipinkalra/Documents/Scaler/edge-webdev-2021/11-responsive-web-dev/lecture-5/package.json","includedInParent":true,"mtime":1642262168205}],"generated":{"css":"div p {\n color: #555445;\n}\n\n.wrapper {\n font-size: 3rem;\n}\n.wrapper:hover {\n color: blue;\n}\n\n.box {\n height: 200px;\n aspect-ratio: 1;\n}\n.box__small-box {\n height: 100px;\n aspect-ratio: 1;\n}\n.box__small-box--green {\n background: green;\n}\n\n.button-secondary, .button-primary {\n cursor: pointer;\n padding: 1rem 1.5rem;\n font-weight: bold;\n}\n\n.button-primary {\n background: blue;\n color: white;\n}\n\n.button-secondary {\n border: 1px solid blue;\n color: blue;\n}\n\n@media screen and (max-width: 992px) {\n .red {\n background: blue;\n font-size: 20px;\n }\n}\n\n.col-1 {\n flex: 0 0 8.3333333333;\n}\n\n.col-2 {\n flex: 0 0 16.6666666667;\n}\n\n.col-3 {\n flex: 0 0 25;\n}\n\n.col-4 {\n flex: 0 0 33.3333333333;\n}\n\n.col-5 {\n flex: 0 0 41.6666666667;\n}\n\n.col-6 {\n flex: 0 0 50;\n}\n\n.col-7 {\n flex: 0 0 58.3333333333;\n}\n\n.col-8 {\n flex: 0 0 66.6666666667;\n}\n\n.col-9 {\n flex: 0 0 75;\n}\n\n.col-10 {\n flex: 0 0 83.3333333333;\n}\n\n.col-11 {\n flex: 0 0 91.6666666667;\n}\n\n.col-12 {\n flex: 0 0 100;\n}\n\n.text-red {\n color: red;\n}\n\n.text-whiye {\n color: white;\n}\n\n.text-primary {\n color: blue;\n}","js":"var reloadCSS = require('_css_loader');\n\nmodule.hot.dispose(reloadCSS);\nmodule.hot.accept(reloadCSS);"},"sourceMaps":{"css":{"mappings":[{"source":"scss/main.scss","name":null,"original":{"line":14,"column":2},"generated":{"line":1,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":15,"column":4},"generated":{"line":2,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":5,"column":6},"generated":{"line":2,"column":9}},{"source":"scss/main.scss","name":null,"original":{"line":19,"column":0},"generated":{"line":5,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":20,"column":2},"generated":{"line":6,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":22,"column":2},"generated":{"line":8,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":23,"column":4},"generated":{"line":9,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":27,"column":0},"generated":{"line":12,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":28,"column":2},"generated":{"line":13,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":29,"column":2},"generated":{"line":14,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":31,"column":2},"generated":{"line":16,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":32,"column":4},"generated":{"line":17,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":33,"column":4},"generated":{"line":18,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":35,"column":4},"generated":{"line":20,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":36,"column":6},"generated":{"line":21,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":41,"column":0},"generated":{"line":24,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":42,"column":2},"generated":{"line":25,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":43,"column":2},"generated":{"line":26,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":44,"column":2},"generated":{"line":27,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":47,"column":0},"generated":{"line":30,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":50,"column":2},"generated":{"line":31,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":51,"column":2},"generated":{"line":32,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":54,"column":0},"generated":{"line":35,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":57,"column":2},"generated":{"line":36,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":58,"column":2},"generated":{"line":37,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":64,"column":2},"generated":{"line":40,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":69,"column":0},"generated":{"line":41,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":71,"column":4},"generated":{"line":42,"column":4}},{"source":"scss/main.scss","name":null,"original":{"line":72,"column":4},"generated":{"line":43,"column":4}},{"source":"scss/settings/_font.scss","name":null,"original":{"line":3,"column":13},"generated":{"line":43,"column":15}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":47,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":48,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":51,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":52,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":55,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":56,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":59,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":60,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":63,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":64,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":67,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":68,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":71,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":72,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":75,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":76,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":79,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":80,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":83,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":84,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":87,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":88,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":77,"column":2},"generated":{"line":91,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":78,"column":4},"generated":{"line":92,"column":2}},{"source":"scss/main.scss","name":null,"original":{"line":83,"column":2},"generated":{"line":95,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":84,"column":4},"generated":{"line":96,"column":2}},{"source":"scss/settings/_colors.scss","name":null,"original":{"line":5,"column":9},"generated":{"line":96,"column":9}},{"source":"scss/main.scss","name":null,"original":{"line":83,"column":2},"generated":{"line":99,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":84,"column":4},"generated":{"line":100,"column":2}},{"source":"scss/settings/_colors.scss","name":null,"original":{"line":5,"column":9},"generated":{"line":100,"column":9}},{"source":"scss/main.scss","name":null,"original":{"line":83,"column":2},"generated":{"line":103,"column":0}},{"source":"scss/main.scss","name":null,"original":{"line":84,"column":4},"generated":{"line":104,"column":2}},{"source":"scss/settings/_colors.scss","name":null,"original":{"line":5,"column":9},"generated":{"line":104,"column":9}}],"sources":{"scss/main.scss":"@use 'sass:map';\n@import 'settings/colors';\n@import 'settings/font';\n\n$red: #555445;\n\n$breakpoints: (\n small: 576px,\n medium: 768px,\n large: 992px\n);\n\ndiv {\n p {\n color: $red;\n }\n}\n\n.wrapper {\n font-size: 3rem;\n\n &:hover {\n color: blue;\n }\n}\n\n.box {\n height: 200px;\n aspect-ratio: 1;\n\n &__small-box {\n height: 100px;\n aspect-ratio: 1;\n\n &--green {\n background: green;\n }\n }\n}\n\n%button {\n cursor: pointer;\n padding: 1rem 1.5rem;\n font-weight: bold;\n}\n\n.button-primary {\n @extend %button;\n\n background: blue;\n color: white;\n}\n\n.button-secondary {\n @extend %button;\n \n border: 1px solid blue;\n color: blue;\n}\n\n@mixin apply_media_query($key) {\n $size: map.get($breakpoints, $key);\n\n @media screen and (max-width: $size){\n @content;\n }\n}\n\n.red {\n @include apply_media_query(large){\n background: blue;\n font-size: $font-large;\n }\n}\n\n@for $i from 1 through 12 {\n .col-#{$i} {\n flex: 0 0 (100/(12/$i));\n }\n}\n\n@each $key, $value in $colors {\n .text-#{$key} {\n color: $value;\n }\n}","scss/settings/_font.scss":"$font-small: 10px;\n$font-med: 15px;\n$font-large: 20px;","scss/settings/_colors.scss":"$red: red;\n$white: white;\n$primary: blue;\n\n$colors: (\n red: $red,\n whiye: $white,\n primary: $primary\n)"},"lineCount":null}},"error":null,"hash":"dce59cf9e85c768009cf682581fa7101","cacheData":{"env":{}}} -------------------------------------------------------------------------------- /13-typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "es2022", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 16 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 17 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ 18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ 20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ 22 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ 23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 25 | 26 | /* Modules */ 27 | "module": "commonjs", /* Specify what module code is generated. */ 28 | // "rootDir": "./", /* Specify the root folder within your source files. */ 29 | // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 30 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 31 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 32 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 33 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ 34 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 35 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 36 | // "resolveJsonModule": true, /* Enable importing .json files */ 37 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ 38 | 39 | /* JavaScript Support */ 40 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ 41 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 42 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ 43 | 44 | /* Emit */ 45 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 46 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 47 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 48 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 49 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ 50 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 51 | // "removeComments": true, /* Disable emitting comments. */ 52 | // "noEmit": true, /* Disable emitting files from a compilation. */ 53 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 54 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ 55 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 56 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 58 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 59 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 60 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 61 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 62 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ 63 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ 64 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 65 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ 66 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 67 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 68 | 69 | /* Interop Constraints */ 70 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 71 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 72 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */ 73 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 74 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 75 | 76 | /* Type Checking */ 77 | "strict": true, /* Enable all strict type-checking options. */ 78 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ 79 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ 80 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 81 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ 82 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 83 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ 84 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ 85 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 86 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ 87 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ 88 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 89 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 90 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 91 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 92 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 93 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ 94 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 95 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 96 | 97 | /* Completeness */ 98 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 99 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /11-responsive-web-dev/lecture-5/dist/main.77bb5cfd.js: -------------------------------------------------------------------------------- 1 | // modules are defined as an array 2 | // [ module function, map of requires ] 3 | // 4 | // map of requires is short require name -> numeric require 5 | // 6 | // anything defined in a previous bundle is accessed via the 7 | // orig method which is the require for previous bundles 8 | parcelRequire = (function (modules, cache, entry, globalName) { 9 | // Save the require from previous bundle to this closure if any 10 | var previousRequire = typeof parcelRequire === 'function' && parcelRequire; 11 | var nodeRequire = typeof require === 'function' && require; 12 | 13 | function newRequire(name, jumped) { 14 | if (!cache[name]) { 15 | if (!modules[name]) { 16 | // if we cannot find the module within our internal map or 17 | // cache jump to the current global require ie. the last bundle 18 | // that was added to the page. 19 | var currentRequire = typeof parcelRequire === 'function' && parcelRequire; 20 | if (!jumped && currentRequire) { 21 | return currentRequire(name, true); 22 | } 23 | 24 | // If there are other bundles on this page the require from the 25 | // previous one is saved to 'previousRequire'. Repeat this as 26 | // many times as there are bundles until the module is found or 27 | // we exhaust the require chain. 28 | if (previousRequire) { 29 | return previousRequire(name, true); 30 | } 31 | 32 | // Try the node require function if it exists. 33 | if (nodeRequire && typeof name === 'string') { 34 | return nodeRequire(name); 35 | } 36 | 37 | var err = new Error('Cannot find module \'' + name + '\''); 38 | err.code = 'MODULE_NOT_FOUND'; 39 | throw err; 40 | } 41 | 42 | localRequire.resolve = resolve; 43 | localRequire.cache = {}; 44 | 45 | var module = cache[name] = new newRequire.Module(name); 46 | 47 | modules[name][0].call(module.exports, localRequire, module, module.exports, this); 48 | } 49 | 50 | return cache[name].exports; 51 | 52 | function localRequire(x){ 53 | return newRequire(localRequire.resolve(x)); 54 | } 55 | 56 | function resolve(x){ 57 | return modules[name][1][x] || x; 58 | } 59 | } 60 | 61 | function Module(moduleName) { 62 | this.id = moduleName; 63 | this.bundle = newRequire; 64 | this.exports = {}; 65 | } 66 | 67 | newRequire.isParcelRequire = true; 68 | newRequire.Module = Module; 69 | newRequire.modules = modules; 70 | newRequire.cache = cache; 71 | newRequire.parent = previousRequire; 72 | newRequire.register = function (id, exports) { 73 | modules[id] = [function (require, module) { 74 | module.exports = exports; 75 | }, {}]; 76 | }; 77 | 78 | var error; 79 | for (var i = 0; i < entry.length; i++) { 80 | try { 81 | newRequire(entry[i]); 82 | } catch (e) { 83 | // Save first error but execute all entries 84 | if (!error) { 85 | error = e; 86 | } 87 | } 88 | } 89 | 90 | if (entry.length) { 91 | // Expose entry point to Node, AMD or browser globals 92 | // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js 93 | var mainExports = newRequire(entry[entry.length - 1]); 94 | 95 | // CommonJS 96 | if (typeof exports === "object" && typeof module !== "undefined") { 97 | module.exports = mainExports; 98 | 99 | // RequireJS 100 | } else if (typeof define === "function" && define.amd) { 101 | define(function () { 102 | return mainExports; 103 | }); 104 | 105 | //