From 21cefdd7d7c87f73b5eb656f49bd1ee0fff2ddbf Mon Sep 17 00:00:00 2001 From: kerensh1 Date: Wed, 9 Jul 2025 16:05:11 +0300 Subject: [PATCH] restore old commit --- _sidebar.md | 29 ++ admin/README.md | 3 + admin/readme/README.md | 3 + ajax---object-oriented-programming/README.md | 15 + .../ajax---intro-to-apis/README.md | 3 + .../ajax---intro-to-apis/_sidebar.md | 12 + .../css--tools-for-modern-design/README.md | 18 ++ .../README.md | 52 +++ .../es6-array-methods/README.md | 3 + .../handlebars/README.md | 3 + .../intro-to-json/README.md | 3 + .../local-storage/README.md | 3 + .../README.md | 10 + .../README.md | 3 + .../oop-inheritance/README.md | 9 + .../oop-inheritance/_sidebar.md | 16 + .../README.md | 3 + .../promises/README.md | 107 +++++++ .../promises/_sidebar.md | 17 + .../random-user-page-api-project/README.md | 27 ++ .../random-user-page-api-project/_sidebar.md | 7 + algorithms---data-structures/README.md | 15 + .../algorithms---level-1/README.md | 111 +++++++ .../algorithms---level-2/README.md | 10 + .../algorithms---level-3/README.md | 11 + .../README.md | 15 + .../big-o---time-complexity--js-/README.md | 3 + .../data-structures/README.md | 93 ++++++ .../full-stack-interview-questions/README.md | 11 + .../fullstack-15/README.md | 23 ++ .../gold-rush--matrix-mini-project/README.md | 53 ++++ .../matrices/README.md | 3 + .../recursion/README.md | 3 + .../stacks---queues/README.md | 7 + .../stacks---queues/_sidebar.md | 10 + .../trees-and-binary-search-trees/README.md | 22 ++ archive/README.md | 3 + archive/github-code-review-setup/README.md | 49 +++ asynchronous-codes/README.md | 6 + asynchronous-codes/async-await/README.md | 3 + .../async-js--callback---event-loop/README.md | 83 +++++ .../_sidebar.md | 10 + .../render--app-deployment-service-/README.md | 7 + .../_sidebar.md | 4 + .../weather-app-full-stack-project/README.md | 69 ++++ .../_sidebar.md | 9 + career-development/README.md | 7 + career-development/_sidebar.md | 6 + career-development/cv-workshop/README.md | 7 + career-development/cv-workshop/_sidebar.md | 4 + .../how-to-pass-an-interview/README.md | 7 + .../how-to-pass-an-interview/_sidebar.md | 3 + career-development/linkedin/README.md | 7 + career-development/linkedin/_sidebar.md | 4 + .../self-intro---submission-link/README.md | 13 + .../self-intro---submission-link/_sidebar.md | 4 + career-development/story-telling/README.md | 7 + career-development/story-telling/_sidebar.md | 3 + challenges/README.md | 5 + challenges/iterator-challenge/README.md | 33 ++ challenges/iterator-solution/README.md | 70 ++++ challenges/splice-challenge/README.md | 130 ++++++++ css-extra/README.md | 5 + .../css-3--variables---animations/README.md | 3 + css-extra/css-less/README.md | 47 +++ css-extra/materialize-css/README.md | 3 + design/README.md | 6 + design/behavioral-patterns/README.md | 7 + design/creational-patterns/README.md | 10 + design/solid-principles/README.md | 44 +++ design/structural-patterns/README.md | 90 ++++++ design/structural-patterns/_sidebar.md | 10 + environment-setup/README.md | 10 + environment-setup/git/README.md | 37 +++ environment-setup/github-setup/README.md | 19 ++ environment-setup/mongodb/README.md | 73 +++++ environment-setup/mongodb/_sidebar.md | 5 + environment-setup/node/README.md | 7 + environment-setup/postman/README.md | 5 + environment-setup/slack/README.md | 24 ++ environment-setup/slack/_sidebar.md | 4 + environment-setup/visual-code/README.md | 7 + environment-setup/zoom/README.md | 4 + extended-content/README.md | 14 + extended-content/calc-in-css/README.md | 18 ++ extended-content/chrome-extensions/README.md | 4 + .../README.md | 17 + extended-content/docker/README.md | 3 + extended-content/elastic-search/README.md | 17 + extended-content/flexbox/README.md | 13 + extended-content/http-status-code/README.md | 3 + extended-content/redis/README.md | 3 + extended-content/regex/README.md | 17 + extended-content/rest-api/README.md | 9 + extended-content/rest-api/_sidebar.md | 4 + extended-content/rgba/README.md | 7 + extended-content/sessions/README.md | 3 + git-collab/README.md | 5 + git-collab/git-branches/README.md | 3 + git-collab/git-collaboration/README.md | 3 + .../setting-up-your-github-projects/README.md | 7 + intro/README.md | 5 + intro/course-syllabus/README.md | 4 + intro/course-syllabus/_sidebar.md | 3 + intro/file-setup-basics/README.md | 7 + intro/zoom-onboarding/README.md | 23 ++ mid-exam/README.md | 4 + mid-exam/_sidebar.md | 3 + mid-exam/mid-exam--retake-/README.md | 10 + mid-exam/mid-exam--retake-/_sidebar.md | 9 + mongodb/README.md | 9 + mongodb/installing-local-mongo-db/README.md | 39 +++ mongodb/installing-local-mongo-db/_sidebar.md | 5 + mongodb/intro-to-databases/README.md | 11 + mongodb/mongo-db-intro/README.md | 3 + .../mongoose---querying-practice/README.md | 7 + mongodb/mongoose-expenses-project/README.md | 14 + mongodb/mongoose-intro/README.md | 59 ++++ mongodb/mongoose-intro/_sidebar.md | 17 + mongodb/mongoose-population/README.md | 3 + python/README.md | 3 + python/decorators/README.md | 38 +++ r-ds/README.md | 5 + r-ds/r-d-sim-1--todo-list/README.md | 10 + r-ds/r-d-sim-2--python/README.md | 13 + r-ds/typescript-r-d/README.md | 3 + react-advanced/README.md | 5 + .../deploying-react-to-heroku/README.md | 11 + react-advanced/react-bank/README.md | 44 +++ react-advanced/react-bank/_sidebar.md | 9 + .../README.md | 100 ++++++ .../_sidebar.md | 12 + react-basics/README.md | 15 + .../README.md | 15 + react-basics/hangman---part-i/README.md | 30 ++ react-basics/hangman---part-i/_sidebar.md | 5 + .../pomodoro-project--optional-/README.md | 34 ++ react-basics/react-components/README.md | 47 +++ react-basics/react-components/_sidebar.md | 12 + react-basics/react-data-flow/README.md | 8 + react-basics/react-data-flow/_sidebar.md | 10 + react-basics/react-input/README.md | 22 ++ react-basics/react-input/_sidebar.md | 7 + react-basics/react-intro/README.md | 7 + react-basics/react-intro/_sidebar.md | 16 + react-basics/react-props/README.md | 3 + react-basics/react-props/_sidebar.md | 16 + react-basics/react-router/README.md | 5 + react-basics/react-router/_sidebar.md | 10 + react-basics/react-state/README.md | 83 +++++ react-basics/react-state/_sidebar.md | 18 ++ react-basics/reflix-project/README.md | 9 + react-basics/reflix-project/_sidebar.md | 7 + react-basics/webpack-ec/README.md | 11 + resources/README.md | 12 + resources/clean-code/README.md | 3 + resources/how-to-search-in-google/README.md | 8 + resources/how-to-search-in-google/_sidebar.md | 3 + script.py | 89 ++++++ servers/README.md | 13 + .../README.md | 56 ++++ .../_sidebar.md | 16 + .../README.md | 3 + servers/guided-debugging-exercise/README.md | 57 ++++ servers/guided-debugging-exercise/_sidebar.md | 4 + servers/intro-to-servers/README.md | 101 ++++++ servers/intro-to-servers/_sidebar.md | 7 + servers/my-recipes/README.md | 5 + servers/my-recipes/_sidebar.md | 4 + servers/node/README.md | 3 + servers/npm---node-package-manager/README.md | 70 ++++ .../npm---node-package-manager/_sidebar.md | 9 + servers/postman/README.md | 89 ++++++ servers/postman/_sidebar.md | 7 + servers/server-error-handling/README.md | 4 + servers/server-error-handling/_sidebar.md | 13 + servers/status-codes-practice/README.md | 3 + servers/status-codes-practice/_sidebar.md | 4 + solutions/README.md | 52 +++ .../README.md | 188 +++++++++++ .../algorithms--js----solutions/README.md | 177 +++++++++++ .../README.md | 111 +++++++ .../README.md | 89 ++++++ .../closures---modules---solutions/README.md | 131 ++++++++ .../README.md | 257 +++++++++++++++ solutions/css-basics---solutions/README.md | 39 +++ solutions/css-grid---solutions/README.md | 197 ++++++++++++ solutions/data-flow---solutions/README.md | 75 +++++ .../data-structures---solutions/README.md | 71 +++++ solutions/dom-intro---solutions/README.md | 299 ++++++++++++++++++ .../README.md | 30 ++ .../es6-array-methods---solutions/README.md | 51 +++ .../README.md | 85 +++++ .../README.md | 146 +++++++++ solutions/functions---solutions/README.md | 80 +++++ solutions/html-basics---solutions/README.md | 39 +++ solutions/intro-to-json---solutions/README.md | 99 ++++++ .../javascript-basics---solutions/README.md | 14 + .../javascript-basics---solutions/_sidebar.md | 7 + solutions/jquery---solutions/README.md | 119 +++++++ solutions/js-this---solutions/README.md | 203 ++++++++++++ solutions/local-storage---solutions/README.md | 93 ++++++ solutions/matrices---solutions/README.md | 195 ++++++++++++ solutions/mobx-1---solutions/README.md | 153 +++++++++ solutions/mobx-2---solutions/README.md | 137 ++++++++ .../mongo-db-intro---solutions/README.md | 43 +++ .../mongoose-intro---solutions/README.md | 40 +++ .../mongoose-population---solutions/README.md | 152 +++++++++ solutions/node---solutions/README.md | 69 ++++ .../README.md | 37 +++ .../README.md | 67 ++++ .../oop-inheritance---solutions/README.md | 114 +++++++ solutions/promises---solutions/README.md | 28 ++ .../react-components---solutions/README.md | 72 +++++ .../README.md | 186 +++++++++++ solutions/react-hooks---solutions/README.md | 102 ++++++ solutions/react-input---solutions/README.md | 80 +++++ solutions/react-intro---solutions/README.md | 67 ++++ .../README.md | 77 +++++ solutions/react-routes---solutions/README.md | 253 +++++++++++++++ solutions/recursion---solutions/README.md | 99 ++++++ solutions/scope---solutions/README.md | 148 +++++++++ solutions/scraping-r-d---solutions/README.md | 28 ++ .../README.md | 112 +++++++ .../sql-intro--js----solutions/README.md | 65 ++++ solutions/sql-join---solutions/README.md | 96 ++++++ .../stacks---queues---solutions/README.md | 140 ++++++++ .../README.md | 94 ++++++ .../typescript-r-d---solutions/README.md | 72 +++++ solutions/webpack-r-d---solutions/README.md | 3 + sql-basics/README.md | 6 + sql-basics/mysql-setup/README.md | 15 + sql-basics/sql-in-node--sequelize/README.md | 67 ++++ sql-basics/sql-intro--js-/README.md | 3 + sql-basics/sql-join/README.md | 3 + state-management/README.md | 6 + state-management/agora-project/README.md | 10 + state-management/agora-project/_sidebar.md | 6 + state-management/mobx-1/README.md | 41 +++ state-management/mobx-2/README.md | 17 + state-management/scraping/README.md | 3 + typescript/README.md | 11 + typescript/chrome-extensions/README.md | 4 + typescript/dom-and-casting/README.md | 9 + typescript/generics/README.md | 10 + .../random-user-page-api-project/README.md | 16 + .../README.md | 12 + typescript/strict-mode/README.md | 7 + typescript/types/README.md | 9 + typescript/union-types/README.md | 8 + typescript/what-is-typescript-/README.md | 40 +++ unit-testings/README.md | 3 + unit-testings/unit-tests-with-jest/README.md | 25 ++ web-development-basics-advanced/README.md | 13 + .../callbacks---arrow-functions/README.md | 44 +++ .../callbacks---arrow-functions/_sidebar.md | 14 + .../catch-a-the--optional-/README.md | 30 ++ .../closures---modules/README.md | 107 +++++++ .../closures---modules/_sidebar.md | 12 + .../data-flow/README.md | 173 ++++++++++ .../dom-intro/README.md | 60 ++++ .../dom-traversal-with-jquery/README.md | 11 + .../README.md | 24 ++ .../jquery/README.md | 64 ++++ .../tweeter-controller/README.md | 19 ++ .../tweeter-logic-module/README.md | 69 ++++ .../tweeter-render-module/README.md | 67 ++++ web-development-basics/README.md | 17 + web-development-basics/_sidebar.md | 16 + web-development-basics/box-model/README.md | 55 ++++ .../code_standards/README.md | 11 + web-development-basics/css-basics/README.md | 14 + web-development-basics/css-grid/README.md | 96 ++++++ .../css-positioning/README.md | 22 ++ .../css_positioning_exercises/README.md | 50 +++ .../extra_practice/README.md | 110 +++++++ .../extra_practice/_sidebar.md | 3 + web-development-basics/functions/README.md | 40 +++ .../functions_mini_lesson_optional/README.md | 14 + web-development-basics/html-basics/README.md | 56 ++++ .../javascript-basics/README.md | 13 + web-development-basics/js-this/README.md | 44 +++ web-development-basics/scope/README.md | 61 ++++ .../web-debugger-basics/README.md | 12 + .../-stay-logged-in--method/README.md | 8 + .../README.md | 10 + .../authorization-token/README.md | 34 ++ .../README.md | 6 + .../_sidebar.md | 11 + .../https-under-sslslashtls/README.md | 16 + .../jwt-is-the-new-token/README.md | 8 + .../password-hashing/README.md | 13 + .../the-dns-protocol/README.md | 19 ++ .../the-osi-model/README.md | 51 +++ 294 files changed, 10549 insertions(+) create mode 100644 _sidebar.md create mode 100644 admin/README.md create mode 100644 admin/readme/README.md create mode 100644 ajax---object-oriented-programming/README.md create mode 100644 ajax---object-oriented-programming/ajax---intro-to-apis/README.md create mode 100644 ajax---object-oriented-programming/ajax---intro-to-apis/_sidebar.md create mode 100644 ajax---object-oriented-programming/css--tools-for-modern-design/README.md create mode 100644 ajax---object-oriented-programming/css--tools-for-responsive-design/README.md create mode 100644 ajax---object-oriented-programming/es6-array-methods/README.md create mode 100644 ajax---object-oriented-programming/handlebars/README.md create mode 100644 ajax---object-oriented-programming/intro-to-json/README.md create mode 100644 ajax---object-oriented-programming/local-storage/README.md create mode 100644 ajax---object-oriented-programming/my-people---handlebars---api-project--optional-/README.md create mode 100644 ajax---object-oriented-programming/object-oriented-programming-intro--oop-/README.md create mode 100644 ajax---object-oriented-programming/oop-inheritance/README.md create mode 100644 ajax---object-oriented-programming/oop-inheritance/_sidebar.md create mode 100644 ajax---object-oriented-programming/oop-singleton---dependency-injection/README.md create mode 100644 ajax---object-oriented-programming/promises/README.md create mode 100644 ajax---object-oriented-programming/promises/_sidebar.md create mode 100644 ajax---object-oriented-programming/random-user-page-api-project/README.md create mode 100644 ajax---object-oriented-programming/random-user-page-api-project/_sidebar.md create mode 100644 algorithms---data-structures/README.md create mode 100644 algorithms---data-structures/algorithms---level-1/README.md create mode 100644 algorithms---data-structures/algorithms---level-2/README.md create mode 100644 algorithms---data-structures/algorithms---level-3/README.md create mode 100644 algorithms---data-structures/autocomplete-trie-project--optional-/README.md create mode 100644 algorithms---data-structures/big-o---time-complexity--js-/README.md create mode 100644 algorithms---data-structures/data-structures/README.md create mode 100644 algorithms---data-structures/full-stack-interview-questions/README.md create mode 100644 algorithms---data-structures/fullstack-15/README.md create mode 100644 algorithms---data-structures/gold-rush--matrix-mini-project/README.md create mode 100644 algorithms---data-structures/matrices/README.md create mode 100644 algorithms---data-structures/recursion/README.md create mode 100644 algorithms---data-structures/stacks---queues/README.md create mode 100644 algorithms---data-structures/stacks---queues/_sidebar.md create mode 100644 algorithms---data-structures/trees-and-binary-search-trees/README.md create mode 100644 archive/README.md create mode 100644 archive/github-code-review-setup/README.md create mode 100644 asynchronous-codes/README.md create mode 100644 asynchronous-codes/async-await/README.md create mode 100644 asynchronous-codes/async-js--callback---event-loop/README.md create mode 100644 asynchronous-codes/async-js--callback---event-loop/_sidebar.md create mode 100644 asynchronous-codes/render--app-deployment-service-/README.md create mode 100644 asynchronous-codes/render--app-deployment-service-/_sidebar.md create mode 100644 asynchronous-codes/weather-app-full-stack-project/README.md create mode 100644 asynchronous-codes/weather-app-full-stack-project/_sidebar.md create mode 100644 career-development/README.md create mode 100644 career-development/_sidebar.md create mode 100644 career-development/cv-workshop/README.md create mode 100644 career-development/cv-workshop/_sidebar.md create mode 100644 career-development/how-to-pass-an-interview/README.md create mode 100644 career-development/how-to-pass-an-interview/_sidebar.md create mode 100644 career-development/linkedin/README.md create mode 100644 career-development/linkedin/_sidebar.md create mode 100644 career-development/self-intro---submission-link/README.md create mode 100644 career-development/self-intro---submission-link/_sidebar.md create mode 100644 career-development/story-telling/README.md create mode 100644 career-development/story-telling/_sidebar.md create mode 100644 challenges/README.md create mode 100644 challenges/iterator-challenge/README.md create mode 100644 challenges/iterator-solution/README.md create mode 100644 challenges/splice-challenge/README.md create mode 100644 css-extra/README.md create mode 100644 css-extra/css-3--variables---animations/README.md create mode 100644 css-extra/css-less/README.md create mode 100644 css-extra/materialize-css/README.md create mode 100644 design/README.md create mode 100644 design/behavioral-patterns/README.md create mode 100644 design/creational-patterns/README.md create mode 100644 design/solid-principles/README.md create mode 100644 design/structural-patterns/README.md create mode 100644 design/structural-patterns/_sidebar.md create mode 100644 environment-setup/README.md create mode 100644 environment-setup/git/README.md create mode 100644 environment-setup/github-setup/README.md create mode 100644 environment-setup/mongodb/README.md create mode 100644 environment-setup/mongodb/_sidebar.md create mode 100644 environment-setup/node/README.md create mode 100644 environment-setup/postman/README.md create mode 100644 environment-setup/slack/README.md create mode 100644 environment-setup/slack/_sidebar.md create mode 100644 environment-setup/visual-code/README.md create mode 100644 environment-setup/zoom/README.md create mode 100644 extended-content/README.md create mode 100644 extended-content/calc-in-css/README.md create mode 100644 extended-content/chrome-extensions/README.md create mode 100644 extended-content/destructuring--spread---nullish-coalescing/README.md create mode 100644 extended-content/docker/README.md create mode 100644 extended-content/elastic-search/README.md create mode 100644 extended-content/flexbox/README.md create mode 100644 extended-content/http-status-code/README.md create mode 100644 extended-content/redis/README.md create mode 100644 extended-content/regex/README.md create mode 100644 extended-content/rest-api/README.md create mode 100644 extended-content/rest-api/_sidebar.md create mode 100644 extended-content/rgba/README.md create mode 100644 extended-content/sessions/README.md create mode 100644 git-collab/README.md create mode 100644 git-collab/git-branches/README.md create mode 100644 git-collab/git-collaboration/README.md create mode 100644 git-collab/setting-up-your-github-projects/README.md create mode 100644 intro/README.md create mode 100644 intro/course-syllabus/README.md create mode 100644 intro/course-syllabus/_sidebar.md create mode 100644 intro/file-setup-basics/README.md create mode 100644 intro/zoom-onboarding/README.md create mode 100644 mid-exam/README.md create mode 100644 mid-exam/_sidebar.md create mode 100644 mid-exam/mid-exam--retake-/README.md create mode 100644 mid-exam/mid-exam--retake-/_sidebar.md create mode 100644 mongodb/README.md create mode 100644 mongodb/installing-local-mongo-db/README.md create mode 100644 mongodb/installing-local-mongo-db/_sidebar.md create mode 100644 mongodb/intro-to-databases/README.md create mode 100644 mongodb/mongo-db-intro/README.md create mode 100644 mongodb/mongoose---querying-practice/README.md create mode 100644 mongodb/mongoose-expenses-project/README.md create mode 100644 mongodb/mongoose-intro/README.md create mode 100644 mongodb/mongoose-intro/_sidebar.md create mode 100644 mongodb/mongoose-population/README.md create mode 100644 python/README.md create mode 100644 python/decorators/README.md create mode 100644 r-ds/README.md create mode 100644 r-ds/r-d-sim-1--todo-list/README.md create mode 100644 r-ds/r-d-sim-2--python/README.md create mode 100644 r-ds/typescript-r-d/README.md create mode 100644 react-advanced/README.md create mode 100644 react-advanced/deploying-react-to-heroku/README.md create mode 100644 react-advanced/react-bank/README.md create mode 100644 react-advanced/react-bank/_sidebar.md create mode 100644 react-advanced/react-lifecycle-and-the-useeffect-hook/README.md create mode 100644 react-advanced/react-lifecycle-and-the-useeffect-hook/_sidebar.md create mode 100644 react-basics/README.md create mode 100644 react-basics/catchphrase---socket-project--optional-/README.md create mode 100644 react-basics/hangman---part-i/README.md create mode 100644 react-basics/hangman---part-i/_sidebar.md create mode 100644 react-basics/pomodoro-project--optional-/README.md create mode 100644 react-basics/react-components/README.md create mode 100644 react-basics/react-components/_sidebar.md create mode 100644 react-basics/react-data-flow/README.md create mode 100644 react-basics/react-data-flow/_sidebar.md create mode 100644 react-basics/react-input/README.md create mode 100644 react-basics/react-input/_sidebar.md create mode 100644 react-basics/react-intro/README.md create mode 100644 react-basics/react-intro/_sidebar.md create mode 100644 react-basics/react-props/README.md create mode 100644 react-basics/react-props/_sidebar.md create mode 100644 react-basics/react-router/README.md create mode 100644 react-basics/react-router/_sidebar.md create mode 100644 react-basics/react-state/README.md create mode 100644 react-basics/react-state/_sidebar.md create mode 100644 react-basics/reflix-project/README.md create mode 100644 react-basics/reflix-project/_sidebar.md create mode 100644 react-basics/webpack-ec/README.md create mode 100644 resources/README.md create mode 100644 resources/clean-code/README.md create mode 100644 resources/how-to-search-in-google/README.md create mode 100644 resources/how-to-search-in-google/_sidebar.md create mode 100644 script.py create mode 100644 servers/README.md create mode 100644 servers/express--crud--router----middleware/README.md create mode 100644 servers/express--crud--router----middleware/_sidebar.md create mode 100644 servers/express-intro--servers--routes----params/README.md create mode 100644 servers/guided-debugging-exercise/README.md create mode 100644 servers/guided-debugging-exercise/_sidebar.md create mode 100644 servers/intro-to-servers/README.md create mode 100644 servers/intro-to-servers/_sidebar.md create mode 100644 servers/my-recipes/README.md create mode 100644 servers/my-recipes/_sidebar.md create mode 100644 servers/node/README.md create mode 100644 servers/npm---node-package-manager/README.md create mode 100644 servers/npm---node-package-manager/_sidebar.md create mode 100644 servers/postman/README.md create mode 100644 servers/postman/_sidebar.md create mode 100644 servers/server-error-handling/README.md create mode 100644 servers/server-error-handling/_sidebar.md create mode 100644 servers/status-codes-practice/README.md create mode 100644 servers/status-codes-practice/_sidebar.md create mode 100644 solutions/README.md create mode 100644 solutions/ajax---intro-to-apis---solutions/README.md create mode 100644 solutions/algorithms--js----solutions/README.md create mode 100644 solutions/big-o---time-complexity--js----solutions/README.md create mode 100644 solutions/callbacks---arrow-functions---solutions/README.md create mode 100644 solutions/closures---modules---solutions/README.md create mode 100644 solutions/css-3--variables---animations---solutions/README.md create mode 100644 solutions/css-basics---solutions/README.md create mode 100644 solutions/css-grid---solutions/README.md create mode 100644 solutions/data-flow---solutions/README.md create mode 100644 solutions/data-structures---solutions/README.md create mode 100644 solutions/dom-intro---solutions/README.md create mode 100644 solutions/dom-traversal-with-jquery---solutions/README.md create mode 100644 solutions/es6-array-methods---solutions/README.md create mode 100644 solutions/express--crud--router----middleware---solutions/README.md create mode 100644 solutions/express-intro--servers--routes----params---solutions/README.md create mode 100644 solutions/functions---solutions/README.md create mode 100644 solutions/html-basics---solutions/README.md create mode 100644 solutions/intro-to-json---solutions/README.md create mode 100644 solutions/javascript-basics---solutions/README.md create mode 100644 solutions/javascript-basics---solutions/_sidebar.md create mode 100644 solutions/jquery---solutions/README.md create mode 100644 solutions/js-this---solutions/README.md create mode 100644 solutions/local-storage---solutions/README.md create mode 100644 solutions/matrices---solutions/README.md create mode 100644 solutions/mobx-1---solutions/README.md create mode 100644 solutions/mobx-2---solutions/README.md create mode 100644 solutions/mongo-db-intro---solutions/README.md create mode 100644 solutions/mongoose-intro---solutions/README.md create mode 100644 solutions/mongoose-population---solutions/README.md create mode 100644 solutions/node---solutions/README.md create mode 100644 solutions/npm---node-package-manager---solutions/README.md create mode 100644 solutions/object-oriented-programming-intro--oop----solutions/README.md create mode 100644 solutions/oop-inheritance---solutions/README.md create mode 100644 solutions/promises---solutions/README.md create mode 100644 solutions/react-components---solutions/README.md create mode 100644 solutions/react-events---set-state---solutions/README.md create mode 100644 solutions/react-hooks---solutions/README.md create mode 100644 solutions/react-input---solutions/README.md create mode 100644 solutions/react-intro---solutions/README.md create mode 100644 solutions/react-props--state---data-flow---solutions/README.md create mode 100644 solutions/react-routes---solutions/README.md create mode 100644 solutions/recursion---solutions/README.md create mode 100644 solutions/scope---solutions/README.md create mode 100644 solutions/scraping-r-d---solutions/README.md create mode 100644 solutions/sql-in-node--sequelize---solutions/README.md create mode 100644 solutions/sql-intro--js----solutions/README.md create mode 100644 solutions/sql-join---solutions/README.md create mode 100644 solutions/stacks---queues---solutions/README.md create mode 100644 solutions/trees-and-binary-search-trees---solutions/README.md create mode 100644 solutions/typescript-r-d---solutions/README.md create mode 100644 solutions/webpack-r-d---solutions/README.md create mode 100644 sql-basics/README.md create mode 100644 sql-basics/mysql-setup/README.md create mode 100644 sql-basics/sql-in-node--sequelize/README.md create mode 100644 sql-basics/sql-intro--js-/README.md create mode 100644 sql-basics/sql-join/README.md create mode 100644 state-management/README.md create mode 100644 state-management/agora-project/README.md create mode 100644 state-management/agora-project/_sidebar.md create mode 100644 state-management/mobx-1/README.md create mode 100644 state-management/mobx-2/README.md create mode 100644 state-management/scraping/README.md create mode 100644 typescript/README.md create mode 100644 typescript/chrome-extensions/README.md create mode 100644 typescript/dom-and-casting/README.md create mode 100644 typescript/generics/README.md create mode 100644 typescript/random-user-page-api-project/README.md create mode 100644 typescript/setting-up-a-typescript-environment/README.md create mode 100644 typescript/strict-mode/README.md create mode 100644 typescript/types/README.md create mode 100644 typescript/union-types/README.md create mode 100644 typescript/what-is-typescript-/README.md create mode 100644 unit-testings/README.md create mode 100644 unit-testings/unit-tests-with-jest/README.md create mode 100644 web-development-basics-advanced/README.md create mode 100644 web-development-basics-advanced/callbacks---arrow-functions/README.md create mode 100644 web-development-basics-advanced/callbacks---arrow-functions/_sidebar.md create mode 100644 web-development-basics-advanced/catch-a-the--optional-/README.md create mode 100644 web-development-basics-advanced/closures---modules/README.md create mode 100644 web-development-basics-advanced/closures---modules/_sidebar.md create mode 100644 web-development-basics-advanced/data-flow/README.md create mode 100644 web-development-basics-advanced/dom-intro/README.md create mode 100644 web-development-basics-advanced/dom-traversal-with-jquery/README.md create mode 100644 web-development-basics-advanced/e-commerce-dom-project--optional-/README.md create mode 100644 web-development-basics-advanced/jquery/README.md create mode 100644 web-development-basics-advanced/tweeter-controller/README.md create mode 100644 web-development-basics-advanced/tweeter-logic-module/README.md create mode 100644 web-development-basics-advanced/tweeter-render-module/README.md create mode 100644 web-development-basics/README.md create mode 100644 web-development-basics/_sidebar.md create mode 100644 web-development-basics/box-model/README.md create mode 100644 web-development-basics/code_standards/README.md create mode 100644 web-development-basics/css-basics/README.md create mode 100644 web-development-basics/css-grid/README.md create mode 100644 web-development-basics/css-positioning/README.md create mode 100644 web-development-basics/css_positioning_exercises/README.md create mode 100644 web-development-basics/extra_practice/README.md create mode 100644 web-development-basics/extra_practice/_sidebar.md create mode 100644 web-development-basics/functions/README.md create mode 100644 web-development-basics/functions_mini_lesson_optional/README.md create mode 100644 web-development-basics/html-basics/README.md create mode 100644 web-development-basics/javascript-basics/README.md create mode 100644 web-development-basics/js-this/README.md create mode 100644 web-development-basics/scope/README.md create mode 100644 web-development-basics/web-debugger-basics/README.md create mode 100644 web-security---osi-model--python-backend-/-stay-logged-in--method/README.md create mode 100644 web-security---osi-model--python-backend-/README.md create mode 100644 web-security---osi-model--python-backend-/authorization-token/README.md create mode 100644 web-security---osi-model--python-backend-/basic-authentication-with-fastapi/README.md create mode 100644 web-security---osi-model--python-backend-/basic-authentication-with-fastapi/_sidebar.md create mode 100644 web-security---osi-model--python-backend-/https-under-sslslashtls/README.md create mode 100644 web-security---osi-model--python-backend-/jwt-is-the-new-token/README.md create mode 100644 web-security---osi-model--python-backend-/password-hashing/README.md create mode 100644 web-security---osi-model--python-backend-/the-dns-protocol/README.md create mode 100644 web-security---osi-model--python-backend-/the-osi-model/README.md diff --git a/_sidebar.md b/_sidebar.md new file mode 100644 index 0000000..ca33c71 --- /dev/null +++ b/_sidebar.md @@ -0,0 +1,29 @@ +* [Admin](admin/README.md) +* [Ajax Object Oriented Programming](ajax---object-oriented-programming/README.md) +* [Algorithms Data Structures](algorithms---data-structures/README.md) +* [Archive](archive/README.md) +* [Asynchronous Codes](asynchronous-codes/README.md) +* [Career Development](career-development/README.md) +* [Challenges](challenges/README.md) +* [Css Extra](css-extra/README.md) +* [Design](design/README.md) +* [Environment Setup](environment-setup/README.md) +* [Extended Content](extended-content/README.md) +* [Git Collab](git-collab/README.md) +* [Intro](intro/README.md) +* [Mid Exam](mid-exam/README.md) +* [Mongodb](mongodb/README.md) +* [Python](python/README.md) +* [R Ds](r-ds/README.md) +* [React Advanced](react-advanced/README.md) +* [React Basics](react-basics/README.md) +* [Resources](resources/README.md) +* [Servers](servers/README.md) +* [Solutions](solutions/README.md) +* [Sql Basics](sql-basics/README.md) +* [State Management](state-management/README.md) +* [Typescript](typescript/README.md) +* [Unit Testings](unit-testings/README.md) +* [Web Development Basics](web-development-basics/README.md) +* [Web Development Basics Advanced](web-development-basics-advanced/README.md) +* [Web Security Osi Model Python Backend ](web-security---osi-model--python-backend-/README.md) \ No newline at end of file diff --git a/admin/README.md b/admin/README.md new file mode 100644 index 0000000..5ae0409 --- /dev/null +++ b/admin/README.md @@ -0,0 +1,3 @@ +# Admin + +- [Readme](readme/README.md) \ No newline at end of file diff --git a/admin/readme/README.md b/admin/readme/README.md new file mode 100644 index 0000000..ce23dc9 --- /dev/null +++ b/admin/readme/README.md @@ -0,0 +1,3 @@ +# Page 1 + +# Sample content Page 1 \ No newline at end of file diff --git a/ajax---object-oriented-programming/README.md b/ajax---object-oriented-programming/README.md new file mode 100644 index 0000000..cf2ec9a --- /dev/null +++ b/ajax---object-oriented-programming/README.md @@ -0,0 +1,15 @@ +# Ajax Object Oriented Programming + +- [Ajax Intro To Apis](ajax---intro-to-apis/README.md) +- [Css Tools For Modern Design](css--tools-for-modern-design/README.md) +- [Css Tools For Responsive Design](css--tools-for-responsive-design/README.md) +- [Es6 Array Methods](es6-array-methods/README.md) +- [Handlebars](handlebars/README.md) +- [Intro To Json](intro-to-json/README.md) +- [Local Storage](local-storage/README.md) +- [My People Handlebars Api Project Optional ](my-people---handlebars---api-project--optional-/README.md) +- [Object Oriented Programming Intro Oop ](object-oriented-programming-intro--oop-/README.md) +- [Oop Inheritance](oop-inheritance/README.md) +- [Oop Singleton Dependency Injection](oop-singleton---dependency-injection/README.md) +- [Promises](promises/README.md) +- [Random User Page Api Project](random-user-page-api-project/README.md) \ No newline at end of file diff --git a/ajax---object-oriented-programming/ajax---intro-to-apis/README.md b/ajax---object-oriented-programming/ajax---intro-to-apis/README.md new file mode 100644 index 0000000..26fde39 --- /dev/null +++ b/ajax---object-oriented-programming/ajax---intro-to-apis/README.md @@ -0,0 +1,3 @@ +# Ajax Overview Video + + \ No newline at end of file diff --git a/ajax---object-oriented-programming/ajax---intro-to-apis/_sidebar.md b/ajax---object-oriented-programming/ajax---intro-to-apis/_sidebar.md new file mode 100644 index 0000000..a46b14c --- /dev/null +++ b/ajax---object-oriented-programming/ajax---intro-to-apis/_sidebar.md @@ -0,0 +1,12 @@ +- [⬅ Back to Ajax Object Oriented Programming](../README.md) + +- [Ajax Overview Video](./AJAX-Overview-Video.md) +- [Api Requests Jquery](./API-Requests---Jquery.md) +- [Asynchronous](./Asynchronous.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Extracting Data](./Extracting-Data.md) +- [Get Request Error Handling Video](./GET-Request---Error-Handling-Video.md) +- [Intro Ajax](./Intro---AJAX.md) +- [Requests Success Error](./Requests--Success---Error.md) +- [Jquery Get Request Video](./jQuery-GET-Request-Video.md) \ No newline at end of file diff --git a/ajax---object-oriented-programming/css--tools-for-modern-design/README.md b/ajax---object-oriented-programming/css--tools-for-modern-design/README.md new file mode 100644 index 0000000..a710200 --- /dev/null +++ b/ajax---object-oriented-programming/css--tools-for-modern-design/README.md @@ -0,0 +1,18 @@ +# Intro + +This isn't so much a lesson as much as a resource for several good tools you should be aware of and using in your projects. + + + +Now, this isn't a UI (user interface) or UX (user experience) course, but we should be able to make something that looks reasonably good, and there are simple tools out there for that. As such, it is beneficial to learn them. + + + +In particular, we will cover: + +- Font-Awesome +- Flat-UI Colors +- Color Scheme Generator +- Website Color Scheme +- Google Fonts +- Design Tips \ No newline at end of file diff --git a/ajax---object-oriented-programming/css--tools-for-responsive-design/README.md b/ajax---object-oriented-programming/css--tools-for-responsive-design/README.md new file mode 100644 index 0000000..c8d5824 --- /dev/null +++ b/ajax---object-oriented-programming/css--tools-for-responsive-design/README.md @@ -0,0 +1,52 @@ +# Intro + +Today, and probably in the future, screen sizes vary. Sometimes users are on their desktop with a wide-screen, sometimes on a smaller laptop, tablet, or phone - either way, we would like our web-apps to look reasonable on any display. + + + +The answer to this conundrum is built up of a few things, but today we will talk about these in particular: + + + +- The Viewport +- max/min width/height +- Flexible units (instead of using pixels) +- Media Queries - _the_ tool for responsive design +- Emulating other devices on Chrome + +It may sound like a lot, but these are pretty small, but useful tools, so let's dive in. + + + + + +---------- + + + + + +#### **THE VIEWPORT** + + + + + +The **viewport** is the area of the window in which web content can be seen ([quote](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)) - that is to say, the visible area of a webpage. Naturally, this changes from device to device. We will be referencing this term throughout the lesson. + + + +To accommodate different viewports, we can add this `meta` tag to our root (usually _index_) HTML file: + + + +```html + +``` + + +The above goes in the `head` tag, usually at the top. You can read all the details about this [here](https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts), but the gist is that it sets the width of the page to be the width of the _device_. + + + +Generally there's not much more to do with the viewport aside from having this `meta` tag in our HTML, so we won't go into more detail about this. \ No newline at end of file diff --git a/ajax---object-oriented-programming/es6-array-methods/README.md b/ajax---object-oriented-programming/es6-array-methods/README.md new file mode 100644 index 0000000..70a206f --- /dev/null +++ b/ajax---object-oriented-programming/es6-array-methods/README.md @@ -0,0 +1,3 @@ +# Array Methods Video + + \ No newline at end of file diff --git a/ajax---object-oriented-programming/handlebars/README.md b/ajax---object-oriented-programming/handlebars/README.md new file mode 100644 index 0000000..1d01c00 --- /dev/null +++ b/ajax---object-oriented-programming/handlebars/README.md @@ -0,0 +1,3 @@ +# Handlebars Video + + \ No newline at end of file diff --git a/ajax---object-oriented-programming/intro-to-json/README.md b/ajax---object-oriented-programming/intro-to-json/README.md new file mode 100644 index 0000000..add7a90 --- /dev/null +++ b/ajax---object-oriented-programming/intro-to-json/README.md @@ -0,0 +1,3 @@ +# JSON Video + + \ No newline at end of file diff --git a/ajax---object-oriented-programming/local-storage/README.md b/ajax---object-oriented-programming/local-storage/README.md new file mode 100644 index 0000000..cc92caa --- /dev/null +++ b/ajax---object-oriented-programming/local-storage/README.md @@ -0,0 +1,3 @@ +# Local Storage Video + + \ No newline at end of file diff --git a/ajax---object-oriented-programming/my-people---handlebars---api-project--optional-/README.md b/ajax---object-oriented-programming/my-people---handlebars---api-project--optional-/README.md new file mode 100644 index 0000000..2673800 --- /dev/null +++ b/ajax---object-oriented-programming/my-people---handlebars---api-project--optional-/README.md @@ -0,0 +1,10 @@ +# Intro + +![.guides/img/my-ppl-hbars-apis-ex](./my-ppl-hbars-apis-ex.PNG) + + +Knowing both Handlebars and how to make simple GET requests is great - both are very powerful tools. + + + +Let's take advantage of these and create a simple (static) directory of people, with a bit of CSS Grid for flare. \ No newline at end of file diff --git a/ajax---object-oriented-programming/object-oriented-programming-intro--oop-/README.md b/ajax---object-oriented-programming/object-oriented-programming-intro--oop-/README.md new file mode 100644 index 0000000..7fb3fef --- /dev/null +++ b/ajax---object-oriented-programming/object-oriented-programming-intro--oop-/README.md @@ -0,0 +1,3 @@ +# OOP Intro Video + + \ No newline at end of file diff --git a/ajax---object-oriented-programming/oop-inheritance/README.md b/ajax---object-oriented-programming/oop-inheritance/README.md new file mode 100644 index 0000000..c4c1356 --- /dev/null +++ b/ajax---object-oriented-programming/oop-inheritance/README.md @@ -0,0 +1,9 @@ +# Comprehension Check + +{Check It!|assessment}(multiple-choice-2241612772) +{Check It!|assessment}(multiple-choice-3123031327) +{Check It!|assessment}(multiple-choice-3000189069) +{Check It!|assessment}(multiple-choice-2755130575) +{Check It!|assessment}(multiple-choice-3542748998) +{Check It!|assessment}(multiple-choice-376880610) +{Check It!|assessment}(multiple-choice-1382738689) \ No newline at end of file diff --git a/ajax---object-oriented-programming/oop-inheritance/_sidebar.md b/ajax---object-oriented-programming/oop-inheritance/_sidebar.md new file mode 100644 index 0000000..b9a495d --- /dev/null +++ b/ajax---object-oriented-programming/oop-inheritance/_sidebar.md @@ -0,0 +1,16 @@ +- [⬅ Back to Ajax Object Oriented Programming](../README.md) + +- [Comprehension Check](./Comprehension-Check.md) +- [Custom Inherited Attributes](./Custom--inherited--Attributes.md) +- [Deeper Inheritance](./Deeper-Inheritance.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [Method Overriding](./Method-Overriding.md) +- [Oop Inheritance Intro Video](./OOP-Inheritance-Intro-Video.md) +- [Object Prototype Video](./Object---Prototype-Video.md) +- [Object Prototype](./Object---Prototype.md) +- [Spot Check 1](./Spot-Check-1.md) +- [Spot Check 2](./Spot-Check-2.md) +- [Spot Check 3](./Spot-Check-3.md) +- [Instanceof Polymorphism Video](./instanceof---Polymorphism-Video.md) +- [Instanceof Polymorphism](./instanceof---Polymorphism.md) \ No newline at end of file diff --git a/ajax---object-oriented-programming/oop-singleton---dependency-injection/README.md b/ajax---object-oriented-programming/oop-singleton---dependency-injection/README.md new file mode 100644 index 0000000..b08a427 --- /dev/null +++ b/ajax---object-oriented-programming/oop-singleton---dependency-injection/README.md @@ -0,0 +1,3 @@ +# Singleton & Dependency Injection Video + + \ No newline at end of file diff --git a/ajax---object-oriented-programming/promises/README.md b/ajax---object-oriented-programming/promises/README.md new file mode 100644 index 0000000..70de0b2 --- /dev/null +++ b/ajax---object-oriented-programming/promises/README.md @@ -0,0 +1,107 @@ +# A Function That Returns A Promise + +Mostly we will work with functions that return promises, such as making http request. +But in our example we need the example functions to return a promise. + +Here is a code that change our functions to return promises: +```js +const getRandomWord = function () { + let words = ['Bonanza', 'Elusive', 'Hindrance', 'Astute', 'Polaroid', 'Phonic', 'Yonder'] + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(words[Math.floor(Math.random() * words.length)]) + }, 1000); + }) +} + +const getSynonyms = function (word) { + let thesauraus = { + 'Absolute': ['Definitive', 'Certain', 'Sure', 'Unequivocal'], + 'Astute': ['Sharp', 'Poignant', 'Clever'], + 'Azure': ['Blue', 'Cyan', 'Sky-blue'], + 'Bright': ['Luminous', 'Brilliant'], + 'Bonanza': ['Plethora', 'Smorgasboard', 'Copious', 'Plenty'], + 'Elusive': ['Slick', 'Slippery', 'Ethereal', 'Loose'], + 'Erode': ['Destroy', 'Wear out', 'Tarnish'], + 'Hindrance': ['Bother', 'Disturbance', 'Problematic'], + 'Phonic': ['Soundful'], + 'Ploy': ['Plan', 'Ruse'], + 'Polaroid': ['Photograph'], + 'Yap': ['Bark', 'Blab', 'Chatter'], + 'Yonder': ['There', 'Away', 'Far', 'Afar'] + } + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(thesauraus[word]) + }, 1000); + }) +} + +const getSentiment = function (word) { + let wordSentiment = { + 'Definitive': 1, + 'Sharp': 1, + 'Blue': 0, + 'Luminous': 1, + 'Plethora': 1, + 'Slick': -1, + 'Destroy': -1, + 'Bother': -1, + 'Soundful': 0, + 'Plan': 0, + 'Photograph': 0, + 'Bark': -1, + 'There': -1 + } + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(wordSentiment[word]) + }, 1000); + }) +} + +// No need for promises here +const getSentimentDescription = function (sentiment) { + return sentiment === 1 ? "Positive" : sentiment === -1 ? "Negative" : "Neutral" +} +``` + +Use it so that you can run the code and add a `then`. + +This is out side of the lesson scope. +If you are short in time move on to the next page. + +# Extension +If you have extra time, here is a basic explanation. +To write a function that returns a promise, you can do the following: + +* Create a new promise using the Promise constructor, passing in a function with two arguments: resolve and reject. +* Inside the function, perform the asynchronous operation. + +* If the operation succeeds, call the resolve function with the result of the operation as an argument. + +* If the operation fails, call the reject function with an error as an argument. + +Here is an example of a function that returns a promise that resolves with the result of an asynchronous HTTP request: + +```js +function getData() { + return new Promise((resolve, reject) => { + fetch('https://example.com/data') + .then(response => { + if (response.ok) { + return response.json(); + } + throw new Error('Request failed'); + }) + .then(data => { + resolve(data); + }) + .catch(error => { + reject(error); + }); + }); +} +``` + +If you want to read more about it you can do it [here](https://www.freecodecamp.org/news/how-to-write-a-javascript-promise-4ed8d44292b8/), or search online. \ No newline at end of file diff --git a/ajax---object-oriented-programming/promises/_sidebar.md b/ajax---object-oriented-programming/promises/_sidebar.md new file mode 100644 index 0000000..888fd66 --- /dev/null +++ b/ajax---object-oriented-programming/promises/_sidebar.md @@ -0,0 +1,17 @@ +- [⬅ Back to Ajax Object Oriented Programming](../README.md) + +- [A Function That Returns A Promise](./A-Function-that-Returns-a-Promise.md) +- [Applications](./Applications.md) +- [Async Operation](./Async-Operation.md) +- [Callback Hell](./Callback-Hell.md) +- [Chaining](./Chaining.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [New Page](./New-Page.md) +- [Promise All](./Promise-All.md) +- [Promise](./Promise.md) +- [Spot Check](./Spot-Check.md) +- [Test Case](./Test-Case.md) +- [Understanding Async Functions](./Understanding-Async-Functions.md) +- [Understanding Callbacks](./Understanding-Callbacks.md) \ No newline at end of file diff --git a/ajax---object-oriented-programming/random-user-page-api-project/README.md b/ajax---object-oriented-programming/random-user-page-api-project/README.md new file mode 100644 index 0000000..922d278 --- /dev/null +++ b/ajax---object-oriented-programming/random-user-page-api-project/README.md @@ -0,0 +1,27 @@ +# Extensions + +**1.** Render the pokemon name on your page in "Proper Case" ("Pikachu" instead of "pikachu") + +- Hint: Create your own Handlebars Helper to do this. + + + +**2.** Add in two more buttons - a "Save User Page" button and a "Load User Page". + + + +- Your "Save User Page" button should save a snapshot of your current user to local storage +- Your "Load User Page" button should load the user that you saved and render the exact user page back on the page - that means the same user, the quote, pokemon, meatText and friends they came with. + + + +**2.1** Save multiple users + + + +- Edit the object you're saving in Local Storage to be a users object. You'll be adding each user you want to save to this object. +- Add a drop-down menu with the list of saved users. Now, when you click on the "Load User Page" button, it should load the saved user you select from the drop-down menu + +#### + +#### **DONE FOR REAL NOW** \ No newline at end of file diff --git a/ajax---object-oriented-programming/random-user-page-api-project/_sidebar.md b/ajax---object-oriented-programming/random-user-page-api-project/_sidebar.md new file mode 100644 index 0000000..aeb876a --- /dev/null +++ b/ajax---object-oriented-programming/random-user-page-api-project/_sidebar.md @@ -0,0 +1,7 @@ +- [⬅ Back to Ajax Object Oriented Programming](../README.md) + +- [Extensions](./Extensions.md) +- [Instructions Ii](./Instructions-II.md) +- [Instructions](./Instructions.md) +- [Intro](./Intro.md) +- [Working With New Apis](./Working-with-New-APIs.md) \ No newline at end of file diff --git a/algorithms---data-structures/README.md b/algorithms---data-structures/README.md new file mode 100644 index 0000000..e34bda1 --- /dev/null +++ b/algorithms---data-structures/README.md @@ -0,0 +1,15 @@ +# Algorithms Data Structures + +- [Algorithms Level 1](algorithms---level-1/README.md) +- [Algorithms Level 2](algorithms---level-2/README.md) +- [Algorithms Level 3](algorithms---level-3/README.md) +- [Autocomplete Trie Project Optional ](autocomplete-trie-project--optional-/README.md) +- [Big O Time Complexity Js ](big-o---time-complexity--js-/README.md) +- [Data Structures](data-structures/README.md) +- [Full Stack Interview Questions](full-stack-interview-questions/README.md) +- [Fullstack 15](fullstack-15/README.md) +- [Gold Rush Matrix Mini Project](gold-rush--matrix-mini-project/README.md) +- [Matrices](matrices/README.md) +- [Recursion](recursion/README.md) +- [Stacks Queues](stacks---queues/README.md) +- [Trees And Binary Search Trees](trees-and-binary-search-trees/README.md) \ No newline at end of file diff --git a/algorithms---data-structures/algorithms---level-1/README.md b/algorithms---data-structures/algorithms---level-1/README.md new file mode 100644 index 0000000..6ec7776 --- /dev/null +++ b/algorithms---data-structures/algorithms---level-1/README.md @@ -0,0 +1,111 @@ +# Intro + +In this lesson, you're going to practice the important skill of problem solving, i.e. writing **algorithms**. + + + +An **algorithm** may sound like a big word - but all it is is **a set of instructions to complete some task**. + + + +Let's consider the classic _find the smallest number in an array_ task: + +``` +let numbers = [31, 9, 18, 2, 106, 382, 0, 71, 8239, 791, -2321, 2500, 12, 13] +``` + +As a human, it's pretty easy to look at this and see that - `2321` is the smallest number - but that's because our subconscious mind is quite powerful. Behind the scenes, we're probably following an algorithm that looks like this: + + + +1. Look at the first number +2. Store it in some place in our memory +3. Look at the second number +4. Compare the second number to the number stored in memory +5. If the second number is smaller, forget the number stored in memory, and store the second number in memory +6. Look at the third number +7. If the third number is smaller, forget the number stored in memory... +8. Repeat until the end + + + +Of course, our minds do this blazingly fast so we don't really think of it like that - but that's effectively the process - and that is an excellent example of an algorithm! A very clear set of instructions. + + + +---------- + + + +Now let's translate the above algorithm to code: + +``` +let smallestNumber //our 'number stored in memory' + +for(let num of numbers){ //going over each number + + if(num < smallestNumber){ + smallestNumber = num //forget the number stored in memory and store num instead + } +} + +console.log("Smallest number is " + smallestNumber) +``` + + +The above is pretty self-explanatory, but if you run this code you'll find **a logical bug**. + + + +To solve this bug, you'll have to **debug the code, maybe also** [**take a look here**](https://stackoverflow.com/a/22134555/3147774) - try to figure this out on your own before looking at the solution. + +
+ Click here to reveal the answer. + + +The problem is that the value of `smallestNumber` is initially `undefined` - we cannot compare greater/less than to `undefined`, so the expression `smallestNumber > num` always returns `false`. + +This means we need to define some initial value for `smallestNumber` +
+ +--- + + +Once you've figured out **and fixed** the bug, run your exact same code (without changing anything else) for the following arrays: + +``` +let numbers = [823412013513, 1381120136324, 82341381745, 181238377131412, 74128377131412, 74128377412] // should find 74128377412 + +let numbers = [-312, -9123, -112, -812, -7411, -312] //should find -9123 + +let numbers = [23, 23, 23, 23, 23] //should find 23 +``` + +If you didn't get the correct results - it's because you've made some **assumptions**, and one of the golden rules in writing an algorithm is that you must **be aware of your assumptions**. + + + +If, for instance, you initially set `let smallestNumber = 0` - then you couldn't find the smallest number in the first or third array above, because none of those numbers are less than `0`. + + + +If, for instance, you initially set `let smallestNumber = 10000` - or some other 'large number', you might not find the smallest number in the first array because you assumed all your numbers would be less than 10000 + + + +Either way, to guarantee we're not assuming anything about our data, **we can set** `let smallestNumber = numbers[0]` - then we know we'll always get a result relevant to our `numbers` array. + + + +And **even now, there's still a problem** - what result do we get for the following array? + +``` +let numbers = [] +``` + + +We would see `Smallest number is undefined` - not a very friendly message. + + + +In summary, **when we write good algorithms, we need to assume as little as possible, and consider as many edge cases as possible**. \ No newline at end of file diff --git a/algorithms---data-structures/algorithms---level-2/README.md b/algorithms---data-structures/algorithms---level-2/README.md new file mode 100644 index 0000000..aa7afb4 --- /dev/null +++ b/algorithms---data-structures/algorithms---level-2/README.md @@ -0,0 +1,10 @@ +# Intro + +# Algorithms - Level 2 + +We will be practicing our algorithmic skills in this assignment 💪 🏋️ + + +|||important +make sure you practice efficient and clean code +||| \ No newline at end of file diff --git a/algorithms---data-structures/algorithms---level-3/README.md b/algorithms---data-structures/algorithms---level-3/README.md new file mode 100644 index 0000000..6e50347 --- /dev/null +++ b/algorithms---data-structures/algorithms---level-3/README.md @@ -0,0 +1,11 @@ +# Word Score + +# Word Score +Given a string of words, you need to find the highest scoring word. Each letter of a word scores points according to it's position in the alphabet: a = 1, b = 2, c = 3 etc. +- You need to return the highest scoring word as a string. +- If two words score the same, return the word that appears earliest in the original string. +- All letters will be lowercase and all inputs will be valid. + + +**Example:** +"if you are a winner" => "winner" \ No newline at end of file diff --git a/algorithms---data-structures/autocomplete-trie-project--optional-/README.md b/algorithms---data-structures/autocomplete-trie-project--optional-/README.md new file mode 100644 index 0000000..4bac53b --- /dev/null +++ b/algorithms---data-structures/autocomplete-trie-project--optional-/README.md @@ -0,0 +1,15 @@ +# Intro + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/dsa/autocomplete.png) + + + +In this project you'll be using a type of search tree called a Trie (also known as a prefix tree) to create an auto complete app! + + + +You'll have to create an `autoCompleteTree` class and populate the trie based on an array of words. Then you'll write methods to search for words, and auto complete the prefix of a word. + + + +In the end, you can create a UI to show your awesome autocomplete app! \ No newline at end of file diff --git a/algorithms---data-structures/big-o---time-complexity--js-/README.md b/algorithms---data-structures/big-o---time-complexity--js-/README.md new file mode 100644 index 0000000..a11ee10 --- /dev/null +++ b/algorithms---data-structures/big-o---time-complexity--js-/README.md @@ -0,0 +1,3 @@ +# Complexity Overview + + \ No newline at end of file diff --git a/algorithms---data-structures/data-structures/README.md b/algorithms---data-structures/data-structures/README.md new file mode 100644 index 0000000..1e7d9d0 --- /dev/null +++ b/algorithms---data-structures/data-structures/README.md @@ -0,0 +1,93 @@ +# Intro + +In the world of programming we need a way to store data. For this purpose, we have what's known as **data structures**. + + + +You already know (at least) two data structures by now: + +1. Arrays +2. Objects + + + +When we talk about data structures, we usually consider the **complexity** of: + +- An **insert** into the data structure +- A **find** from the data structure +- An **update** +- A **remove** + + + +For instance, say we had this array: + +``` +let people = [] +``` + +The complexity of **insert**ing into an array is **O( 1 )**: + +``` +let p1 = { + id: "a0x3", + name: "Candice", + age: 23 +} + +let p2 = { + id: "q113z", + name: "Jay", + age: 16 +} + +let p3 = { + id: "kl991", + name: "Drew", + age: 31 +} + +people.push(p1) +people.push(p2) +people.push(p3) +``` + + +Since `push` always inserts an item to the _end_ of the array, it's only one operation. + +That's pretty simple. However, to **find** something, it's typically* **O( n )**: +*generally we don't know where elements are in the array + +``` +const findPerson = function (personID) { + for (let p of people) { + if (p.id === personID) { + return p + } + } +} +``` + + +To **update** an item in an array is also **O( n )**: + +``` +const updatePerson = function (personID, newName) { + let person = findPerson(personID) + person.name = newName +} +``` + +In order to **update** something in an array, we must first **find** it - so even though the update itself is **O( 1 )**, we're forced to use `findPerson` in order to understand _which_ person to update - and that's **O( n )**. + +## Spot check +What's the complexity for the **remove** in an array? + +
+ Click here to reveal the answer. + + +Also **O( n )** - first find it (using an index), then use the index to `splice` + +See [solution](https://codepen.io/ElevationPen/pen/jjMoYY). +
\ No newline at end of file diff --git a/algorithms---data-structures/full-stack-interview-questions/README.md b/algorithms---data-structures/full-stack-interview-questions/README.md new file mode 100644 index 0000000..629a15b --- /dev/null +++ b/algorithms---data-structures/full-stack-interview-questions/README.md @@ -0,0 +1,11 @@ +# Intro + +In this lesson we'll talk about the different type of interview questions and how to answer them. In general, we'll look at the General Knowledge questions and Problem Solving questions. + + + +You'll also find a list of sample interview questions after each section so that you can practice. At the end of this lesson there are some extra resources to help you improve your interview skills even more. + + + +Let's get started. \ No newline at end of file diff --git a/algorithms---data-structures/fullstack-15/README.md b/algorithms---data-structures/fullstack-15/README.md new file mode 100644 index 0000000..b748008 --- /dev/null +++ b/algorithms---data-structures/fullstack-15/README.md @@ -0,0 +1,23 @@ +# Intro + +Being a fullstack developer is not about learning all the syntax by heart, but rather about understanding the full. stack. of development that creates an app. + + + +You should be intimately familiar with this flow: + + + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/fullstack-flow.PNG) + + + +It should be second nature to you. As clear as a summer's day. You should understand it in your _bones_. This is it - this is **the full stack**. + + + +And to make sure you _really_ get it, you're going to write a fullstack project. + +From scratch. + +**In 15 minutes** or fewer. \ No newline at end of file diff --git a/algorithms---data-structures/gold-rush--matrix-mini-project/README.md b/algorithms---data-structures/gold-rush--matrix-mini-project/README.md new file mode 100644 index 0000000..b79093d --- /dev/null +++ b/algorithms---data-structures/gold-rush--matrix-mini-project/README.md @@ -0,0 +1,53 @@ +# Intro & Setup + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/dsa/gold-rush-logo.PNG) + + + +#### **INTRO** + +Though there are many usecases for matrices (data science, image processsing, graphics, etc) - games are some of the most fun you can have with a Matrix. + +In this mini project you will create a game whose entire logic is based on a 2D array (a matrix), and then use your HTML/CSS know-how to make the game playable in the browser. + + + +---------- + + + +#### **SETUP** + + + +You'll be creating this project a-la MVC, so go ahead and create the following files: + +- `Matrix.js` - a file to hold your base `Matrix` data structure + - Feel free to use a class you've already written in the past +- `GoldRush.js` - here you'll create your new matrix, it should `extend` from `Matrix` +- `Renderer.js` - this will have your `Renderer` class with at least one method: `renderBoard` + - The `renderBoard` method should receive a matrix, and display it on the screen +- `main.js` - your controller file: this will load the initial game and react to user input + + +Then, of course, you'll have your HTML, CSS files, and if you would like to take this up to the cloud, a `server.js` file etc. + + + +---------- + + + +#### **REQUIREMENTS** + + + +In this game there should be two players. + + + +Player 1 will control their player using the **WASD** keys, and Player 2 should use the **IJKL** keys. + + + +A player may not move to a location on the board that has a wall or another player, but they should get 10 points any time they move to a location with a coin on it. In this case, the coin should disappear from the board. \ No newline at end of file diff --git a/algorithms---data-structures/matrices/README.md b/algorithms---data-structures/matrices/README.md new file mode 100644 index 0000000..3f5bf58 --- /dev/null +++ b/algorithms---data-structures/matrices/README.md @@ -0,0 +1,3 @@ +# Overview + + \ No newline at end of file diff --git a/algorithms---data-structures/recursion/README.md b/algorithms---data-structures/recursion/README.md new file mode 100644 index 0000000..c3604d7 --- /dev/null +++ b/algorithms---data-structures/recursion/README.md @@ -0,0 +1,3 @@ +# Overview + + \ No newline at end of file diff --git a/algorithms---data-structures/stacks---queues/README.md b/algorithms---data-structures/stacks---queues/README.md new file mode 100644 index 0000000..22c95a8 --- /dev/null +++ b/algorithms---data-structures/stacks---queues/README.md @@ -0,0 +1,7 @@ +# Comprehension Check + +{Check It!|assessment}(multiple-choice-1834015019) +{Check It!|assessment}(multiple-choice-2341890422) +{Check It!|assessment}(multiple-choice-2389998139) +{Check It!|assessment}(multiple-choice-2651489647) +{Check It!|assessment}(multiple-choice-3796667379) \ No newline at end of file diff --git a/algorithms---data-structures/stacks---queues/_sidebar.md b/algorithms---data-structures/stacks---queues/_sidebar.md new file mode 100644 index 0000000..38ce991 --- /dev/null +++ b/algorithms---data-structures/stacks---queues/_sidebar.md @@ -0,0 +1,10 @@ +- [⬅ Back to Algorithms Data Structures](../README.md) + +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Extension](./Extension.md) +- [Intro](./Intro.md) +- [Overview](./Overview.md) +- [Queues](./Queues.md) +- [Spot Check](./Spot-Check.md) +- [Stacks](./Stacks.md) \ No newline at end of file diff --git a/algorithms---data-structures/trees-and-binary-search-trees/README.md b/algorithms---data-structures/trees-and-binary-search-trees/README.md new file mode 100644 index 0000000..8fa6fda --- /dev/null +++ b/algorithms---data-structures/trees-and-binary-search-trees/README.md @@ -0,0 +1,22 @@ +# Intro + +![](https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Binary_search_tree.svg/2000px-Binary_search_tree.svg.png) + + + +#### + +Tree's are a popular structure for organizing data that is non-linear. In this lesson we will review: + + + +- What are Trees +- The parts of a Tree +- How to create a basic Tree +- Binary Search Trees +- Inserting Nodes in a BST +- Some common use cases of BSTs + + + +Tree's can be confusing, so read carefully and follow along, we won't _leaf_ you behind! \ No newline at end of file diff --git a/archive/README.md b/archive/README.md new file mode 100644 index 0000000..266fb37 --- /dev/null +++ b/archive/README.md @@ -0,0 +1,3 @@ +# Archive + +- [Github Code Review Setup](github-code-review-setup/README.md) \ No newline at end of file diff --git a/archive/github-code-review-setup/README.md b/archive/github-code-review-setup/README.md new file mode 100644 index 0000000..ca9770a --- /dev/null +++ b/archive/github-code-review-setup/README.md @@ -0,0 +1,49 @@ +# Instructions + +In order for us to review your code, you’ll need to complete the following steps. + + + +1. Download and install NodeJS, you can do so [here](https://nodejs.org/en/download/). Don't worry about what Node is (we'll learn about it eventually). +2. Once you have Node, go to the root directory of your project (in the terminal) and run npm init and click enter several times until you get back to the command line (you shouldn't be worried about what it does right now) +3. Then run npm i elevation-pr +4. Please note the following before continuing to the next steps +a. Make sure the folder is already a git repo +b. Make sure it already has a commit (ideally you should have quite a few commits if you were committing correctly) +c. Make sure it’s linked to a remote repo on Github +5. Run npm run review in the terminal +6. Go to Github and click Pull Requests + + + +![](./1.png) + + + + +Then click New Pull Request + + + +![](./2.png) + + + + + +Now, set the base to be review (you can change this through the drop down), and the compare should be set to master (should be set to that by default) + + + +![](./3.png) + + + + +You will be able to click the green button "create pull request". + +Don't forget to add a title and press the "create pull request" button again + + + +That's it. Copy the link to the repo and submit it with [this form](https://docs.google.com/forms/d/e/1FAIpQLSc0BJtMVATSc83zYCKwnfZX-jHQ6x_A10grsQAXy6nWCVWVOw/viewform). \ No newline at end of file diff --git a/asynchronous-codes/README.md b/asynchronous-codes/README.md new file mode 100644 index 0000000..fa27165 --- /dev/null +++ b/asynchronous-codes/README.md @@ -0,0 +1,6 @@ +# Asynchronous Codes + +- [Async Await](async-await/README.md) +- [Async Js Callback Event Loop](async-js--callback---event-loop/README.md) +- [Render App Deployment Service ](render--app-deployment-service-/README.md) +- [Weather App Full Stack Project](weather-app-full-stack-project/README.md) \ No newline at end of file diff --git a/asynchronous-codes/async-await/README.md b/asynchronous-codes/async-await/README.md new file mode 100644 index 0000000..2fc064e --- /dev/null +++ b/asynchronous-codes/async-await/README.md @@ -0,0 +1,3 @@ +# Overview - Video + + \ No newline at end of file diff --git a/asynchronous-codes/async-js--callback---event-loop/README.md b/asynchronous-codes/async-js--callback---event-loop/README.md new file mode 100644 index 0000000..8e30535 --- /dev/null +++ b/asynchronous-codes/async-js--callback---event-loop/README.md @@ -0,0 +1,83 @@ +# Asynchronous Callbacks + +**_Main point:_** _A callback is just a function that is passed into another function to be called later (we already know that). An "asynchronous callback" is a callback function that is called later, but does not block the Call Stack, and therefore allows other functions to keep being added and returned off the Call Stack as it waits to be executed. In other words, they seem to violate the rules of the Call Stack. We'll find out in a moment how this is handled._ + + + +Let's look at an example of an asynchronous callback. Copy/paste the following into your console. Notice that `setTimeout` takes an anonymous callback function. This function will be invoked "asynchronously". + + + +```js +function firstFunc () { + setTimeout(function () { + console.log('I have to go first.') + }, 3000) +}; + +function secondFunc () { + console.log('Then I can go'); +}; + +firstFunc(); +secondFunc(); +``` + + +This example is very similar to the example we gave in the **Blocking** section. However, this time, we replaced the `pause` function with `setTimeout`. + + + +One might expect that the result here would be the same - `'I have to go first.'` would log, then (3 seconds later) l, `'Then I can go'` would be logged. However, as you see, `firstFunc` is not blocking `secondFunc` from running. That must mean that `setTimeout` is being added to the callstack with a delay, unlike `pause`, which was added to the callstack (and prevented `firstFunc` from returning). Let's break down each example: + + + +**_Blocking Example Using_** **_`pause`_** + + + +1. `firstFunc` is added to the Call Stack. + + + +![.guides/img/PROD_A1216-0](./PROD_A1216-0.png) + + + +2. `pause` is added to the callstack. Now `firstFunc` will not be able to run until `pause` is finished and taken off the Call Stack. + + + +![.guides/img/PROD_A1216-1](./PROD_A1216-1.png) + + + + +3. Finally `pause` is finished and taken off the Call Stack (after 3 seconds), then `firstFunc` is finished and taken off the Call Stack, then allowing `secondFunc` to be placed on the Call Stack. + + + +![.guides/img/PROD_A1216-2](./PROD_A1216-2.png) + + + +**_Non-blocking (asynchronous) Example Using_** **_`setTimeout`_** + + + +1. Just like in our previous example, `firstFunc` is added to the Call Stack. + + +![.guides/img/PROD_A1216-3](./PROD_A1216-3.png) + + + +2. Then, `firstFunc` finishes (even though the console log hasn't happened yet) and is taken off the Call Stack. This allows `secondFunc` to be placed on the Call Stack and execute. Unlike `pause`, `setTimout` is never added to the Call Stack, yet it still runs after 3 seconds. So what did our Javascript Interpreter do with `setTimeout`? + + + +![.guides/img/PROD_A1216-4](./PROD_A1216-4.png) + +What we need to understand is that setTimeOut registers inside the call stack, however it passes its delay to be reigstered to the webAPI (the browser) + +then the browser deals with the delay and passes on the callback back to the javascript event loop to run the callback in its callback queue \ No newline at end of file diff --git a/asynchronous-codes/async-js--callback---event-loop/_sidebar.md b/asynchronous-codes/async-js--callback---event-loop/_sidebar.md new file mode 100644 index 0000000..a1892f4 --- /dev/null +++ b/asynchronous-codes/async-js--callback---event-loop/_sidebar.md @@ -0,0 +1,10 @@ +- [⬅ Back to Asynchronous Codes](../README.md) + +- [Asynchronous Callbacks](./Asynchronous-Callbacks.md) +- [Blocking](./Blocking.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Conclusion](./Conclusion.md) +- [Concurrency And The Event Loop](./Concurrency-and-the-Event-Loop.md) +- [Overview](./Overview.md) +- [The Call Stack](./The-Call-Stack.md) +- [The Event Loop](./The-Event-Loop.md) \ No newline at end of file diff --git a/asynchronous-codes/render--app-deployment-service-/README.md b/asynchronous-codes/render--app-deployment-service-/README.md new file mode 100644 index 0000000..e18145e --- /dev/null +++ b/asynchronous-codes/render--app-deployment-service-/README.md @@ -0,0 +1,7 @@ +# Done + +And that's it! Your app is live for the world to see! This is incredibly powerful. + + + +Enjoy! \ No newline at end of file diff --git a/asynchronous-codes/render--app-deployment-service-/_sidebar.md b/asynchronous-codes/render--app-deployment-service-/_sidebar.md new file mode 100644 index 0000000..a054d78 --- /dev/null +++ b/asynchronous-codes/render--app-deployment-service-/_sidebar.md @@ -0,0 +1,4 @@ +- [⬅ Back to Asynchronous Codes](../README.md) + +- [Done](./Done.md) +- [Intro](./Intro.md) \ No newline at end of file diff --git a/asynchronous-codes/weather-app-full-stack-project/README.md b/asynchronous-codes/weather-app-full-stack-project/README.md new file mode 100644 index 0000000..78e3a5b --- /dev/null +++ b/asynchronous-codes/weather-app-full-stack-project/README.md @@ -0,0 +1,69 @@ +# Backend + +#### **SERVER** + + + +Your express server should have a normal set up. Make sure to include a model folder a fitting file. + + + +---------- + + + +#### **DB SCHEMA** + + + +Make sure your schema contains the following: + +- name +- temperature +- condition +- conditionPic + + + +---------- + +#### **EXTERNAL API** + + + +There are [a lot](https://www.programmableweb.com/news/top-10-weather-apis/analysis/2014/11/13) of different weather APIs you can work with. We recommend using [open weather map](https://openweathermap.org/) as it's free and fairly simple. But you're free to use a different API if you'd like. + + + +**Note:** _If you choose to use a different API, do not spend more than 30 minutes trying to figure it out, as this is not the point of this project. The rest of the API directions will be tailored for open weather map_. + + + +You'll need to sign up in whichever way you prefer. Once you do, you'll be redirected to a page which provides you with your API key. You'll need to use this to query the API, so save it as a variable in your server somewhere. + + + +Now that you have access to the external API: + +- Read over the documentation, it's really thorough and nice +- On your server, set up a route that makes a request to the API +- Query the API for a _city_ of your choice, you wan't the current data to start with +- Use postman to test at this point + + + +---------- + + + +#### **SERVER ROUTES** + + + +You should have the following routes on your server: + +- A route that takes a `cityName` parameter and return the city data in a response. + - Hint: The city is not yet saved in your DB. +- A route that finds all of the city data saved in your DB, and send it to the client +- A route that saves a new `City` to your DB (notice this is an object city and not city name) +- A route that takes a `cityName` parameter and delete the correct city from your DB \ No newline at end of file diff --git a/asynchronous-codes/weather-app-full-stack-project/_sidebar.md b/asynchronous-codes/weather-app-full-stack-project/_sidebar.md new file mode 100644 index 0000000..cbf5df2 --- /dev/null +++ b/asynchronous-codes/weather-app-full-stack-project/_sidebar.md @@ -0,0 +1,9 @@ +- [⬅ Back to Asynchronous Codes](../README.md) + +- [Backend](./Backend.md) +- [Checkpoint](./Checkpoint.md) +- [Design](./Design.md) +- [Done](./Done.md) +- [Extensions](./Extensions.md) +- [Frontend](./Frontend.md) +- [Overview](./Overview.md) \ No newline at end of file diff --git a/career-development/README.md b/career-development/README.md new file mode 100644 index 0000000..853a93a --- /dev/null +++ b/career-development/README.md @@ -0,0 +1,7 @@ +# Career Development + +- [Cv Workshop](cv-workshop/README.md) +- [How To Pass An Interview](how-to-pass-an-interview/README.md) +- [Linkedin](linkedin/README.md) +- [Self Intro Submission Link](self-intro---submission-link/README.md) +- [Story Telling](story-telling/README.md) \ No newline at end of file diff --git a/career-development/_sidebar.md b/career-development/_sidebar.md new file mode 100644 index 0000000..55a8576 --- /dev/null +++ b/career-development/_sidebar.md @@ -0,0 +1,6 @@ +- Career Development + - [Cv Workshop](cv-workshop/README.md) + - [How To Pass An Interview](how-to-pass-an-interview/README.md) + - [Linkedin](linkedin/README.md) + - [Self Intro Submission Link](self-intro---submission-link/README.md) + - [Story Telling](story-telling/README.md) \ No newline at end of file diff --git a/career-development/cv-workshop/README.md b/career-development/cv-workshop/README.md new file mode 100644 index 0000000..0afddf6 --- /dev/null +++ b/career-development/cv-workshop/README.md @@ -0,0 +1,7 @@ +# Download + +You can preview here + + + +or [Download](.guides/download/CVworkshop.pdf) \ No newline at end of file diff --git a/career-development/cv-workshop/_sidebar.md b/career-development/cv-workshop/_sidebar.md new file mode 100644 index 0000000..62340e8 --- /dev/null +++ b/career-development/cv-workshop/_sidebar.md @@ -0,0 +1,4 @@ +- [⬅ Back to Career Development](../README.md) + +- [Download](./Download.md) +- [Intro](./Intro.md) \ No newline at end of file diff --git a/career-development/how-to-pass-an-interview/README.md b/career-development/how-to-pass-an-interview/README.md new file mode 100644 index 0000000..fd19565 --- /dev/null +++ b/career-development/how-to-pass-an-interview/README.md @@ -0,0 +1,7 @@ +# Download + +You can preview here + + + +or [Download](.guides/download/How_to_pass_an_interview.pdf) \ No newline at end of file diff --git a/career-development/how-to-pass-an-interview/_sidebar.md b/career-development/how-to-pass-an-interview/_sidebar.md new file mode 100644 index 0000000..bd4bec6 --- /dev/null +++ b/career-development/how-to-pass-an-interview/_sidebar.md @@ -0,0 +1,3 @@ +- [⬅ Back to Career Development](../README.md) + +- [Download](./Download.md) \ No newline at end of file diff --git a/career-development/linkedin/README.md b/career-development/linkedin/README.md new file mode 100644 index 0000000..297e124 --- /dev/null +++ b/career-development/linkedin/README.md @@ -0,0 +1,7 @@ +# Download + +You can preview here + + + +or [Download](.guides/download/LinkedIn.pdf) \ No newline at end of file diff --git a/career-development/linkedin/_sidebar.md b/career-development/linkedin/_sidebar.md new file mode 100644 index 0000000..62340e8 --- /dev/null +++ b/career-development/linkedin/_sidebar.md @@ -0,0 +1,4 @@ +- [⬅ Back to Career Development](../README.md) + +- [Download](./Download.md) +- [Intro](./Intro.md) \ No newline at end of file diff --git a/career-development/self-intro---submission-link/README.md b/career-development/self-intro---submission-link/README.md new file mode 100644 index 0000000..446a711 --- /dev/null +++ b/career-development/self-intro---submission-link/README.md @@ -0,0 +1,13 @@ +# Self Introduction + +Please prepare yourself to record a video after submitting the **CV** & **LinkedIn** in the **Submission Link**. + + +Here are the Questions: + + +- Please tell me about yourself *(Up to 2 minutes)* + +- Please tell me a bit about your relevant professional experience *(Up to 1.5 minutes)* + +- Please give me an example of an accomplishment you have accomplished *(Up to 1.5 minutes)* \ No newline at end of file diff --git a/career-development/self-intro---submission-link/_sidebar.md b/career-development/self-intro---submission-link/_sidebar.md new file mode 100644 index 0000000..2039e59 --- /dev/null +++ b/career-development/self-intro---submission-link/_sidebar.md @@ -0,0 +1,4 @@ +- [⬅ Back to Career Development](../README.md) + +- [Self Introduction](./Self-introduction.md) +- [Submission](./Submission.md) \ No newline at end of file diff --git a/career-development/story-telling/README.md b/career-development/story-telling/README.md new file mode 100644 index 0000000..5fc6b7b --- /dev/null +++ b/career-development/story-telling/README.md @@ -0,0 +1,7 @@ +# Download + +You can preview here + + + +or [Download](.guides/download/Storytelling.pdf) \ No newline at end of file diff --git a/career-development/story-telling/_sidebar.md b/career-development/story-telling/_sidebar.md new file mode 100644 index 0000000..bd4bec6 --- /dev/null +++ b/career-development/story-telling/_sidebar.md @@ -0,0 +1,3 @@ +- [⬅ Back to Career Development](../README.md) + +- [Download](./Download.md) \ No newline at end of file diff --git a/challenges/README.md b/challenges/README.md new file mode 100644 index 0000000..47f360c --- /dev/null +++ b/challenges/README.md @@ -0,0 +1,5 @@ +# Challenges + +- [Iterator Challenge](iterator-challenge/README.md) +- [Iterator Solution](iterator-solution/README.md) +- [Splice Challenge](splice-challenge/README.md) \ No newline at end of file diff --git a/challenges/iterator-challenge/README.md b/challenges/iterator-challenge/README.md new file mode 100644 index 0000000..efa8b7d --- /dev/null +++ b/challenges/iterator-challenge/README.md @@ -0,0 +1,33 @@ +# The Challenge + +Create an **object** which implements the **iterable protocol** so that when we iterate over the element with a `for of` loop it will print **only** the even numbers. +The object should contain 10 random numbers, you can initials them hard coded at first. + + +So if your obejct is called `myObject`, and it contains the numbers ``[11,13,14,66,67,69,234,456,2,1]``, + +then following code: +``` +const myObject = { +// your code here +} + +for (let x of myObject) { + console.log(x) +} +``` + +should print: +``` +14 +66 +234 +456 +2 +``` + + + +Here is a [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) to start you off. + +Good Luck! \ No newline at end of file diff --git a/challenges/iterator-solution/README.md b/challenges/iterator-solution/README.md new file mode 100644 index 0000000..7944ca8 --- /dev/null +++ b/challenges/iterator-solution/README.md @@ -0,0 +1,70 @@ +# Solutions + +# Iterator Solution 1 + +``` +const myIterator = { + current: 0, + numbers: [11,13,14,66,67,69,234,456,2,1], + next: function () { + while (this.current <= this.numbers.length && this.numbers[this.current] % 2 !== 0){ + this.current++; + } + if (this.current >= this.numbers.length) { + return { + done: true + } + } + else { + const val = this.numbers[this.current] + this.current++; + return { + value: val, + done: false + } + } + }, + [Symbol.iterator]: function () { return this; } +}; + +for (let x of myIterator) { + console.log(x) +} +``` + +# Iterator Solution 2 + +``` +const myIterable = { + numbers: [11, 13, 14, 66, 67, 69, 234, 456, 2, 1], + [Symbol.iterator]: function () { + let self = this + return { + current: 0, + next: function () { + while (this.current <= self.numbers.length && self.numbers[this.current] % 2 !== 0){ + this.current++; + } + if (this.current >= self.numbers.length) { + return { + done: true + } + } + else { + const val = self.numbers[this.current] + this.current++; + return { + value: val, + done: false + } + } + }, + } + } +}; + +for (let x of myIterable) { + console.log(x) +} + +``` \ No newline at end of file diff --git a/challenges/splice-challenge/README.md b/challenges/splice-challenge/README.md new file mode 100644 index 0000000..0083dc8 --- /dev/null +++ b/challenges/splice-challenge/README.md @@ -0,0 +1,130 @@ +# The Challenge + +Implement the array splice method. + +You can read about it here: + +[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) + +Try to be precise and thorough, read all the small details, and implement all functionalities. + +You can use the following code to override the original splice method: + + +```js +const splice = function(){ + // write your code here +} +``` + + +Requirements: + +1. Define parameters for the functions + +2. Note that you need to pass the array as a parameter too! + + + +Make sure the tests pass (you get the correct prints)! + + + +Tests: + + +```js +// remove 1 element +let arr = [1,2,3] +splice(arr, 0,1); +console.log(arr); //should be [2,3] + +// add 1 element +arr = [1,2,3] +splice(arr, 0,0,0); +console.log(arr); //should be [0,1,2,3] + +// add 2 elements +arr = [1,2,3] +splice(arr,0,0,-1,0); +console.log(arr); //should be [-1,0,1,2,3] + +// replace 1 element +arr = [1,2,3] +splice(arr,1,1,55); +console.log(arr); //should be [1,55,3] + +// delete all elements from index to end +arr = [1,2,3,4,5] +splice(arr,1); +console.log(arr); //should be [1] + +// returns array of deleted elements +arr = [1,2,3] +let deleted = splice(arr,1); +console.log(deleted); //should be [2,3] + +// returns an array of the deleted element (1 element) +arr = [1,2,3] +deleted = splice(arr,1,1); +console.log(deleted); //should be [2] + +// returns an empty array when no elements are deleted +arr = [1,2,3] +deleted = splice(arr,1,0,5); +console.log(deleted); //should be [] +``` + + + + +If you want more challenge you can override the native splice function like this +```js +// overriding the native splice method +Array.prototype.splice = function(){ + // write your code here +} +``` + + +and then run these tests: +```js +// remove 1 element +let arr = [1,2,3] +arr.splice(0,1); +console.log(arr); //should be [2,3] + +// add 1 element +arr = [1,2,3] +arr.splice(0,0,0); +console.log(arr); //should be [0,1,2,3] + +// replace 1 element +arr = [1,2,3] +arr.splice(1,1,55); +console.log(arr); //should be [1,55,3] + +// delete all elements from index to end +arr = [1,2,3,4,5] +arr.splice(1); +console.log(arr); //should be [1] + +// returns array of deleted elements +arr = [1,2,3] +let deleted = arr.splice(1); +console.log(deleted); //should be [2,3] + +// returns an array of the deleted element (1 element) +arr = [1,2,3] +deleted = arr.splice(1,1); +console.log(deleted); //should be [2] + +// returns an empty array when no elements are deleted +arr = [1,2,3] +deleted = arr.splice(1,0,5); +console.log(deleted); //should be [] +``` + +Note: Place your final code in the `splice.js` file which is in the root folder here on Codio (see on the left side of your screen) + +Good Luck! \ No newline at end of file diff --git a/css-extra/README.md b/css-extra/README.md new file mode 100644 index 0000000..de78212 --- /dev/null +++ b/css-extra/README.md @@ -0,0 +1,5 @@ +# Css Extra + +- [Css 3 Variables Animations](css-3--variables---animations/README.md) +- [Css Less](css-less/README.md) +- [Materialize Css](materialize-css/README.md) \ No newline at end of file diff --git a/css-extra/css-3--variables---animations/README.md b/css-extra/css-3--variables---animations/README.md new file mode 100644 index 0000000..a345e37 --- /dev/null +++ b/css-extra/css-3--variables---animations/README.md @@ -0,0 +1,3 @@ +# Variables Overview + + \ No newline at end of file diff --git a/css-extra/css-less/README.md b/css-extra/css-less/README.md new file mode 100644 index 0000000..2123d7b --- /dev/null +++ b/css-extra/css-less/README.md @@ -0,0 +1,47 @@ +# Intro + +For all the power of CSS3, sometimes we need more. And, ironically, [CSS Less](http://lesscss.org/)gives us more. It stands for **Le**aner **S**tyle **S**heets. + + + +CSS Less is one of the number of **CSS pre-processors** out there which allow us to write "plain" CSS with more convenience, then gets **compiled** back directly into CSS. + + + +Note that **the browser always reads normal CSS**, but when working with CSS Less we will write in a `.less` file. + + + +CSS Less gives us quite a few tools, but in this lesson we will focus on: + +- Nesting +- Extend +- Mixins + + + +---------- + + + +#### **SETUP** + + + +Since CSS Less is not a browser-native technology, we have to first install it, and do a bit of setup in our IDE. + + + +Conveniently, **you can** **`npm install less`** directly into your project - and there is **no need to require it** anywhere. + + + +The next part of the setup is to **install the** [**Easy Less**](https://github.com/mrcrowl/vscode-easy-less) **extension in VS Code**. This will automatically compile (i.e. "translate") your `.less` files into `.css` files whenever you save. + + + +That's all! Now **create a folder called** `artisan`**, and in it an** **`index.html`** **and** **`style.less`** **file**, and let's begin. + + + +**Note:** you do **not** have to create a `.css` file - the extension will create it for you (once you refresh your VS Code), but you do **have to connect your HTML and CSS** files regularly, to your `.css` file which doesn't exist yet. And henceforth in this lesson, **only write CSS code in your** **`.less`** **file**. \ No newline at end of file diff --git a/css-extra/materialize-css/README.md b/css-extra/materialize-css/README.md new file mode 100644 index 0000000..c74fed8 --- /dev/null +++ b/css-extra/materialize-css/README.md @@ -0,0 +1,3 @@ +# Materialize Overview + + \ No newline at end of file diff --git a/design/README.md b/design/README.md new file mode 100644 index 0000000..6468c1e --- /dev/null +++ b/design/README.md @@ -0,0 +1,6 @@ +# Design + +- [Behavioral Patterns](behavioral-patterns/README.md) +- [Creational Patterns](creational-patterns/README.md) +- [Solid Principles](solid-principles/README.md) +- [Structural Patterns](structural-patterns/README.md) \ No newline at end of file diff --git a/design/behavioral-patterns/README.md b/design/behavioral-patterns/README.md new file mode 100644 index 0000000..f096f41 --- /dev/null +++ b/design/behavioral-patterns/README.md @@ -0,0 +1,7 @@ +# Intro + +In this lesson we are going to talk about behavioral design patterns. +Behavioral patterns are the patterns related to how objects behave and communicate with each other. +We are going to dive into the command pattern and the visitor pattern. + +Let's go! \ No newline at end of file diff --git a/design/creational-patterns/README.md b/design/creational-patterns/README.md new file mode 100644 index 0000000..ed4f28c --- /dev/null +++ b/design/creational-patterns/README.md @@ -0,0 +1,10 @@ +# Intro + +Creational design patterns are those patterns that help us with creating objects a certain way or with certain needs. + +We are going to deep dive into these patterns: +- Singleton +- Builder +- Factory + +Good luck \ No newline at end of file diff --git a/design/solid-principles/README.md b/design/solid-principles/README.md new file mode 100644 index 0000000..91f34c4 --- /dev/null +++ b/design/solid-principles/README.md @@ -0,0 +1,44 @@ +# Intro + +You must have noticed by now, that there are many ways we can write an implementation for a specific task. +These different implementations will affect the code's efficiency, clarity and more. +In this lesson we are going to explore the impact of the design of our code on the maintenance, flexibility and safety of our program. + +We have mentioned principles that are important for high quality code such **generic code**. + +For example this code is what we call **hard coded**, and therefor not very flexible. +``` + +function initArr() { + let numbers = [] + + for (let i = 0; i < 3; i++) { + numbers[i] = i + 1 + } + return numbers +} +``` + +What if we want to initialize the array with numbers from 10 to 20? + +In order to make this code more generic we would want to pass the arguments of start and end to the `initArr` function. + +```js +function initArr(start, end) { + let numbers = [] + + for (let i = 0; start <= end; i++, start++) { + numbers[i] = start + } + return numbers +} +``` + +In this case we are thinking about the future uses of this code, what other cases it might need to support, such as different numbers we might want to initialize in the array, and which code modifications will we have to do to support these changes. So principles like generic code, helps us write more flexible and easy to maintain code! + +# OOD +In this chapter we will focus on **OOD** (Object Oriented Design) principles. We are going to focus on modules (which can be Classes or built-in Objects) and their interaction with one another. + +# SOLID +There are many approaches and principles to guide us, but now we will focus on 5 important principles called **SOLID principles**. +These principles were introduced by Robert C. Martin, aka Uncle Bob in 2000, and swiftly became very popular. \ No newline at end of file diff --git a/design/structural-patterns/README.md b/design/structural-patterns/README.md new file mode 100644 index 0000000..1f70de3 --- /dev/null +++ b/design/structural-patterns/README.md @@ -0,0 +1,90 @@ +# Adapter + +An Adapter pattern acts as a connector between two incompatible interfaces that otherwise cannot be connected directly. An Adapter wraps an existing class with a new interface so that it becomes compatible with the client’s interface. + +Using this pattern is necessary mostly when using closed classes that cannot be modified. +We can wrap this class using composition, and add the functionality required by the interface. + +Lets look at an example (based on geeksforgeeks.org). +In this example, we have `Bird`s, who can `fly()` and `makeSound()`. +We also have a `ToyDuck` which can `squeak()`. + +This is the `Bird` interface: +``` +interface Bird { + fly(): void; + makeSound(): void; +} +``` +This is the `Sparrow` class which implements the `Bird` interface: + +``` +class Sparrow implements Bird { + fly(): void { + console.log('Flying'); + } + makeSound(): void { + console.log('Chirp Chirp'); + } +} +``` +This is the `ToyDuck` interface: +``` +interface ToyDuck { + squeak(): void; +} +``` +And a `PlasticDuck` that implements the `ToyDuck` interface: +``` +class PlasticDuck implements ToyDuck { + squeak(): void { + console.log('Squeak'); + } +} +``` +These two interfaces, and the two implementing classes, have nothing to do with each other. +They don't have common methods or any relationship. +But what if, for our own reasons, we wanted to use a `Bird` as a `ToyDuck`? +Well, then we will need an adapter. + +``` +class BirdAdapter implements ToyDuck { + private bird: Bird; + + constructor(bird: Bird) { + this.bird = bird; + } + + squeak(): void { + this.bird.makeSound(); + } +} +``` +This adapter wraps a `Bird`, and implements `ToyDuck`. +It uses the `Bird`'s `makeSound()` to implement the `ToyDuck` squeak. +Meaning that the client can now use a `Bird` as a `ToyDuck` since it now has the ability to `squeak()`. +For the client to use a `Bird` as a `ToyDuck`, it only needs to wrap it with our `BirdAdapter`: +``` +const sparrow: Sparrow = new Sparrow(); +const toyDuck: ToyDuck = new PlasticDuck(); + +const birdAdapter: BirdAdapter = new BirdAdapter(sparrow); + +console.log("Sparrow:"); +sparrow.fly(); +sparrow.makeSound(); + +console.log("ToyDuck:"); +toyDuck.squeak(); + +console.log("BirdAdapter:"); +birdAdapter.squeak();``` +This code prints: +``` +Sparrow: +Flying +Chirp Chirp +ToyDuck: +Squeak +BirdAdapter: +Chirp Chirp \ No newline at end of file diff --git a/design/structural-patterns/_sidebar.md b/design/structural-patterns/_sidebar.md new file mode 100644 index 0000000..e36ba87 --- /dev/null +++ b/design/structural-patterns/_sidebar.md @@ -0,0 +1,10 @@ +- [⬅ Back to Design](../README.md) + +- [Adapter](./Adapter.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Decorator](./Decorator.md) +- [Exercise](./Exercise.md) +- [Facade](./Facade.md) +- [Intro](./Intro.md) +- [Proxy](./Proxy.md) +- [Spot Check](./Spot-Check.md) \ No newline at end of file diff --git a/environment-setup/README.md b/environment-setup/README.md new file mode 100644 index 0000000..6cdeaf0 --- /dev/null +++ b/environment-setup/README.md @@ -0,0 +1,10 @@ +# Environment Setup + +- [Git](git/README.md) +- [Github Setup](github-setup/README.md) +- [Mongodb](mongodb/README.md) +- [Node](node/README.md) +- [Postman](postman/README.md) +- [Slack](slack/README.md) +- [Visual Code](visual-code/README.md) +- [Zoom](zoom/README.md) \ No newline at end of file diff --git a/environment-setup/git/README.md b/environment-setup/git/README.md new file mode 100644 index 0000000..fa8ca5f --- /dev/null +++ b/environment-setup/git/README.md @@ -0,0 +1,37 @@ +# Pre Install + +Before we start with git, we recommend you to install a text editor to make working with git simpler. + + + +By default git works with the built-in text editor Vim. + +As many people find Vim not very friendly, we recommend to install one of the following options. + + + +---------- + + + +**Windows users:** + +install at: [https://notepad-plus-plus.org/download/v7.5.9.html](https://notepad-plus-plus.org/download/v7.5.9.html%C2%A0) + + + +Or just google “Notepad++” and take the latest version. + + + + + +---------- + + + +**Mac users:** + +install Atom editor: [https://atom.io/](https://atom.io/%C2%A0) + +Or Sublime: [https://www.sublimetext.com/3](https://www.sublimetext.com/3) \ No newline at end of file diff --git a/environment-setup/github-setup/README.md b/environment-setup/github-setup/README.md new file mode 100644 index 0000000..18cc24d --- /dev/null +++ b/environment-setup/github-setup/README.md @@ -0,0 +1,19 @@ +# Intro & Version Control + +### Git vs Github + + +**Git** is software that we'll install on our computers (aka we'll be installing it locally). Once installed we can start to use it for local version control ("local" meaning for the files on your computer). Local Version control will track the changes you make on your computer. But that's just half the story. We'll need somewhere to share the code so that many people can work on it at the same time. + + + +Along with the local software, we'll use remote hosting site called **[Github](https://github.com/)** to help us in all our version control endeavors. It provides online storage for your files and it is based on Git so transferring files from your local Git repository to your remote repository on GitHub, or vice versa is really easy. Try not to confuse Git and Github. + + + +- **Git** is a free and open-source version control system. It exists on your computer (once you add it) and is primarily operated via the command-line. +- **Github** is a company that provides a service. They use Git to provide cloud-based version control. More than that, they are a community that provides a bunch of useful tools and mechanisms to aid development work. + + + +And if you were wondering, [alternatives](https://blog.idrsolutions.com/2014/03/top-5-free-hosted-version-control-sites-compared/) to Github do exist, but remember Github is used more than almost all of them. \ No newline at end of file diff --git a/environment-setup/mongodb/README.md b/environment-setup/mongodb/README.md new file mode 100644 index 0000000..537f6ed --- /dev/null +++ b/environment-setup/mongodb/README.md @@ -0,0 +1,73 @@ +# Basic Commands + +The most basic command allows us to see what databases we have available to us. The command looks like this: + + + + +```bash +show dbs +``` + + + +Initially, this should only show the default DBs, something like this: + + + +```bash +admin 0.000GB +config 0.000GB +local 0.000GB +``` + + +To create (or access) our own DB, we have the `use` command: + + + + +```bash +use test-db +``` + + +This command will either create a new database called `test-db`, or access an existing one if you've already created it. + +Now however (because it didn't exist before), if you `show dbs` again, you won't see anything new. This is because **Mongo will only show you databases that have some data in them**. + +As such, let's add our first "document" (we'll explain what this means later): + + + + +```bash +db.firstCollection.insert({name: "You"}) +``` + + +Now if you `show dbs` again you will see your `test-db` listed. Not only that, but if you execute this command: + + + + +```bash +show collections +``` + + +Then you'll see `firstCollection` output - again, we'll explain what a collection is in a separate lesson. + +But finally, to see the data you've just created, you can run this command: + + + + +```bash + db.firstCollection.find({}) +``` +---------- + + + +That's it - if you've reached this point, you're ready to start learning Mongo! \ No newline at end of file diff --git a/environment-setup/mongodb/_sidebar.md b/environment-setup/mongodb/_sidebar.md new file mode 100644 index 0000000..b1d70ed --- /dev/null +++ b/environment-setup/mongodb/_sidebar.md @@ -0,0 +1,5 @@ +- [⬅ Back to Environment Setup](../README.md) + +- [Basic Commands](./Basic-Commands.md) +- [Install Mongodb](./Install-MongoDB.md) +- [Run Mongodb](./Run-MongoDB.md) \ No newline at end of file diff --git a/environment-setup/node/README.md b/environment-setup/node/README.md new file mode 100644 index 0000000..49eab12 --- /dev/null +++ b/environment-setup/node/README.md @@ -0,0 +1,7 @@ +# Intro + +#### **NODE JS** + + + +Node JS (a.k.a Node.js, node.js, node js) is a **JavaScript runtime environment** - this just means that it's somewhere we can run JS code that's not the browser. We'll just call it Node* for simplicity. \ No newline at end of file diff --git a/environment-setup/postman/README.md b/environment-setup/postman/README.md new file mode 100644 index 0000000..18d6149 --- /dev/null +++ b/environment-setup/postman/README.md @@ -0,0 +1,5 @@ +# Install Postman + +[Postman](https://www.postman.com/) is a software development tool. It enables people to test calls to APIs. You'll find out more all about that during the course. For now you just need to download this software. + +So go ahead and [download Postman](https://www.getpostman.com/apps), then install it on your computer. \ No newline at end of file diff --git a/environment-setup/slack/README.md b/environment-setup/slack/README.md new file mode 100644 index 0000000..b237cfb --- /dev/null +++ b/environment-setup/slack/README.md @@ -0,0 +1,24 @@ +# Communication + +All of our communication will be done through slack. + +once you are done with the previous steps. make sure to create a private chat between you and the Bootcamp Staff. + +communication with the bootcamp staff will be done in that chat, that includes updating staff on any matter including **progress** in the **Codio**, **Tardiness** and **emergencies**. + +you can do so by following the next steps, next to The **Direct Message** title if you hover you can see a **"+"** icon. + +![](./slack1.png) + +click the icon and it should prompt a search bar. + +![](./slack2.png) + +in the search bar, look up the **Bootcamp staff's names**. +for example : + +- **instructor** :Lotem Hiki +- **TA**: Ameer Jamal + +after adding both of them. you will create a group chat which you will communicate with the Bootcamp staff through. +Send a **"Done"** message in the chat to let the staff know that you have done it. \ No newline at end of file diff --git a/environment-setup/slack/_sidebar.md b/environment-setup/slack/_sidebar.md new file mode 100644 index 0000000..056919c --- /dev/null +++ b/environment-setup/slack/_sidebar.md @@ -0,0 +1,4 @@ +- [⬅ Back to Environment Setup](../README.md) + +- [Communication](./Communication.md) +- [Setup](./Setup.md) \ No newline at end of file diff --git a/environment-setup/visual-code/README.md b/environment-setup/visual-code/README.md new file mode 100644 index 0000000..08ca063 --- /dev/null +++ b/environment-setup/visual-code/README.md @@ -0,0 +1,7 @@ +# Installing + +We will be working with Visual Code Editor in the bootcamp. +Theoretically, we could write our code anywhere so long as we use the proper file extension. +However, we will be using this editor - please [download this](https://code.visualstudio.com/download) as well and make sure it's set up before the first day of class. + +follow instructions on the website if you are struggling to install it. it should be very simple, but if you do struggle do contact the **Bootcamp TA** \ No newline at end of file diff --git a/environment-setup/zoom/README.md b/environment-setup/zoom/README.md new file mode 100644 index 0000000..f072174 --- /dev/null +++ b/environment-setup/zoom/README.md @@ -0,0 +1,4 @@ +# Installing + +We will be conduciting our online Meetings via the [ZOOM App](https://zoom.us/download). +So please make sure to download it to your local machine. \ No newline at end of file diff --git a/extended-content/README.md b/extended-content/README.md new file mode 100644 index 0000000..6af2b61 --- /dev/null +++ b/extended-content/README.md @@ -0,0 +1,14 @@ +# Extended Content + +- [Calc In Css](calc-in-css/README.md) +- [Chrome Extensions](chrome-extensions/README.md) +- [Destructuring Spread Nullish Coalescing](destructuring--spread---nullish-coalescing/README.md) +- [Docker](docker/README.md) +- [Elastic Search](elastic-search/README.md) +- [Flexbox](flexbox/README.md) +- [Http Status Code](http-status-code/README.md) +- [Redis](redis/README.md) +- [Regex](regex/README.md) +- [Rest Api](rest-api/README.md) +- [Rgba](rgba/README.md) +- [Sessions](sessions/README.md) \ No newline at end of file diff --git a/extended-content/calc-in-css/README.md b/extended-content/calc-in-css/README.md new file mode 100644 index 0000000..1966795 --- /dev/null +++ b/extended-content/calc-in-css/README.md @@ -0,0 +1,18 @@ +# Calc + +Welcome to your **First EC** + +In these units you are asked to use external resources to research and understand the topic at hand + +an Important **skill** to acquire during our Bootcamp is the ability to be self-dependant. + +![](./own.jpeg) + +## But here are some links: + + +- [W3School](https://www.w3schools.com/cssref/func_calc.asp) + +- [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/calc()) + +- [CSS-Tricks](https://css-tricks.com/a-complete-guide-to-calc-in-css/) \ No newline at end of file diff --git a/extended-content/chrome-extensions/README.md b/extended-content/chrome-extensions/README.md new file mode 100644 index 0000000..0f6f022 --- /dev/null +++ b/extended-content/chrome-extensions/README.md @@ -0,0 +1,4 @@ +# What is a Google Chrome Extension?
 + +- Google Chrome extensions are programs that can be installed into Chrome in order to change the browser's functionality +- This includes adding new features to Chrome or modifying the existing behavior of the program itself to make it more convenient for the user. \ No newline at end of file diff --git a/extended-content/destructuring--spread---nullish-coalescing/README.md b/extended-content/destructuring--spread---nullish-coalescing/README.md new file mode 100644 index 0000000..f8c51fb --- /dev/null +++ b/extended-content/destructuring--spread---nullish-coalescing/README.md @@ -0,0 +1,17 @@ +# Destructuring & Spread and Nullish coalescing + +There are alot of different tools that can offer us different functionalities which are extremely useful. + + + +Some of these tools are the following operators : + +- [Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) + +- [Spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) + +- [Nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) + +![](./spread.jpeg) + +Lets get started! \ No newline at end of file diff --git a/extended-content/docker/README.md b/extended-content/docker/README.md new file mode 100644 index 0000000..82fbd27 --- /dev/null +++ b/extended-content/docker/README.md @@ -0,0 +1,3 @@ +# Link + +[Download the presentation](./RedisEc.pptx) \ No newline at end of file diff --git a/extended-content/elastic-search/README.md b/extended-content/elastic-search/README.md new file mode 100644 index 0000000..60bb29f --- /dev/null +++ b/extended-content/elastic-search/README.md @@ -0,0 +1,17 @@ +# Links + +Here are some links on the subject: + +Downloads: +- https://www.elastic.co/downloads/elasticsearch + +- https://www.elastic.co/downloads/kibana + +Query examples: +- https://dzone.com/articles/23-useful-elasticsearch-example-queries + +Student's project example: + +- https://github.com/afeefaz/Elastic-search-demo + +Also see attached to this Codio lesson a presentation about Elastic search. \ No newline at end of file diff --git a/extended-content/flexbox/README.md b/extended-content/flexbox/README.md new file mode 100644 index 0000000..6744d9c --- /dev/null +++ b/extended-content/flexbox/README.md @@ -0,0 +1,13 @@ +# Reading Materials + +**CSS flexbox** layout allows you to easily format HTML. +Flexbox makes it simple to align items vertically and horizontally using rows and columns, Items will "flex" to different sizes to fill the space. +It makes responsive design easier. + +Helpful Links: + +- [CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + +- [W3School](https://www.w3schools.com/css/css3_flexbox.asp) + +- [Learn Flexbox in 15min](https://www.youtube.com/watch?v=fYq5PXgSsbE&t=664s) \ No newline at end of file diff --git a/extended-content/http-status-code/README.md b/extended-content/http-status-code/README.md new file mode 100644 index 0000000..5e34760 --- /dev/null +++ b/extended-content/http-status-code/README.md @@ -0,0 +1,3 @@ +# Presentation + +See [attached](https://docs.google.com/presentation/d/1aVbOTOd1M2e2bEew9lqHMj2B3FaYMfQBOXxbRpgaok4/edit#slide=id.gdfc6fdff6f_0_484) is a presentation on Http Status Codes. \ No newline at end of file diff --git a/extended-content/redis/README.md b/extended-content/redis/README.md new file mode 100644 index 0000000..9a427d9 --- /dev/null +++ b/extended-content/redis/README.md @@ -0,0 +1,3 @@ +# Link + +See attached to this Codio lesson is a presentation \ No newline at end of file diff --git a/extended-content/regex/README.md b/extended-content/regex/README.md new file mode 100644 index 0000000..c803f3b --- /dev/null +++ b/extended-content/regex/README.md @@ -0,0 +1,17 @@ +# Reading Materials + +Regex is a sequence of characters and symbols that specifies a search pattern. + +Pattern are usually used for: +- search / replace / rearrange parts of the string. +- Validation on Strings. +- Verifying String structure. +- Splitting Strings into Tokens. + +Here are some recommanded links: + +- [Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) + +- [W3School](https://www.w3schools.com/jsref/jsref_obj_regexp.asp) + +- [RegexR](https://regexr.com/) \ No newline at end of file diff --git a/extended-content/rest-api/README.md b/extended-content/rest-api/README.md new file mode 100644 index 0000000..747e568 --- /dev/null +++ b/extended-content/rest-api/README.md @@ -0,0 +1,9 @@ +# Intro + +Here is an article that gives best practices for REST conventions: + +https://florimond.dev/en/posts/2018/08/restful-api-design-13-best-practices-to-make-your-users-happy/ + +Focus especially on: + +1,2,3,5,6,7,8,10 \ No newline at end of file diff --git a/extended-content/rest-api/_sidebar.md b/extended-content/rest-api/_sidebar.md new file mode 100644 index 0000000..f65bc2f --- /dev/null +++ b/extended-content/rest-api/_sidebar.md @@ -0,0 +1,4 @@ +- [⬅ Back to Extended Content](../README.md) + +- [Intro](./Intro.md) +- [Links](./Links.md) \ No newline at end of file diff --git a/extended-content/rgba/README.md b/extended-content/rgba/README.md new file mode 100644 index 0000000..cb97fa8 --- /dev/null +++ b/extended-content/rgba/README.md @@ -0,0 +1,7 @@ +# RGBA + +In this lesson you will self-learn about CSS colors. + +Here is a link to start from: [rgba](https://www.webfx.com/blog/web-design/rgba/) + +Feel free to search for more info and examples! \ No newline at end of file diff --git a/extended-content/sessions/README.md b/extended-content/sessions/README.md new file mode 100644 index 0000000..d1828bb --- /dev/null +++ b/extended-content/sessions/README.md @@ -0,0 +1,3 @@ +# General + +See attached to this Codio lesson are two presentations about sessions and about cookies \ No newline at end of file diff --git a/git-collab/README.md b/git-collab/README.md new file mode 100644 index 0000000..df4162d --- /dev/null +++ b/git-collab/README.md @@ -0,0 +1,5 @@ +# Git Collab + +- [Git Branches](git-branches/README.md) +- [Git Collaboration](git-collaboration/README.md) +- [Setting Up Your Github Projects](setting-up-your-github-projects/README.md) \ No newline at end of file diff --git a/git-collab/git-branches/README.md b/git-collab/git-branches/README.md new file mode 100644 index 0000000..47449d4 --- /dev/null +++ b/git-collab/git-branches/README.md @@ -0,0 +1,3 @@ +# Local Branches - Overview + + \ No newline at end of file diff --git a/git-collab/git-collaboration/README.md b/git-collab/git-collaboration/README.md new file mode 100644 index 0000000..1b7cd94 --- /dev/null +++ b/git-collab/git-collaboration/README.md @@ -0,0 +1,3 @@ +# Collaboration Overview + + \ No newline at end of file diff --git a/git-collab/setting-up-your-github-projects/README.md b/git-collab/setting-up-your-github-projects/README.md new file mode 100644 index 0000000..0775469 --- /dev/null +++ b/git-collab/setting-up-your-github-projects/README.md @@ -0,0 +1,7 @@ +# Intro + +Github is a powerful tool. We can use it to backup our code, collaborate with others, and use it as our portfolio. In this lesson, we'll go through how to set up your projects on Github so that they stand out. + + + +We'll also talk about a few other things to help you build your profile. \ No newline at end of file diff --git a/intro/README.md b/intro/README.md new file mode 100644 index 0000000..4b309fb --- /dev/null +++ b/intro/README.md @@ -0,0 +1,5 @@ +# Intro + +- [Course Syllabus](course-syllabus/README.md) +- [File Setup Basics](file-setup-basics/README.md) +- [Zoom Onboarding](zoom-onboarding/README.md) \ No newline at end of file diff --git a/intro/course-syllabus/README.md b/intro/course-syllabus/README.md new file mode 100644 index 0000000..7afb757 --- /dev/null +++ b/intro/course-syllabus/README.md @@ -0,0 +1,4 @@ +# Page 1 + +# Syllabus +![.guides/syllabus](.guides/syllabus.png) \ No newline at end of file diff --git a/intro/course-syllabus/_sidebar.md b/intro/course-syllabus/_sidebar.md new file mode 100644 index 0000000..6ed9545 --- /dev/null +++ b/intro/course-syllabus/_sidebar.md @@ -0,0 +1,3 @@ +- [⬅ Back to Intro](../README.md) + +- [Page 1](./Page-1.md) \ No newline at end of file diff --git a/intro/file-setup-basics/README.md b/intro/file-setup-basics/README.md new file mode 100644 index 0000000..4a6a290 --- /dev/null +++ b/intro/file-setup-basics/README.md @@ -0,0 +1,7 @@ +# Intro + +This quick lesson is all about setup. We'll learn: + +- How to navigate through your computer from the command-line. +- How to create new files/folders from the command-line. +- The setup code (boilerplate) required for every website we build. \ No newline at end of file diff --git a/intro/zoom-onboarding/README.md b/intro/zoom-onboarding/README.md new file mode 100644 index 0000000..7359047 --- /dev/null +++ b/intro/zoom-onboarding/README.md @@ -0,0 +1,23 @@ +# Zoooooom + +Hi everyone! + + + +Since we are going to be using zoom in some of our trainings, we've created this short tutorial that show a couple of important features for the student. + + + +In particular, please note that you can: + +- "Raise your hand", and +- Chat with others +-- Privately or publicly + + + +Notice that the trainer will always receive a notification when you "raise your hand", but may not get to you right away as s/he is wrapping up an important point - but don't worry, your questions are important to us =] + + + +Enjoy the video in the next section - we tried to keep it professional [🐢](https://emojipedia.org/turtle/) \ No newline at end of file diff --git a/mid-exam/README.md b/mid-exam/README.md new file mode 100644 index 0000000..875cee8 --- /dev/null +++ b/mid-exam/README.md @@ -0,0 +1,4 @@ +# Mid Exam + +- [Mid Exam Retake ](mid-exam--retake-/README.md) +- [Mid Exam N](mid-exam-n/README.md) \ No newline at end of file diff --git a/mid-exam/_sidebar.md b/mid-exam/_sidebar.md new file mode 100644 index 0000000..0053e40 --- /dev/null +++ b/mid-exam/_sidebar.md @@ -0,0 +1,3 @@ +- Mid Exam + - [Mid Exam Retake ](mid-exam--retake-/README.md) + - [Mid Exam N](mid-exam-n/README.md) \ No newline at end of file diff --git a/mid-exam/mid-exam--retake-/README.md b/mid-exam/mid-exam--retake-/README.md new file mode 100644 index 0000000..6b044b5 --- /dev/null +++ b/mid-exam/mid-exam--retake-/README.md @@ -0,0 +1,10 @@ +# Commit And Push + +If you are about to push code that doesn't work, **make a note** in the `commit` message. Something like "works until renderer" + + +Push your project to **Github** and send it to the Bootcamp staff ! + +![](https://bassemgirgis.files.wordpress.com/2014/09/onemorepush.jpg) + +{Submit Answer!|assessment}(free-text-285587972) \ No newline at end of file diff --git a/mid-exam/mid-exam--retake-/_sidebar.md b/mid-exam/mid-exam--retake-/_sidebar.md new file mode 100644 index 0000000..29e536c --- /dev/null +++ b/mid-exam/mid-exam--retake-/_sidebar.md @@ -0,0 +1,9 @@ +- [⬅ Back to Mid Exam](../README.md) + +- [Commit And Push ](./Commit-and-Push-.md) +- [Done](./Done.md) +- [Feature Error Handling](./Feature---Error-Handling.md) +- [Feature Exclude](./Feature---Exclude.md) +- [Intro](./Intro.md) +- [Page 1](./Page-1.md) +- [Page 2](./Page-2.md) \ No newline at end of file diff --git a/mongodb/README.md b/mongodb/README.md new file mode 100644 index 0000000..9c18f10 --- /dev/null +++ b/mongodb/README.md @@ -0,0 +1,9 @@ +# Mongodb + +- [Installing Local Mongo Db](installing-local-mongo-db/README.md) +- [Intro To Databases](intro-to-databases/README.md) +- [Mongo Db Intro](mongo-db-intro/README.md) +- [Mongoose Querying Practice](mongoose---querying-practice/README.md) +- [Mongoose Expenses Project](mongoose-expenses-project/README.md) +- [Mongoose Intro](mongoose-intro/README.md) +- [Mongoose Population](mongoose-population/README.md) \ No newline at end of file diff --git a/mongodb/installing-local-mongo-db/README.md b/mongodb/installing-local-mongo-db/README.md new file mode 100644 index 0000000..91b088a --- /dev/null +++ b/mongodb/installing-local-mongo-db/README.md @@ -0,0 +1,39 @@ +# Step 1 Install + +Depending on your computer, there are different ways to install Mongo: + +|||important +## MongoDB V5 + +Please make sure to download V5. you can use this [link as reference](https://www.mongodb.com/download-center/community/releases/archive#:~:text=Archive%3A%20mongodb%2Dwindows%2Dx86_64%2D5.0.14.zip) to see all versions. +||| + +**Windows**: + +- Go to [mongo's website](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/#download-mdb-edition) and follow the download instructions with the following notes: +- At a certain point you will be asked to install MongoD as a Service - **do not** do this +- You will also be prompted to install MongoDB Compass; this is optional +- Before running the server for the first time, we must create the directory to which the MongoDB server will write its data +- By default, this folder is `C:\data\db` +- As such, go to your `C:\` drive, and create a `data` folder. Inside of `data`, create a `db` folder +- We can now run Mongo commands from the directory where we installed MongoDB, but we would like to be able to run these commands from anywhere +- If you know what it means to add the mongo path to your computer's global variables, then go ahead and do so +- Otherwise, see [this video](https://youtu.be/sBdaRlgb4N8?t=90) for instructions on how to do that +- If you are windows 10 users see [this video](https://youtu.be/ll2tY6KH8Tk?t=141) (Watch until 4:45 where he starts talking about mongo service) +- Notice that the first thing we see in the video is where our Mongo files were saved +- Also notice that once he finishes explaining "adding the path", he talks about creating the `data\db` directory which we've already done + + + +**Mac:** + +Since Apple updated Mac OS to Catalina, there are few steps to do. follow [this article](https://medium.com/better-programming/installing-mongodb-on-macos-catalina-aab1cbe0c836) to install MongoDB correctly. note that this article is for users that have Catalina version, if you have prior version of Mac OS, use the following instruction: + +- The easiest way to install MongoDB on a Mac is through Homebrew. If you don't already have Homebrew installed on your Mac by now, enter the below code into a terminal window (without the "$"): +- `$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"` +- then after Homebrew is finished installing: +- `$ brew update` +- `$ brew install mongodb` +- Before running the server for the first time, we must create the directory to which MongoDB server will write its data. By default, this folder is `\data\db` on Mac. You need to create this directory as with the correct permissions so type: `mkdir -p /data/db`. Create those folders now. +- Ensure that user account running MongoDB has the proper directory permissions by running these commands: +- `sudo chown -R id -un /data/db` and write your password down \ No newline at end of file diff --git a/mongodb/installing-local-mongo-db/_sidebar.md b/mongodb/installing-local-mongo-db/_sidebar.md new file mode 100644 index 0000000..a90edda --- /dev/null +++ b/mongodb/installing-local-mongo-db/_sidebar.md @@ -0,0 +1,5 @@ +- [⬅ Back to Mongodb](../README.md) + +- [Step 1 Install](./Step-1--Install.md) +- [Step 2 Run](./Step-2--Run.md) +- [Step 3 Basic Commands](./Step-3--Basic-Commands.md) \ No newline at end of file diff --git a/mongodb/intro-to-databases/README.md b/mongodb/intro-to-databases/README.md new file mode 100644 index 0000000..b28699d --- /dev/null +++ b/mongodb/intro-to-databases/README.md @@ -0,0 +1,11 @@ +# Intro + +This short lesson will be a primer to our work with databases. In it we'll learn + +- A few common DB (database) terms +- How to think about databases +- Where databases fit in our app architecture + + + +There won't be any exercises, but **these are important concepts you must understand** before you start working with DBs. \ No newline at end of file diff --git a/mongodb/mongo-db-intro/README.md b/mongodb/mongo-db-intro/README.md new file mode 100644 index 0000000..8518c37 --- /dev/null +++ b/mongodb/mongo-db-intro/README.md @@ -0,0 +1,3 @@ +# Mongo Terminology + + \ No newline at end of file diff --git a/mongodb/mongoose---querying-practice/README.md b/mongodb/mongoose---querying-practice/README.md new file mode 100644 index 0000000..3658fdd --- /dev/null +++ b/mongodb/mongoose---querying-practice/README.md @@ -0,0 +1,7 @@ +# Intro + +Alright, you've got a grasp on Mongo and you've learned the basics of using Mongoose to query the DB with our servers. + + + +This lesson is all about practicing what we know and learning how to do more advanced DB queries with Mongoose. \ No newline at end of file diff --git a/mongodb/mongoose-expenses-project/README.md b/mongodb/mongoose-expenses-project/README.md new file mode 100644 index 0000000..7152620 --- /dev/null +++ b/mongodb/mongoose-expenses-project/README.md @@ -0,0 +1,14 @@ +# Intro + +Now that you are one with the Mongeese, you'll be building a back-end only expense tracker. This project will use Express, Mongoose, CRUD operations, and a whole lot of pazzaz. + + + +You'll be able to add new expenses to your tracker, see how much money you've spent on a given category or between certain dates. Let's get started. + + + +This is a back-end only project, so everything you make will be server-side, and you will interact with the server through Postman. + + +![.guides/img/best-expense-tracker-apps-android-mint](./best-expense-tracker-apps-android-mint.jpg) \ No newline at end of file diff --git a/mongodb/mongoose-intro/README.md b/mongodb/mongoose-intro/README.md new file mode 100644 index 0000000..c6d3cb8 --- /dev/null +++ b/mongodb/mongoose-intro/README.md @@ -0,0 +1,59 @@ +# Crud Create + +Now that we have a `p1` that represents a document based off our schema, we can run this command: + +```js +p1.save() +``` + + +And that, finally, saves data to our Mongo DB - the **C** in **C**RUD: Create. + + + +To check that this actually exists in the DB, go ahead and run the **Mongo command** (remember to use the correct collection!): + + + +```js +db.people.find({}) +``` + + +Of course, **run that in the mongo shell** - do **not** try that in your `.js` file as you will get an error. + + + +You should see something similar to this output: + + + +```js +[ + { + "_id": { + "$oid": "5c16bbe03f02d41e78416a4d" + }, + "firstName": "Shoobert", + "lastName": "Dillard", + "age": 25, + "__v": 0 + } +] +``` + + +At this point you should be wondering, _where the heck did the_ `_people_` _collection come from?_ + + + +The answer is that **mongoose will create a collection for us, and name it based off our Model Name** - since we called our model `Person`, mongoose was clever enough to create a `people` collection for us, and store our document there. + + + +If, instead, you want to name your collection on your own, you can create a model like this instead: + + +```js +const Person = mongoose.model('person', personSchema, 'persons'); //<== persons will be the name of the collection +``` \ No newline at end of file diff --git a/mongodb/mongoose-intro/_sidebar.md b/mongodb/mongoose-intro/_sidebar.md new file mode 100644 index 0000000..cefb62b --- /dev/null +++ b/mongodb/mongoose-intro/_sidebar.md @@ -0,0 +1,17 @@ +- [⬅ Back to Mongodb](../README.md) + +- [Crud Create](./CRUD---Create.md) +- [Crud Delete](./CRUD---Delete.md) +- [Crud Retrieve](./CRUD---Retrieve.md) +- [Crud Update](./CRUD---Update.md) +- [Crud Video](./CRUD---Video.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [Models](./Models.md) +- [Mongoose Intro Lecture](./Mongoose-Intro-Lecture.md) +- [Nested Schema](./Nested-Schema.md) +- [Schemas](./Schemas.md) +- [Server Mongoose](./Server---Mongoose.md) +- [Setup](./Setup.md) +- [Spot Check 1](./Spot-Check-1.md) \ No newline at end of file diff --git a/mongodb/mongoose-population/README.md b/mongodb/mongoose-population/README.md new file mode 100644 index 0000000..884d2bb --- /dev/null +++ b/mongodb/mongoose-population/README.md @@ -0,0 +1,3 @@ +# Overview - Video + + \ No newline at end of file diff --git a/python/README.md b/python/README.md new file mode 100644 index 0000000..f9888a7 --- /dev/null +++ b/python/README.md @@ -0,0 +1,3 @@ +# Python + +- [Decorators](decorators/README.md) \ No newline at end of file diff --git a/python/decorators/README.md b/python/decorators/README.md new file mode 100644 index 0000000..1d7226d --- /dev/null +++ b/python/decorators/README.md @@ -0,0 +1,38 @@ +# Intro + +In this lesson we will learn about **decorators**. + +**Decorators** are functions that allows you run some code before and after a function. + + +Let's say that we have written some functions, and for each one of them whenever we execute it, there will be a print of the function variables, before the function starts and the result of the function after the execution. + + +So if we have: +```python +def add2(x, y): + return x+y + +def add3(x, y, z): + return x+y+z + +def add4(w, x, y, z): + return w+x+y+z +``` +We want to execute: +```python +add2(1,2) +add3(1, 2, 3) +add4(1,2, 2, 4) +``` + +And we want our code to print: +```console +args: 1 2 +args: 1 2 3 +args: 1 2 2 4 +``` + +What are our options of implementation? + +Think about it for a minute, and move on to see what python has to offer. \ No newline at end of file diff --git a/r-ds/README.md b/r-ds/README.md new file mode 100644 index 0000000..1f455bc --- /dev/null +++ b/r-ds/README.md @@ -0,0 +1,5 @@ +# R Ds + +- [R D Sim 1 Todo List](r-d-sim-1--todo-list/README.md) +- [R D Sim 2 Python](r-d-sim-2--python/README.md) +- [Typescript R D](typescript-r-d/README.md) \ No newline at end of file diff --git a/r-ds/r-d-sim-1--todo-list/README.md b/r-ds/r-d-sim-1--todo-list/README.md new file mode 100644 index 0000000..32a1e61 --- /dev/null +++ b/r-ds/r-d-sim-1--todo-list/README.md @@ -0,0 +1,10 @@ +# Intro + +In this assignment you will need to fix some bugs in a already-written code. +Make sure to **fork** the following repo and then **clone** it to your local computer. + +You'll find everything you need to know in the `README.md` file (in the repo). + +Just go to [this](https://github.com/Elevationacademy/rand-sim-1) link and follow the instructions there. + +Good Luck! \ No newline at end of file diff --git a/r-ds/r-d-sim-2--python/README.md b/r-ds/r-d-sim-2--python/README.md new file mode 100644 index 0000000..574f584 --- /dev/null +++ b/r-ds/r-d-sim-2--python/README.md @@ -0,0 +1,13 @@ +# Intro + +In this assignment you will need to understand Python, read some code and add some features. + +Make sure to **fork** the following repo and then **clone** it to your local computer. + +You'll find everything you need to know in the `README.md` file (in the repo). + +Just go to [this](https://github.com/Elevationacademy/rand-sim-3a) link and follow the instructions there. + +Extension: If you feel really confident about your coding and learning skills, you can go instead to [this](https://github.com/Elevationacademy/rand-sim-3) repo which is a harder assignment (also in Python) + +Good Luck! \ No newline at end of file diff --git a/r-ds/typescript-r-d/README.md b/r-ds/typescript-r-d/README.md new file mode 100644 index 0000000..8fe0aea --- /dev/null +++ b/r-ds/typescript-r-d/README.md @@ -0,0 +1,3 @@ +# Intro + +### Read [this](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html), and then move on to the exercise. The exercise is meant to be done in pairs. \ No newline at end of file diff --git a/react-advanced/README.md b/react-advanced/README.md new file mode 100644 index 0000000..92988b0 --- /dev/null +++ b/react-advanced/README.md @@ -0,0 +1,5 @@ +# React Advanced + +- [Deploying React To Heroku](deploying-react-to-heroku/README.md) +- [React Bank](react-bank/README.md) +- [React Lifecycle And The Useeffect Hook](react-lifecycle-and-the-useeffect-hook/README.md) \ No newline at end of file diff --git a/react-advanced/deploying-react-to-heroku/README.md b/react-advanced/deploying-react-to-heroku/README.md new file mode 100644 index 0000000..be8ccb4 --- /dev/null +++ b/react-advanced/deploying-react-to-heroku/README.md @@ -0,0 +1,11 @@ +# Intro + +There are a few extra steps you need to implement to successfully deploy a React app with a db to Heroku. + + + +This lesson will be using MongoDB as the project DB. + + + +This lesson assumes knowledge of a basic Heroku deployment, without React. \ No newline at end of file diff --git a/react-advanced/react-bank/README.md b/react-advanced/react-bank/README.md new file mode 100644 index 0000000..37bafe9 --- /dev/null +++ b/react-advanced/react-bank/README.md @@ -0,0 +1,44 @@ +# Backend + +## Functionalities +create a server that will do the following logic / functionalities : + +- Retrieving all the transactions. +- Adding a transaction. +- Deletion a transaction. +- Getting a breakdown of the sum of transactions per category. + + +## Guidelines +1. Make sure your server is running on a **different** port from your react app. +2. When making requests from the client side to the server, **write out the full path** + - i.e, instead of making a GET request to `/transactions`, you'll make it to `http://localhost:/transactions` +3. Since react is "hosting" our app, there is **no need** to serve any `dist` or `node_modules` from the server +4. Because we want our server to accept "foreign" requests, we have to explicitly allow this. For simplicity, use the following code: + + + +``` +app.use(function (req, res, next) { + res.header('Access-Control-Allow-Origin', '*') + res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS') + res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With') + + next() +}) +``` + + +Add the above code before your route definitions. + + + +**Note:** the above steps are only required when we are in _development_ mode. In production mode (i.e when you'll deploy to Heroku, for example) it's different. + + + +In particular, **never ever add the above** **Access-Control...** **code snippet in your production code** - it allows _anyone_ to access your server with _all_ permissions. + + + +It is **only safe for development purposes**. \ No newline at end of file diff --git a/react-advanced/react-bank/_sidebar.md b/react-advanced/react-bank/_sidebar.md new file mode 100644 index 0000000..2b0f663 --- /dev/null +++ b/react-advanced/react-bank/_sidebar.md @@ -0,0 +1,9 @@ +- [⬅ Back to React Advanced](../README.md) + +- [Backend](./Backend.md) +- [Extensions](./Extensions.md) +- [Features](./Features.md) +- [Frontend](./Frontend.md) +- [Intro](./Intro.md) +- [Overview](./Overview.md) +- [Setup](./Setup.md) \ No newline at end of file diff --git a/react-advanced/react-lifecycle-and-the-useeffect-hook/README.md b/react-advanced/react-lifecycle-and-the-useeffect-hook/README.md new file mode 100644 index 0000000..ae2c498 --- /dev/null +++ b/react-advanced/react-lifecycle-and-the-useeffect-hook/README.md @@ -0,0 +1,100 @@ +# Cleanup + +We have learned how to use the `useEffect` hook, but we still did not cover a very important issue that might cause bugs. + +Let's dive in into the cleanup option: + +
+ +Here is the App code: +``` +function App() { + const [shouldRemove, setShouldRemove] = useState(false) + + const clickHandler = () => { + setShouldRemove(true) + } + + return ( +
+ + {shouldRemove ? null : } +
+ ); +} +``` + +and the ClickReminder code: +``` +function ClickReminder() { + const [timeoutId, setTimeoutId] = useState(null) + + const clickHandler = () => { + console.log('clearing timeout'); + clearTimeout(timeoutId) + } + + useEffect(() => { + let timeoutId = setTimeout(()=>{alert("remember to click")}, 2000) + setTimeoutId(timeoutId) + + return () => { + clearTimeout(timeoutId) + } + }, []) + + return ( +
+ +
+ ); +} +``` + +This is good to know. It brings us to explore another option. Watch this video where we investigate another case of using cleanups: + +
+ +Here is the code: +``` +function FriendStatus(props) { + const [isOnline, setIsOnline] = useState(null); + + useEffect(() => { + function handleStatusChange(status) { + setIsOnline(status.isOnline); + } + ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); + + return function cleanup() { + ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); + }; + }); + + if (isOnline === null) { + return 'Loading...'; + } + return
+ Frind with id {props.friend.id} is {isOnline ? 'Online' : 'Offline'} +
+} +``` + +One last thing that we can add is an optimization. We do want the cleanup function running if the props change, but only if the friend's id has changed. +At the moment the cleanup function will run on every update. +To avoid that we can add the id to the dependencies array like that: + +``` + useEffect(() => { + function handleStatusChange(status) { + setIsOnline(status.isOnline); + } + ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); + + return function cleanup() { + ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); + }; + }, [props.friend.id]); +``` + +Now the cleanup will run only if the id of the friend has changed. \ No newline at end of file diff --git a/react-advanced/react-lifecycle-and-the-useeffect-hook/_sidebar.md b/react-advanced/react-lifecycle-and-the-useeffect-hook/_sidebar.md new file mode 100644 index 0000000..ae963d7 --- /dev/null +++ b/react-advanced/react-lifecycle-and-the-useeffect-hook/_sidebar.md @@ -0,0 +1,12 @@ +- [⬅ Back to React Advanced](../README.md) + +- [Cleanup](./Cleanup.md) +- [Components Lifecycle](./Components-Lifecycle.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Dependencies](./Dependencies.md) +- [Exercises](./Exercises.md) +- [Fetch Data](./Fetch-Data.md) +- [Hooks](./Hooks.md) +- [Intro](./Intro.md) +- [Side Effects](./Side-Effects.md) +- [Virtual Dom](./Virtual-Dom.md) \ No newline at end of file diff --git a/react-basics/README.md b/react-basics/README.md new file mode 100644 index 0000000..0dc88eb --- /dev/null +++ b/react-basics/README.md @@ -0,0 +1,15 @@ +# React Basics + +- [Catchphrase Socket Project Optional ](catchphrase---socket-project--optional-/README.md) +- [Hangman Part I](hangman---part-i/README.md) +- [Hangman Part Ii](hangman---part-ii/README.md) +- [Pomodoro Project Optional ](pomodoro-project--optional-/README.md) +- [React Components](react-components/README.md) +- [React Data Flow](react-data-flow/README.md) +- [React Input](react-input/README.md) +- [React Intro](react-intro/README.md) +- [React Props](react-props/README.md) +- [React Router](react-router/README.md) +- [React State](react-state/README.md) +- [Reflix Project](reflix-project/README.md) +- [Webpack Ec](webpack-ec/README.md) \ No newline at end of file diff --git a/react-basics/catchphrase---socket-project--optional-/README.md b/react-basics/catchphrase---socket-project--optional-/README.md new file mode 100644 index 0000000..49eb2a1 --- /dev/null +++ b/react-basics/catchphrase---socket-project--optional-/README.md @@ -0,0 +1,15 @@ +# Intro + +The _Catchphrase_ game is a multi-player game, where the players need to guess a secret word. The game needs to work in different clients, meaning live client-to-client communication (two separate browser tabs/windows). + + + +Each turn, a player is presented with a secret word that they need to describe to the other player via chat. The second player then needs to guess what the secret words. + + + +Guessing the correct word will win the player 10 points. + + + +Each user can start a new game or join an existing one. \ No newline at end of file diff --git a/react-basics/hangman---part-i/README.md b/react-basics/hangman---part-i/README.md new file mode 100644 index 0000000..c9cd911 --- /dev/null +++ b/react-basics/hangman---part-i/README.md @@ -0,0 +1,30 @@ +# Components Overview + +Let's think about the components we'll need for our hangman game. + + + +- A component to show the remaining guesses +- One to show the _ _ _ _ and fill up with letters +- One for the letters we can choose + + + +For now that should be enough. + + + +Starting with the last one, we can break it down some more: + + + +- A component to hold all our letters +- A component that represents a single letter + + + +A component for a single letter may seem extreme. In fact, _how small should we make our components?_ is a popular question. Some will say _as small as possible_ - but that's more of a buzz-phrase than concrete guidance. + + + +The React docs themselves have a nice [Thinking In React](https://reactjs.org/docs/thinking-in-react.html) section which is worth checking out - but the short of it is that you should make your components small enough so they are maintainable and serve one specific purpose. \ No newline at end of file diff --git a/react-basics/hangman---part-i/_sidebar.md b/react-basics/hangman---part-i/_sidebar.md new file mode 100644 index 0000000..6a6c3b9 --- /dev/null +++ b/react-basics/hangman---part-i/_sidebar.md @@ -0,0 +1,5 @@ +- [⬅ Back to React Basics](../README.md) + +- [Components Overview](./Components-Overview.md) +- [Intro](./Intro.md) +- [To Do](./To-Do.md) \ No newline at end of file diff --git a/react-basics/pomodoro-project--optional-/README.md b/react-basics/pomodoro-project--optional-/README.md new file mode 100644 index 0000000..c7dee65 --- /dev/null +++ b/react-basics/pomodoro-project--optional-/README.md @@ -0,0 +1,34 @@ +# Intro + +Hello, Reacters. + + + +You're only at the beginning of your React journey but you've learned a lot. + + + +Think about all the things you know: + +- Components +- JSX +- Props +- State +- Events +- Proper data flow + + + +So much power! + + + +But power is nothing without practice, so it's time to put it together... + + + +You're going to build **Pomodoro**. + + + +Here we go. \ No newline at end of file diff --git a/react-basics/react-components/README.md b/react-basics/react-components/README.md new file mode 100644 index 0000000..51beaa0 --- /dev/null +++ b/react-basics/react-components/README.md @@ -0,0 +1,47 @@ +# Child Components + +Now, even though we saw that we can put any JSX inside the `App`'s `return`, we're going to do something a little different. + +We're going to load **child components** in there, instead. + + + +React is _built_ around components. If we put all our JSX in one place, it would defeat the purpose. + + + +Consider this code: + + + +```js +function Nav() { + return ( + + ) +} + +function App() { + return ( +
+
+ ) +} +``` + + +Generally, **you should create a new file for each component** - but for the sake of this example, we're keeping it all in one file. + + + +Here we have two components, where the `App` component is **loading** the `Nav` component. + + + +We say that `App` **is a parent of `Nav`, and `Nav` is a child of `App`** - this should come as no surprise as it is very familiar to our HTML/DOM hierarchy. + + + +Also notice the syntax: **when we create a component, we can use it like an "HTML" tag** - angled brackets and all. \ No newline at end of file diff --git a/react-basics/react-components/_sidebar.md b/react-basics/react-components/_sidebar.md new file mode 100644 index 0000000..f1fe905 --- /dev/null +++ b/react-basics/react-components/_sidebar.md @@ -0,0 +1,12 @@ +- [⬅ Back to React Basics](../README.md) + +- [Child Components](./Child-Components.md) +- [Component Tree](./Component-Tree.md) +- [Components Jsx](./Components---JSX.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [Spot Check 1](./Spot-Check-1.md) +- [Spot Check 2](./Spot-Check-2.md) +- [Spot Check 3](./Spot-Check-3.md) +- [Spot Check 4](./Spot-Check-4.md) \ No newline at end of file diff --git a/react-basics/react-data-flow/README.md b/react-basics/react-data-flow/README.md new file mode 100644 index 0000000..717e5c3 --- /dev/null +++ b/react-basics/react-data-flow/README.md @@ -0,0 +1,8 @@ +# Comprehension Check + +{Check It!|assessment}(multiple-choice-2271404646) +{Check It!|assessment}(multiple-choice-1079840672) +{Check It!|assessment}(multiple-choice-1016190687) +{Check It!|assessment}(multiple-choice-3334046330) +{Check It!|assessment}(multiple-choice-3484771619) +{Check It!|assessment}(multiple-choice-3610721489) \ No newline at end of file diff --git a/react-basics/react-data-flow/_sidebar.md b/react-basics/react-data-flow/_sidebar.md new file mode 100644 index 0000000..b676b33 --- /dev/null +++ b/react-basics/react-data-flow/_sidebar.md @@ -0,0 +1,10 @@ +- [⬅ Back to React Basics](../README.md) + +- [Comprehension Check](./Comprehension-Check.md) +- [Data Flow Up I](./Data-Flow---Up---I.md) +- [Data Flow Up Ii](./Data-Flow---Up---II.md) +- [Done](./Done.md) +- [Exercises](./Exercises.md) +- [React Data Flow](./React-Data-Flow.md) +- [Recap](./Recap.md) +- [Spot Check 1](./Spot-Check-1.md) \ No newline at end of file diff --git a/react-basics/react-input/README.md b/react-basics/react-input/README.md new file mode 100644 index 0000000..00660b5 --- /dev/null +++ b/react-basics/react-input/README.md @@ -0,0 +1,22 @@ +# Catch All Handler + +You now understand the basics of handling input in React. And honestly, there's not much more to it. + + + +The only "issue" might arise when you have multiple inputs, and you need multiple methods to manage the state changes. + + + +There's nothing inherently wrong with having a method for each input element - you may very well want to do different things for each input. + +However, When we are dealing with states in general we want to combine states that have a common ground into one state. +This allows us to have generalization in our code. + +**That said**, it is silly to have several methods that do exactly the same thing: update one property of `state`. + +To that end, **take a look at** [**Handling Multiple Inputs**](https://medium.com/nerd-for-tech/how-to-build-forms-with-multiple-input-fields-using-react-hooks-677da2b851aa). + + + +They show a clever use of **ES6**'s [computed property names](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax in conjunction with the name attribute. \ No newline at end of file diff --git a/react-basics/react-input/_sidebar.md b/react-basics/react-input/_sidebar.md new file mode 100644 index 0000000..52f1d32 --- /dev/null +++ b/react-basics/react-input/_sidebar.md @@ -0,0 +1,7 @@ +- [⬅ Back to React Basics](../README.md) + +- [Catch All Handler](./Catch-All-Handler.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [Spot Check ](./Spot-Check-.md) +- [Two Way Binding](./Two-Way-Binding.md) \ No newline at end of file diff --git a/react-basics/react-intro/README.md b/react-basics/react-intro/README.md new file mode 100644 index 0000000..ecc01eb --- /dev/null +++ b/react-basics/react-intro/README.md @@ -0,0 +1,7 @@ +# Comprehension Check + +{Check It!|assessment}(multiple-choice-4160273971) + +{Check It!|assessment}(multiple-choice-1026556269) + +{Check It!|assessment}(multiple-choice-2722621591) \ No newline at end of file diff --git a/react-basics/react-intro/_sidebar.md b/react-basics/react-intro/_sidebar.md new file mode 100644 index 0000000..ca4a75a --- /dev/null +++ b/react-basics/react-intro/_sidebar.md @@ -0,0 +1,16 @@ +- [⬅ Back to React Basics](../README.md) + +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [File Structure](./File-Structure.md) +- [Introduction](./Introduction.md) +- [Jsx I](./JSX-I.md) +- [Jsx Ii](./JSX-II.md) +- [Jsx Lecture](./JSX-Lecture.md) +- [React Overview Lecture](./React-Overview-Lecture.md) +- [React Setup Boilerplate Lecture](./React-Setup---Boilerplate-Lecture.md) +- [Setup](./Setup.md) +- [Spot Check 1](./Spot-Check-1.md) +- [Spot Check 2](./Spot-Check-2.md) +- [Spot Check 3](./Spot-Check-3.md) +- [Virtual Dom](./Virtual-DOM.md) \ No newline at end of file diff --git a/react-basics/react-props/README.md b/react-basics/react-props/README.md new file mode 100644 index 0000000..28c9eed --- /dev/null +++ b/react-basics/react-props/README.md @@ -0,0 +1,3 @@ +# Comprehension Check + +{Check It!|assessment}(multiple-choice-1601730673) \ No newline at end of file diff --git a/react-basics/react-props/_sidebar.md b/react-basics/react-props/_sidebar.md new file mode 100644 index 0000000..4e85153 --- /dev/null +++ b/react-basics/react-props/_sidebar.md @@ -0,0 +1,16 @@ +- [⬅ Back to React Basics](../README.md) + +- [Comprehension Check](./Comprehension-Check.md) +- [Data Flow](./Data-Flow.md) +- [Intro](./Intro.md) +- [Mapping Props Ii](./Mapping-Props-II.md) +- [Mapping Props](./Mapping-Props.md) +- [Prop Keys](./Prop-Keys.md) +- [Props](./Props.md) +- [Spot Check 1](./Spot-Check-1.md) +- [Spot Check 2](./Spot-Check-2.md) +- [Spot Check 3](./Spot-Check-3.md) +- [Spot Check 4](./Spot-Check-4.md) +- [Spot Check 5](./Spot-Check-5.md) +- [Summery](./Summery.md) +- [Video](./Video.md) \ No newline at end of file diff --git a/react-basics/react-router/README.md b/react-basics/react-router/README.md new file mode 100644 index 0000000..c11bb74 --- /dev/null +++ b/react-basics/react-router/README.md @@ -0,0 +1,5 @@ +# Comprehension Check + +{Check It!|assessment}(multiple-choice-886395639) +{Check It!|assessment}(multiple-choice-1284626046) +{Check It!|assessment}(multiple-choice-3829301310) \ No newline at end of file diff --git a/react-basics/react-router/_sidebar.md b/react-basics/react-router/_sidebar.md new file mode 100644 index 0000000..c63f112 --- /dev/null +++ b/react-basics/react-router/_sidebar.md @@ -0,0 +1,10 @@ +- [⬅ Back to React Basics](../README.md) + +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [Links](./Links.md) +- [Route](./Route.md) +- [Router](./Router.md) +- [Setup](./Setup.md) +- [Useparams](./useParams.md) \ No newline at end of file diff --git a/react-basics/react-state/README.md b/react-basics/react-state/README.md new file mode 100644 index 0000000..a16a489 --- /dev/null +++ b/react-basics/react-state/README.md @@ -0,0 +1,83 @@ +# Common Fitfalls + +## State updates are async operation + +Look at this code, and try to find what is wrong + +``` +function Counter() { + const [count,setCount] = useState(0) + + const updateCounter = () => { + setCount(count + 1) + console.log(count) + } + + return ( +
+ +
{count}
+
+ ); +} +``` +If you open the console and click the button you will see that the count is "not updating". +The reason is that the state update is an asynchronous operation, so the count state hasn't been updated yet. + +We will see later how to solve it. +For the mean time, just be aware of it. + + +## State Objects +When we define a state, some times it will be an object. + +For instance, if we have a `classroom` object which has a `students` property in it, and we want to add a student to it, we need to access `classroom.students` first. + + + +We need to do the following + + +``` +import { useState } from 'react'; + +const ClassRoom = () => { + const [classRoom, setClassRoom] = useState({ students: [] }); + + const addStudent = (student) => { + let newClassroom = {...classRoom} + newClassroom.students = [...classRoom.students, student] + setClassRoom(newClassroom); + } + return
+} + +export default ClassRoom; +``` + +What we are doing here is that we take the old state and clone it first. Then we mutate it to fit our needs and then replace it fully with the new mutated object. + + +Be careful of situations like this. +``` +import { useState } from 'react'; + +const ClassRoom = () => { + const [classRoom, setClassRoom] = useState({ students: [] }); + + const removeStudent = (student) => { + students = classRoom.students + students.pop() + } + return
+} + +export default useClassRoom; +``` + + +This is bad because `classRoom.students` is an array, which is a [reference type](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0) - that means that even though we've created a new variable, `students`, any modifications we make to that (the `.pop()` on the second line) will still affect the original array in `classRoom`. + + + +**Check out** how to use the [ES6 spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to avoid this problem. \ No newline at end of file diff --git a/react-basics/react-state/_sidebar.md b/react-basics/react-state/_sidebar.md new file mode 100644 index 0000000..6132ea3 --- /dev/null +++ b/react-basics/react-state/_sidebar.md @@ -0,0 +1,18 @@ +- [⬅ Back to React Basics](../README.md) + +- [Common Fitfalls](./Common-fitfalls.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Events](./Events.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [Note About State Props](./Note-About-State---Props.md) +- [Spot Check 1](./Spot-Check-1.md) +- [Spot Check 2](./Spot-Check-2.md) +- [Spot Check 3](./Spot-Check-3.md) +- [Spot Check 4](./Spot-Check-4.md) +- [Spot Check 5](./Spot-Check-5.md) +- [State As State](./State-As-State.md) +- [State Video](./State-Video.md) +- [State](./State.md) +- [Summery](./Summery.md) +- [Updating The State](./Updating-the-state.md) \ No newline at end of file diff --git a/react-basics/reflix-project/README.md b/react-basics/reflix-project/README.md new file mode 100644 index 0000000..81d3388 --- /dev/null +++ b/react-basics/reflix-project/README.md @@ -0,0 +1,9 @@ +# Extension Users + +If you've done all of the above, and you fancy a bit of refactoring, give some meaning to the users on the landing page. + + + +Any user's rented movies and budget should be saved to that particular user - then you should persist everything with LocalStorage. + +Good luck =] \ No newline at end of file diff --git a/react-basics/reflix-project/_sidebar.md b/react-basics/reflix-project/_sidebar.md new file mode 100644 index 0000000..e2efd95 --- /dev/null +++ b/react-basics/reflix-project/_sidebar.md @@ -0,0 +1,7 @@ +- [⬅ Back to React Basics](../README.md) + +- [Extension Users](./Extension---Users.md) +- [Guidelines Basic](./Guidelines---Basic.md) +- [Guidlines Features](./Guidlines---Features.md) +- [Intro](./Intro.md) +- [Reflix](./Reflix.md) \ No newline at end of file diff --git a/react-basics/webpack-ec/README.md b/react-basics/webpack-ec/README.md new file mode 100644 index 0000000..b6a2ce1 --- /dev/null +++ b/react-basics/webpack-ec/README.md @@ -0,0 +1,11 @@ +# Intro + +Webpack is an important tool that is used by many developers. Please read the following article to learn a bit about webpack, note that you do not need to spend time coding along, just read through it. + + + +[https://www.sitepoint.com/webpack-beginner-guide/](https://www.sitepoint.com/webpack-beginner-guide/) + + + +Once you're done, head onto the exercises in the next session. Feel free to use the [webpack docs](https://webpack.js.org/guides/getting-started/) to help you solve the assignment. \ No newline at end of file diff --git a/resources/README.md b/resources/README.md new file mode 100644 index 0000000..ce76653 --- /dev/null +++ b/resources/README.md @@ -0,0 +1,12 @@ +# Resources + +- [Can Do Approach](can-do-approach/README.md) +- [Clean Code](clean-code/README.md) +- [Css Special Cases](css-special-cases/README.md) +- [How To Search In Google](how-to-search-in-google/README.md) +- [How To Solve A Question](how-to-solve-a-question/README.md) +- [How To Talk About A Project](how-to-talk-about-a-project/README.md) +- [Project Presentation Template](project-presentation-template/README.md) +- [Talking About Code](talking-about-code/README.md) +- [Terms Defention](terms-defention/README.md) +- [Work Plan Template](work-plan-template/README.md) \ No newline at end of file diff --git a/resources/clean-code/README.md b/resources/clean-code/README.md new file mode 100644 index 0000000..2828793 --- /dev/null +++ b/resources/clean-code/README.md @@ -0,0 +1,3 @@ +# Presentation + + \ No newline at end of file diff --git a/resources/how-to-search-in-google/README.md b/resources/how-to-search-in-google/README.md new file mode 100644 index 0000000..64f61a9 --- /dev/null +++ b/resources/how-to-search-in-google/README.md @@ -0,0 +1,8 @@ +# Page 1 + +You can download it from the download button. + + +

This browser does not support PDFs. Please download the PDF to view it: Download PDF.

+ + \ No newline at end of file diff --git a/resources/how-to-search-in-google/_sidebar.md b/resources/how-to-search-in-google/_sidebar.md new file mode 100644 index 0000000..9b1cac4 --- /dev/null +++ b/resources/how-to-search-in-google/_sidebar.md @@ -0,0 +1,3 @@ +- [⬅ Back to Resources](../README.md) + +- [Page 1](./Page-1.md) \ No newline at end of file diff --git a/script.py b/script.py new file mode 100644 index 0000000..bef0b10 --- /dev/null +++ b/script.py @@ -0,0 +1,89 @@ +import os +import re + +ROOT_DIR = '.' # Your course root + +def humanize(name): + return name.replace('-', ' ').title() + +def generate_root_sidebar(modules): + lines = [f'* [{humanize(m)}]({m}/README.md)' for m in sorted(modules)] + with open(os.path.join(ROOT_DIR, '_sidebar.md'), 'w', encoding='utf-8') as f: + f.write('\n'.join(lines)) + print('✅ Root _sidebar.md generated.') + +def generate_module_sidebar(module_path, chapters): + lines = [f'- {humanize(os.path.basename(module_path))}'] + for chapter in sorted(chapters): + lines.append(f' - [{humanize(chapter)}]({chapter}/README.md)') + with open(os.path.join(module_path, '_sidebar.md'), 'w', encoding='utf-8') as f: + f.write('\n'.join(lines)) + +def generate_module_readme(module_path, chapters): + lines = [f'# {humanize(os.path.basename(module_path))}', ''] + for chapter in sorted(chapters): + lines.append(f'- [{humanize(chapter)}]({chapter}/README.md)') + with open(os.path.join(module_path, 'README.md'), 'w', encoding='utf-8') as f: + f.write('\n'.join(lines)) + +def extract_chapter_sidebar_entries(sidebar_path): + entries = [] + with open(sidebar_path, 'r', encoding='utf-8') as f: + for line in f: + match = re.search(r'\[(.*?)\]\((\.\/.*?\.md)', line.strip()) + if match: + entries.append((match.group(1), match.group(2))) + return entries + +def generate_chapter_sidebar(chapter_path, entries, module_name): + lines = [f'- [⬅ Back to {humanize(module_name)}](../README.md)', ''] + lines += [f'- [{label}]({path})' for label, path in entries] + with open(os.path.join(chapter_path, '_sidebar.md'), 'w', encoding='utf-8') as f: + f.write('\n'.join(lines)) + +def generate_chapter_readme(chapter_path, first_entry): + label, path = first_entry + content_path = os.path.join(chapter_path, path) + if not os.path.exists(content_path): + print(f'⚠️ Missing file for README.md: {content_path}') + return + with open(content_path, 'r', encoding='utf-8') as f: + content = f.read() + with open(os.path.join(chapter_path, 'README.md'), 'w', encoding='utf-8') as f: + f.write(f'# {label}\n\n{content.strip()}') + +def process_course(): + modules = [] + for module in os.listdir(ROOT_DIR): + module_path = os.path.join(ROOT_DIR, module) + if not os.path.isdir(module_path) or module.startswith('.'): + continue + modules.append(module) + chapters = [] + for chapter in os.listdir(module_path): + chapter_path = os.path.join(module_path, chapter) + if os.path.isdir(chapter_path) and not chapter.startswith('.'): + chapters.append(chapter) + + # Process chapter _sidebar.md + original_sidebar_path = os.path.join(chapter_path, '_sidebar.md') + if os.path.exists(original_sidebar_path): + entries = extract_chapter_sidebar_entries(original_sidebar_path) + else: + # Fallback to .md files if no _sidebar.md exists + entries = [] + for file in sorted(os.listdir(chapter_path)): + if file.endswith('.md') and not file.startswith('_') and file != 'README.md': + label = humanize(file.replace('.md', '')) + entries.append((label, f'./{file}')) + + if entries: + generate_chapter_sidebar(chapter_path, entries, module) + generate_chapter_readme(chapter_path, entries[0]) + + generate_module_sidebar(module_path, chapters) + generate_module_readme(module_path, chapters) + + generate_root_sidebar(modules) + +process_course() diff --git a/servers/README.md b/servers/README.md new file mode 100644 index 0000000..453b6e7 --- /dev/null +++ b/servers/README.md @@ -0,0 +1,13 @@ +# Servers + +- [Express Crud Router Middleware](express--crud--router----middleware/README.md) +- [Express Intro Servers Routes Params](express-intro--servers--routes----params/README.md) +- [Guided Debugging Exercise](guided-debugging-exercise/README.md) +- [Intro To Servers](intro-to-servers/README.md) +- [Json Web Tokens](json-web-tokens/README.md) +- [My Recipes](my-recipes/README.md) +- [Node](node/README.md) +- [Npm Node Package Manager](npm---node-package-manager/README.md) +- [Postman](postman/README.md) +- [Server Error Handling](server-error-handling/README.md) +- [Status Codes Practice](status-codes-practice/README.md) \ No newline at end of file diff --git a/servers/express--crud--router----middleware/README.md b/servers/express--crud--router----middleware/README.md new file mode 100644 index 0000000..89f1e1f --- /dev/null +++ b/servers/express--crud--router----middleware/README.md @@ -0,0 +1,56 @@ +# Body Parser + +When we make a POST request from the browser, behind the scenes **the browser is turning the data we're sending into a JSON** - this is a good thing because it allows us to forgo the `JSON.stringify` bit. + + + +However, since we are sending JSON, the server needs to know that it needs to **parse** that JSON. + +To do that, we need to add the following to our `server.js`: +``` +app.use(express.json()) +app.use(express.urlencoded({ extended: false })) +``` + + +* You can add the above code under all the `require`s but above the other lines of `app.use`. + + + +We'll dive into what `use` is later in this lesson, but for now it's enough to understand that this code allows our server to receive and parse JSON. + + + +---------- + + + +Now if you restart your server, refresh your page, type in a Wonder and Location, and press the `Add Wonder` button: + + + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/post-from-client-gui.PNG) + +Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/post-from-client-gui.PNG) to emibggen. + + + +You should see this in your server logs: + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/post-from-client-server-log.PNG) + + + +Excellent! We've sent some data to our server through a POST request - note that this is **different** than sending data through GET parameters! + + + +When we send data through GET, we're doing it through the **route**, i.e. the URL - this is not always safe or what we want. Plus, it is not convenient when we want to send lots of data - especially if it's more complex data. + + + +Sending data with a **POST request allows us to send any JS object**. This is great. + + + +And now, of course, we want to _add_ this object to our `wonders` array in the server. \ No newline at end of file diff --git a/servers/express--crud--router----middleware/_sidebar.md b/servers/express--crud--router----middleware/_sidebar.md new file mode 100644 index 0000000..e5cef83 --- /dev/null +++ b/servers/express--crud--router----middleware/_sidebar.md @@ -0,0 +1,16 @@ +- [⬅ Back to Servers](../README.md) + +- [Body Parser](./Body-Parser.md) +- [Crud](./CRUD.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Http Status Codes](./HTTP-Status-Codes.md) +- [Intro](./Intro.md) +- [Middleware](./Middleware.md) +- [Overview Video](./Overview-Video.md) +- [Post](./POST.md) +- [Put](./PUT.md) +- [Router](./Router.md) +- [Spot Check 1](./Spot-Check-1.md) +- [Spot Check 2](./Spot-Check-2.md) +- [Spot Check 3](./Spot-Check-3.md) \ No newline at end of file diff --git a/servers/express-intro--servers--routes----params/README.md b/servers/express-intro--servers--routes----params/README.md new file mode 100644 index 0000000..a65390b --- /dev/null +++ b/servers/express-intro--servers--routes----params/README.md @@ -0,0 +1,3 @@ +# Setup & Basics Video + + \ No newline at end of file diff --git a/servers/guided-debugging-exercise/README.md b/servers/guided-debugging-exercise/README.md new file mode 100644 index 0000000..c6cbd9a --- /dev/null +++ b/servers/guided-debugging-exercise/README.md @@ -0,0 +1,57 @@ +# Page 1 + +### The Task +Here is some code that contains bugs. +Your task is to find these bugs and fix them. +Copy the code and run it in your computer so that you can debug. + +### Hint +The debugger id your friend! + +### Guidance +1. First take a minute to understand what the code is doing +1. Now find the bugs. Specifically try to find the row of where the bug happens +1. Fix the bug, so that the code works fine. + +```js +const posts = [ + { + id: 1, + text: "Love this product", + comments: [] + }, + { + id: 2, + text: "This is the worst. DON'T BUY!", + comments: [ + { id: 1, text: "Idiot has no idea" }, + { id: 2, text: "Fool!" }, + { id: 3, text: "I agree!" } + ] + }, + { + id: 3, + text: "So glad I found this. Bought four already!", + comments: [] + } +] + +const removeComment = function (postId, commentId) { + for (post in posts) { + if (post.id === postId) { + removeCommentFromPost(post, commentId); + } + } +} + +const removeCommentFromPost = function(post, commentId){ + for (let i =0; i < comments.length; i++) { + if (post.comments[i].id === commentId) { + post.comments.remove(comment); + } + } +} + +removeComment(2, 3) + +``` \ No newline at end of file diff --git a/servers/guided-debugging-exercise/_sidebar.md b/servers/guided-debugging-exercise/_sidebar.md new file mode 100644 index 0000000..fee6fbc --- /dev/null +++ b/servers/guided-debugging-exercise/_sidebar.md @@ -0,0 +1,4 @@ +- [⬅ Back to Servers](../README.md) + +- [Page 1](./Page-1.md) +- [Page 2](./Page-2.md) \ No newline at end of file diff --git a/servers/intro-to-servers/README.md b/servers/intro-to-servers/README.md new file mode 100644 index 0000000..d383e5a --- /dev/null +++ b/servers/intro-to-servers/README.md @@ -0,0 +1,101 @@ +# Barebone Server + +To see an example of a simple server, let's create one using node's built-in `http` module. + + + +Start by opening a new directory called `server-intro` and inside of it create a file called `server.js` + + + +Inside of this file, add the following code: +``` +const http = require('http') + +const server = http.createServer(function (request, response) { + response.writeHead(200, { 'Content-Type': 'text/plain' }) + response.write('Hello, world') + response.end(); +}) + +const port = 3000 +server.listen(port, function () { + console.log(`Node server created at port ${port}`) +}) +``` + + +Now run this file (just like any other JS file in node: `node server.js` in your command line/terminal), and you should see the console log "Node server created at port 3000" + + + +Now go to your browser, and head to `http://localhost:3000/` + + + +And that's it. You've used your browser to make a GET request to your server, and the server replied with "Hello, world" + + + +---------- + + + +Of course, this doesn't seem very exciting yet, but here's what's going on in that code: + +- We didn't have to `npm install http` because this module is **built-in** to node +- One of the things this module can do is invoke the `createServer` method + - This method receives one parameter, a callback function, that takes two arguments: a request, and a response + - We'll get to `request` later, but `response` is what allows us to reply to a client that sends a request +- The `response.writehead` is a method that sends **metadata** about the response + - This is information about the response the user won't see, but the browser (or whoever is making the request) can access + - The `200` is an [HTTP Status Code](https://www.restapitutorial.com/httpstatuscodes.html) that says "everything is OK" + - The ``{'Content-Type...}`` tells whoever made the request what kind of data it will receive in return +- The `response.write` method actually "writes" something to display to whoever makes the request +- Finally, the `response.end()` closes this **request-response cycle** + + + +We have the `server.listen` code at the bottom which is what ultimately starts the server. Without this, the server does not exist. + + + +The `listen` part is important: **servers are always listening for requests. Like functions, they do nothing until called upon** - this means that we can write the best server in the world, but it will do **nothing** except for **serve** whoever makes a ``request`` + + + +In our example, the entity making the request is the browser itself when we go to **localhost:3000** - this initiates a request, the server gets the request, the server creates and sends a response, and the cycle completes. + + + +Luckily for us, when we start using `express`, the code to run a server will be **much** simpler. + + + +---------- + + + +Now, go to your terminal and stop the server from running (press `Ctrl+C`), and refresh the page where you were at localhost:3000, you should something like this: + + + +![](https://kernel-files.s3-eu-west-1.amazonaws.com/images/PROD_A1614-0.png) + + + +Once you shut down your server, it's no longer listening. The browser (or any client) cannot find **localhost:3000** because it doesn't exist anymore. + + + +So remember: + +1. You create a server +2. You spin/run/activate/start the server - now it is listening +3. Clients make requests to the server +4. The server serves a response +5. Cycle ends + + + +The way we'll build our servers, the server will be able to receive many requests simultaneously - but you must consider each one as a separate **request-response cycle** - _even if_ the same client makes 1,000 requests to the same server, each one is a separate cycle. \ No newline at end of file diff --git a/servers/intro-to-servers/_sidebar.md b/servers/intro-to-servers/_sidebar.md new file mode 100644 index 0000000..007a252 --- /dev/null +++ b/servers/intro-to-servers/_sidebar.md @@ -0,0 +1,7 @@ +- [⬅ Back to Servers](../README.md) + +- [Barebone Server](./Barebone-Server.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Intro](./Intro.md) +- [Localhost](./Localhost.md) +- [Ngrok Exposing Your Localhost To The World Optional ](./Ngrok---Exposing-your-Localhost-to-the-World--Optional--.md) \ No newline at end of file diff --git a/servers/my-recipes/README.md b/servers/my-recipes/README.md new file mode 100644 index 0000000..1c1ea19 --- /dev/null +++ b/servers/my-recipes/README.md @@ -0,0 +1,5 @@ +# Extensions + +Possible Extensions: +- Improve your CSS :) +- Add more filter options \ No newline at end of file diff --git a/servers/my-recipes/_sidebar.md b/servers/my-recipes/_sidebar.md new file mode 100644 index 0000000..4541073 --- /dev/null +++ b/servers/my-recipes/_sidebar.md @@ -0,0 +1,4 @@ +- [⬅ Back to Servers](../README.md) + +- [Extensions](./Extensions.md) +- [Intro](./Intro.md) \ No newline at end of file diff --git a/servers/node/README.md b/servers/node/README.md new file mode 100644 index 0000000..2fa4b79 --- /dev/null +++ b/servers/node/README.md @@ -0,0 +1,3 @@ +# Node JS Intro Video + + \ No newline at end of file diff --git a/servers/npm---node-package-manager/README.md b/servers/npm---node-package-manager/README.md new file mode 100644 index 0000000..7058025 --- /dev/null +++ b/servers/npm---node-package-manager/README.md @@ -0,0 +1,70 @@ +# Client Vs Server Packages + +Though NPM literally has **Node** as the first part of its acronym, we're not limited to node when we use NPM packages. We can also take advantage of NPM (depending on the package) in the browser. + + + +For example, we've hitherto imported jQuery, Handlebars, and font-awesome like this: +``` + + + + + +``` + + +Which is a pain, because we'd always have to go and find those CDNs - but no more! Now you can run the following command: + + +``` +npm install jquery handlebars font-awesome +``` + + +Yes, you can install multiple packages at once - just separate them with a space. + +And then add them to our HTML like this: + + +``` + + + + + +``` + + +Which is much, much cleaner, more straightforward, and definitely more reliable. + + + +Of course, the code in these packages is the exact same as what you get from the old way (using the CDN) - and it will still only work in JS that you run in the browser, but **NPM is a package manager for any JS code, not just code that runs in node**. + + + +This might be confusing, but if you realize that humans called this **Node**Package Manager because at first it was just for Node, and you realize that humans don't always think ahead, then you should be able to sleep at night. + + + +---------- + + + +**Spot check:** Create a directory called npm-jquery-run, and inside of it create two files: index.html and main.js + +- Use NPM to install jQuery +- Import jQuery in your HTML from node_modules +- Create a small div in your HTML - give it some dimensions and a background color +- In your JS file, use jQuery to add a listener to the div - when you click it, it should change to the color "#f39c12" + + + +Once that works, in your JS file make a GET request to the following API, and console log the results: +``` +https://ele-people-api-8eb0b1bd9b96.herokuapp.com/people +``` + + +Unfortunately, the above GET request won't work (but still do it so you see the error). Let's fix that. \ No newline at end of file diff --git a/servers/npm---node-package-manager/_sidebar.md b/servers/npm---node-package-manager/_sidebar.md new file mode 100644 index 0000000..10292d7 --- /dev/null +++ b/servers/npm---node-package-manager/_sidebar.md @@ -0,0 +1,9 @@ +- [⬅ Back to Servers](../README.md) + +- [Client Vs Server Packages](./Client-vs--Server-Packages.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [Setting Up](./Setting-Up.md) +- [The Urllib Package](./The-urllib-Package.md) +- [Using Npm Packages](./Using-NPM-Packages.md) \ No newline at end of file diff --git a/servers/postman/README.md b/servers/postman/README.md new file mode 100644 index 0000000..ab55062 --- /dev/null +++ b/servers/postman/README.md @@ -0,0 +1,89 @@ +# Basic Usage + +When you finish installing and logging in, you should see a screen more or less like this: + + + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-starter.PNG) + + + +Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-starter.PNG) to emibggen. + + + +Now, say you're making a GET request to our favorite [user api](https://jsonplaceholder.typicode.com/users) - we can make this request via the browser, or with a `$.get` request - and now we can also make it with Postman. Just enter this URL into the input, press send, and you should soon enough see the result: + + + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-first-get.PNG) + + + +Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-first-get.PNG) to emibggen. + + + +It knows to make a GET request because of the GET on the side - but we can change that, it's a drop-down! + + + +---------- + + + +To test other request types, go ahead **create a** `dummy-server.js` **file** with the following code, then **run** `node dummy-server.js`: + + +``` +const express = require('express') +const bodyParser = require('body-parser') + +const app = express() +app.use(bodyParser.json()) +app.use(bodyParser.urlencoded({ extended: false })) + +app.get('/test/:data', function (req, res) { + console.log("Someone is getting!") + console.log(req.params.data) + res.send("Thanks for the get, here's a potato.") +}) + +app.post('/test', function (req, res) { + console.log("Someone is posting!") + res.send("Thanks for the post, here's a potatoe.") +}) + +app.post('/testData', function (req, res) { + console.log(req.body) + res.end() +}) + +const port = 4349 +app.listen(port, function () { + console.log(`Server running on ${port}`) +}) +``` + + +We can use Postman to make a GET request to this `get` route as well - we just have to give it the whole path: `http://localhost:4349/test/something`: + + + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-get-to-custom-api.PNG) + + + +Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-get-to-custom-api.PNG) to emibggen. + + + +And of course, we can also use Postman to make a request to our `post` route, we just need to select POST from the dropdown: + + + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-post-to-custom-api.PNG) + + + +Click [here](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/postman-post-to-custom-api.PNG) to emibggen. \ No newline at end of file diff --git a/servers/postman/_sidebar.md b/servers/postman/_sidebar.md new file mode 100644 index 0000000..74e0d9f --- /dev/null +++ b/servers/postman/_sidebar.md @@ -0,0 +1,7 @@ +- [⬅ Back to Servers](../README.md) + +- [Basic Usage](./Basic-Usage.md) +- [Enjoy](./Enjoy.md) +- [Intro](./Intro.md) +- [Overview Video](./Overview-Video.md) +- [Sending Data](./Sending-Data.md) \ No newline at end of file diff --git a/servers/server-error-handling/README.md b/servers/server-error-handling/README.md new file mode 100644 index 0000000..692a227 --- /dev/null +++ b/servers/server-error-handling/README.md @@ -0,0 +1,4 @@ +# Comprehension Check + +{Check It!|assessment}(multiple-choice-1966696812) +{Check It!|assessment}(multiple-choice-2865629610) \ No newline at end of file diff --git a/servers/server-error-handling/_sidebar.md b/servers/server-error-handling/_sidebar.md new file mode 100644 index 0000000..8fd6979 --- /dev/null +++ b/servers/server-error-handling/_sidebar.md @@ -0,0 +1,13 @@ +- [⬅ Back to Servers](../README.md) + +- [Comprehension Check](./Comprehension-Check.md) +- [Example Introduction](./Example-introduction.md) +- [Exercises](./Exercises.md) +- [First Error](./First-Error.md) +- [Handle Error](./Handle-Error.md) +- [Handle Post Errors](./Handle-Post-Errors.md) +- [Handling Multiple Errors](./Handling-Multiple-Errors.md) +- [Intro](./Intro.md) +- [Post Errors](./Post-Errors.md) +- [Spot Check](./Spot-Check.md) +- [Summary](./Summary.md) \ No newline at end of file diff --git a/servers/status-codes-practice/README.md b/servers/status-codes-practice/README.md new file mode 100644 index 0000000..8af669e --- /dev/null +++ b/servers/status-codes-practice/README.md @@ -0,0 +1,3 @@ +# Page 2 + +# Sample content Page 2 \ No newline at end of file diff --git a/servers/status-codes-practice/_sidebar.md b/servers/status-codes-practice/_sidebar.md new file mode 100644 index 0000000..dd698ad --- /dev/null +++ b/servers/status-codes-practice/_sidebar.md @@ -0,0 +1,4 @@ +- [⬅ Back to Servers](../README.md) + +- [Page 2](./Page-2.md) +- [Task Code](./Task-Code.md) \ No newline at end of file diff --git a/solutions/README.md b/solutions/README.md new file mode 100644 index 0000000..f45d49e --- /dev/null +++ b/solutions/README.md @@ -0,0 +1,52 @@ +# Solutions + +- [Ajax Intro To Apis Solutions](ajax---intro-to-apis---solutions/README.md) +- [Algorithms Js Solutions](algorithms--js----solutions/README.md) +- [Big O Time Complexity Js Solutions](big-o---time-complexity--js----solutions/README.md) +- [Callbacks Arrow Functions Solutions](callbacks---arrow-functions---solutions/README.md) +- [Closures Modules Solutions](closures---modules---solutions/README.md) +- [Css 3 Variables Animations Solutions](css-3--variables---animations---solutions/README.md) +- [Css Basics Solutions](css-basics---solutions/README.md) +- [Css Grid Solutions](css-grid---solutions/README.md) +- [Data Flow Solutions](data-flow---solutions/README.md) +- [Data Structures Solutions](data-structures---solutions/README.md) +- [Dom Intro Solutions](dom-intro---solutions/README.md) +- [Dom Traversal With Jquery Solutions](dom-traversal-with-jquery---solutions/README.md) +- [Es6 Array Methods Solutions](es6-array-methods---solutions/README.md) +- [Express Crud Router Middleware Solutions](express--crud--router----middleware---solutions/README.md) +- [Express Intro Servers Routes Params Solutions](express-intro--servers--routes----params---solutions/README.md) +- [Functions Solutions](functions---solutions/README.md) +- [Html Basics Solutions](html-basics---solutions/README.md) +- [Intro To Json Solutions](intro-to-json---solutions/README.md) +- [Javascript Basics Solutions](javascript-basics---solutions/README.md) +- [Jquery Solutions](jquery---solutions/README.md) +- [Js This Solutions](js-this---solutions/README.md) +- [Local Storage Solutions](local-storage---solutions/README.md) +- [Matrices Solutions](matrices---solutions/README.md) +- [Mobx 1 Solutions](mobx-1---solutions/README.md) +- [Mobx 2 Solutions](mobx-2---solutions/README.md) +- [Mongo Db Intro Solutions](mongo-db-intro---solutions/README.md) +- [Mongoose Intro Solutions](mongoose-intro---solutions/README.md) +- [Mongoose Population Solutions](mongoose-population---solutions/README.md) +- [Node Solutions](node---solutions/README.md) +- [Npm Node Package Manager Solutions](npm---node-package-manager---solutions/README.md) +- [Object Oriented Programming Intro Oop Solutions](object-oriented-programming-intro--oop----solutions/README.md) +- [Oop Inheritance Solutions](oop-inheritance---solutions/README.md) +- [Promises Solutions](promises---solutions/README.md) +- [React Components Solutions](react-components---solutions/README.md) +- [React Events Set State Solutions](react-events---set-state---solutions/README.md) +- [React Hooks Solutions](react-hooks---solutions/README.md) +- [React Input Solutions](react-input---solutions/README.md) +- [React Intro Solutions](react-intro---solutions/README.md) +- [React Props State Data Flow Solutions](react-props--state---data-flow---solutions/README.md) +- [React Routes Solutions](react-routes---solutions/README.md) +- [Recursion Solutions](recursion---solutions/README.md) +- [Scope Solutions](scope---solutions/README.md) +- [Scraping R D Solutions](scraping-r-d---solutions/README.md) +- [Sql In Node Sequelize Solutions](sql-in-node--sequelize---solutions/README.md) +- [Sql Intro Js Solutions](sql-intro--js----solutions/README.md) +- [Sql Join Solutions](sql-join---solutions/README.md) +- [Stacks Queues Solutions](stacks---queues---solutions/README.md) +- [Trees And Binary Search Trees Solutions](trees-and-binary-search-trees---solutions/README.md) +- [Typescript R D Solutions](typescript-r-d---solutions/README.md) +- [Webpack R D Solutions](webpack-r-d---solutions/README.md) \ No newline at end of file diff --git a/solutions/ajax---intro-to-apis---solutions/README.md b/solutions/ajax---intro-to-apis---solutions/README.md new file mode 100644 index 0000000..0f7c21d --- /dev/null +++ b/solutions/ajax---intro-to-apis---solutions/README.md @@ -0,0 +1,188 @@ +# Solutions + +## Exercise 1 + +``` +const fetch = function (isbn) { + $.ajax({ + method: "GET", + url: `https://www.googleapis.com/books/v1/volumes?q=isbn:${isbn}`, + success: function (data) { + console.log(data); + }, + error: function (xhr, text, error) { + console.log(text); + } + }); +} + +fetch(9782806269171) +``` + + +## Exercise 2 + +``` +const fetch = function (queryType, queryValue) { + $.ajax({ + method: "GET", + url: `https://www.googleapis.com/books/v1/volumes?q=${queryType}:${queryValue}`, + success: function (data) { + console.log(data); + }, + error: function (xhr, text, error) { + console.log(text); + } + }); +} + +fetch("title", "The Wise Man's Fears") +fetch("isbn", 9789814561778) +``` + + +## Exercise 3 + +``` +const fetch = function (queryType, queryValue) { + $.ajax({ + method: "GET", + url: `https://www.googleapis.com/books/v1/volumes?q=${queryType}:${queryValue}`, + success: function (data) { + data.items.forEach(b => console.log(`Title: ${b.volumeInfo.title}, Author: ${b.volumeInfo.authors}, ISBN: ${b.volumeInfo.industryIdentifiers[0].identifier}`)) + }, + error: function (xhr, text, error) { + console.log(text); + } + }); +} + +fetch("title", "The Wise Man's Fears") +``` + + +## Exercise 4 + +``` +const fetch = function () { + $.get("http://api.giphy.com/v1/gifs/search?q=cats&api_key=50m5Set06jQuFMy7VNXir7iaNl8ypsEu", function (gifs) { + console.log(gifs.data[0].embed_url) + $(".gif").append(``) + +}) + + + +const fetch = function (input) { + $.ajax({ + method: "GET", + url: `http://api.giphy.com/v1/gifs/search?q=${input}&api_key=50m5Set06jQuFMy7VNXir7iaNl8ypsEu`, + success: appendGifs + }) +} + + + +$("#submit").on("click", function () { + + + let input = $("#yourgif").val() + console.log(input) + fetch(input) +}) +``` + + +## Google Books API Extension + +``` + let neruoscienceComputerBooks = [] + + + const fetch = function (startIndex) { + $.ajax({ + method: "GET", + url: `https://www.googleapis.com/books/v1/volumes?q=intitle:neuroscience&startIndex=${startIndex}&maxResults=40`, + success: function (data) { + console.log(data) + let book + for (let j = 0; j < data.items.length; j++) { + book = data.items[j] + if (book.volumeInfo.categories) { + if (book.volumeInfo.categories.some(c => c === "Computers")) { + neruoscienceComputerBooks.push(book.volumeInfo.title) + } + } + + + } + + + console.log(neruoscienceComputerBooks) + }, + error: function (xhr, text, error) { + console.log(text); + } + }); + } + + + let startIndexArr = [0, 40, 120] + for (let i = 0; i < 3; i++) { + console.log(i) + fetch(startIndexArr[i]) + } + + + console.log(neruoscienceComputerBooks) +``` \ No newline at end of file diff --git a/solutions/algorithms--js----solutions/README.md b/solutions/algorithms--js----solutions/README.md new file mode 100644 index 0000000..635f4df --- /dev/null +++ b/solutions/algorithms--js----solutions/README.md @@ -0,0 +1,177 @@ +# Solutions + +## Exercise 1 + +``` +const printStars = function (num) { + let ast = '' + for (let i = 1; i <= num; i++) { + ast += "*" + console.log(ast) + } +} + + +``` + +## Exercise 2 + +``` +const printBackwardsStars = function (num) { + let string = '' + + + while (num > 0) { + if (string.length < num) { + string += '*' + } else if (string.length === num) { + console.log(string) + num-- + string = '' + } + } +} + +``` + +## Exercise 3 + +``` +const printStarSeries = function (num, count) { + + + for (let j = 0; j < count; j++) { + for (let i = 1; i <= num; i++) { + console.log(i) + } + + + for (let i = num - 1; i > 0; i--) { + console.log(i) + } + } + + +} + +``` + +## Exercise 4 + +``` +const reverse = function (str) { + + + let reversed = '' + for (let i = str.length - 1; i >= 0; i--) { + reversed += str[i] + } + + + return reversed +} +``` + +## Exercise 5 + +``` +const isPalindrom = function (str) { + str = str.replace(/\s/g, '').toLowerCase() + console.log(str) + let r = reverse(str) + + + if (r === str) { + return true + } + + + return false +} +``` + +## Exercise 6 + +``` +const encrypt = function (str) { + + + let encryptedStr = '' + + + for (let i = 0; i < str.length; i++) { + let char = '' + str[i] === 'z' ? char = 'a' : char = String.fromCharCode(str.charCodeAt(i) + 1) + + + encryptedStr += char + } + + + return encryptedStr +} +``` + +## Exercise 7 + +``` +const decrypt = function (str) { + let decryptedStr = '' + + + for (let i = 0; i < str.length; i++) { + let char = '' + str[i] === 'a' ? char = 'z' : char = String.fromCharCode(str.charCodeAt(i) - 1) + decryptedStr += char + } + + + return decryptedStr +} +``` + +## Exercise 8 + +``` +const jumble = function (arr1, arr2) { + let jumbledArr = [] + + + for(let a of arr2) { + arr1.push(a) + } + + + while(arr1.length) { + let randomNumber = Math.floor(Math.random() * arr1.length) + jumbledArr.push(arr1.splice(randomNumber, 1)[0]) + } + + + return jumbledArr +} +``` + +## Exercise 9 + +``` +getLetter() { + const rawDist = { + A: 60, + B: 10, + C: 10, + D: 20 + } + let randomNum = Math.floor((Math.random() * 100) + 1) + const letters = Object.keys(rawDist) + let currentPercentage = 0 + for (let i = 0; i < letters.length; i++) { + const letter = letters[i] + if (rawDist[letter] + currentPercentage >= randomNum) { + return letter + } else { + currentPercentage += rawDist[letter] + } + } +} +``` \ No newline at end of file diff --git a/solutions/big-o---time-complexity--js----solutions/README.md b/solutions/big-o---time-complexity--js----solutions/README.md new file mode 100644 index 0000000..ef49f80 --- /dev/null +++ b/solutions/big-o---time-complexity--js----solutions/README.md @@ -0,0 +1,111 @@ +# Solutions + +## Exercise 1 + +``` +O(n) +``` + +## Exercise 2 + +``` +O(log(n)) +``` + +## Exercise 3 + +``` +O(1) +``` + +## Exercise 4 + +``` +O(NM) +``` + +## Exercise 5 + +``` +O(n) +``` + +## Exercise 6 + +``` +const findDuplicates = function (arr) { + + + let obj = {} + + + for (let i = 0; i < arr.length; i++) { + if(obj[arr[i]]) { + obj[arr[i]]++ + } else { + obj[arr[i]] = 1 + } + } + + + Object.keys(obj).forEach(k => { + if(obj[k] > 1) { + console.log("There is a duplicate") + } + }) +} + +``` + +## Exercise 7 + +``` +let employees = { + ax01: { + name: "Ray", + age: 28, + salary: 1300 + }, + qs84: { + name: "Lucius", + age: 31, + salary: 840 + }, + bg33: { + name: "Taylor", + age: 18, + salary: 2700 + } +} + +const findEmployeeSalary = function(employeeID) { + let salary = employees[employeeID].salary + return salary +} +``` + +## Exercise 8 + +``` +const findIndex = function (numbers, num) { + let startIndex = 0 + let endIndex = numbers.length - 1 + let middleIndex, index + let found = false + while(!found) { + middleIndex = Math.floor((endIndex - startIndex)/2) + index = middleIndex + startIndex + + + if(num === numbers[index]) { + found = true + } else if(numbers[index] > num) { + endIndex = middleIndex - 1 + } else if (numbers[index] < num) { + startIndex = middleIndex + startIndex + } + } + + return index +} +``` \ No newline at end of file diff --git a/solutions/callbacks---arrow-functions---solutions/README.md b/solutions/callbacks---arrow-functions---solutions/README.md new file mode 100644 index 0000000..9d5b03f --- /dev/null +++ b/solutions/callbacks---arrow-functions---solutions/README.md @@ -0,0 +1,89 @@ +# Solutions + +## Exercise 1 - Callbacks +``` +const pushPull = function (func) { + func() + } + + const push = function () { + console.log("pushing it!") + } + + const pull = function () { + console.log("pulling it!") + } + + pushPull(push) + pushPull(pull) +``` + +## Exercise 2 - Callbacks +``` +const getTime = function (func) { + const time = new Date() + func(time) +} + +const returnTime = function (time) { + alert('The current time is: ' + time) +} + +getTime(returnTime) +``` + +## Exercise 3 - Callbacks +``` +const displayData = function (alertDataFunc, logDataFunc, data) { + alertDataFunc(data) + logDataFunc(data) +} + +const logData = function (data) { + console.log(data) +} + +displayData(alert, logData, "I like to party") +``` + +## Exercise 4 - Arrow Functions +``` +const getSum = (a, b, c) => a + b + c + +console.log(getSum(1,2,3)) +``` + +## Exercise 5 - Arrow Functions +``` +const capitalize = str => str[0].toUpperCase() + str.slice(1).toLowerCase() + +const b = capitalize("bOb") // returns Bob +console.log(b) +const t = capitalize("TAYLOR") // returns Taylor +console.log(t) +const f = capitalize("feliSHIA") // returns Felishia +console.log(f) +``` + +## Exercise 6 - Arrow functions +``` +const determineWeather = temp => { + if (temp > 25) { + return "hot" + } + return "cold" +} + +const commentOnWeather = temp => `It's ${determineWeather(temp)}` + +console.log(commentOnWeather(30)) //returns "It's hot" +console.log(commentOnWeather(22)) //returns "It's cold" +``` + +## Exercise 7 +HTML (inside element): + + +``` +
+``` \ No newline at end of file diff --git a/solutions/closures---modules---solutions/README.md b/solutions/closures---modules---solutions/README.md new file mode 100644 index 0000000..4fbca1c --- /dev/null +++ b/solutions/closures---modules---solutions/README.md @@ -0,0 +1,131 @@ +# Solutions + +## Exercise 1 +``` +const StringFormatter = function () { + + const capitalizeFirst = function (str) { + let newStr = str[0].toUpperCase() + newStr += str.slice(1).toLowerCase() + + return newStr + } + + const skewerCase = function (str) { + let newStr = str.replace(/ /g, "-") + return newStr + } + + return { + capitalizeFirst, + skewerCase + } + } + + const formatter = StringFormatter() + + console.log(formatter.capitalizeFirst("dorothy")) + console.log(formatter.skewerCase("blue box")) + ``` + +## Exercise 2 +``` +const Bank = function () { + + let _money = 500 + + const depositCash = function (cash) { + _money += cash + } + + const checkBalance = function () { + console.log(_money) + } + + return { + deposit: depositCash, + showBalance: checkBalance + } + + } + + const bank = Bank() + + bank.deposit(200) + bank.deposit(250) + bank.showBalance() +``` + +## Exercise 3 +``` +const SongsManager = function () { + + + const _songs = {} + + + const _doesSongExist = function (newSong) { + const songKeys = Object.keys(_songs) + for(let song of songKeys) { + if(song === newSong) { + return true + } + } + return false + } + + + const _shaveSongLink = function (link) { + + const index = link.indexOf("=") + const newLink = link.slice(index + 1) + + + return newLink + } + + + const addSong = function (songName, songLink) { + const lowerCaseSong = songName.toLowerCase() + + if(_doesSongExist(lowerCaseSong)) { + console.log("You've already added this song.") + } else { + const shavedSongLink = _shaveSongLink(songLink) + _songs[lowerCaseSong] = shavedSongLink + } + } + + + const getSong = function (songName) { + if(_doesSongExist(songName)) { + console.log("https://www.youtube.com/watch?v=" + _songs[songName]) + } else { + console.log("This song is not in your list.") + } + } + + + + + return { + addSong, + getSong + } + } + + + const songsManager = SongsManager() + songsManager.addSong("sax", "https://www.youtube.com/watch?v=3JZ4pnNtyxQ") + songsManager.addSong("how long", "https://www.youtube.com/watch?v=CwfoyVa980U") + songsManager.addSong("ain't me", "https://www.youtube.com/watch?v=D5drYkLiLI8") + + + songsManager.getSong("sax") // should print https://www.youtube.com/watch?v=3JZ4pnNtyxQ + songsManager.getSong("how long") + songsManager.getSong("ain't me") + + + songsManager.addSong("sax") + songsManager.getSong("truth") +``` \ No newline at end of file diff --git a/solutions/css-3--variables---animations---solutions/README.md b/solutions/css-3--variables---animations---solutions/README.md new file mode 100644 index 0000000..f68d617 --- /dev/null +++ b/solutions/css-3--variables---animations---solutions/README.md @@ -0,0 +1,257 @@ +# Solutions + +## Exercise 1 + +``` +:root { + --glow-color: #F39C12; + } + + + + + @keyframes halo-glowing { + from { + box-shadow: -1px -1px 5px 5px var(--glow-color); + } + to { + box-shadow: -10px -10px 30px 30px var(--glow-color); + } + } + + + + + body { + display: grid; + background-color: #000000; + margin: 0; + height: 100vh; + } + + + #ball { + display: grid; + justify-self: center; + align-self: center; + background-color: var(--glow-color); + width: 200px; + height: 200px; + border-radius: 50%; + animation-name: halo-glowing; + animation-duration: 2s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: linear; + } + + +``` + + +## Exercise 2 + +``` +#ball:hover { + box-shadow: -10px -10px 30px 30px var(--glow-color); +} + +#ball { + box-shadow: -1px -1px 5px 5px var(--glow-color); + + + transition: box-shadow 2s; + transition-timing-function: linear; +} +``` + + +## Exercise 3 + +HTML: +``` + + +``` + +JS: +``` +const addMenu = function() { + + $("#button-container").empty().append( + ` +
+
+
+
+ + ` + ) + + + let newHTML = + `` + + $("body").append(newHTML) + + + } + + + const deleteMenu = function() { + $("#menu-container").remove() + } +``` + + +CSS: + +``` +@keyframes fade-menu { + from { + width: 0 + } + to { + width: 200px; + } + } + + + + + @keyframes make-x-1 { + from{ + transform: rotate(0deg); + margin-left: 0; + } + to { + transform: rotate(-45deg); + margin-left: 4px; + } + } + + + @keyframes make-x-2 { + from{ + transform: rotate(0deg); + margin-left: 0; + margin-top: 0; + } + to { + transform: rotate(45deg); + margin-left: 3px; + margin-top: -6px; + } + } + + + + + + + :root { + --secondary-color: #F7D794; + } + + + #nav-bar { + display: grid; + height: 75px; + width: 100%; + background-color: #CF6A87; + } + + + .line { + background-color: var(--secondary-color); + height: 4px; + width:30px; + margin: 2px; + } + + + #hamburger { + display: grid; + align-self: center; + + } + + + #button-container { + margin-left: 30px; + display: grid; + align-self: center; + } + + + #menu-container { + background-color: var(--secondary-color); + height: 500px; + width: 200px; + + + animation-name: fade-menu; + animation-duration: 2s; + animation-direction: alternate; + + + display: grid; + grid-template-rows: repeat(3, 1fr); + grid-gap: 20px; + overflow: hidden; + } + + + /* #menu { + display: grid; + grid-template-rows: repeat(3, 1fr); + grid-gap: 50px; + } */ + + + .menu-item{ + margin-left: 10px; + } + + + .line-x { + background-color: var(--secondary-color); + height: 4px; + width:30px; + margin: 2px; + } + + + #line-x-1 { + transform: rotate(-45deg); + margin-left: 4px; + + + animation-name: make-x-1; + animation-duration: 1s; + } + + + #line-x-2 { + transform: rotate(45deg); + margin-left: 3px; + margin-top: -6px; + + + animation-name: make-x-2; + animation-duration: 1s; + } +``` \ No newline at end of file diff --git a/solutions/css-basics---solutions/README.md b/solutions/css-basics---solutions/README.md new file mode 100644 index 0000000..b140026 --- /dev/null +++ b/solutions/css-basics---solutions/README.md @@ -0,0 +1,39 @@ +# Solutions + +Exercise 1 +- +```css +.box { + border: 1px solid black; + display: inline-block; + width: 50px; + height: 50px; +} + +#first { + background-color: rgb(10, 158, 133); +} + +#second { + background-color: rgb(216, 112, 38); +} + +button { + background-color: rgb(67, 202, 128); + box-shadow: 1px; + border-color: mediumseagreen; +} + +body { + background-color: lightgrey; + font-family: sans-serif; +} + +#container { + width: 153px; + height: 131px; + background-color: lightgrey; + font-family: sans-serif; + box-shadow: 2px 2px 5px black; +} +``` \ No newline at end of file diff --git a/solutions/css-grid---solutions/README.md b/solutions/css-grid---solutions/README.md new file mode 100644 index 0000000..cbdd376 --- /dev/null +++ b/solutions/css-grid---solutions/README.md @@ -0,0 +1,197 @@ +# Solutions + +Chat UI Exercise +-- +html: +```html +
+ + +
+
Friends
+
Freya
+
Linda
+
Kenan
+
Theresa
+
+ + +
+
+
+
Hey
+
14:00
+
+
+
Hello?
+
14:31
+
+
+
Sorry, been busy
+
17:58
+
+
+
You work too much
+
17:59
+
+
+
Tell me about it
+
17:59
+
+
+
+ +
SEND
+
+
+ + +
+ + + +``` + +CSS: + + +```css +#container { + display: grid; + height: 100vh; + grid-template-columns: 1fr 4fr; + + + } + + + #contact-container { + display: grid; + background-color: #8E44AD; + height: 100%; + padding-right: 10px; + padding-left: 10px; + font-family: 'Inconsolata', monospace; + + + } + + + #contact-head { + font-weight: bold; + margin-left: 8px; + margin-top: 10px; + } + + + .friend { + background-color: #9B59B6; + height: 5vh; + border-radius: 3px; + align-content: center; + display: grid; + padding-left: 5px; + } + + + #chat-container { + display: grid; + grid-template-rows: 9fr 1fr; + background-color: #ECF0F1; + } + + + #message-container { + display: grid; + grid-template-rows: repeat(5, 1fr); + grid-gap: 60px; + } + + + + + .message { + + display: grid; + grid-template-areas: + "m t"; + + + border-radius: 7px; + margin-left: 10px; + margin-right: 10px; + grid-gap: 20px; + + + margin-bottom: 10px; + margin-top: 10px; + + } + + + .friend-message { + display: grid; + justify-self: start; + background-color: #2ecc71; + } + + + .my-message { + display: grid; + justify-self: end; + background-color: #BDC3C7; + } + + + .message-text { + font-family: 'Indie Flower', cursive; + display: grid; + grid-area: m; + padding-left: 8px; + align-self: center; + justify-self: start; + } + + + .message-time { + font-family: 'Gloria Hallelujah', cursive; + display: grid; + grid-area: t; + padding-right: 8px; + padding-bottom: 3px; + justify-self: end; + align-self: end; + font-size: 12px; + } + + + + + #editor-container { + + display: grid; + grid-template-columns: 4fr 1fr; + height: 100%; + } + + + #write-message { + + + font-size: 12px; + display: grid; + padding-left: 5px; + border: grey solid 1px; + align-content: center; + background-color: #FFFFFF; + } + + + #send-button{ + font-size: 14px; + display: grid; + align-content: center; + justify-content: center; + background-color: #8E44AD; + } +``` \ No newline at end of file diff --git a/solutions/data-flow---solutions/README.md b/solutions/data-flow---solutions/README.md new file mode 100644 index 0000000..2a50f4a --- /dev/null +++ b/solutions/data-flow---solutions/README.md @@ -0,0 +1,75 @@ +# Solutions + +## Recap Exercise +``` +const posts = [ + { + name: "Uncle Jerome", + text: "Happy birthday kido!" + }, + { + name: "BFF Charlene", + text: "HEARTS LOVE YOU FOREVER BFF4LYFE HBD" + }, + { + name: "Old High School Teacher", + text: "Hey ace, have a good one." + } + ] + + + const render = function() { + for(let post of posts) { + $("#posts").append($(`
${post.name}: ${post.text}
`)) + } + } + + + render() + + + $("button").on("click", function () { + + + + const $name = $("#name") + const $text = $("#text") + + + const post = {name: $name.val(), text: $text.val()} + + + posts.push(post) + + + $("#posts").empty() + render() + + + $name.val("") + $text.val("") + }) +``` + +## Extension +``` +$("#posts").on("click", ".post", function () { + + const $post = $(this) + + const name = $post.text().substring(0, $post.text().indexOf(":")) + + + + + for(let i in posts) { + if(posts[i].name === name) { + posts.splice(i, 1) + } + } + + + $("#posts").empty() + render() + }) +``` \ No newline at end of file diff --git a/solutions/data-structures---solutions/README.md b/solutions/data-structures---solutions/README.md new file mode 100644 index 0000000..8276e53 --- /dev/null +++ b/solutions/data-structures---solutions/README.md @@ -0,0 +1,71 @@ +# Solutions + +## Exercise + +``` +class UniqueArray { + constructor() { + this.arr = [] + this.length = 0 + this.obj = {} + } + + add(item) { + if(!this.exists(item)) { + this.arr[this.length] = item + this.length++ + this.obj[item] = 1 + } + } + + + showAll() { + console.log(this.arr) + } + + + exists(item) { + if(this.obj[item]){ + return true + } else { + return false + } + } + + + get(index) { + if(index <= (this.length - 1)){ + return this.arr[index] + } else { + return -1 + } + } + + +} +``` + + +## Extension + +``` +_isPrimitive(item) { + if(typeof item === "number" || typeof item === "string" || typeof item === "boolean" ||typeof item === "undefined" || typeof item === "null" || typeof item === "symbol") { + return true + } else { + return false + } +} + + +add(item) { + if(this._isPrimitive(item)) { + if(!this.exists(item)) { + this.arr[this.length] = item + this.length++ + this.obj[item] = 1 + } + } +} + +``` \ No newline at end of file diff --git a/solutions/dom-intro---solutions/README.md b/solutions/dom-intro---solutions/README.md new file mode 100644 index 0000000..b80b384 --- /dev/null +++ b/solutions/dom-intro---solutions/README.md @@ -0,0 +1,299 @@ +# Solutions + +Completing the Game +- +index.html: +```html +
↑
←
↓
+
+``` + + +main.js: +```js +const playingField = document.getElementById("playing-field") +const down = document.getElementById("down") +const ball = document.getElementById("block") +ball.style.backgroundColor = "yellow" + +const header = document.createElement("h1") +header.innerHTML = "The Best Game Ever" +header.style.color = "#c0392b" +header.style.fontFamily = "Helvetica" +document.body.appendChild(header) + +const subHeader = document.createElement("h2") +subHeader.innerHTML = "Game by: Danny Brudner" +subHeader.setAttribute("class", "sub-header") +document.body.appendChild(subHeader) + +const moveUp = function () { + const initialVal = parseInt(ball.style.top) || 0 + ball.style.top = (initialVal - 15) + "px" +} + +const moveLeft = function () { + const initialVal = parseInt(ball.style.left) || 0 + ball.style.left = (initialVal - 15) + "px" +} + +const moveRight = function () { + const initialVal = parseInt(ball.style.left) || 0 + ball.style.left = (initialVal + 15) + "px" +} + +const moveDown = function () { + const initialVal = parseInt(ball.style.top) || 0 + ball.style.top = (initialVal + 15) + "px" +} +``` +Reservations +- +index.html: +```html + + +``` + + +main.js +```js +const reservations = { + Bob: { claimed: false }, + Ted: { claimed: true } +} + +const checkReservation = function () { + const name = document.getElementById("name").value + const lowerCaseName = name.toLowerCase() + const editedName = lowerCaseName.charAt(0).toUpperCase() + lowerCaseName.slice(1) + if (reservations[editedName] && !reservations[editedName].claimed) { + alert("Welcome in, " + editedName) + reservations[editedName].claimed = true + } else if (reservations[editedName] && reservations[editedName].claimed) { + alert("Hmm, someone already claimed this reservation") + } else if (!reservations[editedName]) { + alert("You have no reservation") + reservations[editedName] = { claimed: true } + } +} +``` +Visual Overload +- +HTML (inside element):: + +
+ + + +CSS: +```css +#container { + display: flex; +} + +.box { + width: 100px; + height: 100px; + border: 1px solid black; + margin: 1px; +} +``` + + +JS: +```js +const getRandomColor = function () { + const niceColors = ['#8e44ad', '#3498db', '#c0392b', '#f1c40f', '#d35400', '#2ecc71', '#1abc9c', '#2c3e50', '#7f8c8d']; + const randomPosition = Math.floor(Math.random() * niceColors.length); + return niceColors[randomPosition]; +}; + +for (let i = 1; i < 8; i++) { + const newBox = document.createElement('div'); + newBox.setAttribute('class', 'box'); + newBox.style.backgroundColor = getRandomColor(); + newBox.onmouseenter = function () { + const randomColor = getRandomColor(); + newBox.style.backgroundColor = randomColor; + }; + document.getElementById('container').appendChild(newBox); +} +``` +Form +- +HTML: + + +```html + + + + + + + Page Title + + + + + + + +
+
+
+
Name
+ +
+
+
+
Desired Salary
+ +
+
+
Birthday
+ +
+
+
+
Phone
+ +
+ +
+
+ + + + + +``` + + +CSS: + + +```css +body { + font-family: helvetica; +} + +#container { + position: relative; + background-color: #1abc9c; + display: inline-block; + padding-top: 40px; + padding-bottom: 40px; + padding-right: 20px; + padding-left: 20px; + border: #16a085 solid 4px; +} + +#form { + position: relative; + width: 350px; + height: 300px; +} + +.main { + margin: 12px; +} + +.second-line { + display: inline-block; +} + +#error-message { + color: red; + position: absolute; +} + +#name{ + width: 100%; +} + +#desired-salary { + width: 150px; +} + +#birthday { + width: 100%; +} + +#phone { + width: 100%; +} + +#button { + position: absolute; + right: 20px; + bottom: 20px; + background-color: #34495e; + color: #95a5a6; + border: #2c3e50 solid 3px; + + width: 75px; + height:35px; + border-radius: 5% +} +``` + + +JS: + + +```js +const isMissing = function(input) { + if(input.length === 0) { + return true + } else { + return false + } +} + +const message = document.createElement("div") +message.setAttribute("id", "error-message") + +const validate = function() { + + const form = document.getElementById("form") + const name = document.getElementById("name").value + const salary = parseInt(document.getElementById("desired-salary").value) + console.log(salary) + const birthday = document.getElementById("birthday").value + const phone = document.getElementById("phone").value + + + + if(isMissing(name)){ + message.innerHTML = "Name is missing" + } else if(name.length <= 2) { + message.innerHTML = "Name is too short, please enter name with more than 2 characters" + } else if (isMissing(salary)) { + message.innerHTML = "Desired salary is missing" + } else if((salary < 10000)) { + message.innerHTML = "Salary must be greater than 10000" + } else if((salary > 16000)) { + message.innerHTML = "Salary must be less than 16000" + } else if (isMissing(birthday) || birthday === null) { + message.innerHTML = "Please enter your birthday" + } else if(isMissing(phone)) { + message.innerHTML = "Phone is missing" + } else if(phone.length < 10) { + message.innerHTML = "Phone number too short, must be 10 digits" + } else if(phone.length > 10) { + message.innerHTML = "Phone number too long, must be 10 digits" + } else { + form.style.display = "none"const welcome = document.createElement("h1") + welcome.innerHTML = "Welcome in, " + name + welcome.style.color = "green"document.body.appendChild(welcome) + } + + + + + document.getElementById("form").appendChild(message) + +} +``` \ No newline at end of file diff --git a/solutions/dom-traversal-with-jquery---solutions/README.md b/solutions/dom-traversal-with-jquery---solutions/README.md new file mode 100644 index 0000000..1234919 --- /dev/null +++ b/solutions/dom-traversal-with-jquery---solutions/README.md @@ -0,0 +1,30 @@ +# Solutions + +## Exercises +``` +let ids = [] + + + $(".generator").on("click", function () { + let processor = $(this).closest(".processor").attr("id") + let dataId = $(this).closest(".computer").data().id + let busNum = $(this).closest(".computer").find(".BUS").text() + + + ids.push({cmp_id: dataId}) + + + console.log(`Processor ID: ${processor}\nComputer's data-id: ${dataId}\nBUS: ${busNum}`) + }) + + + + + $(".validator").on("click", function() { + let generatorText = $(this).closest(".computer").find(".generator").text() + let mb = $(this).closest(".computer").find(".MB").text() + let qr1 = $(this).closest(".computer").find(".QR:first-child").text() + let qr2 = $(this).closest(".computer").find(".QR:nth-child(2)").text() + console.log(`Text: ${generatorText}\nMB: ${mb}\nQR 1: ${qr1}\nQR 2: ${qr2}`) + }) +``` \ No newline at end of file diff --git a/solutions/es6-array-methods---solutions/README.md b/solutions/es6-array-methods---solutions/README.md new file mode 100644 index 0000000..65cb319 --- /dev/null +++ b/solutions/es6-array-methods---solutions/README.md @@ -0,0 +1,51 @@ +# Solutions + +## Exercise 1 + +``` + const emailCompany = users.map(u => {return {email: u.email, companyName: u.company.name}}) +``` + + +## Exercise 2 + +``` +const zipCodeFive = users.filter(u => u.address.zipcode[0] === "5") +``` + + +## Exercise 3 + +``` +const zipCodeFiveId = users.filter(u => u.address.zipcode[0] === "5") + .map(u => u.id) +``` + + +## Exercise 4 + +``` +const names = users.map(u => u.name) + .filter(n => n[0].toLowerCase() === "c") +``` + + +## Exercise 5 + +``` +const doesAllLiveSC = users.every(u => u.address.city === "South Christy") +``` + + +## Exercise 6 + +``` +const findUser = suite => console.log(users.find(u => u.address.suite === suite).company.name) +``` + + +## Exercise 7 + +``` +const printInfo = user => console.log(`${user.name} lives in ${user.address.city}, and owns the company ${user.company.name}`) users.forEach(printInfo) +``` \ No newline at end of file diff --git a/solutions/express--crud--router----middleware---solutions/README.md b/solutions/express--crud--router----middleware---solutions/README.md new file mode 100644 index 0000000..46950d8 --- /dev/null +++ b/solutions/express--crud--router----middleware---solutions/README.md @@ -0,0 +1,85 @@ +# Solutions + +## Exercise 1 +``` +router.get('/sanity', function(req, res) { + res.send("Server up and running") + }) +``` + +## Exercise 2 +``` +const wordCounter = {} +router.get('/word/:word', function(req, res) { + if(wordCounter[req.params.word]) { + res.send({count: wordCounter[req.params.word]}) + } else { + res.send({count: 0}) + } + + + }) +``` + +## Exercise 3 +``` +router.post('/word/:word', function(req, res) { + + if(wordCounter[req.params.word]) { + wordCounter[req.params.word]++ + } else { + wordCounter[req.params.word] = 1 + } + + + res.send({text: `Added ${req.params.word}`, currentCount: wordCounter[req.params.word]}) + }) +``` + +## Exercise 4 +``` +router.post('/words/:sentence', function(req, res) { + + let words = req.params.sentence.split(" ") + let numNewWords = 0 + let numOldWords = 0 + + + for(let word of words) { + if(wordCounter[word]) { + wordCounter[word]++ + numOldWords++ + } else { + wordCounter[word] = 1 + numNewWords++ + } + } + + + res.send({text: `Added ${numNewWords} words, ${numOldWords} already existed.`, currentCount: -1}) + }) +``` + +## Exercise 5 +``` +router.get('/total', function(req, res) { + const words = Object.keys(wordCounter) + let sum = 0 + + for(let word of words) { + sum += wordCounter[word] + } + + + res.send({text: "Total count", count: sum}) + }) +``` + +## Extension 1 +No Solution + +## Extension 2 +No Solution + +## Extension 3 +No Solution \ No newline at end of file diff --git a/solutions/express-intro--servers--routes----params---solutions/README.md b/solutions/express-intro--servers--routes----params---solutions/README.md new file mode 100644 index 0000000..e4428c2 --- /dev/null +++ b/solutions/express-intro--servers--routes----params---solutions/README.md @@ -0,0 +1,146 @@ +# Solutions + +## Exercise 2 +``` +app.get('/priceCheck/:name', function(request, response) { + let name = request.params.name + let priceObj = {price: null} + for(let obj of store) { + if(obj.name === name) { + priceObj = {price: obj.price} + } + } + + + response.send(priceObj) + }) +``` + +## Exercise 3 +HTML: +``` +
+ + +

+
Money:
+``` +JS: +``` +$("#submit").on("click", function () { + const input = $("#furniture").val() + $.get(`/priceCheck/${input}`, function (furnData) { + $("body").append(`
${furnData.price}
`) + }) + $("#furniture").val("") + }) +``` + +## Exercise 4 +``` +app.get('/buy/:name', function(request, response) { + let name = request.params.name + for(let obj of store) { + if(obj.name === name) { + obj.inventory -= 1 + response.send(`Congrats! You've just bought ${obj.name} for ${obj.price}. There are ${obj.inventory} left in stock.`) + } + } + + + response.end() + }) +``` + +## Exercise 5 +html: +``` + + +``` +js: +``` +$("#buy").on("click", function () { + const input = $("#buy-furniture").val() + + + $.get(`/buy/${input}`, function (response) { + $("body").append(`
${response}
`) + }) + + + $("#buy-furniture").val("") +}) +``` + +## Exercise 6 +``` +app.get('/sale', function(request, response) { + let q = request.query + if(q.admin) { + for(let obj of store) { + if(obj.inventory > 10){ + obj.price *= 0.5 + + + } + console.log(obj.price) + } + } + + + response.end() + }) +``` + +## Extension 1 +html: +``` +
Money:
+``` +js: +``` +$("#buy").on("click", function () { + const input = $("#buy-furniture").val() + + + $.get(`/priceCheck/${input}`, function(priceObj) { + if(money >= priceObj.price) { + $.get(`/buy/${input}`, function (response) { + $("body").append(`
${response}
`) + }) + money -= priceObj.price + fetch() + } else { + $("#money-container").append(`
Not enough money, get a job!
`) + } + }) + + + $("#buy-furniture").val("") + }) +``` + +## Extension 2 +``` +let currentChairPrice + + + setInterval(function() { + $.get(`/priceCheck/chair`, function(priceObj) { + if(!currentChairPrice) { + currentChairPrice = priceObj.price + console.log("set current price") + } else if(priceObj.price < currentChairPrice) { + $.get('/buy/chair', function(response) { + console.log("bought chair for less") + currentChairPrice = priceObj.price + }) + } else { + console.log("Still waiting for price drop.") + } + }) + + + }, 3000) +``` \ No newline at end of file diff --git a/solutions/functions---solutions/README.md b/solutions/functions---solutions/README.md new file mode 100644 index 0000000..602dad5 --- /dev/null +++ b/solutions/functions---solutions/README.md @@ -0,0 +1,80 @@ +# Solutions + +Exercise 1 +- +```js +const isEven = function(number) { + return (number % 2) === 0 +} + +const evenOrOdd = isEven(21) +console.log(evenOrOdd) +``` +Exercise 2 +- +```js +const printOdds = function (numbers) { + for(let number of numbers) { + if(!isEven(number)) { + console.log(number) + } + } +} + +const numbers = [17, 81, 98, 99, 70, 20, 18, 9, 20, 12, 31, 33] + +printOdds(numbers) +``` +Exercise 3 +- +```js +const checkExists = function (ints, num) { + for(let number of ints) { + if(number === num) { + return true + } + } + return false +} + +const numbers = [17, 81, 98, 99, 70, 20, 18, 9, 20, 12, 31, 33] + +console.log(checkExists(numbers, 99)) +``` +Exercise 4 +- +```js +const calculator = { + add: function (a, b) { + return a + b + }, + subtract: function(a, b) { + return a - b + } +} + +const result1 = calculator.add(20, 1) +const result2 = calculator.subtract(30, 9) + +console.log(calculator.add(result1, result2)) +``` +Exercise 5 +- +```js +const makeRegal = function(name) { + return "His Royal Highness, " + name +} + +const increaseByNameLength = function(money, name) { + return name.length * money +} + +const turnToKing = function(name, money){ + name = name.toUpperCase() + money = increaseByNameLength(money, name) + name = makeRegal(name) + console.log(name + " has " + money + " gold coins") +} + +turnToKing("martin luther", 100) +``` \ No newline at end of file diff --git a/solutions/html-basics---solutions/README.md b/solutions/html-basics---solutions/README.md new file mode 100644 index 0000000..b771a0a --- /dev/null +++ b/solutions/html-basics---solutions/README.md @@ -0,0 +1,39 @@ +# Solutions + +## Exercise 1 + +``` +
+
    +
  • dog
    • +
  • Cat
    • +
+
+ + +
+ One Love! + Elevation +
+

My first website

+ +

My dogs

+ + + +
+ YOUR INFO +
+ Name: +
+
+ Wish: +
+
+ Birthday: +
+
+ +
+
+``` \ No newline at end of file diff --git a/solutions/intro-to-json---solutions/README.md b/solutions/intro-to-json---solutions/README.md new file mode 100644 index 0000000..606cb04 --- /dev/null +++ b/solutions/intro-to-json---solutions/README.md @@ -0,0 +1,99 @@ +# Solutions + +## Exercise 1 +The solution is in exercise 2 + +## Exercise 2 +``` +let recipe = { + "name": "Mashed Potatoes", + "serves": 4, + "ingredients": [ + { + "name": "water" + }, + { + "name": "potatoes", + "count": 2 + }, + { + "name": "butter", + "count": 2, + "unit": "tablespoons" + }, + { + "name": "salt", + "count": 0.5, + "unit": "teaspoon" + }, + { + "name": "pepper", + "count": 0.25, + "unit": "teaspoons" + }, + { + "name": "garlic powder", + "count": "2", + "unit": "teaspoons" + } + ], + "directions": [ + "Cut potatoes into half inch thick slices", + "Add potatoes to a pot and cover with an inch of water.", + "Bring the water to a boil over high heat, then reduce to a simmer and cover.", + "Simmer for 20 minutes or until potatoes are fork tender.", + "Drain water from potatoes, leaving the potatoes in the original pot.", + "Add remaining ingredients to the pot with the potatoes.", + "Mash potatoes until they reach the desired consistency.", + "Serve immediately, or cover and refrigerate." + ], + "calories": "250", + "healthy": "true" + } +``` + +## Exercise 3 +The solution is in exercise 4 + +## Exercise 4 +``` +{ + "name": "gray wolf", + "weight": { + "count": "37", + "unit": "kilograms" + }, + "habitat": "Eurasia", + "endangered": true, + "diet": [ + { + "food type": "deer", + "percentage of diet": "80" + }, + { + "food type": "elk", + "percentage of diet": "10" + }, + { + "food type": "moose", + "percentage of diet": "5" + }, + { + "food type": "livestock", + "percentage of diet": "2" + }, + { + "food type": "carrion", + "percentage of diet": "2" + }, + { + "food type": "garbage", + "percentage of diet": "1" + } + ], + "eaten by": [ + "grizzly" + ], + "how delicious": 2 + } +``` \ No newline at end of file diff --git a/solutions/javascript-basics---solutions/README.md b/solutions/javascript-basics---solutions/README.md new file mode 100644 index 0000000..1d150eb --- /dev/null +++ b/solutions/javascript-basics---solutions/README.md @@ -0,0 +1,14 @@ +# Arrays + +Exercise 1 +- +```js +const numbers = [1,2,3,4,5,6,7,8,9,10] + +numbers.splice(1,2) +numbers[3] = 1 +numbers.splice(numbers.length - 4) +numbers.unshift(0) +// or: numbers.splice(0,0,0) +console.log(numbers) +``` \ No newline at end of file diff --git a/solutions/javascript-basics---solutions/_sidebar.md b/solutions/javascript-basics---solutions/_sidebar.md new file mode 100644 index 0000000..cd1c43d --- /dev/null +++ b/solutions/javascript-basics---solutions/_sidebar.md @@ -0,0 +1,7 @@ +- [⬅ Back to Solutions](../README.md) + +- [Arrays](./Arrays.md) +- [Conditional Statements](./Conditional-Statements.md) +- [Loops](./Loops.md) +- [Objects](./Objects.md) +- [Variables Identifiers And Operators](./Variables--Identifiers-and-Operators.md) \ No newline at end of file diff --git a/solutions/jquery---solutions/README.md b/solutions/jquery---solutions/README.md new file mode 100644 index 0000000..d9d74c0 --- /dev/null +++ b/solutions/jquery---solutions/README.md @@ -0,0 +1,119 @@ +# Solutions + +## Exercise 1 +``` +$("button").on("click", function () { + $("#human-list").append(`
  • ${$("input").val()}
    • `) + $("input").val("") + }) +``` + +## Exercise 2 +``` +$("#human-list").on("click", "li", function() { + $(this).remove() + }) +``` + +## Exercise 3 +``` +$("body").append("
    ") +$("body").append("
    ") + +let $boxes = $(".box") + +$(".box").hover(function () { + $boxes.css("background-color", "rgb(231, 76, 60)") + $(this).css("background-color", "rgb(142, 68, 173)") +}) +``` + +## Exercise 4 +``` +$(".item").click(function () { + + if ($(this).data().instock) { + $("#cart").append(`
    ${$(this).text()}
    `) + } + }) */ +``` + +## Exercise 5 +``` +const fruits = [ + { name: "Orange", color: "orange" }, + { name: "Banana", color: "yellow" }, + { name: "Coconut", color: "brown" }, + { name: "Kiwi", color: "brown" }, + { name: "Lemon", color: "yellow" }, + { name: "Cucumber", color: "green" }, + { name: "Persimmon", color: "orange" }, + { name: "Pumpkin", color: "orange" } + ] + + for(let fruit of fruits) { + $("#basket").append(`
    ${fruit.name}
    `) + } +``` + +## Extensions - Color Picker +``` +let $spans = $("span") + + for(let $span of $spans) { + console.log($span) + $($span).addClass("picker") + $($span).css("background-color", $($span).data().color) + + $($span).on("click", function () { + const color = $($span).data().color + $(".box").css("background-color", color) + }) + } +``` + +## Extensions - Cart +``` +let melonCounter = 1 + let shoeCounter = 1 + + + $(".item").click(function () { + + + if ($(this).data().instock) { + + + if ($(this).text() === "Shoe") { + + + if (shoeCounter === 1) { + $("#cart").append(`
    ${$(this).text()}
    `) + shoeCounter++ + } else { + $(".shoe").remove() + $("#cart").append(`
    ${$(this).text()} x${shoeCounter}
    `) + shoeCounter++ + } + + + } else if ($(this).text() === "Melon") { + if (melonCounter === 1) { + $("#cart").append(`
    ${$(this).text()}
    `) + melonCounter++ + } else { + $(".melon").remove() + $("#cart").append(`
    ${$(this).text()} x${melonCounter}
    `) + melonCounter++ + } + } + + + } + }) + + + $("#cart").on("click", ".cart-item", function () { + $(this).remove() + }) +``` \ No newline at end of file diff --git a/solutions/js-this---solutions/README.md b/solutions/js-this---solutions/README.md new file mode 100644 index 0000000..5f2317e --- /dev/null +++ b/solutions/js-this---solutions/README.md @@ -0,0 +1,203 @@ +# Solutions + +Exercise 1 +- +```js +const person = { + hungry: true, + + feed: function () { + if (this.hungry) { + this.hungry = false; + alert('Im no longer hungry!') + } + } + } + + person.feed() //should alert "I'm no longer hungry" +``` +Exercise 2 +- +```js + const pump = function (amount) { + this.liters += amount; + console.log('You put ' + amount + ' liters in ' + this.name); + }; + + const garage = { + car1: { + name: 'Audi', + liters: 3, + fillTank: pump + }, + car2: { + name: 'Mercedes', + liters: 1, + fillTank: pump + } + }; + + garage.car1.fillTank(2); + console.log('Audi should have 5 liters: ', garage.car1.liters); + + garage.car2.fillTank(30); + console.log('Mercedes should have 31 liters: ', garage.car2.liters); +``` +Exercise 3 +- +```js + const pumpFuel = function (plane) { + plane.fuel += 1; + }; + + const airplane = { + fly: function () { + if (this.fuel < 2) { // #1 - add "this" to "fuel" + return 'on the ground!'; + } + else { + return 'flying!'; + } + }, + fuel: 0 // #2 - add a "fuel" property with value of 0 + }; + + console.log('The plane should not be able to fly (yet): ' + airplane.fly()); + + pumpFuel(airplane); + console.log('The plane should STILL not be able to fly: ' + airplane.fly()); + + pumpFuel(airplane); + console.log('Take off! ' + airplane.fly()); +``` +Exercise 4 +- +```js + const tipJar = { + coinCount: 20, + tip: function () { + this.coinCount += 1; + }, + stealCoins: function (amount) { + this.coinCount -= amount + } + }; + + tipJar.tip(); + console.log('Tip jar should have 21 coins: ' + tipJar.coinCount); + + tipJar.stealCoins(3); + console.log('Tip jar should have 18 coins: ' + tipJar.coinCount); + + tipJar.stealCoins(10); + console.log('Tip jar should have 8 coins: ' + tipJar.coinCount); +``` +Exercise 5 +- +```js + const revealSecret = function () { + return this.secret; + }; + + const shoutIt = function (person, func) { + person.revealItAll = func; + const result = person.revealItAll(); + alert(person.name + " said: " + result); + }; + + const avi = { + name: "Avi", + secret: "Im scared of snakes!" + }; + + const narkis = { + name: "Narkis", + secret: "I dont have secrets because I'm zen like that." + }; + + shoutIt(avi, revealSecret); + shoutIt(narkis, revealSecret); +``` +Exercise 6 +- +```js +const coffeeShop = { + beans: 40, + + + money: 15, + + drinkRequirements: { + latte: {beanRequirement: 10, price: 10}, + americano: {beanRequirement: 5, price: 5}, + doubleShot: {beanRequirement: 15, price: 15}, + frenchPress: {beanRequirement: 12, price: 12} + }, + + + buyBeans: function(numBeans) { + + + this.beans += numBeans + this.money -= numBeans * 0.5 + + }, + + + hasDrink: function(drinkType) { + let drinks = Object.keys(this.drinkRequirements) + + for(let drink of drinks) { + if(drink === drinkType){ + return true + } + } + + + return false + }, + + + hasEnoughBeans: function(drinkType) { + if(this.beans > this.drinkRequirements[drinkType].beanRequirement) { + return true + } else { + return false + } + }, + + + useBeans: function(drinkType) { + this.beans -= this.drinkRequirements[drinkType].beanRequirement + }, + + makeDrink: function (drinkType) { + + /* Because of the exercise extension we already don't need the first if here because we need + to check if the drink exists as to not get an error + if(!this.hasDrink(drinkType)) { + alert("Sorry, we don't make " + drinkType) + } else */ if(!this.hasEnoughBeans(drinkType)) { + //can also use the buy beans function + /* + this.buyBeans(this.drinkRequirements[drinkType].beanRequirement) + */ + alert("Sorry we're all out of beans!") + } else { + this.useBeans(drinkType) + } + + + }, + + + buyDrink: function(drinkType) { + if(this.hasDrink(drinkType)){ + this.money += this.drinkRequirements[drinkType].price + this.makeDrink(drinkType) + } else { + alert("Sorry, we don't make " + drinkType) + } + } + } +``` \ No newline at end of file diff --git a/solutions/local-storage---solutions/README.md b/solutions/local-storage---solutions/README.md new file mode 100644 index 0000000..a549498 --- /dev/null +++ b/solutions/local-storage---solutions/README.md @@ -0,0 +1,93 @@ +# Solutions + +## Exercises +html: +``` +
    + + + +
    + + +
    +``` +JS +``` +let wisdom = [] + let input + // let texts = localStorage.wisdom || [] + + + let texts = JSON.parse(localStorage.wisdom || "[]") + + + + + if (texts) { + for (let a of texts) { + $("#info").append(`
    ${a.text}
    `) + } + } + + + let isInside + let p + $("#app").on("click", function () { + $("#info").empty() + input = $("input").val() + $("#info").append(`
    ${input}
    `) + wisdom.push({ "text": input }) + $("input").val("") + + + if (!(wisdom.length % 2)) { + if (localStorage.wisdom) { + p = JSON.parse(localStorage.wisdom) + for (let i in wisdom) { + isInside = false + for (let j in p) { + if (p[j].text === wisdom[i].text) { + isInside = true + } + } + if(!isInside){ + p.push(wisdom[i]) + } + } + localStorage.wisdom = JSON.stringify(p) + } else { + localStorage.wisdom = JSON.stringify(wisdom) + } + + + } + }) + + + $("#ls-clear").on("click", function() { + localStorage.removeItem("wisdom") + $("#info").empty() + }) + + + $("#info").on("click", ".delete", function() { + $(this).closest(".line-delete").remove() + + + let id = $(this).closest(".line-delete").data().id + + + let storage = JSON.parse(localStorage.wisdom) + + + for(let i in storage) { + if(storage[i].text == id){ + storage.splice(i, 1) + } + } + + + localStorage.wisdom = JSON.stringify(storage) + }) +``` \ No newline at end of file diff --git a/solutions/matrices---solutions/README.md b/solutions/matrices---solutions/README.md new file mode 100644 index 0000000..b79f7ef --- /dev/null +++ b/solutions/matrices---solutions/README.md @@ -0,0 +1,195 @@ +# Solutions + +## Exercise 1 + +``` +constructor(row, col) { + this.matrix = this.generateMatrix(row, col) +} +print() { + console.log(this.matrix) +} +get(x, y) { + return this.matrix[x][y] +} +alter(row, col, newNumber) { + this.matrix[row][col] = newNumber +} +printColumn(x) { + this.matrix.forEach(row => console.log(row[x])) +} +printRow(y) { + for (let i = 0; i < this.matrix[y].length; i++) { + console.log(this.matrix[y][i]) + } +} +``` + +## Exercise 2 + +``` +findCoordinate(number) { + for (let i = 0; i < this.matrix.length; i++) { + for (let j = 0; j < this.matrix[i].length; j++) { + if (this.matrix[i][j] === number) { + return({ x: j, y: i }) + } + } + } +} +``` + +## Exercise 3 + +``` + loadData(salaryData) { + this.matrix = [] + salaryData.forEach(object => this.matrix.push((Object.values(object)))) +} +``` + +## Exercise 4 + +``` + getEmployees(department) { + return this.matrix.filter(row => row[2] === department) + .map(row => row[1]) +} +``` + +## Exercise 5 + +``` + getTotalSalary(department) { + let sum = 0 + this.matrix.filter(row => row[2] === department) + .forEach(row => sum += row[3]) + return sum +} +``` + +## Exercise 6 + +``` + findRichest() { + + let highestSalary = 0 + let name = '' + + + for (let i = 0; i < this.matrix.length; i++) { + if (this.matrix[i][3] > highestSalary) { + name = this.matrix[i][1] + highestSalary = this.matrix[i][3] + } + } + + + return name +} +``` + +## Exercise 7 + +``` +class TicTacToe extends Matrix { + constructor() { + super() + } + + + loadBoard() { + for (let i = 0; i < 3; i++) { + this.matrix[i] = [] + for (let j = 0; j < 3; j++) { + this.matrix[i].push('.') + } + } + } +} +``` + +## Exercise 8 + +``` +play(rowNum, columnNum, player) { + player === 1 ? this.alter(rowNum, columnNum, 'x') : this.alter(rowNum, columnNum, 'o') +} +``` + +## Exercise 9 + +``` +getColumn(colNum) { + let str = '' + + + for (let i = 0; i < this.matrix.length; i++) { + str += this.matrix[i][colNum] + } + + + return str + } + + + + + gettRow(rowNum) { + let str = '' + + + for (let i = 0; i < this.matrix[rowNum].length; i++) { + str += this.matrix[rowNum][i] + } + + + return str + } + + + play(rowNum, columnNum, player) { + player === 1 ? this.alter(rowNum, columnNum, 'x') : this.alter(rowNum, columnNum, 'o') + this._checkThreeInARow() ? console.log(`Congratulations player ${player}`) : null + } + + + _checkThreeInARow() { + let strs = [] + for (let i = 0; i < 3; i++) { + strs.push(this.getColumn(i)) + } + + + for (let i = 0; i < 3; i++) { + strs.push(this.gettRow(i)) + } + + + let middle1 = '' + for (let i = 0; i < 3; i++) { + middle1 += this.matrix[i][i] + } + + + let middle2 = '' + for(let i = 2; i >= 0; i--) { + middle2 += this.matrix[i][i] + } + + + + + + + for(let str of strs) { + if((str === 'xxx') || (str === 'ooo')) { + return true + } + } + + + return false + } +} +``` \ No newline at end of file diff --git a/solutions/mobx-1---solutions/README.md b/solutions/mobx-1---solutions/README.md new file mode 100644 index 0000000..8c3b3b4 --- /dev/null +++ b/solutions/mobx-1---solutions/README.md @@ -0,0 +1,153 @@ +# Solutions + +## Exercise 1 + +``` +addItem = (name) => { + const item = new Item(name) + this.list.push(item) +} +``` + +Your constructor should now look like this: +``` +constructor() { + this.list = [] + this.length + + makeObservable(this, { + list: observable, + length: observable, + checkItem: action, + addItem: action + }) +} +``` + +## Exercise 2 + +``` +export class Item { + constructor(name) { + this.name = name + this.completed = falsethis.location = "Super Sell" + + makeObservable(this, { + name: observable, + completed: observable, + location: observable + }) + } +} +``` + +``` +class Item extends Component { + + checkItem = (e) => { + this.props.store.checkItem(e.target.value) + } + render() { + let item = this.props.item + return ( +
    + + {item.name}, {item.location} +
    + ) + } +} +``` + +## Exercise 3 + +``` +class Item extends Component { + + editItem = () => { + const newLocation = prompt("Please enter a new location") + this.props.store.editItem(this.props.item.name, newLocation) + } + + render() { + let item = this.props.item + return ( +
    + + {item.name}, {item.location} + +
    + ) + } +} +``` + +``` +export class ShoppingList { + constructor(){ + //... + makeObservable(this, { + list: observable, + length: observable, + checkItem: action, + addItem: action, + editItem: action + }) + } + + editItem = (itemName, newLocation) => { + const item = this.list.find(l => l.name === itemName) + item.location = newLocation + } +} +``` + + +## Exercise 4 + +``` +export class ShoppingList { + constructor() { + //... + makeObservable(this, { + list: observable, + length: observable, + checkItem: action, + addItem: action, + editItem: action, + deleteItem: action + }) + } + + deleteItem = (itemName) => { + const index = this.list.findIndex(l => l.name === itemName) + this.list.splice(index, 1) + } +} + +class Item extends Component { + render() { + let item = this.props.item + return ( +
    + + {item.name}, {item.location} + + +
    + ) + } +} +``` \ No newline at end of file diff --git a/solutions/mobx-2---solutions/README.md b/solutions/mobx-2---solutions/README.md new file mode 100644 index 0000000..f8c9842 --- /dev/null +++ b/solutions/mobx-2---solutions/README.md @@ -0,0 +1,137 @@ +# Solutions + +## Exercise 1 + +``` + get restPopulation() { + let totalPeople = 0 + this.reservations.forEach(r => { + if(!r.completed && r.seated) { + totalPeople += parseInt(r.numPeople) + } + }) + return totalPeople + } + get completedTables() { + let totalTables = 0 + this.reservations.forEach(r => r.completed ? totalTables+= 1 : null) + return totalTables + } + addRes = (name, numPeople) => { + this.reservations.push(new Reservation(name, numPeople)) + } + completeRes = (id) => { + this.reservations.find(r => r.id === id).completed = true + } + +``` + + +## Exercise 2 + +``` +export class RestaurantStore { + + get totalReservations() { //automatically calculates the total reservationsreturn this.reservations.length + } + get openTables() { //automatically caluclates the number of tables avalible, only when the state is affectedlet counter = 0this.reservations.forEach(r => r.seated ? counter ++: null)return (this.numTables - counter) + } + get restPopulation() { + let totalPeople = 0this.reservations.forEach(r => { + if(!r.completed && r.seated) { + totalPeople += parseInt(r.numPeople) + } + }) + return totalPeople + } + + + get completedTables() { + let counter = 0this.reservations.forEach(r => r.completed ? counter ++: null) + return counter + + + } + addRes = (name, numPeople) => { + this.reservations.push(new Reservation(name, numPeople)) + } + seatRes = (id) => { + const reservation = this.reservations.find(r => r.id === id) + reservation.seated = true + } + completeRes = (id) => { + const reservation = this.reservations.find(r => r.id === id) + reservation.completed = true + } +} +``` + +``` +class Restaurant extends Component{ + addRes = () => { + let name = this.props.GeneralStore.name + let num = this.props.GeneralStore.numPeople + this.props.RestaurantStore.addRes(name, num) + } + render () { + return ( +
    You have {this.props.RestaurantStore.openTables} open tables
    There are {this.props.RestaurantStore.restPopulation} people in the restaurant
    {this.props.RestaurantStore.completedTables} tables have been served today
    +
    + {this.props.RestaurantStore.reservations.map((r, i) => )} +
    + ) + } +} +``` + +``` +class Reservation extends Component { + completeRes = (e) => { + this.props.RestaurantStore.completeRes(e.target.id) + } + + + seatRes = (e) => { + this.props.RestaurantStore.seatRes(e.target.id) + } + render() { + let res = this.props.res + return ( +
    + {res.name} : {res.numPeople} + + +
    + ) + } +} +``` + + +## Exercise 3 + +``` +render() { + let res = this.props.res + return ( +
    + {res.name} : {res.numPeople} + + +
    + ) +} +``` \ No newline at end of file diff --git a/solutions/mongo-db-intro---solutions/README.md b/solutions/mongo-db-intro---solutions/README.md new file mode 100644 index 0000000..e103f66 --- /dev/null +++ b/solutions/mongo-db-intro---solutions/README.md @@ -0,0 +1,43 @@ +# Solutions + +## Exercise 1 +``` +db.linkedon.count({salary: {$gt: 25000}}) +``` + +## Exercise 2 +``` +db.linkedon.find({}, {firstName: 1, salary: 1, _id: 0}).sort({salary: -1}).limit(3) +``` + +## Exercise 3 +``` +db.linkedon.count({$and: [{salary: {$gte: 7000}}, {"currentCompany.name": "Walmart"}]}) +``` + +## Exercise 4 +``` +db.linkedon.find({$or: [{"currentCompany.industry": "Sales"}, {"currentCompany.industry": "Retail"}]}, {firstName: 1, lastName: 1, "currentCompany.name": 1, salary: 1, _id: 0}).sort({salary: -1}).limit(1) +``` + +## Exercise 5 +``` +db.linkedon.count({$or: [{"currentCompany.name": "Apple"}, {previousCompanies: {$elemMatch: {name: "Apple"}}}]}) +``` + +## Extension 1 +``` +db.linkedon.aggregate([{$match: {"currentCompany.name": "Apple"}},{$group: {_id: "$currentCompany.industry", count: {$sum: 1}}}]) + +``` + +## Extension 2 +``` +db.linkedon.aggregate([{$match: {currentPosition: "Analyst"}},{$group: {_id: "$currentCompany.name", averageSalary: {$avg: "$salary"}}}]) +``` + +## Extension 3 +``` +db.linkedon.aggregate([{$match: {$and: [{"currentCompany.industry": "Tech"}, {$or: [{"currentCompany.name": "Apple"}, {"currentCompany.name": "Google"}]}]}},{$group: {_id: "$lastName", averageSalary: {$avg: "$salary"}}}, {$sort: {averageSalary: -1}}]) + +``` \ No newline at end of file diff --git a/solutions/mongoose-intro---solutions/README.md b/solutions/mongoose-intro---solutions/README.md new file mode 100644 index 0000000..bc4e0b4 --- /dev/null +++ b/solutions/mongoose-intro---solutions/README.md @@ -0,0 +1,40 @@ +# Solutions + +## Exercise 1 +``` +router.post('/person', function(req, res) { + let person = req.body + let p1 = new Person({ + firstName: person.firstName, + lastName: person.lastName, + age: person.age + }) + + p1.save() + res.end() + }) +``` + +## Exercise 2 +``` +router.put('/person/:id', function(req, res) { + let id = req.params.id + Person.findByIdAndUpdate(id, {age: 80}, function(err, person) { + res.end() + }) + }) +``` + +## Exercise 3 +``` +router.delete('/apocalypse', function(req, res) { + + + Person.find({}, function(err, people) { + people.forEach(p => p.remove()) + }) + + + res.end() + }) +``` \ No newline at end of file diff --git a/solutions/mongoose-population---solutions/README.md b/solutions/mongoose-population---solutions/README.md new file mode 100644 index 0000000..f99d8d7 --- /dev/null +++ b/solutions/mongoose-population---solutions/README.md @@ -0,0 +1,152 @@ +# Solutions + +## Exercise 1 +``` +const solarSystemSchema = new Schema({ + planets: [{type: Schema.Types.ObjectId, ref: 'Planet'}], + starName: String + }) + + + const planetSchema = new Schema({ + name: String, + system: {type: Schema.Types.ObjectId, ref: 'SolarSystem'}, + visitors: [{type: Schema.Types.ObjectId, ref: 'Visitor'}] + }) + + + const visitorSchema = new Schema({ + name: String, + homePlanet: {type: Schema.Types.ObjectId, ref: 'Planet'}, + visitedPlanets: [{type: Schema.Types.ObjectId, ref: 'Planet'}] + }) + + + const SolarSystem = mongoose.model("SolarSystem", solarSystemSchema) + const Planet = mongoose.model("Planet", planetSchema) + const Visitor = mongoose.model("Visitor", visitorSchema) + + + let ss = new SolarSystem({ + planets: [], + starName: "Soya Way" + }) + + + let p1 = new Planet({ + name: "Earthy", + system: ss, + visitors: [] + }) + + + let p2 = new Planet({ + name: "Marsy", + system: ss, + visitors: [] + }) + + + let p3 = new Planet({ + name: "Uranusy", + system: ss, + visitors: [] + }) + + + let v1 = new Visitor({ + name: "Mr mars", + homePlanet: p2, + visitedPlanets: [] + }) + + + let v2 = new Visitor({ + name: "Mr Uranus", + homePlanet: p3, + visitedPlanets: [] + }) + + + /* ss.planets.push(p1) + ss.planets.push(p2) + ss.planets.push(p3) + + v1.visitedPlanets.push(p3) + v1.visitedPlanets.push(p1) + + p1.visitors.push(v1) + p3.visitors.push(v1) + + v2.visitedPlanets.push(p1) + p1.visitors.push(v2) + + ss.save() + + p1.save() + p2.save() + p3.save() + + v1.save() + v2.save() */ + + + //Find a visitor's list of visited planets + /* Visitor.findOne({}).populate("visitedPlanets").exec(function(err, visitor) { + visitor.visitedPlanets.forEach(vp => console.log(vp.name)) + }) */ + + + + + //Find all the visitors on a planet + /* Planet.findOne({}).populate("visitors").exec(function(err, planet) { + planet.visitors.forEach(v => console.log(v.name)) + }) */ + + + //Find all the visitors in a system (subdocuments!) + /* SolarSystem.findOne({}).populate({ + path: "planets", + populate: { + path: "visitors" + } + }).exec(function (err, solarSystem){ + + for(planet of solarSystem.planets) { + planet.visitors.forEach(v => console.log(v.name)) + } + }) */ + + + + + //Find the name of the star in the system of a visitor's home planet + /* Visitor.findOne({}).populate({ + path: "homePlanet", + populate: { + path: "system", + } + }).exec(function(err, visitor) { + console.log(visitor.homePlanet.system.starName) + }) */ + + + //Find a planet's system's star name as well as its visitors + + + /* Planet.findOne({}).populate("system visitors").exec(function(err, planet) { + console.log(planet.system.starName) + planet.visitors.forEach(v => console.log(v.name)) + }) */ + + + Planet.findOne({}).populate({ + path: "system visitors", + populate: { + path: "homePlanet" + } + }).exec(function(err, planet) { + planet.visitors.forEach(v => console.log(v.homePlanet.name)) + }) +``` \ No newline at end of file diff --git a/solutions/node---solutions/README.md b/solutions/node---solutions/README.md new file mode 100644 index 0000000..5bb108a --- /dev/null +++ b/solutions/node---solutions/README.md @@ -0,0 +1,69 @@ +# Solutions + +## Exercise 1 +No Solution + +## Exercise 2 +consts.js: +``` +const FINANCE = "finance" + const WEATHER = "weather" + const EMOTIONS = "emotions" + + + module.exports.complaints = { + FINANCE, + WEATHER, + EMOTIONS + } +``` +complaintsHandler.js: +``` +const c = require("./consts") + + + const handleComplaints = function(complaint) { + if(complaint.type === c.complaints.FINANCE) { + return console.log("Money doesn't grow on trees, you know.") + } else if (complaint.type === c.complaints.WEATHER) { + return console.log("It is the way of nature. Not much to be done.") + } else if (complaint.type === c.complaints.EMOTIONS) { + return console.log("It'll pass, as all things do, with time.") + } + + + } + + + module.exports.handleComplaint = handleComplaints +``` +complaints.js: +``` +const c = require("./consts") + + + let complaint1 = { + text: "I'm not getting enough money", + type: c.complaints.FINANCE + } + + + let complaint2 = { + text: "My salary hasn't come in yet", + type: c.complaints.FINANCE + } + + + let complaint3 = { + text: "I'm always full of energy", + type: c.complaints.EMOTIONS + } + + + const ch = require("./complaintsHandler") + + + ch.handleComplaint(complaint1) //should print "Money doesn't grow on trees, you know." + ch.handleComplaint(complaint2) //should print "Money doesn't grow on trees, you know." + ch.handleComplaint(complaint3) //should print "It'll pass, as all things do, with time." +``` \ No newline at end of file diff --git a/solutions/npm---node-package-manager---solutions/README.md b/solutions/npm---node-package-manager---solutions/README.md new file mode 100644 index 0000000..5c5f914 --- /dev/null +++ b/solutions/npm---node-package-manager---solutions/README.md @@ -0,0 +1,37 @@ +# Solutions + +## Exercise 1 +``` + let validator = require("validator") + console.log(validator.isEmail("shoobert@dylan")) + + console.log(validator.isMobilePhone("786-329-9958","en-US")) + + let blacklist = ["!", "?", ".", "@", "~", ",", "'"] + let text = "I'M SO EXCITED!!!~!" + + console.log(validator.blacklist(text, blacklist).toLowerCase()) +``` + +## Exercise 2 +``` +let faker = require("faker") + + + const makeHuman = function (num) { + for(let i = 0; i < num; i++) { + + + console.log(faker.fake("{{name.firstName}}, {{image.avatar}}, {{company.companyName}}")) + + } + } + + + + + makeHuman(4) +``` + +## Exercise 3 +No Solution \ No newline at end of file diff --git a/solutions/object-oriented-programming-intro--oop----solutions/README.md b/solutions/object-oriented-programming-intro--oop----solutions/README.md new file mode 100644 index 0000000..5bf9d95 --- /dev/null +++ b/solutions/object-oriented-programming-intro--oop----solutions/README.md @@ -0,0 +1,67 @@ +# Solution + +``` +class Document { + constructor(EmployeeName) { + this.EmployeeName = EmployeeName; + } +} + +class Employee { + constructor(name) { + this.name = name; + } + + work(office) { + for (let i = 0; i < 10; i++) { + office.documents.push(new Document(this.name)) + } + } +} + +class Manager { + constructor(name) { + this.employees = []; + this.name = name; + } + + hireEmployee(name) { + this.employees.push(new Employee(name)); + } + + askEmployeesToWork(office) { + this.employees.forEach(employee => employee.work(office)); + } +} + +class Cleaner { + constructor(name) { + this.name = name; + } + + clean() { + console.log('Clean') + } +} + +class Office { + constructor() { + this.documents = []; + this.managers = []; + this.cleaners = []; + } + + hireCleaner(name) { + this.cleaners.push(new Cleaner(name)); + } + + hireManager(name) { + this.managers.push(new Manager(name)); + } + + startWorkDay() { + this.managers.forEach(manager => manager.askEmployeesToWork(this)); + this.cleaners.forEach(cleaner => cleaner.clean()); + } +} +``` \ No newline at end of file diff --git a/solutions/oop-inheritance---solutions/README.md b/solutions/oop-inheritance---solutions/README.md new file mode 100644 index 0000000..bbf4b7f --- /dev/null +++ b/solutions/oop-inheritance---solutions/README.md @@ -0,0 +1,114 @@ +# Solution + +``` +class Person { + constructor(name, startYear) { + this.name = name + this.startYear = startYear + this.courses = [] + } + + + addCourse(course) { + this.courses.push(course) + } +} + + +class Student extends Person { + constructor(name, startYear) { + super(name, startYear) + this.grades = [] + } + + + addCourse(course) { + if (this.courses.indexOf(course) == -1) { + super.addCourse(course) + } + } + + + receiveGrade(courseName, finalGrade) { + this.grades.push({ + course: courseName, + grade: finalGrade + }) + } +} + + +class Teacher extends Person { + constructor(name, startYear, salary) { + super(name, startYear) + this.salary = salary + this.courses = {} + } + + + giveGrade(student, courseName, grade) { + student.receiveGrade(courseName, grade) + } + + + addCourse(course) { + let courseNames = Object.keys(this.courses) + for (let courseName of courseNames) { + if (course === courseName) { + this.courses[course] += 1 + return + } + } + this.courses[course] = 1 + } +} + + +class TeachingAssistant extends Teacher { + constructor(name, startYear, salary) { + super(name, startYear, salary) + } +} + + + + +class Principal extends Person { + constructor(name, startYear) { + super(name, startYear) + this.teachers = [] + this.students = [] + } + + + hireTeacher(teacher) { + this.teachers.push(teacher) + console.log(`${this.name} just hired ${teacher.name}`) + } + + + recruitStudent(student) { + this.students.push(student) + console.log(`${this.name} just recruited ${student.name}`) + } + + + expelStudent(student) { + + + for (let i in this.students) { + if (this.students[i].name === student.name) { + return this.students.splice(i, 1) + } + } + } + + + transferStudent(student, principal) { + this.expelStudent(student) + principal.recruitStudent(student) + } + + +} +``` \ No newline at end of file diff --git a/solutions/promises---solutions/README.md b/solutions/promises---solutions/README.md new file mode 100644 index 0000000..89622a5 --- /dev/null +++ b/solutions/promises---solutions/README.md @@ -0,0 +1,28 @@ +# Solutions + +## Exercise 1 +``` +$.get('/randomWord') + .then(function(word) { + console.log(word) + return $.get(`https://www.googleapis.com/books/v1/volumes?q=intitle:${word}`) + }) + .then(function(book) { + console.log(book); + }) +``` + +## Exercise 2 +``` +$.get('/randomWord') + .then(function(word) { + console.log(word) + let randomBook = $.get(`https://www.googleapis.com/books/v1/volumes?q=title:${word}`) + let randomGif = $.get(`http://api.giphy.com/v1/gifs/search?q=${word}&api_key=50m5Set06jQuFMy7VNXir7iaNl8ypsEu`) + Promise.all([randomBook, randomGif]) + .then(function(result) { + $("body").append(`
    ${result[0].items[0].volumeInfo.title}
    `) + $("body").append(` \ No newline at end of file diff --git a/sql-basics/sql-join/README.md b/sql-basics/sql-join/README.md new file mode 100644 index 0000000..08a070a --- /dev/null +++ b/sql-basics/sql-join/README.md @@ -0,0 +1,3 @@ +# SQL Join Lecture - 1 to Many + + \ No newline at end of file diff --git a/state-management/README.md b/state-management/README.md new file mode 100644 index 0000000..9782997 --- /dev/null +++ b/state-management/README.md @@ -0,0 +1,6 @@ +# State Management + +- [Agora Project](agora-project/README.md) +- [Mobx 1](mobx-1/README.md) +- [Mobx 2](mobx-2/README.md) +- [Scraping](scraping/README.md) \ No newline at end of file diff --git a/state-management/agora-project/README.md b/state-management/agora-project/README.md new file mode 100644 index 0000000..776aaa3 --- /dev/null +++ b/state-management/agora-project/README.md @@ -0,0 +1,10 @@ +# Extensions + +If you are done and have more time here are some cool ideas for extensions: +- Add a simple server to experiment with async code +- Write in typescript + + +And even more ideas: +* Add a search bar +* Filter by max price \ No newline at end of file diff --git a/state-management/agora-project/_sidebar.md b/state-management/agora-project/_sidebar.md new file mode 100644 index 0000000..2178f8d --- /dev/null +++ b/state-management/agora-project/_sidebar.md @@ -0,0 +1,6 @@ +- [⬅ Back to State Management](../README.md) + +- [Extensions](./Extensions.md) +- [Intro](./Intro.md) +- [Overview](./Overview.md) +- [Storage Tracker](./Storage-Tracker.md) \ No newline at end of file diff --git a/state-management/mobx-1/README.md b/state-management/mobx-1/README.md new file mode 100644 index 0000000..862db13 --- /dev/null +++ b/state-management/mobx-1/README.md @@ -0,0 +1,41 @@ +# Intro + +Welcome to the wonderful world of MobX! This lesson will cover: + + + +- What is MobX +- Why do we need a state manager? +- The basics of MobX + - MobX data-flow + - Creating a Store and Observable + - Observer + - Actions + + + +Let's get MobXing! + + + +---------- + + + +#### **WHAT IS MOBX?** + + + +Simply put, MobX is a library for state management. + + + +React renders an application state. MobX brings in a new mechanism for storing and updating the state that React renders. + + + +As the [MobX documentation](https://mobx.js.org/) says, "MobX provides mechanisms to optimally synchronize application state with your React components by using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale." + + + +We'll understand this quote more in depth later, but the important thing to take away from it is that MobX manages passing the necessary information to each react component, and updating the data **only when necessary**. \ No newline at end of file diff --git a/state-management/mobx-2/README.md b/state-management/mobx-2/README.md new file mode 100644 index 0000000..b4865c2 --- /dev/null +++ b/state-management/mobx-2/README.md @@ -0,0 +1,17 @@ +# Intro + +We've seen the basic functionality that the MobX + React combination can bring us, through `observable`, `observer`, and `action`. Now, let's go more in depth in the world of React + MobX! + + + +This lesson will cover: + +- `computed` values +- `Provider` +- Injecting a MobX store into a React component +- Using multiple MobX stores +- Binding input values with MobX + + + +To start with fork and clone [this starter repo](https://github.com/Elevationacademy/mobx-2-lesson-exercises-updated). It's the set up for a simple reservations manager. We'll go over the code in it and add on to it! \ No newline at end of file diff --git a/state-management/scraping/README.md b/state-management/scraping/README.md new file mode 100644 index 0000000..ad1a990 --- /dev/null +++ b/state-management/scraping/README.md @@ -0,0 +1,3 @@ +# Intro + +Read [this article](https://www.freecodecamp.org/news/the-ultimate-guide-to-web-scraping-with-node-js-daa2027dcd3/), and then move on to the exercise. The exercise is meant to be done in pairs. \ No newline at end of file diff --git a/typescript/README.md b/typescript/README.md new file mode 100644 index 0000000..0773603 --- /dev/null +++ b/typescript/README.md @@ -0,0 +1,11 @@ +# Typescript + +- [Chrome Extensions](chrome-extensions/README.md) +- [Dom And Casting](dom-and-casting/README.md) +- [Generics](generics/README.md) +- [Random User Page Api Project](random-user-page-api-project/README.md) +- [Setting Up A Typescript Environment](setting-up-a-typescript-environment/README.md) +- [Strict Mode](strict-mode/README.md) +- [Types](types/README.md) +- [Union Types](union-types/README.md) +- [What Is Typescript ](what-is-typescript-/README.md) \ No newline at end of file diff --git a/typescript/chrome-extensions/README.md b/typescript/chrome-extensions/README.md new file mode 100644 index 0000000..0f6f022 --- /dev/null +++ b/typescript/chrome-extensions/README.md @@ -0,0 +1,4 @@ +# What is a Google Chrome Extension?
 + +- Google Chrome extensions are programs that can be installed into Chrome in order to change the browser's functionality +- This includes adding new features to Chrome or modifying the existing behavior of the program itself to make it more convenient for the user. \ No newline at end of file diff --git a/typescript/dom-and-casting/README.md b/typescript/dom-and-casting/README.md new file mode 100644 index 0000000..4a94df4 --- /dev/null +++ b/typescript/dom-and-casting/README.md @@ -0,0 +1,9 @@ +# Intro + +When we enable TypeScript in web development frameworks such as React and Angular, we need to take into account that writing TypeScript code that interacts with DOM elements and events, is based on a concept called ‘casting’. + +As interacting with HTML elements is dynamic and occurs at run-time, we need to place special attention to types, and we need to ‘cast’, i.e. ‘adjust’ the types we receive via DOM elements and via event handling, to the equivalent TypeScript types. + +In this chapter we will cover: +1. Interacting with DOM elements using TypeScript +1. Handling DOM events using TypeScript \ No newline at end of file diff --git a/typescript/generics/README.md b/typescript/generics/README.md new file mode 100644 index 0000000..45dedea --- /dev/null +++ b/typescript/generics/README.md @@ -0,0 +1,10 @@ +# Intro + +One of the most critical concepts of good software engineering is the ability to develop reusable code. Making code reusable also requires us to allow the code to work with multiple types. + +Earlier we got familiarized with type unions, allowing us to define multiple types for a variable. This works well in a single block of code, as we would need to initialize a variable with a value, and therefore its type, but when we use functions and classes, the arguments and return value types are only defined at run-time. This causes TypeScript to throw many compile-time errors. And this is where Generics come to the rescue. + +In this lesson we will learn: +1. Why do we need Generics? +1. Using Generics with functions +1. Using Generics with classes \ No newline at end of file diff --git a/typescript/random-user-page-api-project/README.md b/typescript/random-user-page-api-project/README.md new file mode 100644 index 0000000..2c04580 --- /dev/null +++ b/typescript/random-user-page-api-project/README.md @@ -0,0 +1,16 @@ +# Intro + +Now that you know how to request data from **API**s and use `Handlebars.js` to render data on a page really easily - it's time to put your skills to work! + + + +You'll be making a **Random-User-Page-Generator** 🗿. + + What exactly is a **Random-User-Page-Generator**🗿 (or **RUPG** for short, pronounced _ruh-pa-geh_)? + + It's essentially a Facebook profile page, filled with content taken from **API**s and generated with different data at the click of a button. + +You'll be using **API**s, **jQuery**, **Handlebars**, **Promises**, **TypeScript** and of course creating it all in **OOP**. + + + Are you Excited 🤩? Great, because **RUPG** is a multi-million-dollar-application just waiting for you to create it! \ No newline at end of file diff --git a/typescript/setting-up-a-typescript-environment/README.md b/typescript/setting-up-a-typescript-environment/README.md new file mode 100644 index 0000000..d1e16f7 --- /dev/null +++ b/typescript/setting-up-a-typescript-environment/README.md @@ -0,0 +1,12 @@ +# Intro + +Setting up a JavaScript environment to use TypeScript is easy. You install TypeScript through any of the available package managers, such as npm, yarn or pnpm. For this course we will use npm as our baseline, which comes with a NodeJS distribution (specific instruction in the next page). + +When we move to TypeScript, we need to consider the following new concepts that are introduced: +- **’.ts’ files.** TypeScript is a separate development language, and therefore, has it’s separate files, based on its own syntax. TypeScript files have the *.ts* extension. These come ‘in addition’ to the JavaScript files, which has the *.js* extension. +- **‘tsconfig.json’.** TypeScript introduces a configuration file called ‘tsconfig.json’, which includes the settings that control how TypeScript behaves, what elements of the programming language will be type-checked, where will the compiled *.js* files will be placed etc. + +In this chapter, we will cover the following topics: +1. How to install TypeScript? +1. How to compile TypeScript files? +1. How to configure TypeScript? \ No newline at end of file diff --git a/typescript/strict-mode/README.md b/typescript/strict-mode/README.md new file mode 100644 index 0000000..36d9c7f --- /dev/null +++ b/typescript/strict-mode/README.md @@ -0,0 +1,7 @@ +# Intro + +In this section we will cover JavaScript’s `”use strict”;` directive, what restrictions it introduces in JavaScript and how TypeScript's strict checks relate to it and extend it. + +These are the topics we’ll cover in this section: +1. JavaScript’s `“use strict”;` directive +1. Differences between `“use strict”;` and TypeScript \ No newline at end of file diff --git a/typescript/types/README.md b/typescript/types/README.md new file mode 100644 index 0000000..5349d8e --- /dev/null +++ b/typescript/types/README.md @@ -0,0 +1,9 @@ +# Intro + +In this lesson we will be covering the basics of **TypeScript types**. We will examine what types exist, how to use them in attributes and in functions. + +### Topics covered: +1. A strong-typed language +1. TypeScript types +1. Types in objects and classes +1. Types in functions \ No newline at end of file diff --git a/typescript/union-types/README.md b/typescript/union-types/README.md new file mode 100644 index 0000000..1addec0 --- /dev/null +++ b/typescript/union-types/README.md @@ -0,0 +1,8 @@ +# Intro + +Variables in TypeScript can be assigned one or more types, called a union of types, a list of types that could be used for a particular variable. We can also define an alias that will represent multiple types throughout the codebase, and even define a list of predefined values a variable could hold. + +In this lesson we will cover the following topics: +1. Union types +1. Type aliases +1. Literal types \ No newline at end of file diff --git a/typescript/what-is-typescript-/README.md b/typescript/what-is-typescript-/README.md new file mode 100644 index 0000000..fcfc862 --- /dev/null +++ b/typescript/what-is-typescript-/README.md @@ -0,0 +1,40 @@ +# Intro + +TypeScript is a compiled language that enhances JavaScript. It brings type-checking and syntax-checking superpowers to JavaScript. + +By saying TypeScript henhances JavaScript we mean that you write TypeScript code, which is then **transpiles** (being translated) into standard JavaScript code that can be run in any JavaScript-enabled environment. + + +|||info +## Compiler vs Transpiler +--- +**Compiler** - translates code from a programming language to Machine language. +**Transpiler** - translates code from one programming language to another programming language +||| + +Let’s look at an example. You will see some unfamiliar syntax, that includes types, we will explain it later. + +This TypeScript code: +``` +const first_name: string = "John" +let age: number +age = 2 +``` + +Is transpiled to standard JavaScript: +``` +"use strict"; +const first_name = "John"; +let age; +age = 2; +``` + +Notice the unique type declarations in the TypeScript code that are ‘omitted’ in the JavaScript output. The reason for that, is that we don’t have types in JavaScript. + +TypeScript makes sure you write better code which keeps to standards, easily understood by others, improves your application’s robustness, and reduces amounts of defects. + +In this lesson we will be covering the differences between JavaScript and TypeScript, what are the benefits of using it, and where can we use it. + +### Topics covered: +1. Differences between JS and TS +1. Benefits of TypeScript \ No newline at end of file diff --git a/unit-testings/README.md b/unit-testings/README.md new file mode 100644 index 0000000..27a24b0 --- /dev/null +++ b/unit-testings/README.md @@ -0,0 +1,3 @@ +# Unit Testings + +- [Unit Tests With Jest](unit-tests-with-jest/README.md) \ No newline at end of file diff --git a/unit-testings/unit-tests-with-jest/README.md b/unit-testings/unit-tests-with-jest/README.md new file mode 100644 index 0000000..3ed7a7b --- /dev/null +++ b/unit-testings/unit-tests-with-jest/README.md @@ -0,0 +1,25 @@ +# Intro + +The concept of "testing" code has been around since Time Immemorial. Maybe not that long though. + + + +If we take a moment to step back and think about code in the Real World, then you quickly realize that there are pieces of software out there that are literally processing **billions of dollars** every hour. + + + +Or some bio-tech program that might **save a life**. + + + +With any code that serves clients, we as the developers need to do everything we can to guarantee the code will work. However, **code changes all the time** - new developers join the team, veteran developers leave - and sometimes a piece of code that was written by Person A in 2019 could be modified by Person B in 2023. + + + +One of the reasons to write tests is **to validate that changes in our code do not ruin our code's functionality**. + + + +Today we have lots of ways to test code, but ultimately, **a test is just some code that checks that other code is doing what it's meant to**. + +Broadly speaking, there are two major types of tests: **unit tests**, and [**integration tests**](http://softwaretestingfundamentals.com/integration-testing/). This lesson will focus on **unit tests**. \ No newline at end of file diff --git a/web-development-basics-advanced/README.md b/web-development-basics-advanced/README.md new file mode 100644 index 0000000..8d3eaf7 --- /dev/null +++ b/web-development-basics-advanced/README.md @@ -0,0 +1,13 @@ +# Web Development Basics Advanced + +- [Callbacks Arrow Functions](callbacks---arrow-functions/README.md) +- [Catch A The Optional ](catch-a-the--optional-/README.md) +- [Closures Modules](closures---modules/README.md) +- [Data Flow](data-flow/README.md) +- [Dom Intro](dom-intro/README.md) +- [Dom Traversal With Jquery](dom-traversal-with-jquery/README.md) +- [E Commerce Dom Project Optional ](e-commerce-dom-project--optional-/README.md) +- [Jquery](jquery/README.md) +- [Tweeter Controller](tweeter-controller/README.md) +- [Tweeter Logic Module](tweeter-logic-module/README.md) +- [Tweeter Render Module](tweeter-render-module/README.md) \ No newline at end of file diff --git a/web-development-basics-advanced/callbacks---arrow-functions/README.md b/web-development-basics-advanced/callbacks---arrow-functions/README.md new file mode 100644 index 0000000..a13abad --- /dev/null +++ b/web-development-basics-advanced/callbacks---arrow-functions/README.md @@ -0,0 +1,44 @@ +# Arrow Functions Ii + +So that's great for basic syntax, what about return? This also works the same way: +``` +const add = (x, y) => { + return x + y +} + +const sum = add(1, 2) +console.log(sum) //prints 3 +``` + + +........................but wait. There's more! + + + +If the function block is only one line - we don't even need the return keyword! +``` +const add = (x, y) => x + y + +const sum = add(1, 2) +console.log(sum) //prints 3 +``` + + +This is a one line function that knows how to **return** implicitly. Please take a deep breath before moving on. This is all very exciting stuff. _Wow_. + + + +Note, however, that if you have a more complicated function, you still need curly braces and return: + + +``` +const getHypotenuse = (a, b) => { + const aSquared = a * a + const bSquared = b * b + const cSquared = aSquared + bSquared + return Math.sqrt(cSquared) +} + +const hypoteneuese = getHypotenuse(3, 4) +console.log(hypoteneuese ) //prints 5 +``` \ No newline at end of file diff --git a/web-development-basics-advanced/callbacks---arrow-functions/_sidebar.md b/web-development-basics-advanced/callbacks---arrow-functions/_sidebar.md new file mode 100644 index 0000000..c760ef8 --- /dev/null +++ b/web-development-basics-advanced/callbacks---arrow-functions/_sidebar.md @@ -0,0 +1,14 @@ +- [⬅ Back to Web Development Basics Advanced](../README.md) + +- [Arrow Functions Ii](./Arrow-Functions-II.md) +- [Arrow Functions](./Arrow-Functions.md) +- [Callback Functions Ii](./Callback-Functions-II.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [Spot Check 1](./Spot-Check-1.md) +- [Spot Check 2](./Spot-Check-2.md) +- [Spot Check 3](./Spot-Check-3.md) +- [Spot Check 4](./Spot-Check-4.md) +- [Spot Check 5](./Spot-Check-5.md) +- [This](./this.md) \ No newline at end of file diff --git a/web-development-basics-advanced/catch-a-the--optional-/README.md b/web-development-basics-advanced/catch-a-the--optional-/README.md new file mode 100644 index 0000000..bd5ecab --- /dev/null +++ b/web-development-basics-advanced/catch-a-the--optional-/README.md @@ -0,0 +1,30 @@ +# Intro + +![.guides/img/PROD_A571-0](./PROD_A571-0.gif) +Let's recap the things we've learned so far: + + + +- HTML + CSS +- Grid +- JS + - Basics + - Callbacks + - Arrow functions + - `this` +- DOM +- jQuery + - DOM Traversal +- Data Flow + + + +And you've got experience on at least a couple of projects (Tweeter, Form, Ball Game) - that's quite a lot of coding! + + + +Today you're going to work on another project - and you're going to make it entirely on your own, from scratch, using the tools you know. + + + +The inspiration for this game is from [this entertaining clip](https://www.youtube.com/watch?v=HywwY2Az5bQ), and you've got instructions below. Good luck! \ No newline at end of file diff --git a/web-development-basics-advanced/closures---modules/README.md b/web-development-basics-advanced/closures---modules/README.md new file mode 100644 index 0000000..3079e13 --- /dev/null +++ b/web-development-basics-advanced/closures---modules/README.md @@ -0,0 +1,107 @@ +# Closures Modules + +Let's look at this bit again: + + +``` +const m = mathOperations() +``` + +What we're doing here is - as with any function call - getting whatever the function returns and setting it in a variable. In this case, storing mathOperations' returned object inside of the variable m + + + +So now, m has the value of this object that we returned earlier: + + +``` +{ + add: add, + sub: subtract, + mult: multiply, + div: divide +} +``` + + +Again, m is just a normal JS object. So if we do m.mult, all we're doing is accessing the **value** of the property mult - which in this case happens to be the multiply function! + + + +That's why m.mult(3, 4) works - we're simply calling a function. + + + +**Modularization** (using modular bits of code) is one of the most popular design patterns in Javascript. In future lessons we'll learn an even _better_ way to modularize our code. + + + +Write your own example of a module. If you're still unsure, ask an instructor or a classmate to help clarify. + + + +---------- + + + + + +Let's look at an example of a module with closure: + + +``` +const UsersModule = function () { + const _users = ['Aaron', 'Avi']; + + const addUser = function (user) { + _users.push(user) + } + + const listUsers = function () { + for (let user of _users) { + console.log(user) + } + } + + return { + addUser: addUser, + listUsers: listUsers + } +} + +const usersModule = UsersModule() + +usersModule.addUser('Narkis') +usersModule.listUsers() +``` + + +Copy/paste the above code for this part (you can use [repl.it](https://repl.it/) again) + + + +Here we've created a module called **UsersModule***. Inside this module we will keep all of our code related to users: + +###### *By convention, we CapitalizeModuleNames, as opposed to our usual camelCase + + + +- A function to add users +- A function to show (list) all our users +- A **private*** variable, _users** where we store all our..well, users + +###### *We say _private_ because it's not accessible outside of the module + +###### **Also, by convention, we preface private variables/functions with an underscore to signify they should not be exposed + + + +When UsersModule is invoked, it returns an object with our two module functions. So now outside of our module we can interact with our users, but _only_ to the extent that we've been allowed (with the addUser and listUsers functions) + + + +In other words, because of closure, we cannot _directly_ interact with our users, but we can do so indirectly. + + + +This is great because if we want to guarantee that adding users only happens in a certain way (say we always want to send an email to a user once they have been added), we know the only way to modify users is through addUser! \ No newline at end of file diff --git a/web-development-basics-advanced/closures---modules/_sidebar.md b/web-development-basics-advanced/closures---modules/_sidebar.md new file mode 100644 index 0000000..597f8ec --- /dev/null +++ b/web-development-basics-advanced/closures---modules/_sidebar.md @@ -0,0 +1,12 @@ +- [⬅ Back to Web Development Basics Advanced](../README.md) + +- [Closures Modules](./Closures---Modules.md) +- [Comprehension Check](./Comprehension-Check.md) +- [Exercises](./Exercises.md) +- [Intro](./Intro.md) +- [Modules](./Modules.md) +- [Quick Note On Closures And Memory In Js](./Quick-Note-on-Closures-and-Memory-in-JS.md) +- [Spot Check 1](./Spot-Check-1.md) +- [Spot Check 2](./Spot-Check-2.md) +- [Spot Check 3](./Spot-Check-3.md) +- [What Are Closures ](./What-are-Closures-.md) \ No newline at end of file diff --git a/web-development-basics-advanced/data-flow/README.md b/web-development-basics-advanced/data-flow/README.md new file mode 100644 index 0000000..b3f0886 --- /dev/null +++ b/web-development-basics-advanced/data-flow/README.md @@ -0,0 +1,173 @@ +# Intro + +Up to now, whenever we've dealt with the DOM - specifically, whenever we've added/removed things dynamically from the DOM - we just kinda.. _did_ it directly. No sense of order, no single source of responsibility. + +Any rogue button or hover could just change things. + + + +And while that is fun, it's certainly not a good practice. In fact, it's quite a bad practice. + + + +Today we'll see a good way to deal with data, and it all has to do with the flow of data ~ + + + +---------- + + + +#### **DATA FLOW** + + + +You can think of every application as a machine that takes user input, holds some data (and perhaps modifies it), then gives back some sort of output that's useful to the user. + +When the user does something, the data changes, and a new or updated output is given. + + + +We'll call this concept "data flow", but it's also known by several other names, including [reactive programming](https://en.wikipedia.org/wiki/Reactive_programming). + + + +In most applications we have some data stored in some global variables (arrays or objects). + + + +The application usually displays this data in a **view** - in web development, the view is generally the DOM. + +This action is called **rendering** - the application **renders** the data on the view: + + + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/dataflow1.PNG) + + + +**Render** means _cause to be or become; make_. + +A **view** is something you can see with your eyes. + + + +For example, Facebook takes the data about who you are and what your friends are posting and **renders** it into a **view** of your timeline! + + + +Here is a simple example: + + +``` +const posts = [ + { + name: "Uncle Jerome", + text: "Happy birthday kido!" + }, + { + name: "BFF Charlene", + text: "HEARTS LOVE YOU FOREVER BFF4LYFE HBD" + }, + { + name: "Old High School Teacher", + text: "Hey ace, have a good one." + } +] +``` + + +Assume the above data represents the people who have posted on your wall for your birthday. + + + +In order to render this data in your view (your timeline), we would do something like this: + + +``` +const render = function () { + for (let post of posts) { + let postBox = $("

    " + post.name + "

    " + post.text + "

    ") + $("#timeline").append(postBox) + } +} +render() +``` + + +This is great because our view now reflects our data exactly. + + + +But what happens when someone else posts on our timeline? + + + +---------- + + + +From the view the user can trigger some **events** - like a button that posts another birthday wish. + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/dataflow2.PNG) + + + +So far, in situations like this - where there is an event that should change the DOM, we have been doing something like this: + + +``` +$("post").on("click", function () { + const name = $("input-name").val() + const text = $("input-text").val() + $("#timeline").append(newPost(name, text)) + //where newPost is a funciton that creates a post html element with the given name and text +}) +``` + + +This is bad because there are other events that trigger DOM changes. + + + +- Someone sending you a direct message +- An invite to Crush-a-Candy +- Another post on the timeline + + + +So many things can change the DOM that if we had loose on.("click")s everywhere it would eventually become very hard to keep track. + + + +Instead, when an event happens, **the only thing that should change is data itself!** + + + +The idea behind the data flow concept is that **we don't want to change the view directly**. The event should only affect the data. + + + +So back to our code, it would look like this: + + +``` +$("post").on("click", function () { + posts.push({ + name: $("input-name").val(), + text: $("input-text").val() + }) +}) +``` + +The event is still the same - the post has been clicked - but now all we're doing is pushing to our posts array. + + + +And now, since our data is updated, we can just call our render function again. + + + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/dataflow3.PNG) + +And that's our circle ~ \ No newline at end of file diff --git a/web-development-basics-advanced/dom-intro/README.md b/web-development-basics-advanced/dom-intro/README.md new file mode 100644 index 0000000..9d9813f --- /dev/null +++ b/web-development-basics-advanced/dom-intro/README.md @@ -0,0 +1,60 @@ +# Intro + +So far we've learned to write HTML+CSS, and JS separately. They have not interacted with one another... until _today_. + + + +To make our webpages more interesting, we want to be able to **dynamically change the content** on the page - that means either removing, changing, or adding new elements to the page. + + + +We also want to interact with the user; if the user clicks a button, we want to _do something_ in response to that. + + + +As such, today's lesson will cover the following: + + + +- The DOM and the `document` object +- Using JS to find HTML elements on our page +- Accessing the values of those elements +- Modifying/removing elements and/or their values +- Creating new elements with JS and adding them to the page +- Events - things the user does on our page, to which we want to react + + + +This is the beginning of doing really cool things as developers! Be excited! + + + +---------- + + + +#### **THE DOM** + + + +Before we _do_ anything, we need to understand what we're dealing with. After all, we want to do all these HTML related actions using JS, but we don't write any HTML in our JS files. + + + +Remember this: **the way JS accesses HTML elements is through the DOM** + + + +DOM stands for **D**ocument **O**bject **M**odel - it is a _representation_ of our HTML document. + + + +In particular, it is a representation in which each _node_ in our HTML is an _object_ which represents part of the `document`. + + + +What is this `document`? + + + +The `document` is an object accessible in JS that represents our entire page. Let's check it out. \ No newline at end of file diff --git a/web-development-basics-advanced/dom-traversal-with-jquery/README.md b/web-development-basics-advanced/dom-traversal-with-jquery/README.md new file mode 100644 index 0000000..a6b5d18 --- /dev/null +++ b/web-development-basics-advanced/dom-traversal-with-jquery/README.md @@ -0,0 +1,11 @@ +# Intro + +In this lesson we're going to learn how to move around from one element to another. We can't always give specific IDs to everything, so we need a better way to target elements given a certain starting point, and _traversing_ to them. + + + +So get yourself an index.html, a main.js, and some jQuery imports*. Then buckle up for a heck-of-a ride. + + + +###### *Or use codepen, just make sure you have jQuery set up there \ No newline at end of file diff --git a/web-development-basics-advanced/e-commerce-dom-project--optional-/README.md b/web-development-basics-advanced/e-commerce-dom-project--optional-/README.md new file mode 100644 index 0000000..c07e246 --- /dev/null +++ b/web-development-basics-advanced/e-commerce-dom-project--optional-/README.md @@ -0,0 +1,24 @@ +# Description + +The goal of this project is to create a simple e-commerce website. This can be a little challenging with your current knowledge, so take it slowly, read through all of the instructions before you start, and use Google :) + + + +The site should have a navigation bar with 3 buttons: + +1. `About Us` - when clicked there should be some HTML rendered with some information about the website (feel free to get creative) +2. `All Products` - when clicked it should render different HTML on the page which displays a list of all the products + - Each product should also have an add to cart button. +3. `Cart Page` - when clicked it should render new HTML to the page which will display all items that are already added to the cart (here items can have a `delete` from cart button) + + + +Note: You can use modules, but don’t need to if you’re not sure how. + + + +Additionally, feel free to be as creative as you want. The idea is to explore and challenge yourself. You don’t necessarily need to add all the features or go exactly according to the instructions. + + + +Good luck! \ No newline at end of file diff --git a/web-development-basics-advanced/jquery/README.md b/web-development-basics-advanced/jquery/README.md new file mode 100644 index 0000000..973e7ef --- /dev/null +++ b/web-development-basics-advanced/jquery/README.md @@ -0,0 +1,64 @@ +# Intro + +We've been working with the DOM a bit, and eventually you've got to get tired of writing document.getElementById... - it's very verbose. + + + +So today we're introducing the **jQuery library** - effectively this will give us several shortcuts to working with the DOM. Don't get confused: **jQuery is just JavaScipt**. Specifically, it is a [wrapper](https://en.wikipedia.org/wiki/Wrapper_function) for **vanilla JS** that makes our lives easier. + + + +For instance, instead of writing this in vanilla (plain, regular) JS: +``` +document.getElementById("container") +``` + + +We'll write this with jQuery: +``` +$("#container") +``` + + +In terms of getting an element by an ID, they do the exact same! But that jQuery sure is more convenient. + + + +jQuery does more than give us shortcuts for things that vanilla JS already does. It also gives us extra methods that do specific things for us. Like this: + + +``` +//vanilla JS +document.getElementById("container").style.display = "none" + +//jQuery +$("#container").hide() //when we select elements with jQuery, we also get methods that can work on the element, on top of the element itself +``` + + +We'll talk more about jQuery methods soon. + +---------- + + + +There's a lot to explore in jQuery, but for this lesson we'll focus on the following: + + + +- Targeting/selecting elements +- Understanding $ +- Common jQuery methods +- css and addClass +- val +- data +- Handling user events +- Good ol' this - in jQuery +- Creating & adding/removing elements to/from the DOM +- Dynamic event listeners + + + +It may seem like a lot, but really it's mostly the same things we did in vanilla JS, with more convenience. + +Call it DOM++ if you like. \ No newline at end of file diff --git a/web-development-basics-advanced/tweeter-controller/README.md b/web-development-basics-advanced/tweeter-controller/README.md new file mode 100644 index 0000000..1877f61 --- /dev/null +++ b/web-development-basics-advanced/tweeter-controller/README.md @@ -0,0 +1,19 @@ +# Intro + +It's time to complete Tweeter! + + + +So far we have our module that handles the logic - adding/removing posts and comments. + + + +And our rendering module which takes the data from the logic module and renders it. + +Now we need to build the part that handles both of these. How do we add posts? When are comments created and removed? Who calls renderPosts? + + + +All of these dynamic things happen as a result of user interaction! In our case, clicks. + +This, finally, is the **Controller** in our MV**C** architecture - the part that deals with user input. \ No newline at end of file diff --git a/web-development-basics-advanced/tweeter-logic-module/README.md b/web-development-basics-advanced/tweeter-logic-module/README.md new file mode 100644 index 0000000..b7289c1 --- /dev/null +++ b/web-development-basics-advanced/tweeter-logic-module/README.md @@ -0,0 +1,69 @@ +# Intro + +It's time to put what we've learned about closures and modularization to practice. We'll do so by creating our own Tweeter. It is not at all related to the somewhat more popular Twitter, though its basic functionalities will be similar. + + + +Eventually, our Tweeter will look like this: + + + +![](https://s3-us-west-2.amazonaws.com/learn-app/lesson-images/tweeter-final.PNG) + + + +But for now we're only going to implement the data related parts that will be the 'engine' powering this multi-million dollar project. + + + +Go ahead and **create a tweeter folder** - you can start by creating a repository on Github, or by doing it locally and then pushing later. Up to you. It should end up on GitHub eventually, though. + + + + + +---------- + + + + + +#### **MODULES IN ACTION** + + + + + +We learned about modularization, but it'll only be clear once we start to talk about applications on a higher level. + + + +So - what are the components, the building blocks, the _modules_ of Tweeter? + + + +- The module that manages our posts logic +- Storing all our twits (not the same as tweets) +- Posting a twit +- Commenting on twits +- Removing twits +- Removing comments +- A module that manages our **rendering** - displaying things on the page +- Creating HTML for a twit dynamically +- Creating HTML for comments dynamically +- Rendering all our twits and their comments +- Something that glues both of the above + + + +For now, we're only going to deal with the first part - our core _twits_ operations - so we're going to create a Tweeter module. + + + +We'll learn about MVC soon, but know that this module is the **Model** in our **M**VC architecture - the part that is responsible for our data. + + + +Because we want to keep our modules separate, we're literally going to separate them into different files. + +As such, go ahead and **create a** **model.js** **file** - this is where our Tweeter module will be. Add this file to your **tweeter** folder. \ No newline at end of file diff --git a/web-development-basics-advanced/tweeter-render-module/README.md b/web-development-basics-advanced/tweeter-render-module/README.md new file mode 100644 index 0000000..6d6ccf2 --- /dev/null +++ b/web-development-basics-advanced/tweeter-render-module/README.md @@ -0,0 +1,67 @@ +# Intro + +After Completing the Module part of the **M**VC ,It's time to **(partly)** bring our **Tweeter app** to life! + + + +If you've got your whole **Tweeter logic module working well** - great. Keep that. + +if you did not **complete** it, thats okay! 😄 you can use the following instead for now, since we're only going to deal with rendering and nothing dynamic yet: +
    +Tweeter Logic + +``` +const Tweeter = function () { + const _posts = [ + { + text: "First post!", + id: "p1", + comments: [ + { id: "c1", text: "First comment on first post!" }, + { id: "c2", text: "Second comment on first post!!" }, + { id: "c3", text: "Third comment on first post!!!" } + ] + }, + { + text: "Aw man, I wanted to be first", + id: "p2", + comments: [ + { id: "c4", text: "Don't wory second poster, you'll be first one day." }, + { id: "c5", text: "Yeah, believe in yourself!" }, + { id: "c6", text: "Haha second place what a joke." } + ] + } + ] + + const getPosts = () => _posts + + return { + getPosts: getPosts + } +} +``` + +
    +
    + +Having the getPosts function is enough for this part, because that's all our rendering module will **require**. (we Do **NOT** need anything more than that) + +--- + +Also, here is some HTML (add it to your **tweeter** folder) you should use - it's nothing exciting, and we won't be changing it throughout this project: +``` + + + + Tweeter + + + + + + +

    Tweeter

    Twit
    + + + +``` \ No newline at end of file diff --git a/web-development-basics/README.md b/web-development-basics/README.md new file mode 100644 index 0000000..f2f3392 --- /dev/null +++ b/web-development-basics/README.md @@ -0,0 +1,17 @@ +# Web Development Basics + +- [Box Model](box-model/README.md) +- [Code_Standards](code_standards/README.md) +- [Css Basics](css-basics/README.md) +- [Css Grid](css-grid/README.md) +- [Css Positioning](css-positioning/README.md) +- [Css_Positioning_Exercises](css_positioning_exercises/README.md) +- [Extra_Practice](extra_practice/README.md) +- [Functions](functions/README.md) +- [Functions_Mini_Lesson_Optional](functions_mini_lesson_optional/README.md) +- [Git Basics](git-basics/README.md) +- [Html Basics](html-basics/README.md) +- [Javascript Basics](javascript-basics/README.md) +- [Js This](js-this/README.md) +- [Scope](scope/README.md) +- [Web Debugger Basics](web-debugger-basics/README.md) \ No newline at end of file diff --git a/web-development-basics/_sidebar.md b/web-development-basics/_sidebar.md new file mode 100644 index 0000000..188e16e --- /dev/null +++ b/web-development-basics/_sidebar.md @@ -0,0 +1,16 @@ +- Web Development Basics + - [Box Model](box-model/README.md) + - [Code_Standards](code_standards/README.md) + - [Css Basics](css-basics/README.md) + - [Css Grid](css-grid/README.md) + - [Css Positioning](css-positioning/README.md) + - [Css_Positioning_Exercises](css_positioning_exercises/README.md) + - [Extra_Practice](extra_practice/README.md) + - [Functions](functions/README.md) + - [Functions_Mini_Lesson_Optional](functions_mini_lesson_optional/README.md) + - [Git Basics](git-basics/README.md) + - [Html Basics](html-basics/README.md) + - [Javascript Basics](javascript-basics/README.md) + - [Js This](js-this/README.md) + - [Scope](scope/README.md) + - [Web Debugger Basics](web-debugger-basics/README.md) \ No newline at end of file diff --git a/web-development-basics/box-model/README.md b/web-development-basics/box-model/README.md new file mode 100644 index 0000000..074e233 --- /dev/null +++ b/web-development-basics/box-model/README.md @@ -0,0 +1,55 @@ +# The Box Model + +# The Box Model + +We know enough now to talk about the Box Model. To understand this, you must first accept the following boggling statement: + +_There is more to an element on the page than the element on the page._ + +And we can explain that visually. Say we have our good old red box, with a `width` and `height` of 100px. Create such an element. + +Now right-click the box and select "Inspect". You should see Chrome's developer tools pop up, and there you'll see the HTML that the browser has available: + +![.guides/img/DevTools](.\img\DevTools.PNG) + +You should be on the **Elements** tab, and in the smaller window you should be on the **Styles** tab. Scroll down the little window until you see this: + + +![.guides/img/BoxModelPlain](.\img\BoxModelPlain.PNG) + +This is the CSS **box model**. What we're seeing here is how the element looks on the page. Right now it's pretty stark - naturally, because we haven't done much. + + +Notice the 100 x 100 in the middle? Yup, those are the dimensions we gave our element! + +##### **Note: the box model will _always show dimensions in pixels_, even if you use percents or other units** + +Ok so the above doesn't tell us much we don't know. But let's add a margin-top of 100px as well and see what that does: + + + + +![.guides/img/BoxModelMargin](.\img\BoxModelMargin.PNG) +There it is, our box model keeping exact track of the positioning of our element. Of course, you should have seen your element move as well. Now what if we add just `padding: 20px` ? + + + +![.guides/img/BoxModelMarginAndPadding](.\img\BoxModelMarginAndPadding.PNG) + + +Yessir, all around. Just as we would expect. But the really fun part is when you **hover your mouse** over any of the box model's sections. + + +When you hover over the innermost part, you'll see your div get highlighted on the page - this is _great_ for locating elements when you've got a bunch on the page. + + +When you hover over the margin section, you'll see exactly what the browser is doing with that 100px - the "push", so to speak. You'll _also_ see that the margin highlight extends all the way to the right-most part of the page - why? Because this `div` is a **block** element! Bam. + + +So **whenever elements start disappearing or they don't look the way you expect - inspect them and look at their box model**, that should give you some headway about how to start fixing. + + +Btw, what happens when you hover on the padding section? + + +You should see the 20px all around that are padding the element. That's what we mean by the `div` being pushed "outside" beyond its original 100 x 100 dimensions. \ No newline at end of file diff --git a/web-development-basics/code_standards/README.md b/web-development-basics/code_standards/README.md new file mode 100644 index 0000000..db4d773 --- /dev/null +++ b/web-development-basics/code_standards/README.md @@ -0,0 +1,11 @@ +# Intro + +# Code Standards + +Through out the course we want to maintain a certain level of code standards that are fit for the industry. + +Please make sure to practice these conventions as best as you can! + +![](.\img\microscope.png) + +**we are watching you** \ No newline at end of file diff --git a/web-development-basics/css-basics/README.md b/web-development-basics/css-basics/README.md new file mode 100644 index 0000000..b9f6251 --- /dev/null +++ b/web-development-basics/css-basics/README.md @@ -0,0 +1,14 @@ +# Intro + +# CSS Basics + +In this lesson we will cover: + +- Properties (briefly) +- CSS Selectors +- Specificity +- Display + +Note, CSS code should go in your `style.css` file - and make sure you have the connection from your HTML file! + +There will be exercises in the middle and end of the lesson, but you should be trying things out throughout - don't just read it over, you'll get bored ~ \ No newline at end of file diff --git a/web-development-basics/css-grid/README.md b/web-development-basics/css-grid/README.md new file mode 100644 index 0000000..e2ffc8f --- /dev/null +++ b/web-development-basics/css-grid/README.md @@ -0,0 +1,96 @@ +# Intro + +# Intro + +CSS can be... a lot. The absolutes, positions, margins - sometimes one attribute messes with another and it's unclear how instead of a few boxes side by side you got this: + + + +![.guides/img/badCss](.\img\badCss.PNG) + + + + + +Though, to be honest, if you're able to replicate that - well done. + + + +Anyway, sometimes we want to layout our page a certain way without worrying too much about the small details of CSS. Everything from the basic CSS lesson is **still important** and you definitely **will use it more** - but for a more intuitive approach to the layout of our web apps, we want someone else to take care of the heavy lifting. + + + +And so we have [CSS Grid](https://cssgrid.io/). + + + +---------- + + + +#### **A GRID** + + + +A grid layout is just what you imagine - some columns and rows, with our elements aligned neatly around the page. + + + +![.guides/img/1](.\img\1.png) + + +Can you think of how you would design something like the above image with just plain CSS? And how would the HTML look? This is one (not very fun) option: + +NOTE: if you copying thous line by clicking the "copy" button, it might not work... To fixed that, just select the code and copy/paste it + + +```html +
    +
    +
    +``` + +```css +.container{ + padding: 10px; + position: relative; +} + +.head{ + height: 70px; + width: 90%; + right: 0; + position: absolute; + background-color: #a29bfe; + display:inline-block; + +} + +.side-nav{ + height: 500px;; + width: 10%; + background-color: #6c5ce7; + display: inline-block; +} + +.main{ + position: absolute; + display: inline-block; + width: 100%; +} + +.inner-content{ + position: absolute; + top: 70px; + height: 430px; + width: 90%; + background-color:red; +} +``` + + +...point is, it becomes pretty involved - and that is a pretty _basic_ layout. What if we wanted something even more complex? _And_ a lot of the values there are **hard-coded**. + + + +With CSS Grid, we can simplify this a _whole_ lot. Let's dive right in and see what this is all about. \ No newline at end of file diff --git a/web-development-basics/css-positioning/README.md b/web-development-basics/css-positioning/README.md new file mode 100644 index 0000000..7185ee4 --- /dev/null +++ b/web-development-basics/css-positioning/README.md @@ -0,0 +1,22 @@ +# Intro + +# CSS Position + +So far, we've covered pretty basic HTML and CSS. + +It wasn't the prettiest, but we're not shallow. + +Today we will learn about the **box model** and start moving elements around the page using the following CSS properties + +- margin +- padding +- position +- relative +- absolute +- left, top, right, bottom + +You'll be playing around with a lot of HTML/CSS. + +- You **must** try all the things in this lesson, otherwise it will be useless and boring to you +- If you want to keep some code but not delete it, you can **comment** it out +- In VSCode, highlight the line(s) you want to comment out and press Ctrl+/ (that's a slash) - this will wrap your code in a comment and prevent it from being read by the browser. \ No newline at end of file diff --git a/web-development-basics/css_positioning_exercises/README.md b/web-development-basics/css_positioning_exercises/README.md new file mode 100644 index 0000000..c979126 --- /dev/null +++ b/web-development-basics/css_positioning_exercises/README.md @@ -0,0 +1,50 @@ +# Present + +# Present + +Create the following: + +![.guides/img/ex1](.\img\ex1.PNG) +
    +Click here to reveal the answer. + + +HTML (inside the `` tag) + +```html +
    +
     +``` + + + + +CSS: + +```css +#parent { + display: inline-block; + background-color: blue; + width: 300px; + height: 300px; +} + +.child { + background-color: red; +} + +#child-1 { + position: absolute; + width: 300px; + height: 20px; + top: 50px; +} + +#child-2 { + position: absolute; + height: 300px; + width: 20px; + left: 50px; +} +``` +
    \ No newline at end of file diff --git a/web-development-basics/extra_practice/README.md b/web-development-basics/extra_practice/README.md new file mode 100644 index 0000000..eaef783 --- /dev/null +++ b/web-development-basics/extra_practice/README.md @@ -0,0 +1,110 @@ +# Page1 + +# JavaScript Exercises + +1. **Count Object Properties**: + Write a function that counts the number of properties in an object. + ```javascript + function countProperties(obj) { + // Your code here + } + // Test the function with + console.log(countProperties({ name: 'Alice', age: 25 })); // Should return 2 + ``` + +2. **Check for Nested Property**: + Write a function to check if a nested property exists in an object. + ```javascript + function hasNestedProperty(obj, key) { + // Your code here + } + // Test the function with + console.log(hasNestedProperty({ user: { name: 'Bob', age: 30 } }, 'user.name')); // Should return true + ``` + +3. **Calculate Age from Birth Year**: + Create an object `person` with properties `name` and `birthYear`. Write a function that calculates age from the birth year. + ```javascript + let person = { + name: 'John', + birthYear: 1990 + }; + + function calculateAge(obj) { + // Your code here + } + // Test the function with + console.log(calculateAge(person)); // Should return age + ``` + +4. **Update Object Property**: + Write a function that updates the value of a given property in an object. + ```javascript + function updateProperty(obj, key, value) { + // Your code here + } + // Test the function with + console.log(updateProperty({ name: 'Alice' }, 'name', 'Bob')); // Should change name to Bob + ``` + +5. **Nested Object Creation**: + Write a function to create a nested object from a single object with dot-separated keys. + ```javascript + function createNestedObject(obj) { + // Your code here + } + // Test the function with + console.log(createNestedObject({ 'user.name': 'Alice', 'user.age': 25 })); // Should return { user: { name: 'Alice', age: 25 } } + ``` + +6. **Display Object in HTML**: + Write a function that takes an object and displays its properties and values in HTML format. + ```javascript + function displayObjectInHTML(obj) { + // Your code here + } + // Test with an object of your choice + ``` + +7. **Object Property Checker**: + Write a function that checks if a property exists in an object. + ```javascript + function hasProperty(obj, key) { + // Your code here + } + // Test the function with + console.log(hasProperty({ name: 'Alice', age: 25 }, 'age')); // Should return true + ``` + +8. **Add Method to Object**: + Add a method `greet` to an object `person` that returns "Hello, [name]!". + ```javascript + let person = { + name: 'John', + greet: function() { + // Your code here + } + }; + // Test the method with + console.log(person.greet()); // Should return "Hello, John!" + ``` + +9. **Object to Array Conversion**: + Write a function that converts an object into an array of `[key, value]` pairs. + ```javascript + function objectToArray(obj) { + // Your code here + } + // Test the function with + console.log(objectToArray({ name: 'Alice', age: 25 })); // Should return [['name', 'Alice'], ['age', 25]] + ``` + +10. **Merge Two Objects**: + Write a function that merges two objects into one. + ```javascript + function mergeObjects(obj1, obj2) { + // Your code here + } + // Test the function with + console.log(mergeObjects({ name: 'Alice' }, { age: 25 })); // Should return { name: 'Alice', age: 25 } + ``` \ No newline at end of file diff --git a/web-development-basics/extra_practice/_sidebar.md b/web-development-basics/extra_practice/_sidebar.md new file mode 100644 index 0000000..ede63d2 --- /dev/null +++ b/web-development-basics/extra_practice/_sidebar.md @@ -0,0 +1,3 @@ +- [⬅ Back to Web Development Basics](../README.md) + +- [Page1](./Page1.md) \ No newline at end of file diff --git a/web-development-basics/functions/README.md b/web-development-basics/functions/README.md new file mode 100644 index 0000000..b8151f4 --- /dev/null +++ b/web-development-basics/functions/README.md @@ -0,0 +1,40 @@ +# Intro + +# Functions + +![.guides/img/func-in-output](.\img\func-in-output.PNG) + +A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). + +In this lesson we'll talk about the following: + +- Function syntax +- Calling/invoking functions +- Function parameters & arguments +- Default parameters +- Reference pitfalls +- The `return` statement +- Methods + +SYNTAX +--- + +A simple syntax to use functions is : + + +```js +const greet = function(){ + console.log("Hello there") +} +``` + +Generally, we will want our functions to be `const`s, because there is no reason for them to change. + +So as usual, we start by defining a variable with a name: `const greet` - here `greet`* is our `function` name. +###### *Naming convention for functions dictates that **function names should be some sort of _action_, or a verb**. We'll see examples of this throughout the lesson. + +The way we invoke the function is by `()`, the moment we invoke it, the function is called + +```js + greet() //will print "Hello there" +``` \ No newline at end of file diff --git a/web-development-basics/functions_mini_lesson_optional/README.md b/web-development-basics/functions_mini_lesson_optional/README.md new file mode 100644 index 0000000..3bd3e43 --- /dev/null +++ b/web-development-basics/functions_mini_lesson_optional/README.md @@ -0,0 +1,14 @@ +# More Functions + +# More Functions + +--- +![](.\img\function_img.png) + +**THIS IS OPTIONAL** + +Hello clever student. If you're here, you've finished working with functions and are looking **for an extra challenge** to dive deeper into functions - this lesson should **not** prevent you from moving on with the rest of the content. + + + +If, however, you're done with everything else and would like to challenge yourself - have fun 😁 \ No newline at end of file diff --git a/web-development-basics/html-basics/README.md b/web-development-basics/html-basics/README.md new file mode 100644 index 0000000..558b08d --- /dev/null +++ b/web-development-basics/html-basics/README.md @@ -0,0 +1,56 @@ +# Intro + +# Intro + +This lesson is about HTML. In particular, we will: + +- Talk about the difference between HTML "nodes", "tags", and "elements". +- Distinguish between "block" and "inline" elements. +- Look at a few HTML attributes. +- Look at some of the most common HTML tags. + +---------- + + + +## Setup + +From your command line, create an index.html file, open it in your code editor (e.g VS Code, Notepad, PyCharm...), and add the following **boilerplate** to it: + + +```html + + + + + + + + Document + + + + + + + +``` + + +Test things out (a habit we need to form) by opening your **index.html** in your browser. Everything working as expected? + +---------- + + + +## Reminder + +Remember, except for the **boilerplate** HTML - **any HTML you write must be in the** **body** **tag** - that is, between these two: + +``` + + + + + +``` \ No newline at end of file diff --git a/web-development-basics/javascript-basics/README.md b/web-development-basics/javascript-basics/README.md new file mode 100644 index 0000000..00d802f --- /dev/null +++ b/web-development-basics/javascript-basics/README.md @@ -0,0 +1,13 @@ +# Intro + +# Java Script Basics +In This lesson we're going to cover the following basic concepts in JavaScript: + + +- Variables +- Identifiers +- Operators +- Conditional Statements +- Arrays +- Objects +- Loops \ No newline at end of file diff --git a/web-development-basics/js-this/README.md b/web-development-basics/js-this/README.md new file mode 100644 index 0000000..6c43df2 --- /dev/null +++ b/web-development-basics/js-this/README.md @@ -0,0 +1,44 @@ +# Intro + +# Java Script this + +Before we get into what `this` is in JS, let's refresh two concepts: Objects and Methods +```js +const person = { + username: "Felicia", + introduce: function(){ + console.log("Hi, I'm Felicia") + } +} + +person.introduce() //prints "Hi, I'm Felicia" +``` + + +In the above, we've create an object with two properties: a `username`, which is a string, and `introduce`, which is a function. We call the latter a **method** because it's inside an object. + + + +Isn't it repetitive to have "Felicia" both in the `username` property, and inside the method's console log? + + + +But if we try something like this: + +```js +const person = { + username: "Felicia", + introduce: function(){ + console.log("Hi, I'm " + username) + } +} + +person.introduce() //throws an error +``` + + +We get an error because inside the `introduce` function, `username` does not exist! The "global"* scope of `username` doesn't apply in this context. + +###### *Not really global, but relative to the function it is + +To be able to reference/access an object's own properties from within its methods, we need `this` \ No newline at end of file diff --git a/web-development-basics/scope/README.md b/web-development-basics/scope/README.md new file mode 100644 index 0000000..7dad9a6 --- /dev/null +++ b/web-development-basics/scope/README.md @@ -0,0 +1,61 @@ +# Intro + +# Scope + +When we talked about if statements, loops, and functions, we kept referencing this notion of a **code block**. + + + +Generally, anything between curly braces, +``` + { + this stuff + } +``` + +is said to be its own block, and therefore have its own **scope**. + +Scope refers to the **"visibility"** of a variable - i.e. which parts of the code can see and access the variable. Let's dive into this to see what we mean. + +## If + +Check out the following code: + +```js +const bag = ["flashlight", "medicine"] +const moreItems = ["tent", "water bottle", "knife", "rope"] + +if(bag.length < 3){ + const nextItem = moreItems[0] + bag.push(nextItem) +} + +console.log(bag) +console.log("Added " + nextItem) +``` + +We expect the code above to push `"tent"` into `bag`, because the length of `bag` is 2 at first. + +Then we expect to see the new `bag` in the console, as well as `"Added tent"`, since that is what we added. + + + +When you run this code, you should see two logs: + + + ["flashlight", "medicine", "tent"] +*Uncaught ReferenceError: nextItem is not defined + + + +So the code _does enter_ the if, and it _does push_ `nextItem` in the `bag` - and yet we get an error that says that `nextItem` is not defined. + + + +That is exactly **scope** in action. + +The variable `nextItem` is only defined within the _scope_ of the `if` - i.e. within the `if`'s curly braces. + + + +More generally, **any variable is only accessible in the scope in which it was defined** \ No newline at end of file diff --git a/web-development-basics/web-debugger-basics/README.md b/web-development-basics/web-debugger-basics/README.md new file mode 100644 index 0000000..7a49bd7 --- /dev/null +++ b/web-development-basics/web-debugger-basics/README.md @@ -0,0 +1,12 @@ +# Overview + +# Web Debugger Basics: Overview + +A good craftsman knows his tools! In this lesson we’re going to learn how to use Chrome Developer Tools (aka DevTools). Specifically, we'll learn how to do the following with DevTools: + +- Change the style of our webpage +- Interact with our JavaScript +- View errors in our code +- Debug our JavaScript + +DevTools was created for Chrome. Other browsers also have their own developer tools, there are even add-ons available, for example "Firebug" for Firefox, that give you even more cool features. Having said that, DevTools is pretty sweet so we'll just stick to working with that. \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/-stay-logged-in--method/README.md b/web-security---osi-model--python-backend-/-stay-logged-in--method/README.md new file mode 100644 index 0000000..459fe2a --- /dev/null +++ b/web-security---osi-model--python-backend-/-stay-logged-in--method/README.md @@ -0,0 +1,8 @@ +# Intro + +After a user successfully authorizes themselves, they can access a single resource or page. But what if they want to access multiple pages? Or come back to the same page a few times over the next few days? Do they need to login each time? No they don’t. They just need to store the token on the client side. + +The next question we need to answer is where do we store? We have a few options, but really only one really makes sense. + +- **HTML5 Web Storage (localStorage or sessionStorage)**. We might be tempted to store the token in localstorage, but as you can imagine, this is not safe, as Web Storage (localStorage/sessionStorage) is accessible through JavaScript on the same domain. This means that any JavaScript running on your site will have access to web storage, and because of this can be vulnerable to cross-site scripting (XSS) attacks. +- **Cookie**. The next usual suspect are the cookies, and cookies is the best option, and especially if used with the `HttpOnly` cookie flag, are not accessible through JavaScript, and are immune to XSS. You can also set the `Secure` cookie flag to guarantee the cookie is only sent over HTTPS \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/README.md b/web-security---osi-model--python-backend-/README.md new file mode 100644 index 0000000..947cb2f --- /dev/null +++ b/web-security---osi-model--python-backend-/README.md @@ -0,0 +1,10 @@ +# Web Security Osi Model Python Backend + +- [ Stay Logged In Method](-stay-logged-in--method/README.md) +- [Authorization Token](authorization-token/README.md) +- [Basic Authentication With Fastapi](basic-authentication-with-fastapi/README.md) +- [Https Under Sslslashtls](https-under-sslslashtls/README.md) +- [Jwt Is The New Token](jwt-is-the-new-token/README.md) +- [Password Hashing](password-hashing/README.md) +- [The Dns Protocol](the-dns-protocol/README.md) +- [The Osi Model](the-osi-model/README.md) \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/authorization-token/README.md b/web-security---osi-model--python-backend-/authorization-token/README.md new file mode 100644 index 0000000..7b60a50 --- /dev/null +++ b/web-security---osi-model--python-backend-/authorization-token/README.md @@ -0,0 +1,34 @@ +# Intro + +The basic authentication scheme learned before is, as its name suggests, basic, and exposes both the username and the hashed password to attackers in each API call. A more modern security flow, instead of the *username/password* pair, and more secure concept, is a secure token called *authorization token’. The authorization token is an encoded string that is generated by the server. The client then stores this token and uses it in each subsequent request to be able to execute the authorized endpoints. + +This token is referred to as the *Bearer token*, and is also known as *Bearer authentication* or *token authentication*, and has security tokens called bearer tokens. The name “Bearer authentication” can be understood as “give access to the bearer of this token.” The bearer token is a cryptic string, usually generated by the server in response to a login request. The client must send this token in the Authorization header when making requests to protected resources. + +### Bearer authentication flow +Below is a simple flow of the Bearer authentication flow: +1. Client sends *username* and *password* to the server +1. Server creates a hashed token and sends it back to the client (the hashed token holds unique user information that allows the server to retrieve the relevant user) +1. The client then requests an API endpoint and includes the token +1. The server validates that the token is valid by decoding the token and retrieving the relevant user from the databases based on the ‘unique user information’ included in the token +1. The server then checks if the user is authorized to access the endpoint +1. If the server the the user is authorized, the endpoint returns the desired result with the 200 status code (successful) +1. Otherwise, the server will return a 401 unauthorized error + +![alt text](./auth1.png) + +The main difference in this form of authorization is that the `Authorization` header contains a `Bearer` string and not a `Basic` string as in with the basic authentication. + +### Examples of Bearer and Basic authentication tokens. +An example of a Bearer token is: +```Python +Authorization: Bearer $2a$12$CgpQ6EX4ukkKmTROa245OeplIB2kraEV6wuPJAM7G1gqX.Im.KBQC` +``` + +This tells the server that this is a token that includes multiple values that identifies a user and not just a ‘username’ and ‘password’ pair that exists in a Basic authentication scheme as follows: +```Python +Authorization: Basic $2a$12$CgpQ6EX4ukkKmTROa245OeplIB2kraEV6wuPJAM7G1gqX.Im.KBQC +``` + +If you’re using *Postman* to test your API endpoints, you need to select the `Bearer Token` from the *Type* field in the `Authorization` tab: + +![alt text](./postman2.png) \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/README.md b/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/README.md new file mode 100644 index 0000000..f58d8ea --- /dev/null +++ b/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/README.md @@ -0,0 +1,6 @@ +# Comprehension Check + +{Check It!|assessment}(multiple-choice-3770161820) +{Check It!|assessment}(multiple-choice-270365881) +{Check It!|assessment}(multiple-choice-2019470503) +{Check It!|assessment}(multiple-choice-2987915630) \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/_sidebar.md b/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/_sidebar.md new file mode 100644 index 0000000..37d55f7 --- /dev/null +++ b/web-security---osi-model--python-backend-/basic-authentication-with-fastapi/_sidebar.md @@ -0,0 +1,11 @@ +- [⬅ Back to Web Security Osi Model Python Backend ](../README.md) + +- [Comprehension Check](./Comprehension-check.md) +- [Creating A Simple Fastapi App](./Creating-a-simple-FastAPI-app.md) +- [Dependencies Based Authentication](./Dependencies-based-authentication.md) +- [Dependencies](./Dependencies.md) +- [Exercises](./Exercises.md) +- [Fastapi Testing Using Postman](./FastAPI-testing-using-Postman.md) +- [Intro](./Intro.md) +- [Middleware Based Authentication](./Middleware-based-authentication.md) +- [Validating Credentials](./Validating-credentials.md) \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/https-under-sslslashtls/README.md b/web-security---osi-model--python-backend-/https-under-sslslashtls/README.md new file mode 100644 index 0000000..5e926a0 --- /dev/null +++ b/web-security---osi-model--python-backend-/https-under-sslslashtls/README.md @@ -0,0 +1,16 @@ +# Overview + +## HTTPS Protocol + +HTTPS (HyperText Transfer Protocol Secure) is an encrypted version of the HTTP protocol usually running on **port 443**. It uses SSL or TLS to encrypt all communication between a client and a server. This secure connection allows clients to safely exchange sensitive data with a server, such as when performing banking activities or online shopping. In today's modern HTTPS protocol, the communication protocol is encrypted using Transport Layer Security (TLS). + +To understand the need for HTTPS over TLS, let’s walk through a typical client-server banking scenario. When clients want to transfer money using the bank website, they form an HTTP request which essentially says "I'm Bob, want to transfer 500$ to Alice using the following credit card number....". If no security measures are taken, Bob could be have a few surprises. + +- If no **encryption** is used, an intruder (man-in-the-middle) could intercept Bob’s request and use Bob's credit card details. +- If no **data integrity** is used, an intruder could modify Bob’s transaction (e.g. change "Alice" to "Eve"). +- Finally, if no **server authentication** is used, a server could display the bank famous logo, when actually the site maintained by Eve, an intruder who is impersonating as the bank website. After receiving Bob’s transaction, Eve could take Bob’s information and run away. + + +## TLS + +The primary goal of the TLS protocol is to provide **privacy (encryption)**, **data integrity** and **authenticity** between two communicating applications. Once the client and server have agreed to use TLS, they negotiate a stateful connection by using the so-called *handshaking* procedure. \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/jwt-is-the-new-token/README.md b/web-security---osi-model--python-backend-/jwt-is-the-new-token/README.md new file mode 100644 index 0000000..812416f --- /dev/null +++ b/web-security---osi-model--python-backend-/jwt-is-the-new-token/README.md @@ -0,0 +1,8 @@ +# Intro + +JSON Web Token (JWT) is an open standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. + +JWT is a token authentication scheme using the `Authentication: Bearer {token}` syntax. + +Below is a schematic flow of the client-server JWT communications. +![alt text](./jwt1.png) \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/password-hashing/README.md b/web-security---osi-model--python-backend-/password-hashing/README.md new file mode 100644 index 0000000..91c667f --- /dev/null +++ b/web-security---osi-model--python-backend-/password-hashing/README.md @@ -0,0 +1,13 @@ +# Intro + +Storing raw passwords is super dangerous. In case our db is compromised for whatsoever reason. All our user's passwords will be available to the hacker without any effort. To tackle this scenario we make use of password hashing. + +In very simple words, It is a one-way algorithm to convert passwords to a string that looks like gibberish e.g. If your password is "HelloWorld" it would become `$2y$12$kbQm9Vb96023efZFhSkZf.a4bAGyzDW6zKC/K1JDtKY0f.gKZxAHO` with 12 cryptographic iterations. + +![alt text](./Password_hashing.png) + +The wonderful thing about hashing is that we do not de-hash but we compare hashes to see if the password entered is the same as that of the existing password. + +In this lesson we will learn: +- How to hash passwords +- How to integrate password hashing into your FastAPI security scheme \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/the-dns-protocol/README.md b/web-security---osi-model--python-backend-/the-dns-protocol/README.md new file mode 100644 index 0000000..661c366 --- /dev/null +++ b/web-security---osi-model--python-backend-/the-dns-protocol/README.md @@ -0,0 +1,19 @@ +# Overview + +All computers on the internet, from smart phones to the servers that serve massive amount of content, communicate with each other by using IP addresess. + +When you open a browser and go to a website, you don't have to remember and enter the server IP address. Instead, you can enter a domain name like example.com and still end up in the right place. The DNS service helps to make that connection between domain names and IP addresses. + +The DNS is an application-layer protocol that allows a given hosts (clients) to query a complex distributed database system in order to resolve a domain (e.g. www.google.com) to the IP address (e.g. 142.250.201.14). + +Suppose a user wants to visit www.google.com. The web browser needs to translate the google.com hostname to an IP address. The browser will invoke the client side of DNS, which send a query message into the network. All DNS query and reply messages are sent over **UDP** on **port 53**. After a delay ranging from milliseconds to seconds, DNS in the user’s host receives a DNS reply message that provides the desired hostname -> IP address mapping. + + +|||definition +## Why UDP? + + +DNS utilizes the low overhead of UDP to resolve hostname as fast as possible. UDP, as a *connectionless* protocol, is **much faster** than TCP which requires the handshake before sides can communicate. DNS queries are usually not more than 512 bytes and can be delivered within a **single packet**, so no order control is required. If packet is getting lost, DNS just try again! DNS implements a simple logic to check data integrity itself (instead of relying on that of TCP). + +Note that DNS **may** use TCP for large size queries. +||| \ No newline at end of file diff --git a/web-security---osi-model--python-backend-/the-osi-model/README.md b/web-security---osi-model--python-backend-/the-osi-model/README.md new file mode 100644 index 0000000..c9be47c --- /dev/null +++ b/web-security---osi-model--python-backend-/the-osi-model/README.md @@ -0,0 +1,51 @@ +# The OSI Model + +# Layered Architecture + +The Public Internet is an *extremely* complicated system. This chapter introduces the OSI layer model to help you understand what happen to a piece of data while it is being transferred between two hosts over the Internet. + + +In order to get data over a given network, lots of different hard- and software components needs to work together. **Network Protocol** is a set of rules for those components to communicate with each other. To provide structure to the design of network protocols, network designers organize protocols — and the network hardware and software that implement the protocols - in **layers**. + +All these different types of communication protocols are classified in 7 layers, which are known as the **Open Systems Interconnection Reference Model**, the OSI Model for short. For easy understanding, this model is reduced to a 4-layer protocol description, as described in the table below: + +| Layer Name | Protocol used in this layer | +|---------|----------| +| Application Layer | HTTP, DNS, SMTP, SSH | +| Transport Layer | TCP, UDP | +| Network Layer | IP, ICMP | +| Link and Physical Layer | Ethernet | + +Each layer can only use the functionality of the layer below, each layer can only export functionality to the layer above. + +We will review the 4 layers by an example, from top to bottom. +What happen when you open your web browser and type http://www.google.com? We will try to examine it in the prism of the OSI model. + +**Application Layer** +The browser uses HTTP protocol to form a request to Google's servers, to serve Google home page. The HTTP request message may look like: +``` +GET / HTTP/1.1 +Host: google.com +User-Agent: Mozilla/5.0 +``` + +We literally want to transfer this text to Google's servers over the Internet, their server already knows how to response to this to kind of messages. +Since the web browser is an application that uses the network, it resides in the application-layer. + +The application layer is where network applications and their application-layer protocols reside. Network applications may be Web browsers, mails, WhatsUp, and every application that send or receive data over the Internet. + + +**Transport Layer** +Continuing the above example, the HTTP text message is transferred to another software in the user operation system. This software can transport application-layer messages using TCP protocol. TCP breaks long messages into shorter **segments**, it guarantees that the data was indeed delivered to the destination and controls the order in which segments are being passed. Note that TCP only controls **how** the data is being sent and received, but it does not responsible for the actual sending of the data. + +The transport layer controls the transportation of application-layer messages between application endpoints. + +**Network Layer** +The IP protocol is responsible for moving the TCP segments from one host to another. Just as you would give the postal service a letter with a destination address, IP protocol sends piece of data (a.k.a **packets**) to address (a.k.a **IP addresses**). It does so by communicating with a computer network devices (either physical or virtual) over a **Network Interfaces**. + +The network layer routes packets through a series of routers between the source and destination hosts. + +**Link and Physical Layers** +To move a packet from one **node** (host or router) to the next node in the route, the network layer relies on the services of the link and physical layers. In particular, at each node, the network layer passes the packet down to the link layer, which is a physical device (for example, Ethernet or WiFi interface cards). The network device delivers the packet to the next node along the route. This can be achieved over a wired or wireless electrical equipment. + +![.guides/img/layers](./layers.png) \ No newline at end of file