├── test.txt ├── react ├── fashion-blog │ ├── style.css │ └── index.html ├── alab320h-2-1 │ ├── src │ │ ├── App.css │ │ ├── components │ │ │ ├── Content.css │ │ │ ├── Footer.css │ │ │ ├── Header.css │ │ │ ├── Footer.jsx │ │ │ ├── Header.jsx │ │ │ └── Content.jsx │ │ ├── index.css │ │ ├── main.jsx │ │ ├── App.jsx │ │ └── assets │ │ │ └── react.svg │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ ├── eslint.config.js │ └── public │ │ └── vite.svg ├── alab320h-react │ ├── src │ │ ├── App.css │ │ ├── index.css │ │ ├── assets │ │ │ ├── blog-image-1.jpg │ │ │ └── react.svg │ │ ├── components │ │ │ ├── Header.jsx │ │ │ ├── Footer.jsx │ │ │ ├── ArticleItem.jsx │ │ │ ├── Nav.jsx │ │ │ ├── Article2.jsx │ │ │ └── Article1.jsx │ │ ├── main.jsx │ │ └── App.jsx │ ├── public │ │ ├── blog-image-2.jpg │ │ └── vite.svg │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ └── eslint.config.js ├── cryptoprices │ ├── src │ │ ├── App.css │ │ ├── pages │ │ │ ├── Main.jsx │ │ │ ├── Currencies.jsx │ │ │ └── Price.jsx │ │ ├── index.css │ │ ├── components │ │ │ └── Nav.jsx │ │ ├── main.jsx │ │ ├── App.jsx │ │ └── assets │ │ │ └── react.svg │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ ├── eslint.config.js │ └── public │ │ └── vite.svg ├── react-learners-state │ ├── src │ │ ├── App.css │ │ ├── components │ │ │ ├── Score.jsx │ │ │ └── Learner.jsx │ │ ├── main.jsx │ │ └── index.css │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ ├── eslint.config.js │ └── public │ │ └── vite.svg ├── movies-search │ ├── src │ │ ├── App.css │ │ ├── main.jsx │ │ ├── index.css │ │ ├── App.jsx │ │ └── assets │ │ │ └── react.svg │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── components │ │ ├── MovieDisplay.jsx │ │ └── Form.jsx │ ├── package.json │ ├── eslint.config.js │ └── public │ │ └── vite.svg └── react-router │ ├── src │ ├── pages │ │ ├── AboutPage.jsx │ │ ├── HomePage.jsx │ │ └── ProfilePage.jsx │ ├── components │ │ └── Navbar.jsx │ ├── main.jsx │ ├── App.jsx │ ├── App.css │ ├── index.css │ └── assets │ │ └── react.svg │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ ├── eslint.config.js │ └── public │ └── vite.svg ├── JS ├── ajax-xhr │ ├── test.html │ ├── test.xml │ ├── index.html │ ├── index-test.html │ ├── index.-test-xml.html │ └── index.js ├── data-fetching-lab │ ├── .gitignore │ ├── styles.css │ └── Carousel.js ├── user-signup │ ├── style.css │ ├── index.js │ └── index.html ├── modules │ ├── myOtherModule.js │ ├── index.html │ ├── myModule.js │ └── index.js ├── fetch │ ├── index.html │ ├── index.js │ └── dog-api.html ├── promises │ ├── index.html │ └── index.js ├── promisesLab │ ├── index.html │ ├── index.js │ └── databases.js ├── stack │ ├── index.html │ ├── index.js │ └── Stack.js ├── axios │ ├── index.js │ └── index.html └── classes │ ├── index.html │ ├── grades-refactored.js │ ├── learner.js │ └── index.js ├── capstone_project ├── backend │ ├── index.js │ ├── .gitignore │ ├── README.md │ └── package.json └── frontend │ ├── src │ ├── App.css │ ├── index.css │ ├── main.jsx │ └── App.jsx │ ├── postcss.config.js │ ├── vite.config.js │ ├── tailwind.config.js │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ ├── eslint.config.js │ └── public │ └── vite.svg ├── backend ├── express-server │ ├── routes │ │ ├── post.js │ │ ├── product.js │ │ └── user.js │ ├── public │ │ └── styles.css │ ├── .gitignore │ ├── views │ │ └── index.pug │ ├── package.json │ ├── server.js │ └── index.js ├── express-rest-example │ ├── .gitignore │ ├── utils │ │ └── error.js │ ├── package.json │ ├── routes │ │ ├── posts.js │ │ └── users.js │ ├── data │ │ ├── users.js │ │ └── posts.js │ └── index.js ├── mongoose-api │ ├── .gitignore │ ├── package.json │ ├── model │ │ └── Post.js │ ├── routes │ │ └── posts.js │ └── index.js ├── webserver │ ├── .gitignore │ ├── public │ │ ├── myscript.js │ │ └── style.css │ ├── views │ │ ├── pricing.pug │ │ ├── services.pug │ │ └── home.pug │ ├── package.json │ └── index.js └── mongodb-api │ ├── loadEnv.js │ ├── index.js │ ├── package.json │ ├── db │ └── conn.js │ └── routes │ └── grades.js ├── fullstack_app ├── backend │ ├── .gitignore │ ├── package.json │ ├── models │ │ ├── Task.js │ │ └── Project.js │ ├── index.js │ └── routes │ │ └── projects.js └── frontend │ ├── src │ ├── pages │ │ ├── HomePage.jsx │ │ └── ProjectsPage.jsx │ ├── components │ │ ├── Navbar.jsx │ │ └── CreateTaskForm.jsx │ ├── main.jsx │ ├── App.css │ ├── App.jsx │ └── index.css │ ├── vite.config.js │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ ├── eslint.config.js │ └── public │ └── vite.svg ├── .vscode └── settings.json ├── typescript ├── ts-lab │ ├── src │ │ ├── styles.css │ │ └── index.ts │ ├── .gitignore │ ├── index.html │ ├── dist │ │ └── index.html │ ├── tsconfig.json │ ├── package.json │ └── .cache │ │ └── 0e │ │ └── ca688895ab131675ecc6d32c4f5d54.json └── ts-101 │ ├── types │ ├── index.js │ └── index.ts │ ├── index.js │ └── index.ts ├── .gitignore ├── redux ├── redux-essentials-example-app │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── index.html │ ├── prettier.config.js │ ├── src │ │ ├── app │ │ │ ├── store.js │ │ │ └── Navbar.js │ │ ├── setupTests.js │ │ ├── components │ │ │ └── Spinner.js │ │ ├── index.js │ │ ├── App.js │ │ └── api │ │ │ └── client.js │ ├── .gitignore │ ├── package.json │ └── README.md └── redux_counter │ ├── vite.config.js │ ├── src │ ├── redux │ │ └── store.js │ ├── main.jsx │ ├── App.css │ ├── features │ │ └── counter │ │ │ └── counterSlice.js │ ├── App.jsx │ ├── index.css │ └── assets │ │ └── react.svg │ ├── .gitignore │ ├── index.html │ ├── README.md │ ├── package.json │ ├── eslint.config.js │ └── public │ └── vite.svg ├── README.md └── embed.html /test.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/fashion-blog/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /JS/ajax-xhr/test.html: -------------------------------------------------------------------------------- 1 | Hello World! -------------------------------------------------------------------------------- /capstone_project/backend/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/alab320h-2-1/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/alab320h-react/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/cryptoprices/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /JS/data-fetching-lab/.gitignore: -------------------------------------------------------------------------------- 1 | key.js -------------------------------------------------------------------------------- /backend/express-server/routes/post.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /capstone_project/frontend/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/alab320h-react/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /backend/express-server/routes/product.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/alab320h-2-1/src/components/Content.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/alab320h-2-1/src/components/Footer.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/alab320h-2-1/src/components/Header.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /backend/express-rest-example/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /backend/express-server/public/styles.css: -------------------------------------------------------------------------------- 1 | .container {} -------------------------------------------------------------------------------- /backend/mongoose-api/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /backend/webserver/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /fullstack_app/backend/.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | node_modules -------------------------------------------------------------------------------- /backend/express-server/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /capstone_project/backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5633 3 | } -------------------------------------------------------------------------------- /JS/ajax-xhr/test.xml: -------------------------------------------------------------------------------- 1 | 2 | XML data test! -------------------------------------------------------------------------------- /backend/webserver/public/myscript.js: -------------------------------------------------------------------------------- 1 | console.log('running script...'); 2 | -------------------------------------------------------------------------------- /typescript/ts-lab/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: sans-serif; 3 | } 4 | -------------------------------------------------------------------------------- /capstone_project/frontend/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /react/alab320h-2-1/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | /* box-sizing: */ 5 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | node_modules/ 3 | .env 4 | .env/ 5 | .env.local 6 | .env.local/ 7 | dist 8 | .cache -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /typescript/ts-101/types/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | -------------------------------------------------------------------------------- /backend/express-server/views/index.pug: -------------------------------------------------------------------------------- 1 | html 2 | head 3 | title= title 4 | body 5 | h1= message 6 | .container -------------------------------------------------------------------------------- /typescript/ts-lab/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | node_modules/ 3 | .env 4 | .env/ 5 | .env.local 6 | .env.local/ 7 | dist 8 | .cache -------------------------------------------------------------------------------- /react/cryptoprices/src/pages/Main.jsx: -------------------------------------------------------------------------------- 1 | export default function Main () { 2 | return

This is the Main Component

; 3 | } -------------------------------------------------------------------------------- /react/alab320h-2-1/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | export default function Footer() { 2 | return

Created by Me, of course.

; 3 | } 4 | -------------------------------------------------------------------------------- /react/alab320h-2-1/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | export default function Header() { 2 | return

Simple React Application

; 3 | } 4 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /JS/user-signup/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0 100px; 3 | } 4 | 5 | 6 | form { 7 | display: flex; 8 | flex-direction: column 9 | } -------------------------------------------------------------------------------- /react/alab320h-react/public/blog-image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/2024-rtt-35/HEAD/react/alab320h-react/public/blog-image-2.jpg -------------------------------------------------------------------------------- /react/alab320h-react/src/assets/blog-image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/2024-rtt-35/HEAD/react/alab320h-react/src/assets/blog-image-1.jpg -------------------------------------------------------------------------------- /react/react-learners-state/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /capstone_project/frontend/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /backend/express-rest-example/utils/error.js: -------------------------------------------------------------------------------- 1 | export function error(status, msg) { 2 | let err = new Error(msg); 3 | err.status = status; 4 | return err; 5 | } 6 | -------------------------------------------------------------------------------- /react/movies-search/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/2024-rtt-35/HEAD/redux/redux-essentials-example-app/public/favicon.ico -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/2024-rtt-35/HEAD/redux/redux-essentials-example-app/public/logo192.png -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/2024-rtt-35/HEAD/redux/redux-essentials-example-app/public/logo512.png -------------------------------------------------------------------------------- /JS/modules/myOtherModule.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default function getCurrentDate(){ 4 | return new Date().getTime() 5 | } 6 | 7 | 8 | export const isAuthenticated = false; -------------------------------------------------------------------------------- /backend/webserver/public/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | background-color: royalblue; 3 | color: #fff; 4 | padding: 20px; 5 | } 6 | 7 | a { 8 | margin-right: 15px; 9 | } -------------------------------------------------------------------------------- /fullstack_app/frontend/src/pages/HomePage.jsx: -------------------------------------------------------------------------------- 1 | export default function HomePage() { 2 | return ( 3 |
4 |

Home Page

5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/src/app/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit' 2 | 3 | export default configureStore({ 4 | reducer: () => ({}), 5 | }) 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 2024 RTT 35 Repo 2 | 3 | 4 | 5 | ## Git Commands 6 | 7 | 1. `git rm -r --cached` removes files or folders from remote repo 8 | eg, `git rm -r --cached node_modules` -------------------------------------------------------------------------------- /backend/mongodb-api/loadEnv.js: -------------------------------------------------------------------------------- 1 | import dotenv from 'dotenv'; 2 | // Configure our ENV variables 3 | dotenv.config(); 4 | console.log(process.env.PORT); 5 | console.log(process.env.MONGODB_URI); -------------------------------------------------------------------------------- /react/react-router/src/pages/AboutPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AboutPage() { 2 | return ( 3 |
4 |

About Page

5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /react/alab320h-2-1/src/components/Content.jsx: -------------------------------------------------------------------------------- 1 | import './Content.css' 2 | 3 | export default function Content() { 4 | return (

This is my first React Application, wish me luck!

); 5 | } -------------------------------------------------------------------------------- /fullstack_app/frontend/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /react/alab320h-2-1/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /react/alab320h-react/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /react/cryptoprices/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /react/movies-search/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /react/react-router/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /redux/redux_counter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /capstone_project/frontend/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /react/react-learners-state/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /backend/webserver/views/pricing.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title='Acme Inc | Pricing' 5 | link(rel="stylesheet", href="style.css") 6 | body 7 | h1='Acme Inc | Pricing' 8 | p='We have the best products!' -------------------------------------------------------------------------------- /capstone_project/frontend/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./src/**/*.{html,js,jsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | 10 | -------------------------------------------------------------------------------- /backend/webserver/views/services.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title='Acme Inc | Services' 5 | link(rel="stylesheet", href="style.css") 6 | body 7 | h1='Acme Inc | Services' 8 | p='We have the best products!' -------------------------------------------------------------------------------- /react/alab320h-react/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import Nav from "./Nav"; 2 | 3 | function Header() { 4 | return ( 5 |
6 |

HEADER

7 | 8 |
10 | ); 11 | } 12 | 13 | export default Header; 14 | -------------------------------------------------------------------------------- /react/react-learners-state/src/components/Score.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | export default function Score(props) { 3 | return ( 4 |
5 |
Score: {props.score.score} | Date: {props.score.date}
6 |
7 | ); 8 | } 9 | -------------------------------------------------------------------------------- /redux/redux_counter/src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from "@reduxjs/toolkit"; 2 | import { counterSlice } from "../features/counter/counterSlice"; 3 | 4 | export default configureStore({ 5 | reducer: { 6 | counter: counterSlice.reducer 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /react/cryptoprices/src/index.css: -------------------------------------------------------------------------------- 1 | .nav { 2 | display: flex; 3 | justify-content: space-between; 4 | background-color: black; 5 | color: white; 6 | padding: 15px; 7 | font-size: 2em; 8 | } 9 | 10 | .nav a { 11 | color: white; 12 | text-decoration: none; 13 | } -------------------------------------------------------------------------------- /typescript/ts-lab/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Working with TypeScript 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /typescript/ts-lab/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Working with TypeScript 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /react/alab320h-2-1/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /react/alab320h-react/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import Nav from '../components/Nav'; 2 | 3 | function Footer() { 4 | return ( 5 | 11 | ); 12 | } 13 | 14 | export default Footer; 15 | -------------------------------------------------------------------------------- /react/alab320h-react/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /react/movies-search/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /capstone_project/frontend/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /react/react-learners-state/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/src/setupTests.js: -------------------------------------------------------------------------------- 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/extend-expect'; 6 | -------------------------------------------------------------------------------- /backend/express-server/routes/user.js: -------------------------------------------------------------------------------- 1 | import { Router } from "express"; 2 | 3 | const router = Router(); 4 | 5 | router.use((req, res, next) => { 6 | console.log(`User Router ${req.url}`); 7 | next() 8 | }); 9 | 10 | router.get("/", (req, res) => { 11 | res.send("Hello from user"); 12 | }); 13 | 14 | export default router; 15 | -------------------------------------------------------------------------------- /JS/fetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Fetch API

11 | 12 | -------------------------------------------------------------------------------- /JS/modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Modules

11 | 12 | -------------------------------------------------------------------------------- /react/react-router/src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | export default function Navbar() { 4 | return ( 5 | 10 | ) 11 | } -------------------------------------------------------------------------------- /JS/promises/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Promises

11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/promisesLab/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Promises Lab

11 | 12 | -------------------------------------------------------------------------------- /fullstack_app/frontend/src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | export default function NavBar() { 4 | return ( 5 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /react/cryptoprices/src/components/Nav.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | export default function Nav() { 4 | return ( 5 |
6 | 7 |
CRYPTO PRICES
8 | 9 | 10 |
CURRENCIES
11 | 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /typescript/ts-lab/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "noEmitOnError": true, 5 | "module": "commonjs", 6 | "jsx": "preserve", 7 | "esModuleInterop": true, 8 | "sourceMap": true, 9 | "allowJs": true, 10 | "lib": ["es6", "dom"], 11 | "rootDir": "src", 12 | "moduleResolution": "node" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /JS/stack/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 |

Import / Export Lab

13 | 14 | -------------------------------------------------------------------------------- /JS/stack/index.js: -------------------------------------------------------------------------------- 1 | // import { Stack } from "./Stack.js"; // named exports 2 | import Stack from './Stack.js'; // default exports 3 | 4 | // import * as Stack from './Stack.js'; 5 | 6 | const stack = new Stack(); 7 | 8 | 9 | stack.push(11); 10 | stack.push(35); 11 | 12 | console.log(stack.size()); 13 | 14 | const lastItem = stack.peek(); 15 | console.log(lastItem); 16 | 17 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/src/components/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Spinner = ({ text = '', size = '5em' }) => { 4 | const header = text ?

{text}

: null 5 | return ( 6 |
7 | {header} 8 |
9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /react/react-router/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/src/app/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const Navbar = () => { 4 | return ( 5 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /react/alab320h-2-1/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /react/cryptoprices/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /fullstack_app/frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /react/alab320h-react/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /react/movies-search/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /redux/redux_counter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /capstone_project/frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /react/react-learners-state/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /react/cryptoprices/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { BrowserRouter as Router } from "react-router-dom"; 4 | import App from "./App.jsx"; 5 | import "./index.css"; 6 | 7 | createRoot(document.getElementById("root")).render( 8 | 9 | 10 | 11 | 12 | , 13 | ); 14 | -------------------------------------------------------------------------------- /backend/express-rest-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "express-rest-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "express": "^4.21.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /fullstack_app/frontend/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import App from "./App.jsx"; 5 | import "./index.css"; 6 | 7 | createRoot(document.getElementById("root")).render( 8 | 9 | 10 | 11 | 12 | , 13 | ); 14 | -------------------------------------------------------------------------------- /react/react-router/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import App from "./App.jsx"; 5 | import "./index.css"; 6 | 7 | createRoot(document.getElementById("root")).render( 8 | 9 | 10 | 11 | 12 | , 13 | ); 14 | -------------------------------------------------------------------------------- /JS/axios/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | async function fetchTodos() { 5 | const res = await axios('https://jsonplaceholder.typicode.com/users'); 6 | console.log(res); 7 | 8 | // axios.interceptor.request.use(request => { 9 | // console.log('Request sent.'); 10 | // return request; 11 | // }); 12 | 13 | const todos = res.data; 14 | console.log(todos); 15 | } 16 | 17 | fetchTodos(); -------------------------------------------------------------------------------- /JS/axios/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |

Axios

12 | 13 | -------------------------------------------------------------------------------- /JS/modules/myModule.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export const userName = 'Bill'; 4 | 5 | 6 | export function sayHello() { 7 | const result = add(2,2) 8 | console.log(`Hello World! ${result}`); 9 | 10 | } 11 | 12 | 13 | function add(a, b) { 14 | return a + b; 15 | } 16 | 17 | 18 | export default function start() { 19 | console.log(`Starting program...`); 20 | 21 | } 22 | 23 | 24 | // export {userName, sayHello} -------------------------------------------------------------------------------- /react/alab320h-2-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react/alab320h-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react/cryptoprices/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react/movies-search/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react/react-router/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /redux/redux_counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /backend/webserver/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webserver", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "express": "^4.21.0", 15 | "morgan": "^1.10.0", 16 | "pug": "^3.0.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /capstone_project/frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /fullstack_app/frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /JS/fetch/index.js: -------------------------------------------------------------------------------- 1 | fetch("https://jsonplaceholder.typicode.com/users").then((response) => 2 | console.log(response), 3 | ); 4 | 5 | async function fetchUsers() { 6 | const response = await fetch("https://jsonplaceholder.typicode.com/users", { 7 | method: 'POST', 8 | body: JSON.parse({user: 'Jeff'}) 9 | }); 10 | console.log(response); 11 | 12 | const data = await response.json(); 13 | console.log(data); 14 | } 15 | 16 | fetchUsers(); -------------------------------------------------------------------------------- /backend/mongodb-api/index.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import gradesRouter from './routes/grades.js'; 3 | // import './loadEnv.js'; 4 | 5 | const app = express(); 6 | const PORT = process.env.PORT; 7 | 8 | // middlewares 9 | app.use(express.json()); 10 | 11 | app.use('/api/grades', gradesRouter); 12 | 13 | 14 | app.get('/', (req, res) => res.send('ok')); 15 | 16 | 17 | app.listen(PORT, () => console.log(`Server running on port: ${PORT}`)); -------------------------------------------------------------------------------- /backend/mongodb-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mongodb-api", 3 | "version": "1.0.0", 4 | "type": "module", 5 | "description": "", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "dotenv": "^16.4.5", 15 | "express": "^4.21.1", 16 | "mongodb": "^6.9.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /react/movies-search/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | -------------------------------------------------------------------------------- /react/react-learners-state/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /backend/mongoose-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mongoose-api", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "dotenv": "^16.4.5", 15 | "express": "^4.21.1", 16 | "mongoose": "^8.7.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/.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 | -------------------------------------------------------------------------------- /typescript/ts-101/types/index.ts: -------------------------------------------------------------------------------- 1 | export interface Learner { 2 | name: string; 3 | age: number; 4 | isAdult: boolean; 5 | } 6 | 7 | export interface User { 8 | name: string; 9 | age?: number; 10 | isAdult: boolean; 11 | } 12 | 13 | 14 | 15 | export interface Car { 16 | brand: string; 17 | model: string; 18 | price: number 19 | } 20 | 21 | export interface ElectricCar extends Car { 22 | electricMotor: boolean 23 | } -------------------------------------------------------------------------------- /JS/classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 |

Classes

13 | 14 | -------------------------------------------------------------------------------- /redux/redux_counter/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | 5 | import store from "./redux/store.js"; 6 | import { Provider } from "react-redux"; 7 | 8 | import "./index.css"; 9 | 10 | createRoot(document.getElementById("root")).render( 11 | 12 | 13 | 14 | 15 | , 16 | ); 17 | -------------------------------------------------------------------------------- /JS/ajax-xhr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

XML HTTP Request

11 | 12 | 16 | 17 | -------------------------------------------------------------------------------- /react/react-router/src/pages/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { users } from "../assets/users"; 3 | 4 | export default function HomePage() { 5 | return ( 6 |
7 |

Home Page

8 | 9 |
10 | {users.map((user) => ( 11 | 12 |
{user.name}
13 | 14 | ))} 15 |
16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /backend/webserver/views/home.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title='Acme Inc' 5 | link(rel="stylesheet", href="style.css") 6 | script(src="/myscript.js") 7 | body 8 | h1 #{title} 9 | h2 Hello #{username}! 10 | a(href='/services') Services 11 | a(href='/pricing') Pricing 12 | p='We have the best products!' 13 | form(action="/create", method="post") 14 | input(type="text") 15 | input(type="submit", value="Send") -------------------------------------------------------------------------------- /capstone_project/backend/README.md: -------------------------------------------------------------------------------- 1 | # Capstone Backend Project 2 | 3 | 4 | 5 | ## Description 6 | 7 | Thanks for checking out the Best-README-Template. If you have a suggestion 8 | that would make this better, please fork the repo and create a pull request 9 | or simply open an issue with the tag "enhancement". 10 | Don't forget to give the project a star! 11 | Thanks again! Now go create something AMAZING! :D 12 | 13 | ## Technologies 14 | 15 | 1. Express 16 | 2. Mongoose 17 | 3. dotenv -------------------------------------------------------------------------------- /react/alab320h-2-1/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /react/alab320h-react/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /react/alab320h-react/src/components/ArticleItem.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | 3 | function ArticleItem(props) { 4 | return ( 5 |
6 |

{props.title}

7 |

Author: {props.author}!

8 |
9 | {props.title} 10 |
11 |

{props.content}

12 | 13 |
14 | ); 15 | } 16 | 17 | export default ArticleItem; 18 | -------------------------------------------------------------------------------- /react/cryptoprices/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /react/movies-search/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /react/react-learners-state/src/components/Learner.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import Score from "./Score"; 3 | 4 | export default function Learner(props) { 5 | console.log('PROPS ',props); 6 | 7 | return ( 8 |
9 |

{props.learner.name}

10 |

{props.learner.bio}

11 | 12 | {props.learner.scores.map((score, index) => { 13 | return 14 | })} 15 | 16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /react/react-router/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /redux/redux_counter/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /fullstack_app/frontend/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /react/react-learners-state/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /fullstack_app/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "dev": "nodemon index.js", 9 | "start": "node index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "cors": "^2.8.5", 16 | "dotenv": "^16.4.5", 17 | "express": "^4.21.1", 18 | "mongoose": "^8.7.1", 19 | "morgan": "^1.10.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /capstone_project/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "dev": "nodemon index.js", 9 | "start": "node index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "cors": "^2.8.5", 16 | "dotenv": "^16.4.5", 17 | "express": "^4.21.1", 18 | "mongoose": "^8.7.2", 19 | "morgan": "^1.10.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /react/alab320h-react/src/components/Nav.jsx: -------------------------------------------------------------------------------- 1 | function Nav() { 2 | return ( 3 | 19 | ); 20 | } 21 | 22 | export default Nav; 23 | -------------------------------------------------------------------------------- /capstone_project/frontend/README.md: -------------------------------------------------------------------------------- 1 | # Capstone Frontend 2 | 3 | ## Description 4 | 5 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 6 | 7 | Currently, two official plugins are available: 8 | 9 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 10 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 11 | -------------------------------------------------------------------------------- /typescript/ts-lab/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alab-working-with-typescript", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": { 11 | "parcel-bundler": "1.12.5" 12 | }, 13 | "devDependencies": { 14 | "typescript": "4.4.4" 15 | }, 16 | "resolutions": { 17 | "@babel/preset-env": "7.13.8" 18 | }, 19 | "keywords": [] 20 | } -------------------------------------------------------------------------------- /capstone_project/frontend/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | function App() { 5 | 6 | 7 | return ( 8 |
9 |

Capstone Project

10 | 11 |
12 |
LOGO
13 |
14 |
15 | ) 16 | } 17 | 18 | export default App 19 | -------------------------------------------------------------------------------- /react/alab320h-2-1/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Header from "./components/Header"; 2 | import Content from "./components/Content"; 3 | import Footer from "./components/Footer"; 4 | 5 | import "./App.css"; 6 | 7 | function App() { 8 | return ( 9 |
10 |
11 | 12 | 13 | 14 |
15 |
16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /embed.html: -------------------------------------------------------------------------------- 1 | 2 | This is chatGPT Embeds 3 | ChatGPT Embeds 4 | 5 | 6 |

ChatGpt

7 | 8 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /backend/mongodb-api/db/conn.js: -------------------------------------------------------------------------------- 1 | import {MongoClient} from 'mongodb'; 2 | import '../loadEnv.js'; 3 | 4 | const connectionString = process.env.MONGODB_URI || ''; 5 | 6 | 7 | // Mongodb client instance 8 | const client = new MongoClient(connectionString); 9 | 10 | // connection 11 | let conn; 12 | 13 | try { 14 | // tries to connect to the database 15 | conn = await client.connect(); 16 | } catch (e) { 17 | console.error('Error connecting to MongoDB', e); 18 | } 19 | 20 | // Selecting the db to use 21 | const db = conn.db('sample_training'); 22 | 23 | export default db; -------------------------------------------------------------------------------- /react/alab320h-react/src/components/Article2.jsx: -------------------------------------------------------------------------------- 1 | function Article2() { 2 | return ( 3 |
4 |

Article 2

5 | 6 |

7 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis cumque 8 | saepe reprehenderit veritatis corrupti fugiat, ex nisi debitis nulla 9 | natus beatae enim officiis expedita, illo assumenda nam exercitationem 10 | illum impedit. 11 |

12 | 13 |
14 | ); 15 | } 16 | 17 | export default Article2; 18 | -------------------------------------------------------------------------------- /react/react-router/src/pages/ProfilePage.jsx: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom"; 2 | import { users } from "../assets/users"; 3 | 4 | 5 | export default function ProfilePage() { 6 | const { id } = useParams(); 7 | console.log('Param ID -> ', id); 8 | 9 | const userData = users.find(user => user.id == id); 10 | console.log('USER INFO => ', userData); 11 | 12 | if (!userData) return

Profile Not Found!

13 | 14 | 15 | return ( 16 |
17 |

Profile Page

18 |

{userData.name} | {userData.website}

19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /backend/express-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "express-server", 3 | "version": "1.0.0", 4 | "description": "express basic server", 5 | "type": "module", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "dev": "nodemon index.js" 10 | }, 11 | "keywords": [ 12 | "express", 13 | "server" 14 | ], 15 | "author": "Abraham Tavarez", 16 | "license": "MIT", 17 | "devDependencies": { 18 | "nodemon": "^3.1.7" 19 | }, 20 | "dependencies": { 21 | "express": "^4.21.0", 22 | "pug": "^3.0.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /JS/modules/index.js: -------------------------------------------------------------------------------- 1 | import { sayHello as sh, userName } from "./myModule.js";// multi 2 | import * as MyModule from './myModule.js'; // object multi 3 | import start from './myModule.js'; // export default <-- 4 | import getDate from "./myOtherModule.js"; 5 | 6 | const date = getDate(); 7 | console.log(date); 8 | 9 | 10 | start(); 11 | 12 | MyModule.sayHello(); 13 | 14 | 15 | function sayHello() { 16 | console.log('Hello Team!'); 17 | 18 | } 19 | 20 | console.log('FROM INDEX::: ', userName); 21 | 22 | sayHello() 23 | sh() 24 | 25 | export default function main() { 26 | console.log('main...'); 27 | } -------------------------------------------------------------------------------- /backend/express-rest-example/routes/posts.js: -------------------------------------------------------------------------------- 1 | import { Router } from "express"; 2 | import { posts } from "../data/posts.js"; 3 | 4 | const postsRouter = Router(); 5 | 6 | /** 7 | * GET 8 | */ 9 | postsRouter.get("/", (req, res) => { 10 | res.json(posts); 11 | }); 12 | 13 | /** 14 | * GET id 15 | */ 16 | postsRouter.get("/:id", (req, res, next) => { 17 | console.log(req.params); 18 | const post = posts.find((post) => post.id == req.params.id); 19 | 20 | if (post) { 21 | res.json(post); 22 | } else { 23 | next(); // calls the custom 404 middleware 24 | } 25 | }); 26 | 27 | export default postsRouter; -------------------------------------------------------------------------------- /JS/fetch/dog-api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fullstack_app/backend/models/Task.js: -------------------------------------------------------------------------------- 1 | import mongoose from 'mongoose'; 2 | 3 | 4 | export const taskSchema = new mongoose.Schema({ 5 | projectId: { 6 | type: mongoose.ObjectId, 7 | ref: 'Task', 8 | required: true 9 | }, 10 | title: { 11 | type: String, 12 | required: true 13 | }, 14 | description: { 15 | type: String, 16 | required: true 17 | }, 18 | completed: { 19 | type: Boolean, 20 | default: false 21 | } 22 | }, {timestamps: true}); 23 | 24 | 25 | const Task = new mongoose.model('Task', taskSchema); 26 | export default Task; -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/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 | -------------------------------------------------------------------------------- /typescript/ts-lab/.cache/0e/ca688895ab131675ecc6d32c4f5d54.json: -------------------------------------------------------------------------------- 1 | {"id":"index.html","dependencies":[{"name":"./src\\index.ts","dynamic":true,"resolved":"C:\\Users\\Abraham\\Desktop\\rtt-35\\typescript\\ts-lab\\src\\index.ts","parent":"C:\\Users\\Abraham\\Desktop\\rtt-35\\typescript\\ts-lab\\index.html"}],"generated":{"html":"\r\n \r\n Working with TypeScript\r\n \r\n \r\n\r\n \r\n
\r\n\r\n \r\n \r\n\r\n"},"sourceMaps":null,"error":null,"hash":"a97d4094a0712013064ba8d240433b67","cacheData":{}} -------------------------------------------------------------------------------- /react/cryptoprices/src/App.jsx: -------------------------------------------------------------------------------- 1 | // import { useState } from 'react' 2 | import { Routes, Route } from "react-router-dom"; 3 | import Main from "./pages/Main"; 4 | import Price from "./pages/Price"; 5 | import Currencies from "./pages/Currencies"; 6 | import "./App.css"; 7 | import Nav from "./components/Nav"; 8 | 9 | function App() { 10 | return ( 11 |
12 |
19 | ); 20 | } 21 | 22 | export default App; 23 | -------------------------------------------------------------------------------- /react/movies-search/components/MovieDisplay.jsx: -------------------------------------------------------------------------------- 1 | export default function MovieDisplay({ movie }){ 2 | // Function to return loaded JSX 3 | const loaded = () => { 4 | return ( 5 | <> 6 |

{movie.Title}

7 |

{movie.Genre}

8 | {movie.Title} 9 |

{movie.Year}

10 | 11 | ); 12 | }; 13 | 14 | // Function to return loading JSX 15 | const loading = () => { 16 | return

No Movie to Display

; 17 | }; 18 | 19 | // Ternary operator will determine which functions JSX we will return 20 | return movie ? loaded() : loading(); 21 | } -------------------------------------------------------------------------------- /fullstack_app/backend/models/Project.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | import { taskSchema } from "./Task.js"; 3 | 4 | const projectSchema = new mongoose.Schema( 5 | { 6 | name: { 7 | type: String, 8 | required: true, 9 | }, 10 | description: { 11 | type: String, 12 | required: true, 13 | }, 14 | startDate: { 15 | type: Date, 16 | }, 17 | endDate: { 18 | type: Date, 19 | }, 20 | tasks: [taskSchema], 21 | }, 22 | { timestamps: true }, 23 | ); 24 | 25 | // index 26 | // pre save middlewares 27 | // methods 28 | 29 | 30 | const Project = new mongoose.model('Project', projectSchema); 31 | export default Project; -------------------------------------------------------------------------------- /react/alab320h-react/src/components/Article1.jsx: -------------------------------------------------------------------------------- 1 | import article1Img from "../assets/blog-image-1.jpg"; 2 | 3 | function Article1() { 4 | return ( 5 |
6 |

Article 1

7 |
8 | 9 |
10 |

11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis cumque 12 | saepe reprehenderit veritatis corrupti fugiat, ex nisi debitis nulla 13 | natus beatae enim officiis expedita, illo assumenda nam exercitationem 14 | illum impedit. 15 |

16 | 17 |
18 | ); 19 | } 20 | 21 | export default Article1; 22 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | import store from './app/store' 6 | import { Provider } from 'react-redux' 7 | 8 | import { worker } from './api/server' 9 | 10 | // Wrap app rendering so we can wait for the mock API to initialize 11 | async function start() { 12 | // Start our mock API server 13 | await worker.start({ onUnhandledRequest: 'bypass' }) 14 | 15 | ReactDOM.render( 16 | 17 | 18 | 19 | 20 | , 21 | document.getElementById('root') 22 | ) 23 | } 24 | 25 | start() 26 | -------------------------------------------------------------------------------- /react/react-router/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { Routes, Route } from "react-router-dom"; 2 | import HomePage from "./pages/HomePage"; 3 | import AboutPage from "./pages/AboutPage"; 4 | import Navbar from "./components/Navbar"; 5 | import ProfilePage from "./pages/ProfilePage"; 6 | import "./App.css"; 7 | 8 | function App() { 9 | // reads the environment variables from .env file 10 | console.log(import.meta.env.VITE_API_KEY); 11 | 12 | return ( 13 | <> 14 | 15 | 16 | } /> 17 | } /> 18 | }/> 19 | 20 | 21 | ); 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /backend/mongoose-api/model/Post.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const postSchema = new mongoose.Schema({ 4 | title: { 5 | type: String, 6 | required: true, 7 | minLength: 5, 8 | maxLength: 50, 9 | }, 10 | body: { 11 | type: String, 12 | required: true, 13 | }, 14 | author: { 15 | type: String, 16 | required: true, 17 | }, 18 | created_at: { 19 | type: Date, 20 | default: Date.now(), 21 | }, 22 | topic: { 23 | type: String, 24 | enum: ["JavaScript", "Python", "React", "Express"], 25 | default: "Express" 26 | }, 27 | }); 28 | 29 | //TODO: create index for Post 30 | 31 | 32 | 33 | // create a new Post model 34 | const Post = mongoose.model('Post', postSchema); 35 | export default Post; -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | BrowserRouter as Router, 4 | Switch, 5 | Route, 6 | Redirect, 7 | } from 'react-router-dom' 8 | 9 | import { Navbar } from './app/Navbar' 10 | 11 | function App() { 12 | return ( 13 | 14 | 15 |
16 | 17 | ( 21 |
22 |

Welcome to the Redux Essentials example app!

23 |
24 | )} 25 | /> 26 | 27 | 28 |
29 | 30 | ) 31 | } 32 | 33 | export default App 34 | -------------------------------------------------------------------------------- /react/alab320h-2-1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alab320h-2-1", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.9.0", 18 | "@types/react": "^18.3.3", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.1", 21 | "eslint": "^9.9.0", 22 | "eslint-plugin-react": "^7.35.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.9", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /react/movies-search/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "movies-search", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.9.0", 18 | "@types/react": "^18.3.3", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.1", 21 | "eslint": "^9.9.0", 22 | "eslint-plugin-react": "^7.35.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.9", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /react/alab320h-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alab320h-react", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.9.0", 18 | "@types/react": "^18.3.3", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.1", 21 | "eslint": "^9.9.0", 22 | "eslint-plugin-react": "^7.35.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.9", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /react/react-learners-state/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-learners-state", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.9.0", 18 | "@types/react": "^18.3.3", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.1", 21 | "eslint": "^9.9.0", 22 | "eslint-plugin-react": "^7.35.0", 23 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 24 | "eslint-plugin-react-refresh": "^0.4.9", 25 | "globals": "^15.9.0", 26 | "vite": "^5.4.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /react/react-router/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /redux/redux_counter/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /fullstack_app/frontend/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /react/cryptoprices/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cryptoprices", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.26.2" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.9.0", 19 | "@types/react": "^18.3.3", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.3.1", 22 | "eslint": "^9.9.0", 23 | "eslint-plugin-react": "^7.35.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.9", 26 | "globals": "^15.9.0", 27 | "vite": "^5.4.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /react/react-router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.26.2" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.9.0", 19 | "@types/react": "^18.3.3", 20 | "@types/react-dom": "^18.3.0", 21 | "@vitejs/plugin-react": "^4.3.1", 22 | "eslint": "^9.9.0", 23 | "eslint-plugin-react": "^7.35.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.9", 26 | "globals": "^15.9.0", 27 | "vite": "^5.4.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /backend/mongoose-api/routes/posts.js: -------------------------------------------------------------------------------- 1 | import { Router } from "express"; 2 | import Post from "../model/Post.js"; 3 | 4 | const router = new Router(); 5 | 6 | router.get("/", async (req, res) => { 7 | try { 8 | const posts = await Post.find(); 9 | // console.log(posts); 10 | res.json(posts); 11 | } catch (e) { 12 | console.error(e); 13 | } 14 | }); 15 | 16 | /** 17 | * POST / 18 | * @description create a new post doc 19 | */ 20 | router.post("/", async (req, res) => { 21 | try { 22 | const { body } = req; 23 | 24 | const newPost = await Post.create(body); 25 | 26 | if (newPost) { 27 | res.json(newPost); 28 | } else { 29 | res.json({error: 'Error creating post!'}) 30 | } 31 | 32 | } catch (e) { 33 | console.error(e); 34 | } 35 | }); 36 | 37 | export default router; 38 | -------------------------------------------------------------------------------- /backend/mongoose-api/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import mongoose from "mongoose"; 3 | import postsRouter from './routes/posts.js'; 4 | 5 | import dotenv from 'dotenv'; 6 | dotenv.config(); 7 | 8 | try { 9 | await mongoose.connect(process.env.MONGODB_URI); 10 | // mongoose.connection.on('connected', () => console.log('connected')); 11 | } catch (e) { 12 | console.error(e) 13 | } 14 | 15 | const app = express(); 16 | 17 | const PORT = process.env.PORT; 18 | 19 | 20 | // middlewares 21 | app.use(express.json()); 22 | app.use(express.urlencoded({extended: true})); 23 | 24 | // routes 25 | app.use('/api/posts', postsRouter); 26 | 27 | 28 | 29 | app.get("/", (req, res) => { 30 | res.json({ msg: "Welcome to my API!" }); 31 | }); 32 | 33 | app.listen(PORT, () => console.log(`Server running on port: ${PORT}`)); 34 | -------------------------------------------------------------------------------- /redux/redux_counter/src/features/counter/counterSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from "@reduxjs/toolkit"; 2 | 3 | 4 | export const counterSlice = createSlice({ 5 | name: 'counter', 6 | initialState: { 7 | value: 0, 8 | }, 9 | reducers: { 10 | increment: (state) => { 11 | 12 | // we don't need to return the state, immer will return it 13 | state.value += 1 14 | }, 15 | decrement: (state) => { 16 | state.value -= 1 17 | }, 18 | incrementBy: (state, action) => { 19 | console.log(action.payload); 20 | 21 | state.value += parseInt(action.payload); 22 | } 23 | } 24 | }); 25 | 26 | 27 | // actions creators function 28 | export const {increment, decrement, incrementBy} = counterSlice.actions; 29 | -------------------------------------------------------------------------------- /fullstack_app/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-icons": "^5.3.0", 16 | "react-router-dom": "^6.27.0" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.11.1", 20 | "@types/react": "^18.3.10", 21 | "@types/react-dom": "^18.3.0", 22 | "@vitejs/plugin-react": "^4.3.2", 23 | "eslint": "^9.11.1", 24 | "eslint-plugin-react": "^7.37.0", 25 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 26 | "eslint-plugin-react-refresh": "^0.4.12", 27 | "globals": "^15.9.0", 28 | "vite": "^5.4.8" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /react/cryptoprices/src/pages/Currencies.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | export default function Currencies() { 4 | const currencies = [ 5 | { name: "Bitcoin", symbol: "BTC" }, 6 | { name: "Litecoin", symbol: "LTC" }, 7 | { name: "Ethereum", symbol: "ETH" }, 8 | { name: "Ethereum Classic", symbol: "ETC" }, 9 | { name: "Stellar Lumens", symbol: "XLM" }, 10 | { name: "Dash", symbol: "DASH" }, 11 | { name: "Ripple", symbol: "XRP" }, 12 | { name: "Zcash", symbol: "ZEC" }, 13 | ]; 14 | 15 | return ( 16 |
17 | {currencies.map((coin) => { 18 | const { name, symbol } = coin; 19 | 20 | return ( 21 | 22 |

{name}

23 | 24 | ); 25 | })} 26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /capstone_project/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.13.0", 18 | "@types/react": "^18.3.11", 19 | "@types/react-dom": "^18.3.1", 20 | "@vitejs/plugin-react": "^4.3.3", 21 | "autoprefixer": "^10.4.20", 22 | "eslint": "^9.13.0", 23 | "eslint-plugin-react": "^7.37.1", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.13", 26 | "globals": "^15.11.0", 27 | "postcss": "^8.4.47", 28 | "tailwindcss": "^3.4.14", 29 | "vite": "^5.4.9" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /JS/stack/Stack.js: -------------------------------------------------------------------------------- 1 | // Stack implementation in JavaScript 2 | export default class Stack { 3 | constructor() { 4 | this.items = []; 5 | } 6 | // Add a new element to the stack 7 | push(element) { 8 | this.items.push(element); 9 | } 10 | // Remove the top element from the stack 11 | pop() { 12 | if (this.isEmpty()) { 13 | return "Stack is empty"; 14 | } 15 | return this.items.pop(); 16 | } 17 | // View the top element in the stack 18 | peek() { 19 | if (this.isEmpty()) { 20 | return "Stack is empty"; 21 | } 22 | return this.items[this.items.length - 1]; 23 | } 24 | // Check if the stack is empty 25 | isEmpty() { 26 | return this.items.length === 0; 27 | } 28 | // Get the size of the stack 29 | size() { 30 | return this.items.length; 31 | } 32 | // Clear the stack 33 | clear() { 34 | this.items = []; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /backend/express-server/server.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import userRouter from "./routes/user.js"; 3 | 4 | // express app 5 | const app = express(); 6 | 7 | const PORT = 4000; 8 | 9 | app.set("view engine", "pug"); 10 | app.set("views", "./views"); 11 | 12 | // Middleware 13 | app.use(express.static('public')) 14 | app.use("/user", userRouter); 15 | 16 | // Routes 17 | app.get("/", (req, res) => { 18 | // res.send('

Hello World!

') 19 | res.render("index", { title: "Hello Pug!", message: "Created using Pug" }); 20 | }); 21 | 22 | // Catch all route 23 | app.use("*", (req, res) => { 24 | throw new Error("Route not found"); 25 | }); 26 | 27 | // Error handling middleware 28 | app.use((error, req, res, next) => { 29 | res.status(404).send(error.message); 30 | next(); 31 | }); 32 | 33 | app.listen(PORT, () => { 34 | console.log(`Server is running on port: ${PORT}`); 35 | }); 36 | -------------------------------------------------------------------------------- /redux/redux_counter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux_counter", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@reduxjs/toolkit": "^2.3.0", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-redux": "^9.1.2" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.11.1", 20 | "@redux-devtools/core": "^4.0.0", 21 | "@types/react": "^18.3.10", 22 | "@types/react-dom": "^18.3.0", 23 | "@vitejs/plugin-react": "^4.3.2", 24 | "eslint": "^9.11.1", 25 | "eslint-plugin-react": "^7.37.0", 26 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 27 | "eslint-plugin-react-refresh": "^0.4.12", 28 | "globals": "^15.9.0", 29 | "vite": "^5.4.8" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /JS/ajax-xhr/index-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /backend/express-rest-example/data/users.js: -------------------------------------------------------------------------------- 1 | // Creating the simple data structures we'll work with. 2 | // How we choose to store and organize this data is very important! 3 | // Different options and techniques for storing data and 4 | // creating relationships between different data sets will be 5 | // explored during lessons on database integrations and techniques. 6 | 7 | // The "users" data will be simple information about 8 | // the application's user base. 9 | export const users = [ 10 | { 11 | id: 1, 12 | name: "Carey", 13 | username: "cyare23", 14 | email: "cy23@example.com", 15 | }, 16 | { 17 | id: 2, 18 | name: "Mikoto", 19 | username: "Miiko", 20 | email: "mikoto_u@example.com", 21 | }, 22 | { 23 | id: 3, 24 | name: "Ronald", 25 | username: "RonRonRon", 26 | email: "mronald@example.com", 27 | }, 28 | ]; 29 | 30 | // module.exports = users; 31 | -------------------------------------------------------------------------------- /react/movies-search/src/App.jsx: -------------------------------------------------------------------------------- 1 | import {useState, useEffect} from "react"; 2 | import "./App.css"; 3 | 4 | import MovieDisplay from "./components/MovieDisplay"; 5 | import Form from "./components/Form"; 6 | 7 | export default function App() { 8 | const apiKey = "98e3fb1f"; 9 | 10 | const [movie, setMovie] = useState(null); 11 | 12 | const getMovie = async(searchTerm) => { 13 | try { 14 | const response = await fetch( 15 | `http://www.omdbapi.com/?apikey=${apiKey}&t=${searchTerm}` 16 | ); 17 | const data = await response.json(); 18 | setMovie(data); 19 | } catch(e) { 20 | console.error(e) 21 | } 22 | } 23 | 24 | // This will run on the first render but not on subsquent renders 25 | useEffect(() => { 26 | getMovie("Clueless"); 27 | }, []); 28 | 29 | return ( 30 |
31 |
32 | 33 |
34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /backend/webserver/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import morgan from 'morgan'; 3 | 4 | const app = express(); 5 | const PORT = 4000; 6 | 7 | // setup 8 | app.set('view engine', 'pug'); 9 | app.set('views', './views'); 10 | 11 | // middleware 12 | app.use(express.static('public')); 13 | app.use(morgan('dev')); // logger 14 | 15 | // routes 16 | app.get('/', (req, res) => { 17 | // res.send('Hello') 18 | 19 | // fetching blog post... 20 | 21 | res.render('home', {username: 'Abe', title: 'Acme Inc'}); 22 | }); 23 | 24 | app.get('/services', (req, res) => { 25 | // res.redirect('/pricing') 26 | res.render('services') 27 | }); 28 | 29 | app.get('/pricing', (req, res) => { 30 | res.render('pricing') 31 | }); 32 | 33 | // dynamic route/dynamic template 34 | app.get('/blog/:id', async (req, res) => { 35 | // fetching the blog by the id.... 36 | const blog = await fetch(`//https:myblogs${id}`) 37 | res.render('blog', {blog}) 38 | }); 39 | 40 | 41 | 42 | app.listen(PORT, () => console.log(`Server running on port: ${PORT}`)); 43 | -------------------------------------------------------------------------------- /redux/redux_counter/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useSelector, useDispatch } from "react-redux"; 2 | import { increment, decrement, incrementBy } from "./features/counter/counterSlice"; 3 | import { useState } from "react"; 4 | import "./App.css"; 5 | 6 | function App() { 7 | // Read data from state 8 | const count = useSelector((state) => state.counter.value); 9 | console.log(count); 10 | 11 | // dispatch actions 12 | const dispatch = useDispatch(); 13 | 14 | // local state for the input 15 | const [incrementAmount, setIncrementAmount] = useState(1); 16 | 17 | return ( 18 | <> 19 |

Redux Counter

20 | 21 | 22 | 23 | 24 |

Count: {count}

25 | 26 | setIncrementAmount(e.target.value)} 30 | /> 31 | 32 | 33 | 34 | 35 | ); 36 | } 37 | 38 | export default App; 39 | -------------------------------------------------------------------------------- /JS/promisesLab/index.js: -------------------------------------------------------------------------------- 1 | // Importing database functions. DO NOT MODIFY THIS LINE. 2 | import { central, db1, db2, db3, vault } from "./databases.js"; 3 | 4 | // TODO: Gather data from dbs and return an object with the info. 5 | 6 | async function getUserData(id) { 7 | const dbs = { 8 | db1: db1, 9 | db2: db2, 10 | db3: db3, 11 | }; 12 | 13 | //TODO: find where the user data is located in central db 14 | const dbName = await central(id); 15 | console.log(dbName); 16 | 17 | //TODO: Get basic data from db1, db2, or db3 18 | // const userBasicInfo = await dbs[dbName](id); 19 | // console.log(userBasicInfo); 20 | 21 | //TODO: get personal info from the vault 22 | // const personalInfo = await vault(id); 23 | // console.log(personalInfo); 24 | 25 | // concurrently 26 | const userData = await Promise.all([dbs[dbName](id), vault(id)]).then( 27 | ([pd, pi]) => { 28 | return { ...pd, ...pi }; 29 | }, 30 | ); 31 | console.log(userData); 32 | 33 | return { 34 | // ...userBasicInfo, 35 | // ...personalInfo 36 | }; 37 | } 38 | 39 | const user = await getUserData(6); 40 | console.log(user); 41 | -------------------------------------------------------------------------------- /react/movies-search/components/Form.jsx: -------------------------------------------------------------------------------- 1 | import {useState, useEffect} from "react"; 2 | 3 | 4 | export default function Form (props) { 5 | // State to hold the data of our form 6 | const [formData, setFormData] = useState({ 7 | searchterm: "", 8 | }); 9 | 10 | // handleChange - updates formData when we type into form 11 | const handleChange = (event) => { 12 | // Use the event object to detect key, and value to update 13 | setFormData({ ...formData, [event.target.name]: event.target.value }); 14 | }; 15 | 16 | const handleSubmit = (event) => { 17 | // Prevent page from refreshing on form submission 18 | event.preventDefault(); 19 | // Pass the search term to moviesearch prop, which is App's getMovie function 20 | props.moviesearch(formData.searchterm); 21 | }; 22 | 23 | return ( 24 |
25 | 26 | 32 | 33 | 34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /JS/ajax-xhr/index.-test-xml.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /typescript/ts-101/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | // strings 4 | var learnerName = "Bill"; 5 | var lasName = "Gates"; 6 | // number 7 | var age = 28; 8 | // booleans 9 | var authenticated = true; 10 | // arrays 11 | var favNumbers = [1, 2, 3]; 12 | var languages = ["JS", "TS", "C#", "Python"]; 13 | favNumbers.push(11); 14 | favNumbers.push(33); 15 | languages.push("R"); 16 | languages.push("C++"); 17 | var colorsArray = []; 18 | colorsArray.push({ colorName: "green" }); 19 | // objects 20 | var company = { 21 | name: "Microsoft", 22 | value: 30000000, 23 | }; 24 | var john = { 25 | name: "john", 26 | age: 20, 27 | isAdult: true, 28 | }; 29 | var mary = { 30 | name: "Mary", 31 | isAdult: true, 32 | age: 18 33 | }; 34 | var user1 = { 35 | name: "Mary", 36 | isAdult: true, 37 | }; 38 | function printInfo(value) { 39 | console.log(value.name, value.isAdult); 40 | } 41 | printInfo(user1); 42 | var dreamCar = { brand: 'Tesla', model: 'Y', price: 50000 }; 43 | var ourTuple = [11, true, 'tuple']; 44 | var otherTuple; 45 | otherTuple = [false, 44, 'hello']; 46 | console.log(otherTuple); 47 | -------------------------------------------------------------------------------- /fullstack_app/frontend/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /react/alab320h-2-1/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /react/alab320h-react/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /react/cryptoprices/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /react/movies-search/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /react/react-router/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /redux/redux_counter/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /capstone_project/frontend/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /react/react-learners-state/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /JS/user-signup/index.js: -------------------------------------------------------------------------------- 1 | class User { 2 | name = {}; 3 | 4 | constructor(firstName, lastName, email, dob, password, phoneNumber) { 5 | this.name.firstName = firstName; 6 | this.name.lastName = lastName; 7 | this.email = email; 8 | this.dob = dob; 9 | this.password = password; 10 | this.phoneNumber = phoneNumber; 11 | } 12 | } 13 | 14 | const form = document.querySelector('form'); 15 | console.log(form); 16 | 17 | 18 | form.addEventListener('submit', function(e) { 19 | e.preventDefault(); 20 | 21 | const firstName = form['firstName'].value; 22 | const lastName = form['lastName'].value; 23 | const email = form['email'].value; 24 | const dob = form['dob'].value; 25 | const password = form['password'].value; 26 | const phoneNumber = form['phoneNumber'].value; 27 | 28 | // console.log(firstName); 29 | // console.log(lastName); 30 | // console.log(email); 31 | // console.log(dob); 32 | // console.log(phoneNumber); 33 | // console.log(password); 34 | 35 | const user = new User(firstName, lastName, email, dob, password, phoneNumber); 36 | 37 | console.log(user); 38 | 39 | 40 | 41 | }); 42 | 43 | 44 | -------------------------------------------------------------------------------- /fullstack_app/backend/index.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import morgan from 'morgan'; 3 | import mongoose from 'mongoose'; 4 | import dotenv from 'dotenv'; 5 | import projectsRouter from './routes/projects.js'; 6 | import cors from 'cors'; 7 | 8 | dotenv.config(); 9 | const app = express(); 10 | const PORT = process.env.PORT || 4000; 11 | 12 | // ===== Connect to DB ===== // 13 | try { 14 | await mongoose.connect(process.env.MONGODB_URI); 15 | console.log(`Connected to mongodb`); 16 | } catch (error) { 17 | console.error(error); 18 | } 19 | 20 | // ===== Middlewares ===== // 21 | app.use(morgan('dev')); // logger 22 | app.use(express.json()); // parse data to the body 23 | app.use(express.urlencoded({extended: true})); 24 | app.use(cors()); // allows backend to talk to frontend in the same machine 25 | 26 | // ===== Routes ===== // 27 | app.use('/api/projects', projectsRouter); 28 | 29 | app.get('/', (req, res) => { 30 | res.send('Welcome to my API!') 31 | }); 32 | 33 | // ===== Error Middlewares ===== // 34 | app.use((e, req, res, next) => { 35 | console.error(e); 36 | res.status(500).json({message: e.message, error: e }); 37 | }); 38 | 39 | 40 | app.listen(PORT, () => console.log(`Server running on port: ${PORT}`)) -------------------------------------------------------------------------------- /JS/ajax-xhr/index.js: -------------------------------------------------------------------------------- 1 | // 2 | const url1 = "https://thetestrequest.com/articles.xml"; 3 | const url2 = "https://jsonplaceholder.typicode.com/users"; 4 | 5 | const request = new XMLHttpRequest(); 6 | 7 | // ==================== Getting data from server ==== 8 | request.open("GET", url1, true); 9 | 10 | request.send(); 11 | 12 | // ======================== Sending data to server === 13 | request.open("POST", "https://jsonplaceholder.typicode.com/todos"); 14 | 15 | // tells the server what kind of data we're sending 16 | request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 17 | 18 | // reads the value from the input 19 | let inputVal = document.getElementById("myInput").value; 20 | 21 | // encoding the input text to a URI format 22 | let encodedVal = encodeURIComponent(inputVal); 23 | console.log(encodedVal); 24 | 25 | request.send(`data=${encodedVal}`); 26 | 27 | // Check thr response we get from the server 28 | request.onreadystatechange = function () { 29 | if (request.readyState === XMLHttpRequest.DONE) { 30 | if (request.status === 200 || request.status === 201) { 31 | console.log(request.responseXML); 32 | console.log(JSON.parse(request.responseText)); 33 | 34 | 35 | const user = {name: 'Jeff Bezos'} 36 | console.log(JSON.stringify(user)); 37 | 38 | } 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /JS/user-signup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |

Store

12 | 13 | 14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 | 40 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/src/api/client.js: -------------------------------------------------------------------------------- 1 | // A tiny wrapper around fetch(), borrowed from 2 | // https://kentcdodds.com/blog/replace-axios-with-a-simple-custom-fetch-wrapper 3 | 4 | export async function client(endpoint, { body, ...customConfig } = {}) { 5 | const headers = { 'Content-Type': 'application/json' } 6 | 7 | const config = { 8 | method: body ? 'POST' : 'GET', 9 | ...customConfig, 10 | headers: { 11 | ...headers, 12 | ...customConfig.headers, 13 | }, 14 | } 15 | 16 | if (body) { 17 | config.body = JSON.stringify(body) 18 | } 19 | 20 | let data 21 | try { 22 | const response = await window.fetch(endpoint, config) 23 | data = await response.json() 24 | if (response.ok) { 25 | // Return a result object similar to Axios 26 | return { 27 | status: response.status, 28 | data, 29 | headers: response.headers, 30 | url: response.url, 31 | } 32 | } 33 | throw new Error(response.statusText) 34 | } catch (err) { 35 | return Promise.reject(err.message ? err.message : data) 36 | } 37 | } 38 | 39 | client.get = function (endpoint, customConfig = {}) { 40 | return client(endpoint, { ...customConfig, method: 'GET' }) 41 | } 42 | 43 | client.post = function (endpoint, body, customConfig = {}) { 44 | return client(endpoint, { ...customConfig, body }) 45 | } 46 | -------------------------------------------------------------------------------- /fullstack_app/frontend/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { Routes, Route } from "react-router-dom"; 3 | import ProjectsPage from "./pages/ProjectsPage"; 4 | import NavBar from "./components/Navbar"; 5 | import HomePage from "./pages/HomePage"; 6 | import ProjectDetails from "./pages/ProjectDetails"; 7 | import "./App.css"; 8 | 9 | function App() { 10 | const [projects, setProjects] = useState([]); 11 | 12 | // fetch all project when component first render 13 | useEffect(() => { 14 | // fetch all projects 15 | const fetchProjects = async () => { 16 | const res = await fetch("http://localhost:4000/api/projects/"); 17 | const projectsData = await res.json(); 18 | console.log(projectsData); 19 | setProjects(projectsData.projects); 20 | }; 21 | 22 | fetchProjects(); 23 | }, []); 24 | 25 | return ( 26 | <> 27 | 28 | 29 | 30 | } /> 31 | 32 | 36 | } 37 | /> 38 | 39 | }/> 40 | 41 | 42 | ); 43 | } 44 | 45 | export default App; 46 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-essentials-example", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "@mswjs/data": "^0.8.4", 7 | "@reduxjs/toolkit": "^1.6.1", 8 | "@testing-library/jest-dom": "^5.16.1", 9 | "@testing-library/react": "^12.1.2", 10 | "@testing-library/user-event": "^13.5.0", 11 | "classnames": "^2.2.6", 12 | "date-fns": "^2.12.0", 13 | "faker": "^4.1.0", 14 | "miragejs": "^0.1.35", 15 | "mock-socket": "^9.0.3", 16 | "msw": "^0.36.3", 17 | "react": "^17", 18 | "react-dom": "^17", 19 | "react-redux": "^7.2.4", 20 | "react-router-dom": "^5.1.2", 21 | "react-scripts": "^4", 22 | "seedrandom": "^3.0.5", 23 | "txtgen": "^2.2.4" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts --openssl-legacy-provider start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": "react-app" 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | }, 46 | "devDependencies": { 47 | "prettier": "^2.0.2" 48 | }, 49 | "msw": { 50 | "workerDirectory": "public" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /react/alab320h-2-1/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/alab320h-react/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/cryptoprices/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/movies-search/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/react-router/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /redux/redux_counter/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /capstone_project/frontend/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fullstack_app/frontend/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/react-router/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /redux/redux_counter/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /react/react-learners-state/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/react-learners-state/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | /* place-items: center; */ 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /fullstack_app/frontend/src/components/CreateTaskForm.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | import { useState } from "react"; 3 | 4 | export default function CreateTaskForm({ projectId, setProject }) { 5 | const [formData, setFormData] = useState({ 6 | title: "", 7 | description: "", 8 | }); 9 | 10 | const handleChange = (e) => { 11 | setFormData({ 12 | ...formData, 13 | [e.target.name]: e.target.value, 14 | }); 15 | }; 16 | 17 | const handleSubmit = async (e) => { 18 | try { 19 | e.preventDefault(); 20 | const res = await fetch( 21 | `http://localhost:4000/api/projects/${projectId}/tasks`, 22 | { 23 | method: "POST", 24 | headers: { 25 | "Content-Type": "application/json", 26 | }, 27 | body: JSON.stringify({ projectId, ...formData }), 28 | }, 29 | ); 30 | 31 | const data = await res.json(); 32 | console.log(data); 33 | setProject(data.project); 34 | } catch (error) { 35 | console.error(error); 36 | } 37 | }; 38 | 39 | return ( 40 |
41 | 47 | 53 | 54 |
55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /JS/data-fetching-lab/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | body { 7 | background-color: lightgray; 8 | } 9 | 10 | .progress-bar-top { 11 | position: fixed; 12 | top: 0; 13 | left: 0; 14 | width: 0%; 15 | height: 15px; 16 | background-color: green; 17 | border-bottom: 1px solid black; 18 | } 19 | 20 | .favourite-button { 21 | position: absolute; 22 | top: 10px; 23 | right: 15px; 24 | z-index: 99999; 25 | width: 30px; 26 | height: 30px; 27 | color: lightpink; 28 | cursor: pointer; 29 | transition: all ease 0.2s; 30 | } 31 | .favourite-button:hover { 32 | color: red; 33 | width: 36px; 34 | height: 36px; 35 | top: 7px; 36 | right: 12px; 37 | } 38 | 39 | .carousel-inner { 40 | padding: 1em; 41 | } 42 | .card { 43 | margin: 0 0.5em; 44 | box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18); 45 | border: none; 46 | } 47 | .carousel-control-prev, 48 | .carousel-control-next { 49 | background-color: #e1e1e1; 50 | width: 6vh; 51 | height: 6vh; 52 | border-radius: 50%; 53 | top: 50%; 54 | transform: translateY(-50%); 55 | } 56 | @media (min-width: 768px) { 57 | .carousel-item { 58 | margin-right: 0; 59 | flex: 0 0 33.333333%; 60 | display: block; 61 | } 62 | .carousel-inner { 63 | display: flex; 64 | } 65 | } 66 | .card .img-wrapper { 67 | max-width: 100%; 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | } 72 | .card img { 73 | max-height: 100%; 74 | } 75 | @media (max-width: 767px) { 76 | .card .img-wrapper { 77 | height: 17em; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /react/cryptoprices/src/pages/Price.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { useParams } from "react-router-dom"; 3 | 4 | export default function Price() { 5 | // Our api key from coinapi.io. 6 | const apiKey = import.meta.env.VITE_COIN_API_KEY; 7 | // Grabbing the currency symbol from the URL Params. 8 | const params = useParams(); 9 | const symbol = params.symbol; 10 | // Using the other two variables to create our URL. 11 | const url = `https://rest.coinapi.io/v1/exchangerate/${symbol}/USD?apikey=${apiKey}`; 12 | 13 | // State to hold the coin data. 14 | const [coin, setCoin] = useState("null"); 15 | 16 | // Function to fetch coin data. 17 | const getCoin = async () => { 18 | try { 19 | const response = await fetch(url); 20 | const data = await response.json(); 21 | setCoin(data); 22 | } catch (e) { 23 | console.error(e); 24 | } 25 | }; 26 | 27 | // useEffect to run getCoin when component mounts. 28 | useEffect(() => { 29 | getCoin(); 30 | }, []); 31 | 32 | // loaded function for when data is fetched. 33 | const loaded = () => { 34 | return ( 35 |
36 |

37 | {coin.asset_id_base}/{coin.asset_id_quote} 38 |

39 |

{coin.rate}

40 |
41 | ); 42 | }; 43 | 44 | // Function for when data doesn't exist. 45 | const loading = () => { 46 | return

Loading...

; 47 | }; 48 | 49 | // If coin has data, run the loaded function; otherwise, run loading. 50 | return coin && coin.rate ? loaded() : loading(); 51 | } 52 | -------------------------------------------------------------------------------- /JS/promises/index.js: -------------------------------------------------------------------------------- 1 | const error = false; 2 | 3 | // create a new promise 4 | const myPromise = new Promise((resolve, reject) => { 5 | if (!error) { 6 | setTimeout(() => { 7 | // doing some data fetching.... 8 | resolve("We got some data!!"); 9 | }, 1000); 10 | } else { 11 | reject("Error fetching data"); 12 | // throw new Error("Error fetching data"); 13 | } 14 | }); 15 | 16 | // myPromise 17 | // .then((data) => console.log(data)) 18 | // .catch((error) => console.error(error)) 19 | // .finally(() => console.log("Done!")); 20 | 21 | // Create a Promise that resolves after one second. 22 | const myPromise1 = new Promise((resolve, reject) => { 23 | setTimeout(() => { 24 | resolve("Guess this worked!"); 25 | }, 1000); 26 | }); 27 | 28 | // Add some then() methods to handle additional tasks. 29 | myPromise1 30 | .then((x) => x + " Again?") // fetch user info 31 | .then((x) => x + " Third time!") // fetch user fav movies 32 | .then((x) => x + " Promises are cool.") // games 33 | .then((x) => console.log(x)) // display data on user screen 34 | .catch((err) => { 35 | console.error(err); 36 | }); 37 | 38 | const promise1 = Promise.resolve(3); 39 | const promise2 = 42; 40 | const promise3 = new Promise((resolve, reject) => { 41 | // setTimeout(resolve, 100, "foo"); 42 | reject('ERROR!!!!') 43 | }); 44 | 45 | const promise4 = () => { 46 | throw new Error("Error"); 47 | }; 48 | 49 | Promise.all([promise1, promise2, promise3, promise4]) 50 | .then((values) => { 51 | console.log(values); 52 | }) 53 | .catch((e) => console.log(e)); 54 | -------------------------------------------------------------------------------- /fullstack_app/frontend/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | form { 17 | display: flex; 18 | flex-direction: column; 19 | } 20 | 21 | form input { 22 | margin-top: 2em; 23 | } 24 | 25 | a { 26 | font-weight: 500; 27 | color: #646cff; 28 | text-decoration: inherit; 29 | } 30 | a:hover { 31 | color: #535bf2; 32 | } 33 | 34 | body { 35 | margin: 0; 36 | display: flex; 37 | /* place-items: center; */ 38 | min-width: 320px; 39 | min-height: 100vh; 40 | } 41 | 42 | h1 { 43 | font-size: 3.2em; 44 | line-height: 1.1; 45 | } 46 | 47 | button { 48 | border-radius: 8px; 49 | border: 1px solid transparent; 50 | padding: 0.6em 1.2em; 51 | font-size: 1em; 52 | font-weight: 500; 53 | font-family: inherit; 54 | background-color: #1a1a1a; 55 | cursor: pointer; 56 | transition: border-color 0.25s; 57 | } 58 | button:hover { 59 | border-color: #646cff; 60 | } 61 | button:focus, 62 | button:focus-visible { 63 | outline: 4px auto -webkit-focus-ring-color; 64 | } 65 | 66 | @media (prefers-color-scheme: light) { 67 | :root { 68 | color: #213547; 69 | background-color: #ffffff; 70 | } 71 | a:hover { 72 | color: #747bff; 73 | } 74 | button { 75 | background-color: #f9f9f9; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /typescript/ts-101/index.ts: -------------------------------------------------------------------------------- 1 | import { Learner, Car, User, ElectricCar } from "./types"; 2 | // strings 3 | const learnerName: string = "Bill"; 4 | 5 | const lasName: string = "Gates"; 6 | 7 | // number 8 | let age: number = 28; 9 | 10 | // booleans 11 | let authenticated: boolean = true; 12 | 13 | // arrays 14 | const favNumbers: number[] = [1, 2, 3]; 15 | const languages: string[] = ["JS", "TS", "C#", "Python"]; 16 | 17 | favNumbers.push(11); 18 | favNumbers.push(33); 19 | 20 | languages.push("R"); 21 | languages.push("C++"); 22 | 23 | const colorsArray: Array<{ colorName: string }> = []; 24 | 25 | colorsArray.push({ colorName: "green" }); 26 | 27 | // objects 28 | const company: { name: string; value: number } = { 29 | name: "Microsoft", 30 | value: 30000000, 31 | }; 32 | 33 | const john: Learner = { 34 | name: "john", 35 | age: 20, 36 | isAdult: true, 37 | }; 38 | 39 | const mary: Learner = { 40 | name: "Mary", 41 | isAdult: true, 42 | age: 18 43 | }; 44 | 45 | const user1 = { 46 | name: "Mary", 47 | isAdult: true, 48 | }; 49 | 50 | function printInfo(value: Learner) { 51 | console.log(value.name, value.isAdult ); 52 | } 53 | 54 | printInfo(user1); 55 | 56 | 57 | const dreamCar: Car = {brand: 'Tesla', model: 'Y', price: 50000} 58 | 59 | 60 | 61 | const ourTuple: [number, boolean, string] = [11, true, 'tuple']; 62 | 63 | let otherTuple: readonly [boolean, number, string]; 64 | 65 | otherTuple = [false, 44, 'hello'] 66 | console.log(otherTuple) 67 | 68 | // Tuples 69 | function compute(): [number, number] { 70 | let x = 1 71 | let y = 3 72 | return [x, y] 73 | } 74 | 75 | const [x, y] = compute(); 76 | 77 | console.log(x); 78 | console.log(y); 79 | 80 | 81 | // Types 82 | 83 | type Course = { 84 | name: string, 85 | date: Date, 86 | } 87 | 88 | type someType = string; 89 | 90 | 91 | const tsCourse: Course = { 92 | name: 'TS100', 93 | date: new Date() 94 | } 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 18 | 19 | 28 | React Redux App 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /JS/classes/grades-refactored.js: -------------------------------------------------------------------------------- 1 | class Learner { 2 | #grades; 3 | #name = { 4 | first: "", 5 | last: "" 6 | }; 7 | #age; 8 | 9 | constructor(firstName, lastName, age) { 10 | this.#name.first = firstName; 11 | this.#name.last = lastName; 12 | this.#age = age; 13 | 14 | this.#grades = new Grades(); 15 | } 16 | get name() { 17 | return this.#name.first + " " + this.#name.last; 18 | } 19 | get age() { 20 | return this.#age; 21 | } 22 | addGrades(...grades) { 23 | this.#grades.addGrades(grades); 24 | } 25 | get grades() { 26 | return this.#grades.grades; 27 | } 28 | get average() { 29 | return this.#grades.average; 30 | } 31 | } 32 | 33 | class Grades { 34 | #grades = []; 35 | 36 | constructor(initialGrades) { 37 | if (initialGrades) { 38 | this.addGrades(initialGrades); 39 | } 40 | } 41 | static getAverage(...grades) { 42 | const arr = []; 43 | this.addToArray(arr, grades); 44 | return this.avgArray(arr); 45 | } 46 | static addToArray(arr, grades) { 47 | grades = grades.flat(); 48 | grades.forEach((grade) => { 49 | grade = Number(grade); 50 | 51 | if (grade >= 0 && grade <= 100) { 52 | arr.push(grade); 53 | } 54 | }); 55 | } 56 | static avgArray(gradeArray) { 57 | const arr = [...gradeArray]; 58 | arr.sort((a, b) => a - b).shift(); 59 | 60 | return arr.reduce((a, b) => a + b) / arr.length; 61 | } 62 | addGrades(...grades) { 63 | Grades.addToArray(this.#grades, grades.flat()); 64 | } 65 | get grades() { 66 | return this.#grades; 67 | } 68 | get average() { 69 | return Grades.avgArray(this.#grades); 70 | } 71 | } 72 | 73 | 74 | const learner1 = new Learner('Bill', 'Gates', 55); 75 | const gradeInstance = new Grades(); 76 | 77 | gradeInstance.addGrades(66, 77,88,99); 78 | console.log(gradeInstance); 79 | 80 | console.log(learner1); 81 | console.log(learner1.addGrades(66,78,56)); 82 | console.log(learner1.grades); 83 | 84 | 85 | -------------------------------------------------------------------------------- /backend/express-rest-example/routes/users.js: -------------------------------------------------------------------------------- 1 | import { Router } from "express"; 2 | import { users } from "../data/users.js"; 3 | import { error } from "../utils/error.js"; 4 | 5 | const usersRouter = Router(); 6 | 7 | /** 8 | * GET 9 | */ 10 | usersRouter.get("/", (req, res, next) => { 11 | console.log(req.query); 12 | console.log("APIKEY::: ", req.key); 13 | 14 | // next(error(402, 'Something went wrong!')) 15 | 16 | res.json(users); 17 | }); 18 | 19 | /** 20 | * GET by id 21 | */ 22 | usersRouter.get("/:id", (req, res, next) => { 23 | console.log(req.params); 24 | const user = users.find((user) => user.id == req.params.id); 25 | if (user) { 26 | res.json(user); 27 | } else { 28 | next(error(404, "Resource not found!")); // calls the custom 404 middleware 29 | } 30 | }); 31 | 32 | /** 33 | * POST 34 | */ 35 | usersRouter.post("/", (req, res) => { 36 | console.log(req.body); 37 | 38 | if (req.body.name && req.body.username && req.body.email) { 39 | if (users.find((u) => u.username == req.body.username)) { 40 | res.json({ error: "Username Already Taken" }); 41 | return; 42 | } 43 | 44 | const user = { 45 | id: users[users.length - 1].id + 1, 46 | name: req.body.name, 47 | username: req.body.username, 48 | email: req.body.email, 49 | }; 50 | 51 | users.push(user); 52 | res.json(users[users.length - 1]); 53 | } 54 | }); 55 | 56 | /** 57 | * PATCH OR UPDATE by id 58 | */ 59 | usersRouter.patch("/:id", (req, res, next) => { 60 | console.log(req.params); 61 | 62 | const user = users.find((u, i) => { 63 | if (u.id == req.params.id) { 64 | for (const key in req.body) { 65 | users[i][key] = req.body[key]; 66 | } 67 | return true; 68 | } 69 | }); 70 | 71 | if (user) res.json(user); 72 | else next(); 73 | }); 74 | 75 | /** 76 | * DELETE by id 77 | */ 78 | usersRouter.delete("/:id", (req, res, next) => { 79 | console.log(req.params); 80 | 81 | const user = users.find((u, i) => { 82 | if (u.id == req.params.id) { 83 | users.splice(i, 1); 84 | return true; 85 | } 86 | }); 87 | 88 | if (user) res.json(user); 89 | else next(); 90 | }); 91 | 92 | export default usersRouter; 93 | -------------------------------------------------------------------------------- /backend/express-rest-example/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import postsRouter from "./routes/posts.js"; 3 | import usersRouter from "./routes/users.js"; // export default 4 | import { error } from "./utils/error.js"; // named export 5 | 6 | const app = express(); 7 | const PORT = 4000; 8 | 9 | // Valid API Keys. 10 | const apiKeys = ["perscholas", "ps-example", "hJAsknw-L198sAJD-l3kasx"]; 11 | 12 | // Middlewares 13 | app.use(express.urlencoded({ extended: true })); 14 | app.use(express.json({ extended: true })); 15 | 16 | // New logging middleware to help us keep track of 17 | // requests during testing! 18 | app.use((req, res, next) => { 19 | const time = new Date(); 20 | 21 | console.log( 22 | `----- 23 | ${time.toLocaleTimeString()}: Received a ${req.method} request to ${ 24 | req.url 25 | }.`, 26 | ); 27 | if (Object.keys(req.body).length > 0) { 28 | console.log("Containing the data:"); 29 | console.log(`${JSON.stringify(req.body)}`); 30 | } 31 | next(); 32 | }); 33 | 34 | // API KEY middleware 35 | app.use("/api", function (req, res, next) { 36 | var key = req.query["api-key"]; 37 | 38 | // Check for the absence of a key. 39 | if (!key) { 40 | // res.status(400); 41 | // return res.json({ error: "API Key Required" }); 42 | next(error(400, "API Key Required, Query: api-key is required")); 43 | } 44 | 45 | // Check for key validity. 46 | if (apiKeys.indexOf(key) === -1) { 47 | // res.status(401); 48 | // return res.json({ error: "Invalid API Key" }); 49 | next(error(401, "Invalid API Key")); 50 | } 51 | 52 | // Valid key! Store it in req.key for route access. 53 | req.key = key; 54 | next(); 55 | }); 56 | 57 | // ======= API Routes 58 | app.use("/api/posts", postsRouter); 59 | app.use("/api/users", usersRouter); 60 | 61 | // ======== Routes 62 | app.get("/", (req, res) => { 63 | res.send("ok"); 64 | }); 65 | 66 | // ======= Error middlewares ======= 67 | 68 | // Custom 404 (not found) middleware. 69 | // app.use((req, res, next) => { 70 | // // res.status(404).json({ error: "Resource Not Found" }); 71 | // next(error(404, "Resource Not Found")); 72 | // }); 73 | 74 | // Error middleware 75 | app.use((error, req, res, next) => { 76 | res.status(error.status || 500).json({ error: error.message }); 77 | }); 78 | 79 | app.listen(PORT, () => console.log(`Server running on port: ${PORT}`)); 80 | -------------------------------------------------------------------------------- /react/fashion-blog/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |

HEADER

13 | 14 | 15 | 23 |
24 | 25 | 26 |
27 | 28 | 29 |
30 |

Article 1

31 |
32 | 33 |
34 |

35 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis cumque 36 | saepe reprehenderit veritatis corrupti fugiat, ex nisi debitis nulla 37 | natus beatae enim officiis expedita, illo assumenda nam exercitationem 38 | illum impedit. 39 |

40 | 41 |
42 | 43 | 44 |
45 |

Article 2

46 | 47 |

48 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis cumque 49 | saepe reprehenderit veritatis corrupti fugiat, ex nisi debitis nulla 50 | natus beatae enim officiis expedita, illo assumenda nam exercitationem 51 | illum impedit. 52 |

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

FOOTER

60 | 61 | 62 | 63 | 69 | 70 | 71 |
72 | © Company 73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /redux/redux-essentials-example-app/README.md: -------------------------------------------------------------------------------- 1 | # Redux Essentials Tutorial Example 2 | 3 | This project contains the setup and code from the "Redux Essentials" tutorial in the Redux docs ( https://redux.js.org/tutorials/essentials/part-1-overview-concepts ). 4 | 5 | The `master` branch has a single commit that already has the initial project configuration in place. You can use this to follow along with the instructions from the tutorial. 6 | 7 | The `tutorial-steps` branch has the actual code commits from the tutorial. You can look at these to see how the official tutorial actually implements each piece of functionality along the way. 8 | 9 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) template. 10 | 11 | > **Note**: If you are using Node 17, this project may not start correctly due to a known issue with Webpack and Node's OpenSSL changes, which causes an error message containing `ERR_OSSL_EVP_UNSUPPORTED`. 12 | > You can work around this by setting a `NODE_OPTIONS=--openssl-legacy-provider` environment variable before starting the dev server. 13 | > Details: https://github.com/webpack/webpack/issues/14532#issuecomment-947012063 14 | 15 | ## Available Scripts 16 | 17 | In the project directory, you can run: 18 | 19 | ### `yarn start` 20 | 21 | Runs the app in the development mode.
22 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 23 | 24 | The page will reload if you make edits.
25 | You will also see any lint errors in the console. 26 | 27 | ### `yarn test` 28 | 29 | Launches the test runner in the interactive watch mode.
30 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 31 | 32 | ### `yarn build` 33 | 34 | Builds the app for production to the `build` folder.
35 | It correctly bundles React in production mode and optimizes the build for the best performance. 36 | 37 | The build is minified and the filenames include the hashes.
38 | Your app is ready to be deployed! 39 | 40 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 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 | -------------------------------------------------------------------------------- /react/alab320h-react/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Header from "./components/Header"; 3 | import Footer from "./components/Footer"; 4 | import ArticleItem from "./components/ArticleItem"; 5 | import image1 from "./assets/blog-image-1.jpg"; 6 | 7 | const articles = [ 8 | { 9 | id: 1, 10 | title: "The Future of AI in Web Development", 11 | author: "Jane Doe", 12 | publishedDate: "2024-09-01", 13 | content: "An overview of how AI is transforming web development...", 14 | tags: ["AI", "Web Development", "Technology"], 15 | }, 16 | { 17 | id: 2, 18 | title: "Mastering CSS Grid Layout", 19 | author: "John Smith", 20 | publishedDate: "2024-08-15", 21 | content: 22 | "A guide to understanding and using CSS Grid for responsive design...", 23 | tags: ["CSS", "Frontend", "Design"], 24 | }, 25 | { 26 | id: 3, 27 | title: "Introduction to TypeScript for Beginners", 28 | author: "Alice Johnson", 29 | publishedDate: "2024-07-28", 30 | content: "Learn the basics of TypeScript and how it enhances JavaScript...", 31 | tags: ["TypeScript", "JavaScript", "Programming"], 32 | }, 33 | { 34 | id: 4, 35 | title: "Building Scalable Apps with Node.js", 36 | author: "Michael Lee", 37 | publishedDate: "2024-06-30", 38 | content: 39 | "Explore techniques to build scalable applications using Node.js...", 40 | tags: ["Node.js", "Backend", "Scalability"], 41 | }, 42 | { 43 | id: 5, 44 | title: "SEO Best Practices for 2024", 45 | author: "Emily Davis", 46 | publishedDate: "2024-08-05", 47 | content: "Improve your website's visibility with these SEO strategies...", 48 | tags: ["SEO", "Marketing", "Optimization"], 49 | }, 50 | ]; 51 | 52 | function App() { 53 | return ( 54 |
55 |
56 | 63 | 64 | 70 | 71 | 77 | 78 |
79 |
80 | ); 81 | } 82 | 83 | export default App; 84 | -------------------------------------------------------------------------------- /JS/data-fetching-lab/Carousel.js: -------------------------------------------------------------------------------- 1 | // import * as bootstrap from "bootstrap"; 2 | import { favourite } from "./index.js"; 3 | 4 | export function createCarouselItem(imgSrc, imgAlt, imgId) { 5 | const template = document.querySelector("#carouselItemTemplate"); 6 | const clone = template.content.firstElementChild.cloneNode(true); 7 | 8 | const img = clone.querySelector("img"); 9 | img.src = imgSrc; 10 | img.alt = imgAlt; 11 | 12 | const favBtn = clone.querySelector(".favourite-button"); 13 | favBtn.addEventListener("click", () => { 14 | favourite(imgId); 15 | }); 16 | 17 | return clone; 18 | } 19 | 20 | export function clear() { 21 | const carousel = document.querySelector("#carouselInner"); 22 | while (carousel.firstChild) { 23 | carousel.removeChild(carousel.firstChild); 24 | } 25 | } 26 | 27 | export function appendCarousel(element) { 28 | const carousel = document.querySelector("#carouselInner"); 29 | 30 | const activeItem = document.querySelector(".carousel-item.active"); 31 | if (!activeItem) element.classList.add("active"); 32 | 33 | carousel.appendChild(element); 34 | } 35 | 36 | export function start() { 37 | const multipleCardCarousel = document.querySelector( 38 | "#carouselExampleControls" 39 | ); 40 | if (window.matchMedia("(min-width: 768px)").matches) { 41 | const carousel = new bootstrap.Carousel(multipleCardCarousel, { 42 | interval: false 43 | }); 44 | const carouselWidth = $(".carousel-inner")[0].scrollWidth; 45 | const cardWidth = $(".carousel-item").width(); 46 | let scrollPosition = 0; 47 | $("#carouselExampleControls .carousel-control-next").unbind(); 48 | $("#carouselExampleControls .carousel-control-next").on( 49 | "click", 50 | function () { 51 | if (scrollPosition < carouselWidth - cardWidth * 4) { 52 | scrollPosition += cardWidth; 53 | $("#carouselExampleControls .carousel-inner").animate( 54 | { scrollLeft: scrollPosition }, 55 | 600 56 | ); 57 | } 58 | } 59 | ); 60 | $("#carouselExampleControls .carousel-control-prev").unbind(); 61 | $("#carouselExampleControls .carousel-control-prev").on( 62 | "click", 63 | function () { 64 | if (scrollPosition > 0) { 65 | scrollPosition -= cardWidth; 66 | $("#carouselExampleControls .carousel-inner").animate( 67 | { scrollLeft: scrollPosition }, 68 | 600 69 | ); 70 | } 71 | } 72 | ); 73 | } else { 74 | $(multipleCardCarousel).addClass("slide"); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /backend/express-server/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | 3 | // express app 4 | const app = express(); 5 | 6 | const PORT = 4000; 7 | 8 | // Middleware 9 | function logger(req, res, next) { 10 | console.log(`Received a request: ${req.method}, ${req.url}, ${req.hostname}`); 11 | next(); 12 | } 13 | 14 | app.use(logger); 15 | 16 | // =========== Routes =============================== 17 | app.get("/", (req, res) => { 18 | console.log(req.method, req.url, req.hostname); 19 | res.send("hello"); 20 | }); 21 | 22 | app.get("/express", (req, res) => { 23 | res.send("

Hello from Express

"); 24 | }); 25 | 26 | app.get("/user", (req, res) => { 27 | throw new Error("No user data found"); 28 | res.send("Sending user info...."); 29 | }); 30 | 31 | /** 32 | * @method GET 33 | * @route /user/:userId/profile/:profileId 34 | * @description Gets user by id and profile id 35 | */ 36 | app.get("/user/:userId/profile/:profileId", (req, res) => { 37 | console.log(req.params); 38 | 39 | res.send(req.params); 40 | }); 41 | 42 | // Chaining methods 43 | app 44 | .route("/leaner") 45 | .get((req, res) => { 46 | res.send("Sending learner data..."); 47 | }) 48 | .post((req, res) => { 49 | res.send("saving learner data..."); 50 | }); 51 | 52 | app.get("/user/:username", (req, res) => { 53 | console.log(req.params); 54 | 55 | res.send(req.params); 56 | }); 57 | 58 | app.post("/user", (req, res) => { 59 | console.log(req.method, req.url, req.hostname); 60 | res.send("Post User Data!!"); 61 | }); 62 | 63 | app.put("/user", (req, res) => { 64 | console.log(req.method, req.url, req.hostname); 65 | res.send("Edit User Data!!"); 66 | }); 67 | 68 | app.delete("/user", (req, res) => { 69 | console.log(req.method, req.url, req.hostname); 70 | res.send("Delete User Data!!"); 71 | }); 72 | 73 | app.get("/ab?c", (req, res) => { 74 | console.log(req.method, req.url, req.hostname); 75 | res.send("Delete User Data!!"); 76 | }); 77 | 78 | app.get(/.*fly$/, (req, res) => { 79 | res.send("Ends with fly"); 80 | }); 81 | 82 | app.get(/a/, (req, res) => { 83 | res.send(" Matching anything with a"); 84 | }); 85 | 86 | // Catch all route 87 | app.use("*", (req, res) => { 88 | throw new Error("Route not found"); 89 | }); 90 | 91 | // Error handling middleware 92 | app.use((error, req, res, next) => { 93 | res.status(404).send(error.message); 94 | next(); 95 | }); 96 | 97 | app.listen(PORT, () => { 98 | console.log(`Server is running on port: ${PORT}`); 99 | }); 100 | -------------------------------------------------------------------------------- /fullstack_app/frontend/src/pages/ProjectsPage.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | import { Link } from "react-router-dom"; 4 | 5 | export default function ProjectsPage({ projects, setProjects }) { 6 | const [formData, setFormData] = useState({ 7 | name: "", 8 | description: "", 9 | }); 10 | 11 | const handleChange = (e) => { 12 | setFormData({ 13 | ...formData, 14 | [e.target.name]: e.target.value, 15 | }); 16 | }; 17 | 18 | const handleSubmit = async (e) => { 19 | try { 20 | e.preventDefault(); 21 | // make POST request to create new project 22 | const res = await fetch("http://localhost:4000/api/projects/", { 23 | headers: { 24 | "Content-Type": "application/json", 25 | }, 26 | method: "POST", 27 | body: JSON.stringify(formData), 28 | }); 29 | 30 | // parse data to json 31 | const data = await res.json(); 32 | 33 | // { 34 | // project: { 35 | 36 | // } 37 | // } 38 | console.log(data.project); 39 | 40 | // adding the new created project to the projects array 41 | setProjects([data.project, ...projects]); 42 | } catch (error) { 43 | console.error(error); 44 | } 45 | }; 46 | 47 | return ( 48 | <> 49 |

Projects Page

50 | 51 |
52 |
53 | 62 | 63 | 72 | 73 | 74 |
75 |
76 | 77 |
78 | {projects && 79 | projects.map((project) => ( 80 | 81 |

{project.name}

82 |

{project.description}

83 | 84 | ))} 85 |
86 | 87 | ); 88 | } 89 | 90 | // https://www.npmjs.com/package/prop-types 91 | ProjectsPage.propTypes = { 92 | projects: PropTypes.array, 93 | setProjects: PropTypes.func, 94 | }; 95 | -------------------------------------------------------------------------------- /JS/classes/learner.js: -------------------------------------------------------------------------------- 1 | class Learner { 2 | // Private Properties 3 | #grades = []; 4 | 5 | #name = { 6 | first: "", 7 | last: "", 8 | }; 9 | 10 | #age; 11 | 12 | constructor(firstName, lastName, age) { 13 | this.#name.first = firstName; 14 | this.#name.last = lastName; 15 | this.#age = age; 16 | } 17 | 18 | // Returns the full-name 19 | get name() { 20 | return `${this.#name.first} ${this.#name.last}`; 21 | } 22 | 23 | get age() { 24 | return this.#age; 25 | } 26 | 27 | get grades() { 28 | return this.#grades; 29 | } 30 | 31 | get average() { 32 | const arr = [...this.#grades]; // makes a copy of the #grades 33 | arr.sort((a, b) => a - b).shift(); // sort lower to higher and will remove the first element in the sorted array 34 | 35 | // add all grades, divides them by the length of the array 36 | return arr.reduce((a, b) => a + b) / arr.length; 37 | } 38 | 39 | set grades(grade) { 40 | grade = Number(grade); 41 | 42 | if (grade >= 0 && grade <= 100) { 43 | this.#grades.push(grade); 44 | } 45 | } 46 | 47 | addGrades(...grades) { 48 | // fatten the array 49 | grades = grades.flat(); 50 | 51 | // loop over and access each grade 52 | grades.forEach((grade) => { 53 | // if (typeof grade === 'string') { 54 | // throw new Error("Grade need to be a number"); 55 | 56 | // } 57 | 58 | // convert the grade to a number 59 | grade = Number(grade); 60 | 61 | // checks that we stay in the 0 to 100 ranger 62 | if (grade >= 0 && grade <= 100) { 63 | this.#grades.push(grade); // push grade to the #grades 64 | } 65 | }); 66 | } 67 | } 68 | 69 | const max = new Learner("Max", "Pain", 30); 70 | 71 | // max.age = 'Four'; 72 | 73 | console.log(max.name); 74 | console.log(max.age); 75 | 76 | // calling the grades setter 77 | max.grades = 80; 78 | max.grades = 100; 79 | max.grades = 70; 80 | 81 | // getting the array of grades 82 | console.table(max.grades); 83 | 84 | max.addGrades(["50", "40", 30, -60], [66, 33, 88, -100], [77, 84, 98]); 85 | 86 | console.log(max.average.toFixed(0)); 87 | 88 | console.log(max instanceof Learner); 89 | console.log(max instanceof Object); 90 | console.log(max); 91 | 92 | // ======================================== 93 | // Grades 94 | 95 | class Grades { 96 | static getAverage(...grades) { 97 | const arr = []; 98 | 99 | grades = grades.flat(); 100 | grades.forEach((grade) => { 101 | grade = Number(grade); 102 | 103 | if (grade >= 0 && grade <= 100) { 104 | arr.push(grade); 105 | } 106 | }); 107 | 108 | arr.sort((a, b) => a - b).shift(); 109 | 110 | return arr.reduce((a, b) => a + b) / arr.length; 111 | } 112 | } 113 | 114 | console.log(Grades.getAverage(99, 67, 55, [77, 89, 45])); 115 | -------------------------------------------------------------------------------- /backend/mongodb-api/routes/grades.js: -------------------------------------------------------------------------------- 1 | import { Router } from "express"; 2 | import db from "../db/conn.js"; 3 | import { ObjectId } from "mongodb"; 4 | 5 | const router = new Router(); 6 | 7 | router.get("/", async (req, res) => { 8 | try { 9 | // select the collection to use 10 | const gradesCollection = await db.collection("grades"); 11 | // query the collection 12 | const grades = await gradesCollection.find().limit(10).toArray(); 13 | // sending back the json data 14 | res.json({ grades }); 15 | } catch (e) { 16 | console.log(e); 17 | } 18 | }); 19 | 20 | /** 21 | * GET /id 22 | * @description Return a grade document by id 23 | */ 24 | router.get("/:id", async (req, res) => { 25 | const { id } = req.params; 26 | // select the collection to use 27 | const gradesCollection = await db.collection("grades"); 28 | 29 | // query the collection 30 | const grade = await gradesCollection.findOne({ 31 | _id: ObjectId.createFromHexString(id), 32 | }); 33 | 34 | // if grade not found 35 | if (!grade) { 36 | res.status(404).json({ error: `Grade with id: ${id} Not Found` }); 37 | } else { 38 | // sending back the json data 39 | res.json({ grade }); 40 | } 41 | }); 42 | 43 | /** 44 | * GET /student/:id 45 | */ 46 | router.get("/student/:id", async (req, res) => { 47 | const { id } = req.params; 48 | 49 | // select the collection to use 50 | const gradesCollection = await db.collection("grades"); 51 | 52 | // Keep student_id for the query 53 | // const studentGrades = await gradesCollection.find({student_id: Number(studentId)}).toArray(); 54 | 55 | const studentGrades = await gradesCollection 56 | .find({ 57 | learner_id: Number(id), 58 | }) 59 | .toArray(); 60 | 61 | res.json({ studentGrades }); 62 | }); 63 | 64 | /** 65 | * GET /class/:id 66 | */ 67 | router.get("/class/:id", async (req, res) => { 68 | const { id } = req.params; 69 | 70 | // select the collection to use 71 | const gradesCollection = await db.collection("grades"); 72 | 73 | const gradesByClassId = await gradesCollection 74 | .find({ 75 | class_id: Number(id), 76 | }) 77 | .toArray(); 78 | 79 | if (!gradesByClassId) { 80 | res.status(404).json({ error: `Class id ${id} Not Found` }); 81 | } else { 82 | res.json({ grades: gradesByClassId }); 83 | } 84 | }); 85 | 86 | // Create a single grade entry 87 | router.post("/", async (req, res) => { 88 | let collection = await db.collection("grades"); 89 | let newDocument = req.body; 90 | 91 | // rename fields for backwards compatibility 92 | if (newDocument.student_id) { 93 | newDocument.learner_id = newDocument.student_id; 94 | delete newDocument.student_id; 95 | } 96 | 97 | let result = await collection.insertOne(newDocument); 98 | res.send(result).status(204); 99 | }); 100 | 101 | export default router; 102 | -------------------------------------------------------------------------------- /backend/express-rest-example/data/posts.js: -------------------------------------------------------------------------------- 1 | // Creating the simple data structures we'll work with. 2 | // How we choose to store and organize this data is very important! 3 | // Different options and techniques for storing data and 4 | // creating relationships between different data sets will be 5 | // explored during lessons on database integrations and techniques. 6 | 7 | // The "posts" data will include information about 8 | // social media posts that the users make. 9 | export const posts = [ 10 | { 11 | id: 1, 12 | userId: 1, 13 | title: "est et quae odit qui non", 14 | content: 15 | "similique esse doloribus nihil accusamus\nomnis dolorem fuga consequuntur reprehenderit fugit recusandae temporibus\nperspiciatis cum ut laudantium\nomnis aut molestiae vel vero", 16 | }, 17 | { 18 | id: 2, 19 | userId: 1, 20 | title: "quasi id et eos tenetur aut quo autem", 21 | content: 22 | "eum sed dolores ipsam sint possimus debitis occaecati\ndebitis qui qui et\nut placeat enim earum aut odit facilis\nconsequatur suscipit necessitatibus rerum sed inventore temporibus consequatur", 23 | }, 24 | { 25 | id: 3, 26 | userId: 1, 27 | title: "delectus ullam et corporis nulla voluptas sequi", 28 | content: 29 | "non et quaerat ex quae ad maiores\nmaiores recusandae totam aut blanditiis mollitia quas illo\nut voluptatibus voluptatem\nsimilique nostrum eum", 30 | }, 31 | { 32 | id: 4, 33 | userId: 2, 34 | title: "iusto eius quod necessitatibus culpa ea", 35 | content: 36 | "odit magnam ut saepe sed non qui\ntempora atque nihil\naccusamus illum doloribus illo dolor\neligendi repudiandae odit magni similique sed cum maiores", 37 | }, 38 | { 39 | id: 5, 40 | userId: 2, 41 | title: "a quo magni similique perferendis", 42 | content: 43 | "alias dolor cumque\nimpedit blanditiis non eveniet odio maxime\nblanditiis amet eius quis tempora quia autem rem\na provident perspiciatis quia", 44 | }, 45 | { 46 | id: 6, 47 | userId: 2, 48 | title: "ullam ut quidem id aut vel consequuntur", 49 | content: 50 | "debitis eius sed quibusdam non quis consectetur vitae\nimpedit ut qui consequatur sed aut in\nquidem sit nostrum et maiores adipisci atque\nquaerat voluptatem adipisci repudiandae", 51 | }, 52 | { 53 | id: 7, 54 | userId: 3, 55 | title: "doloremque illum aliquid sunt", 56 | content: 57 | "deserunt eos nobis asperiores et hic\nest debitis repellat molestiae optio\nnihil ratione ut eos beatae quibusdam distinctio maiores\nearum voluptates et aut adipisci ea maiores voluptas maxime", 58 | }, 59 | { 60 | id: 8, 61 | userId: 3, 62 | title: "qui explicabo molestiae dolorem", 63 | content: 64 | "rerum ut et numquam laborum odit est sit\nid qui sint in\nquasi tenetur tempore aperiam et quaerat qui in\nrerum officiis sequi cumque quod", 65 | }, 66 | { 67 | id: 9, 68 | userId: 3, 69 | title: "magnam ut rerum iure", 70 | content: 71 | "ea velit perferendis earum ut voluptatem voluptate itaque iusto\ntotam pariatur in\nnemo voluptatem voluptatem autem magni tempora minima in\nest distinctio qui assumenda accusamus dignissimos officia nesciunt nobis", 72 | }, 73 | ]; 74 | 75 | // module.exports = posts; 76 | -------------------------------------------------------------------------------- /JS/promisesLab/databases.js: -------------------------------------------------------------------------------- 1 | const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 2 | 3 | /** 4 | * Accepts a user id value and returns a string containing 5 | * the database that user's information can be found in. 6 | * @param {Number} id The user id. 7 | * @return {String} The name of the database to look up the user. 8 | */ 9 | export async function central(id) { 10 | if (typeof id !== "number") throw new Error("Invalid Input -- Not a Number"); 11 | if (id < 1 || id > 10) throw new Error("Invalid Input -- Out of Range"); 12 | 13 | await wait(100); // Faking an "external" call here by adding a delay. 14 | let db = "db1"; 15 | if (id > 4) db = "db2"; 16 | if (id > 7) db = "db3"; 17 | 18 | return db; 19 | } 20 | 21 | /** 22 | * Accepts a user id value and returns an object containing 23 | * username, website, and company data. 24 | * @param {Number} id The user id. 25 | * @return {Object} The user's username, website, and company data. 26 | */ 27 | export async function db1(id) { 28 | if (typeof id !== "number") throw new Error("Invalid Input -- Not a Number"); 29 | if (id < 1 || id > 4) throw new Error("Invalid Input -- Out of Range"); 30 | 31 | const data = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`); 32 | const json = await data.json(); 33 | 34 | return { 35 | username: json.username, 36 | website: json.website, 37 | company: json.company 38 | }; 39 | } 40 | /** 41 | * Accepts a user id value and returns an object containing 42 | * username, website, and company data. 43 | * @param {Number} id The user id. 44 | * @return {Object} The user's username, website, and company data. 45 | */ 46 | export async function db2(id) { 47 | if (typeof id !== "number") throw new Error("Invalid Input -- Not a Number"); 48 | if (id < 5 || id > 7) throw new Error("Invalid Input -- Out of Range"); 49 | 50 | const data = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`); 51 | const json = await data.json(); 52 | 53 | return { 54 | username: json.username, 55 | website: json.website, 56 | company: json.company 57 | }; 58 | } 59 | /** 60 | * Accepts a user id value and returns an object containing 61 | * username, website, and company data. 62 | * @param {Number} id The user id. 63 | * @return {Object} The user's username, website, and company data. 64 | */ 65 | export async function db3(id) { 66 | if (typeof id !== "number") throw new Error("Invalid Input -- Not a Number"); 67 | if (id < 8 || id > 10) throw new Error("Invalid Input -- Out of Range"); 68 | 69 | const data = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`); 70 | const json = await data.json(); 71 | 72 | return { 73 | username: json.username, 74 | website: json.website, 75 | company: json.company 76 | }; 77 | } 78 | 79 | /** 80 | * Accepts a user id value and returns an object containing 81 | * name, email, address, and phone data. 82 | * @param {Number} id The user id. 83 | * @return {Object} The user's name, email, address, and phone data. 84 | */ 85 | export async function vault(id) { 86 | if (typeof id !== "number") throw new Error("Invalid Input -- Not a Number"); 87 | if (id < 1 || id > 10) throw new Error("Invalid Input -- Out of Range"); 88 | 89 | const data = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`); 90 | const json = await data.json(); 91 | 92 | return { 93 | name: json.name, 94 | email: json.email, 95 | address: json.address, 96 | phone: json.phone 97 | }; 98 | } 99 | -------------------------------------------------------------------------------- /typescript/ts-lab/src/index.ts: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | class Vehicle { 4 | public status: "stopped" | "started" = "stopped"; 5 | public make; 6 | public model; 7 | public wheels; 8 | 9 | constructor(make: string, model: string, wheels: number) { 10 | this.make = make; 11 | this.model = model; 12 | this.wheels = wheels; 13 | } 14 | start() { 15 | this.status = "started"; 16 | } 17 | stop() { 18 | this.status = "stopped"; 19 | } 20 | } 21 | 22 | class Car extends Vehicle { 23 | constructor(make: string, model: string) { 24 | super(make, model, 4); 25 | } 26 | } 27 | 28 | class MotorCycle extends Vehicle { 29 | constructor(make: string, model: string) { 30 | super(make, model, 2); 31 | } 32 | } 33 | 34 | function printStatus(vehicle: Vehicle) { 35 | if (vehicle.status === "started") { 36 | console.log("The vehicle is running."); 37 | } else { 38 | console.log("The vehicle is stopped."); 39 | } 40 | } 41 | 42 | const myHarley = new MotorCycle("Harley-Davidson", "Low Rider S"); 43 | myHarley.start(); 44 | printStatus(myHarley); 45 | console.log(myHarley.make.toUpperCase()); 46 | 47 | const myBuick = new Car("Buick", "Regal"); 48 | myBuick.wheels = myBuick.wheels - 1; 49 | console.log(myBuick.wheels); 50 | console.log(myBuick.model); 51 | 52 | // --- NCycle Class 53 | 54 | class NCycle { 55 | public status: "stopped" | "started" = "stopped"; 56 | public make; 57 | public model; 58 | public wheels; 59 | 60 | constructor(make: T | T[], model: T | T[], wheels: number) { 61 | this.make = make; 62 | this.model = model; 63 | this.wheels = wheels; 64 | } 65 | start() { 66 | this.status = "started"; 67 | } 68 | stop() { 69 | this.status = "stopped"; 70 | } 71 | 72 | print(index: number = 0): void { 73 | // if this.make and this.model are both arrays 74 | if (Array.isArray(this.make) && Array.isArray(this.model)) { 75 | // if parameter index exist in this,ake and this.model 76 | if (this.make[index] && this.model[index]) { 77 | console.log(`This NCycle has a ${this.make[index]} ${this.model[index]} at ${index}`); 78 | } 79 | } else { 80 | console.log(`This is a ${this.make} ${this.model} NCycle`); 81 | // if (typeof this.make === 'string' && typeof this.model === 'string') { 82 | // console.log(`This is a ${this.make} ${this.model} NCycle`); 83 | // } else { 84 | // console.log(`This is a ${this.make} ${this.model} are not strings!`); 85 | // } 86 | } 87 | } 88 | 89 | printAll(): void { 90 | if (Array.isArray(this.make) && Array.isArray(this.model)) { 91 | // if parameter index exist in this,ake and this.model 92 | 93 | for (let i = 0; i < Math.min(this.make.length, this.model.length); i ++){ 94 | console.log(`This NCycle has a ${this.make[i]} ${this.model[i]}`); 95 | } 96 | } 97 | } 98 | 99 | } 100 | 101 | 102 | // const testCycle1 = new NCycle(1, 2, 3); 103 | // testCycle1.print(); 104 | 105 | // const testCycle2 = new NCycle("Ford", "F150", 4); 106 | // testCycle2.print(); 107 | 108 | // const testCycle3 = new NCycle("Tesla", "Mode Y", 4); 109 | // testCycle3.print(4); 110 | 111 | const makes4 = ["Volkswagon", "Tesla", "Audi"]; 112 | const models4 = ["Passat", "Model X", "A4"]; 113 | 114 | const testCycle4 = new NCycle(makes4, models4, 4); 115 | 116 | testCycle4.print(2); 117 | testCycle4.printAll(); 118 | -------------------------------------------------------------------------------- /JS/classes/index.js: -------------------------------------------------------------------------------- 1 | const person = { 2 | name: { 3 | first: "Elyan", 4 | last: "Kemble", 5 | }, 6 | age: 32, 7 | location: { 8 | city: "Garland", 9 | state: "Texas", 10 | zip: 75040, 11 | }, 12 | occupation: "Front-End Developer", 13 | introduce() { 14 | console.log( 15 | `Hello, my name is ${this.name.first} ${this.name.last}, and I'm a ${this.age}-year-old ${this.occupation} from ${this.location.city}, ${this.location.state}!`, 16 | ); 17 | }, 18 | }; 19 | 20 | // Class definition 21 | class Animal { 22 | static cute = true; 23 | static PI = 3.1999999; 24 | 25 | constructor(eyes, legs, isAwake, isMoving) { 26 | this.eyes = eyes; 27 | this.legs = legs; 28 | this.isAwake = isAwake; 29 | this.isMoving = isMoving; 30 | } 31 | 32 | sleep() { 33 | this.isAwake = false; 34 | } 35 | 36 | wake() { 37 | this.isAwake = true; 38 | } 39 | 40 | sit() { 41 | this.isMoving = false; 42 | } 43 | 44 | walk() { 45 | this.isMoving = true; 46 | } 47 | 48 | static speak(sound) { 49 | console.log(sound); 50 | } 51 | 52 | toString(animal = "Animal") { 53 | return `This ${animal} has ${this.eyes} eyes and ${this.legs} legs. It ${ 54 | this.isAwake ? "is" : "is not" 55 | } awake, and ${this.isMoving ? "is" : "is not"} moving.`; 56 | } 57 | } 58 | // console.log(Animal); 59 | 60 | Animal.speak("zzzzz..."); 61 | console.log(Animal.cute); 62 | console.log(Animal.PI); 63 | 64 | const cat1 = new Animal(2, 4, true, false); 65 | const cat2 = new Animal(2, 4, false, false); 66 | const cat3 = new Animal(2, 4, true, true); 67 | 68 | cat1.eyes = "red"; 69 | console.log("CAT 1 ===", cat1); 70 | 71 | console.log(cat2); 72 | console.log(cat3); 73 | 74 | // Array of cats 75 | const catBox = []; 76 | 77 | // array static method 78 | console.log(Array.isArray(catBox)); 79 | 80 | // for (let i = 0; i <= 100; i++) { 81 | // const cat = new Animal(2, 4, true, false); 82 | // catBox.push(cat); 83 | // } 84 | 85 | for (let i = 0; i <= 10; i++) { 86 | const cat = new Animal(2, 4, true, true); 87 | catBox.push(cat); 88 | } 89 | 90 | console.table(catBox); 91 | 92 | // static method 93 | console.log(Math.random()); 94 | 95 | // instance method 96 | cat1.sleep(); 97 | console.log(cat1); 98 | 99 | cat2.wake(); 100 | cat2.walk(); 101 | console.log(cat2); 102 | // cat3.speak("meoww"); 103 | 104 | console.log(cat1.toString()); 105 | console.log(false.toString()); 106 | console.log(cat2.toString()); 107 | 108 | // Cat child class 109 | class Cat extends Animal { 110 | constructor(fur, isAwake, isMoving) { 111 | super(2, 4, isAwake, isMoving); // calls the Animal constructor function 112 | this.fur = fur; 113 | } 114 | 115 | static speak() { 116 | super.speak("Meow..."); 117 | } 118 | 119 | toString() { 120 | return super.toString("Cat"); 121 | } 122 | } 123 | 124 | // Animal.speak("zzzzzz"); 125 | 126 | // Cat.speak(); 127 | 128 | const testCat = new Cat("yellow", true, true); 129 | console.log(testCat); 130 | // testCat.speak(); 131 | console.log(testCat.toString()); 132 | 133 | const smallCat = new Cat("black", false, false); 134 | console.log(smallCat); 135 | console.log(smallCat instanceof Cat); // true 136 | console.log(smallCat instanceof Animal); //true 137 | 138 | const tom = new Animal(2, 4, true, true); 139 | console.log(tom); 140 | console.log(tom instanceof Animal); // true 141 | console.log(tom instanceof Cat); // false 142 | 143 | 144 | -------------------------------------------------------------------------------- /fullstack_app/backend/routes/projects.js: -------------------------------------------------------------------------------- 1 | import { Router } from "express"; 2 | import Project from "../models/Project.js"; 3 | import Task from "../models/Task.js"; 4 | 5 | const router = new Router(); 6 | 7 | /** 8 | * GET /api/projects/ 9 | * @description fetches all projects 10 | */ 11 | router.get("/", async (req, res, next) => { 12 | try { 13 | const projects = await Project.find(); 14 | 15 | if (projects) { 16 | res.json({ projects }); 17 | } else { 18 | res.json({ message: "No projects found" }); 19 | } 20 | } catch (error) { 21 | next(error); 22 | } 23 | }); 24 | 25 | /** 26 | * GET /api/projects/:id 27 | * @description fetches single project by the id 28 | */ 29 | router.get("/:id", async (req, res, next) => { 30 | try { 31 | const project = await Project.findById(req.params.id); 32 | 33 | if (project) { 34 | res.json({ project }); 35 | } else { 36 | res.json({ message: `No project found with id: ${req.params.id}` }); 37 | } 38 | } catch (error) { 39 | next(error); 40 | } 41 | }); 42 | 43 | /** 44 | * POST /api/projects/ 45 | * @description create a new project document 46 | */ 47 | router.post("/", async (req, res, next) => { 48 | try { 49 | console.log(req.body); 50 | 51 | const newProject = await Project.create(req.body); 52 | 53 | if (newProject) { 54 | res.status(201).json({ project: newProject }); 55 | } else { 56 | res.status(400).json({ message: "Error creating new project" }); 57 | } 58 | } catch (error) { 59 | next(error); 60 | } 61 | }); 62 | 63 | /** 64 | * DELETE /api/projects/:id 65 | */ 66 | router.delete("/:id", async (req, res, next) => { 67 | try { 68 | const deletedProject = await Project.findByIdAndDelete(req.params.id); 69 | 70 | if (deletedProject) { 71 | res.json({ 72 | message: `Project deleted: ${req.params.id}`, 73 | deletedProject, 74 | }); 75 | } else { 76 | res.json({ message: `Error deleting project: ${req.params.id}` }); 77 | } 78 | } catch (error) { 79 | next(error); 80 | } 81 | }); 82 | 83 | /** 84 | * PUT /api/projects/:id 85 | * @description Update a document by the id 86 | */ 87 | router.put("/:id", async (req, res, next) => { 88 | try { 89 | const { id } = req.params; 90 | const { body } = req; 91 | const updatedProject = await Project.findByIdAndUpdate(id, body, { 92 | new: true, 93 | }); 94 | if (updatedProject) { 95 | res.json({ updatedProject }); 96 | } else { 97 | res.json({ message: `Error updating project: ${req.params.id}` }); 98 | } 99 | } catch (error) { 100 | next(error); 101 | } 102 | }); 103 | 104 | /** 105 | * POST /api/projects/:id/tasks 106 | * @description create a new task for a specific project 107 | */ 108 | router.post("/:id/tasks", async (req, res, next) => { 109 | try { 110 | // find the project to add a new task 111 | const project = await Project.findById(req.params.id); 112 | console.log(project); 113 | 114 | if (!project) { 115 | res.status(404).json({ message: `Project not found: ${req.params.id}` }); 116 | return; 117 | } 118 | 119 | // create a new task 120 | const task = await Task.create(req.body); 121 | 122 | if (task) { 123 | // add the task to the tasks array of the project 124 | project.tasks.push(task); 125 | 126 | // save the project 127 | await project.save(); 128 | 129 | res.status(201).json({ project }); 130 | } else { 131 | res.status(400).json({ message: "Error creating task" }); 132 | } 133 | } catch (error) { 134 | next(error); 135 | } 136 | }); 137 | 138 | export default router; 139 | -------------------------------------------------------------------------------- /react/alab320h-2-1/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/alab320h-react/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/cryptoprices/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/movies-search/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /react/react-router/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /redux/redux_counter/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------