├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── issue_template.md │ └── issue_template.yml ├── pull_request_template.md └── stale.yml ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.MD ├── README.md ├── _templates ├── README.md ├── elective.md ├── lesson-v2.md ├── project.md └── topic-outline.md ├── agile-development ├── intro-to-agile.md └── scrum.md ├── algorithms ├── approximation-algorithms.md ├── distributed-algorithms.md ├── external-sorting-algorithms.md ├── intro-to-algorithms.md ├── p-versus-np-screenshoots │ ├── current-consensus.jpg │ ├── interactive-examples.jpg │ ├── learning-more.jpg │ ├── p-np.jpg │ ├── what-is-p.jpg │ └── why-does-it-matter.jpg ├── p-versus-np.md ├── parallel-algorithms.md ├── searching.md └── sorting.md ├── api ├── REST-API.md ├── Screen Shot 2018-10-08 at 7.15.15 PM.png ├── Screen Shot 2018-10-08 at 7.26.01 PM.png ├── Screen Shot 2018-10-08 at 7.31.03 PM.png ├── Screen Shot 2018-10-08 at 7.44.02 PM.png ├── Screen Shot 2018-10-08 at 7.44.12 PM.png ├── Screen Shot 2018-10-08 at 7.44.22 PM.png ├── apirequest.png ├── apis-and-json.md ├── http-request-practice.md ├── intro-to-http.md ├── postman-curl.gif ├── screenshot-restapi │ ├── delete.png │ ├── get.png │ ├── get404.png │ ├── post.png │ ├── postman-methods.png │ └── put.png └── twilio-api.md ├── application workshops ├── workshop-1.md └── workshop-2.md ├── best-practice-in-development ├── best-practice-in-client-side-development.md └── rendering-approaches-web-development.md ├── career ├── building-confidence.md ├── career-exploration.md ├── conflict-resolution.md ├── difficult-workplace-situations.md ├── feedback.md ├── feedback_training_guide.md ├── interviewing │ ├── README.md │ ├── negotiating.md │ ├── non-technical-interviewing-from-a-recruiter.md │ ├── non-technical-interviewing.md │ ├── phone-screen-questions.md │ ├── technical-interviewing.md │ ├── week-3-whiteboard-challenges.md │ └── whiteboarding.md ├── linkedin.md ├── networking-career.md ├── resume-writing.md ├── roles-in-tech │ ├── data-example.jpg │ ├── data-science.md │ ├── dev-ops.md │ ├── developer-advocate.md │ ├── entrepreneurship.md │ ├── lifecycle-datascience.png │ ├── machine-learning.md │ ├── product-manager.md │ ├── productmanage.png │ ├── qa.md │ ├── roles-in-tech.md │ ├── sales-engineering.md │ ├── security-locks.jpg │ ├── security.md │ ├── technical-program-manager.md │ └── technical-writing.md └── working-and-collaborating-remotely.md ├── chrome-developer-tools ├── chrome-developer-tools.md └── lab-exercise.md ├── code-challenges ├── Objects.md ├── README.md ├── Week_1 │ ├── Find_All_Anagrams_in_a_String.py │ └── Reverse_a_String.py ├── Week_10 │ ├── Boolean-to-String-Conversion.js │ ├── Climbing-Stairs.js │ ├── Largest-Swap.js │ └── Nested-Array.js ├── Week_11 │ ├── Find-the-Missing-Number.js │ ├── Fizz-Buzz.js │ ├── How-Many-Vowels.js │ └── Remove-Vowel-from-a-String.js ├── Week_12 │ ├── Find-the-Time.js │ ├── Trick-or-Treat.js │ └── Valid-Palindrome.js ├── Week_13 │ ├── Find-Lucky-Integer-in-Array.js │ ├── Longest-Palindrome-Substring.js │ ├── Palindrome-Regex.js │ └── Sort-by-String-Length.js ├── Week_14 │ ├── Converting-Objects-to-Arrays.js │ ├── Removing-Elements.js │ ├── String-Cleaning.js │ └── Switching-Between-Pencils.js ├── Week_15 │ ├── Check-Same-Case.js │ ├── Remove-Trailing-and-Leading-Zeroes.js │ └── Short-Long-Short.js ├── Week_16 │ ├── Find-the-Missing-Number.js │ ├── Format-Number-with-Commas-Separating-Thousands.js │ ├── Online-Shopping.js │ └── Return-the-Middle-Characters-of-a-String.js ├── Week_17 │ ├── Assign-Person-to-Occupation.js │ ├── Is-the-Word-an-Isogram.js │ └── Lowercase-and-Uppercase-Map.js ├── Week_18 │ ├── Basic-E-Mail-Validation.js │ ├── Replace-Vowel-with-Another-Character.js │ └── Zip-It-If-You-Can.js ├── Week_2 │ ├── array_search.js │ ├── search_and_replace.js │ ├── string_manipulation.js │ └── string_manipulation.py ├── Week_3 │ ├── Display_User_Name_in_Greeting.js │ ├── Display_User_Name_in_Greeting.py │ ├── HackerRank_Loops.js │ └── HackerRank_Loops.py ├── Week_4 │ ├── Filter_and_Reduce.js │ ├── Filter_and_Reduce.py │ ├── Getting_Started_with HTML_CSS_Python │ │ └── main.py │ ├── Getting_Started_with_React_Hello_Component │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── favicon.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ └── index.jsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── Map_Practice.js │ └── Map_Practice.py ├── Week_5 │ ├── Pop_Shift_and_Unshift_Elements.js │ ├── Pop_Shift_and_Unshift_Elements.py │ ├── Remove_Duplicates_and_Add_Elements.js │ ├── Remove_Duplicates_and_Add_Elements.py │ ├── Reverse_and_Rotate_Array_Elements.js │ └── Reverse_and_Rotate_Array_Elements.py ├── Week_6 │ ├── Object_Keys_Values_For-Of.js │ ├── Sort_Some_and_Every.js │ └── Working_With_Promises │ │ ├── README.md │ │ └── Working_with_Promises.js ├── Week_7 │ ├── Remove_Duplicates_from_Array.js │ ├── Spread_an_Array_into_Another_Array.js │ └── Ternary_Operator_for_Conditional.js ├── Week_8 │ ├── Jest_Integration_and_Unit_Testing │ │ ├── README.md │ │ ├── package.json │ │ ├── userController.js │ │ ├── userService.js │ │ └── vite.config │ ├── Math_methods_floor_ceil_min_max.js │ ├── Working_with_Arrays_and_Objects.js │ └── Working_with_React_Testing_Library │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── favicon.svg │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ └── index.jsx │ │ ├── tsconfig.json │ │ └── vite.config.js ├── Week_9 │ ├── Add-Digits.js │ ├── Find-the-Longest-Word-in-a-String.js │ ├── Move-Zeros.js │ ├── Return-the-Sum-of-Two-Numbers.js │ └── Single-Number.js ├── arrays.md ├── booleans.md └── string.md ├── coding-interviews └── readme.md ├── command-line └── env.md ├── css ├── css-challenge.md └── media-queries.md ├── data-structures ├── deque.md ├── hash-tables.md ├── intro-to-data-structures.md ├── linked-lists.md ├── queue-screenshots │ └── queue.png ├── queues.md ├── stack.md ├── stack.png └── trees.md ├── data-visualization └── data-viz-assessment.md ├── databases ├── bash │ ├── bash-scripts.md │ ├── create_db_sample.sh │ ├── create_db_sample.sql │ ├── sample_bash_script.sh │ └── teardown_db_sample.sh ├── data-modeling-1.md ├── data-modeling-2.md ├── data-models.md ├── database-intro.md ├── install-postgres-with-docker.md ├── installing-postgresql.md ├── sql-1.md └── sql-2.md ├── datetime └── datetime.md ├── debugging └── debugging.md ├── deploying ├── deploying-1-personal-site-to-netflify.md ├── deploying-and-production-ready.md ├── deploying-to-heroku.md ├── deploying-to-render.md ├── general-project-deploying.md └── screenshots │ ├── production-1.png │ ├── production-10.png │ ├── production-11.png │ ├── production-2.png │ ├── production-3.png │ ├── production-4.png │ ├── production-5.png │ ├── production-6.png │ ├── production-7.png │ ├── production-8.png │ ├── production-9.png │ ├── render-1.png │ ├── render-2.png │ ├── render-3.gif │ ├── render-4.png │ ├── render-5.png │ └── render-6.png ├── dev-tools ├── command-line-advanced.md ├── command-line-interface.md ├── dot-profile.md ├── keyboard-shortcuts.md ├── operating-systems.md ├── vim.md └── vscode.md ├── diversity-inclusion-bias └── inclusion.md ├── docker ├── docker-architecture.png └── intro-docker.md ├── electives ├── 1_intro_to_backend.md ├── angular.md ├── data-visualization.md ├── databases │ ├── database-migrations.md │ ├── mongo-db.md │ └── mongoose.md ├── memoization.md ├── mobile-development.md ├── mocha-testing.md ├── oauth │ ├── authorization.md │ └── o-auth.md ├── optimization │ ├── optimization.md │ ├── optimizing-your-react-node-project.md │ ├── performance-optimization-javascript.md │ └── performance-optimization-react.md ├── progressive-web-apps-and-service-workers.md ├── python.md ├── sass.md └── web-patterns.md ├── express-js ├── express-lab-exercise.md ├── express.md ├── middleware-example.png └── server-side-project.md ├── functional-programming └── FP.md ├── git ├── basic-gitignore.png ├── git-version-control-part2.md ├── git-version-control.md ├── github-collaboration.md ├── github-storage.md └── gitignore.md ├── giving-presentations └── giving-presentations.md ├── javascript ├── advanced-javascript-resources.md ├── basic-js-practice.md ├── common-functions-cheatsheet.md ├── destructuring.md ├── eslint.md ├── first-js-oop-project.md ├── javascript-1-variables.md ├── javascript-2-array-functions.md ├── javascript-3-conditionals.md ├── javascript-4-loops.md ├── javascript-5-switch.md ├── javascript-6-object-literals.md ├── javascript-7-oop.md ├── javascript-8-regex.md ├── javascript-9-async.md ├── javascript-maps-and-sets.md ├── javascript-modularity.md ├── newer-JS-features.md ├── require-and-import-mini-lesson.md ├── restaurant recommender │ ├── Heap.py │ ├── RestaurantRecommender - part1.md │ ├── RestaurantRecommender-part2.md │ └── design_yelp.py ├── spread-operator.md └── week-4-JS-assessment.md ├── machine-learning-systems-generative-ai-models ├── README.md ├── ai-tooling.md ├── machine-learning-systems-generative-ai-modelsachine-learning-large-language-models.md └── software-engineering-in-the-age-of-ai.md ├── meta ├── false-dead-links.md └── volunteer-reviewers.md ├── networking-computing ├── README.md ├── how-the-internet-works.md └── intro-to-dns-ip.md ├── node-js ├── images │ ├── control-c.jpg │ ├── download-screen.jpg │ ├── install-window.jpg │ ├── js-in-browser.jpg │ ├── node-repl.jpg │ ├── node-v.jpg │ ├── node.jpg │ ├── npm-init-msg.png │ ├── npm-init-y-msg.png │ ├── npm-json.png │ ├── npm-walkthrough.png │ ├── server-running.jpg │ └── which-node.jpg ├── node-installation-without-nvm.md ├── node-js.md ├── node-lab-exercise-part-1.md └── node-lab-exercise-part-2.md ├── objectives ├── 0.md ├── 1.md ├── 10.md ├── 11.md ├── 2.md ├── 3.md ├── 4.md ├── 5.md ├── 6.md ├── 7.md ├── 8.md ├── 9.md ├── ReadMe.md └── week-6-assessment.md ├── onboarding ├── YCLA_LessonPlan_v10.pdf ├── asking-good-questions.md ├── ergonomics.md ├── learning-to-learn.md ├── living-in-open-workspaces.md ├── pair-programming.md ├── professionalism.md ├── tech-industry-tips.md └── time-management.md ├── open-source ├── hackathon.md └── open-source.md ├── operating-systems └── hardening.md ├── package-lock.json ├── package.json ├── pair-programming ├── week-1 │ ├── Divs_and_DOM_Manipulation │ │ ├── README.md │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── Modeling-A-Bank-Account │ │ ├── README.md │ │ ├── index.js │ │ ├── package-lock.json │ │ └── package.json │ ├── Week-1-PP-Slice-and-Split │ │ ├── index.js │ │ ├── package-lock.json │ │ └── package.json │ └── first-div │ │ ├── README.md │ │ ├── index.html │ │ └── script.js ├── week-2 │ ├── Command_Line_Interface │ │ └── README.md │ ├── JS_DOM_Manipulation │ │ ├── README.md │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── Manipulating_HTML_with_JS │ │ ├── README.md │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── Media_Queries_Exercise │ │ ├── README.md │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── modify-dom │ │ ├── README.md │ │ ├── index.html │ │ └── script.js │ └── newspaper-list │ │ ├── README.md │ │ ├── index.html │ │ └── script.js ├── week-3 │ ├── How_to_Create_a_Form_and_Validate_an_Input │ │ ├── README.md │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ ├── Object_Literals_Maps_and_Sets.js │ ├── Practice_Forms_and_CSS_Media_Queries │ │ ├── README.md │ │ ├── index.html │ │ └── style.css │ ├── forEach_for_while_and_switch_statements.js │ ├── form-validation │ │ ├── README.md │ │ ├── index.html │ │ └── script.js │ ├── media-and-forms │ │ ├── README.md │ │ ├── index.html │ │ ├── script.js │ │ └── style.css │ └── toggle-button │ │ ├── README.md │ │ ├── index.html │ │ └── script.js ├── week-4 │ ├── button-component │ │ ├── App.js │ │ ├── Button.js │ │ └── README.md │ ├── hello-component │ │ ├── App.js │ │ ├── Hello.js │ │ └── README.md │ ├── mini-project-OOP │ │ ├── README.md │ │ ├── event.js │ │ └── index.html │ └── react-props │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ └── favicon.svg │ │ ├── src │ │ ├── App.jsx │ │ └── index.jsx │ │ ├── tsconfig.json │ │ └── vite.config.js ├── week-5 │ ├── Counter_App │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package.json │ │ ├── public │ │ │ └── favicon.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ └── index.jsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── Weather_Forecast_App │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ └── favicon.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── Weather.jsx │ │ │ └── index.jsx │ │ ├── tsconfig.json │ │ └── vite.config.js │ ├── fetch-api │ │ ├── README.md │ │ ├── index.html │ │ └── index.js │ └── react-couter-app │ │ ├── App.js │ │ └── README.md ├── week-6 │ ├── SQL_Multiple_Table │ │ ├── README.md │ │ ├── department.sql │ │ ├── employee.sql │ │ ├── main.sql │ │ ├── query1.sql │ │ ├── query2.sql │ │ ├── query3.sql │ │ └── query4.sql │ ├── SQL_Single_Table │ │ ├── README.md │ │ ├── employees.sql │ │ ├── main.sql │ │ ├── query1.sql │ │ ├── query2.sql │ │ ├── query3.sql │ │ ├── query4.sql │ │ └── query5.sql │ ├── expressjs-router │ │ ├── README.md │ │ ├── about.html │ │ ├── index.html │ │ └── index.js │ └── nodejs-weather-app │ │ ├── README.md │ │ ├── index.ejs │ │ └── server.mjs └── week-7 │ ├── Factorial_Calculation_Using_Recursion.js │ ├── react-express-app │ ├── react-express.png │ ├── react-expressjs.md │ └── starter-code │ │ └── React-express-starter-code │ │ ├── .gitignore │ │ ├── README.md │ │ ├── client │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ ├── reportWebVitals.js │ │ │ └── setupTests.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── port-error.png │ │ └── server │ │ └── index.js │ └── react-forms │ ├── App.js │ ├── README.md │ └── RegisterYourCatForm.js ├── personal-brand └── personal-branding.md ├── practice ├── creating-responding-to-GitHub-issues.md ├── effective-performance-reviews.md ├── participants.md ├── pseudocode.md └── pull-request-review-practice.md ├── prework ├── 1_VariablesExercise.js ├── 2_ConditionalsExercise.js ├── 3_LoopsExercise.js ├── 4_FunctionsExercise.js ├── 5_ArraysObjectsExercise.js ├── 6_DomExercise.html ├── 7_FunctionsChallenges.js ├── 8_ObjectsChallenges.js ├── codeSamples.js ├── git-udacity-instructions.md └── prework.md ├── program-prep ├── ethics.md ├── financial-literacy.md ├── navigating-new-codebases.md ├── socioeconomic-differences.md └── underrepresented-in-tech.md ├── project-example ├── week-1 │ └── bank-account │ │ ├── phase-1-JS │ │ ├── README.md │ │ └── index.js │ │ └── phase-2-HTML │ │ ├── README.md │ │ ├── index.html │ │ ├── script.js │ │ └── style.css ├── week-10 │ ├── animal-sighting-tracker.md │ └── sample-code │ │ ├── .gitignore │ │ ├── README.md │ │ ├── client │ │ ├── .gitignore │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.js │ │ │ ├── components │ │ │ ├── Controller.js │ │ │ ├── addSightingForm │ │ │ │ ├── AddSightingForm.css │ │ │ │ └── AddSightingForm.js │ │ │ ├── detail │ │ │ │ ├── DetailPage.css │ │ │ │ └── DetailPage.js │ │ │ ├── header │ │ │ │ ├── Header.css │ │ │ │ └── Header.js │ │ │ └── sighting │ │ │ │ ├── SightingList.css │ │ │ │ └── SightingList.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ ├── reportWebVitals.js │ │ │ └── setupTests.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── screenshots │ │ ├── add-sighting.png │ │ ├── client.png │ │ ├── detailpage.png │ │ ├── erd.png │ │ ├── homepage.png │ │ └── server.png │ │ └── server │ │ ├── .env.example │ │ ├── .gitignore │ │ ├── controller │ │ ├── individuals.js │ │ ├── sightings.js │ │ └── speciesController.js │ │ ├── db.sql │ │ ├── db │ │ ├── db-connection.js │ │ └── seed.psql │ │ ├── models │ │ ├── individuals.js │ │ ├── sightings.js │ │ └── species.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── routes │ │ └── routes.js │ │ └── server.js ├── week-7 │ └── weather-forecast │ │ ├── .gitignore │ │ ├── README.md │ │ ├── client │ │ ├── .gitignore │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── reportWebVitals.js │ │ │ └── setupTests.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── server │ │ ├── .envexample │ │ ├── index.mjs │ │ └── package.json │ │ └── weather.png └── week-9 │ └── eventonica │ ├── README.md │ ├── eventonica-express-backend.md │ ├── eventonica-postgres.md │ ├── eventonica-react-ui-advanced.md │ ├── eventonica-react-ui.md │ ├── eventonica-sample-code │ ├── README.md │ ├── client │ │ ├── .gitignore │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── components │ │ │ ├── Footer.jsx │ │ │ ├── Header.jsx │ │ │ ├── UserForm.jsx │ │ │ ├── UserList.jsx │ │ │ └── Users.jsx │ │ │ ├── images │ │ │ └── calendar.png │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ ├── reportWebVitals.js │ │ │ └── setupTests.js │ └── server │ │ ├── .gitignore │ │ ├── db │ │ ├── db-connection.js │ │ └── seed.sql │ │ ├── index.js │ │ ├── package-lock.json │ │ └── package.json │ ├── eventonica-setup.md │ ├── eventonica-test-api.md │ ├── eventonica-test-frontend.md │ ├── eventonica-test-rtl.md │ ├── images │ ├── calendar.png │ ├── create-table-psql.png │ ├── eventonica-setup.png │ ├── get-post-request.png │ ├── login-psql.png │ ├── psql-test.png │ └── put-delete-request.png │ ├── starter-code │ ├── eventForm.js │ ├── events.js │ ├── index.css │ ├── mockEvents.js │ ├── starter-jsx.js │ └── users.js │ └── ticketmaster-api.md ├── projects ├── 2023TemplateWithVite │ ├── README.md │ ├── client │ │ ├── .gitignore │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── assets │ │ │ │ ├── BlueTechtonicaWord.png │ │ │ │ ├── bridge.png │ │ │ │ └── react.svg │ │ │ ├── components │ │ │ │ ├── Form.jsx │ │ │ │ ├── ListStudents.jsx │ │ │ │ ├── Student.jsx │ │ │ │ ├── contact.jsx │ │ │ │ └── error-page.jsx │ │ │ ├── index.css │ │ │ ├── main.jsx │ │ │ └── routes │ │ │ │ └── Navbar.jsx │ │ └── vite.config.js │ └── server │ │ ├── .env │ │ ├── .envexample │ │ ├── .gitignore │ │ ├── db.sql │ │ ├── db │ │ └── db-connection.js │ │ ├── package-lock.json │ │ ├── package.json │ │ └── server.js ├── Eventful-API-test-page │ ├── .gitignore │ ├── LICENSE │ ├── app.js │ ├── connection.js │ ├── eventfulAPI.js │ ├── index.js │ └── package.json ├── advanced-methods-assessment-10.md ├── auth0-assessment.md ├── blog-app │ └── README.md ├── contact-app │ └── README.md ├── data-structures-algorithms-assessment.md ├── data-structures-algorithms-sprint.md ├── db-modeling-assignment.md ├── eventonica-legacy │ ├── README.md │ ├── eventonica-part1-objects.md │ ├── eventonica-part2-testing.md │ ├── eventonica-part2-ui.md │ ├── eventonica-part3-react.md │ ├── eventonica-part4-apis.md │ ├── eventonica-part5-express-backend.md │ ├── eventonica-part6-postgres.md │ ├── eventonica-part7-react.md │ ├── eventonica-part7-testing.md │ ├── eventonica-part8-api-testing.md │ └── starter-code │ │ ├── calendar.png │ │ ├── eventonicaSpec.js │ │ ├── index.css │ │ ├── index.html │ │ ├── main.js │ │ └── models.js ├── eventonica-updated │ └── README.md ├── final-project │ ├── README.md │ ├── data-model-schema.png │ ├── example-pitch-doc.md │ ├── planning-your-project.md │ ├── selecting-your-project.md │ ├── user-flow.png │ └── wireframe.png ├── full-stack-assessment.md ├── full-stack-checklist.md ├── js-html-games.md ├── kickball-signups-project.md ├── mailing-list-rest-api.md ├── mern-pern-project.md ├── minimal-api-project.md ├── mongo-assessment.md ├── node-http-exercise │ ├── node-http-exercise.md │ └── node-http-server-assignment.postman_collection.json ├── pern-contact-list-app.md ├── pern-game-app.md ├── pern-weather-app.md ├── portfolio │ ├── Create-repo-no-README-no-.gitignore.png │ ├── portfolio-webpage-1.md │ ├── portfolio-webpage-2.md │ └── portfolio-webpage-3.md ├── pr-screenshot │ ├── pr-dommanipulation1.png │ ├── pr-dommanipulation2.png │ ├── pr-dommanipulation3.png │ ├── pr-example-1.png │ ├── pr-example-2.png │ ├── pr-example-3.png │ ├── pr-url.png │ ├── pr1.png │ ├── pr2-branch.png │ ├── pr3-commit.png │ ├── pr4-push.png │ ├── pr5.png │ ├── pr6.png │ ├── pr7.png │ └── pr8.png ├── react-assessment.md ├── react-game.md ├── react-tweeter.md ├── recipe-page │ ├── phase-1-html-prompt.md │ ├── phase-2-css-prompt.md │ ├── phase-3-bootstrap-prompt.md │ ├── phase-4-DOM-Manipulation.md │ └── screenshots │ │ ├── Screen Shot 2018-01-17 at 3.05.48 PM.png │ │ ├── after-google-font-import.png │ │ ├── background-color.png │ │ ├── blue-blurb.png │ │ ├── change-header-colors.png │ │ ├── complete.png │ │ ├── constrained-description.png │ │ ├── copy-font-code.png │ │ ├── float-left-left.png │ │ ├── float-left-right.png │ │ ├── get-font-embeded-code.png │ │ ├── get-font.png │ │ ├── git-status-static-folder.png │ │ ├── google-font-monoton.png │ │ ├── google-font-selection-expanded.png │ │ ├── google-font-selection.png │ │ ├── intended_layout.png │ │ ├── step3-title.png │ │ ├── step4-blurb.png │ │ ├── step5-ingredients.png │ │ ├── step6-instructions.png │ │ ├── step7-image.png │ │ ├── step7-photo-credit.png │ │ └── step8-other-recipes.png ├── rest-api-project.md ├── submitting-work.md ├── take-home-problems │ ├── backend.md │ └── frontend.md ├── utils-js.md ├── weather-app.md ├── week-1-worksheet.md └── week8GameREADME.md ├── react-js ├── README.md ├── advanced-routing-navigation.md ├── class-based-components │ ├── react-part-1-intro.md │ ├── react-part-2-component-state.md │ ├── react-part-3-component-hierarchies.md │ └── react-part4-full-apps.md ├── quizzes │ ├── answerkeys │ │ └── passingprops.md │ └── passingprops │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── form.jsx │ │ │ └── message.jsx │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── react-hooks.md ├── react-local-vite.md ├── react-part-1-intro.md ├── react-part-2-props.md ├── react-part-3-state.md ├── react-part-4-component-hierarchies.md ├── react-part-5-full-apps.md ├── react-routing-forms.md ├── redux-state-management.md └── styling-react.md ├── reading-and-writing-documentation └── documentation.md ├── recursion ├── pnr-hierarchy.png ├── recursion-bear.jpg └── recursion.md ├── refactoring └── refactoring.md ├── runtime-complexity ├── 34_21-FibonacciBlocks.png ├── README.md ├── index.html ├── package.json ├── runtime-complexity.md ├── runtime.js ├── runtime1-analyzing.js ├── runtime2-comparisions.js ├── runtime3-solving.md └── yarn.lock ├── security └── web-security.md ├── seo └── seo.md ├── solving-coding-challenges ├── pseudo-code.md └── solving-coding-challenges.md ├── testing-and-tdd ├── compared-testing-frameworks.md ├── enzyme-testing.md ├── integration-testing.md ├── jasmine-pair-activity.js ├── jasmine-testing.md ├── jest.md ├── mocking-and-abstraction.md ├── react-testing-jest-and-RTL.md ├── testing-and-tdd.md ├── testing-mindset.md └── vitest.md ├── ui-ux-design └── ui-ux-design.md ├── underrepresented-in-tech-resources ├── resources-adhd.md └── underrepresented-in-tech-India.md ├── web ├── BEM-style.md ├── accessibility.md ├── accessibility │ └── aria.md ├── ajax.md ├── bootstrap.md ├── css-part-2.md ├── css.md ├── html-forms.md ├── html.md ├── jquery-programming-fundamentals │ ├── index.html │ └── static │ │ └── js │ │ └── myScript.js ├── jquery.md ├── js-dom-methods-walkthrough │ ├── index.html │ └── static │ │ └── script.js ├── js-dom-methods.md ├── media-queries.md └── reset-css.md └── writing-readable-code └── writing-readable-code.md /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **.DS_STORE 2 | **.DS_Store 3 | .idea 4 | **node_modules/ 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "trailingComma": "none", 5 | "proseWrap": "preserve", 6 | "overrides": [ 7 | { 8 | "files": "*.md", 9 | "options": { 10 | "singleQuote": true 11 | } 12 | } 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /algorithms/p-versus-np-screenshoots/current-consensus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/algorithms/p-versus-np-screenshoots/current-consensus.jpg -------------------------------------------------------------------------------- /algorithms/p-versus-np-screenshoots/interactive-examples.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/algorithms/p-versus-np-screenshoots/interactive-examples.jpg -------------------------------------------------------------------------------- /algorithms/p-versus-np-screenshoots/learning-more.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/algorithms/p-versus-np-screenshoots/learning-more.jpg -------------------------------------------------------------------------------- /algorithms/p-versus-np-screenshoots/p-np.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/algorithms/p-versus-np-screenshoots/p-np.jpg -------------------------------------------------------------------------------- /algorithms/p-versus-np-screenshoots/what-is-p.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/algorithms/p-versus-np-screenshoots/what-is-p.jpg -------------------------------------------------------------------------------- /algorithms/p-versus-np-screenshoots/why-does-it-matter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/algorithms/p-versus-np-screenshoots/why-does-it-matter.jpg -------------------------------------------------------------------------------- /api/Screen Shot 2018-10-08 at 7.15.15 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/Screen Shot 2018-10-08 at 7.15.15 PM.png -------------------------------------------------------------------------------- /api/Screen Shot 2018-10-08 at 7.26.01 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/Screen Shot 2018-10-08 at 7.26.01 PM.png -------------------------------------------------------------------------------- /api/Screen Shot 2018-10-08 at 7.31.03 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/Screen Shot 2018-10-08 at 7.31.03 PM.png -------------------------------------------------------------------------------- /api/Screen Shot 2018-10-08 at 7.44.02 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/Screen Shot 2018-10-08 at 7.44.02 PM.png -------------------------------------------------------------------------------- /api/Screen Shot 2018-10-08 at 7.44.12 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/Screen Shot 2018-10-08 at 7.44.12 PM.png -------------------------------------------------------------------------------- /api/Screen Shot 2018-10-08 at 7.44.22 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/Screen Shot 2018-10-08 at 7.44.22 PM.png -------------------------------------------------------------------------------- /api/apirequest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/apirequest.png -------------------------------------------------------------------------------- /api/postman-curl.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/postman-curl.gif -------------------------------------------------------------------------------- /api/screenshot-restapi/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/screenshot-restapi/delete.png -------------------------------------------------------------------------------- /api/screenshot-restapi/get.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/screenshot-restapi/get.png -------------------------------------------------------------------------------- /api/screenshot-restapi/get404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/screenshot-restapi/get404.png -------------------------------------------------------------------------------- /api/screenshot-restapi/post.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/screenshot-restapi/post.png -------------------------------------------------------------------------------- /api/screenshot-restapi/postman-methods.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/screenshot-restapi/postman-methods.png -------------------------------------------------------------------------------- /api/screenshot-restapi/put.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/api/screenshot-restapi/put.png -------------------------------------------------------------------------------- /career/roles-in-tech/data-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/career/roles-in-tech/data-example.jpg -------------------------------------------------------------------------------- /career/roles-in-tech/lifecycle-datascience.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/career/roles-in-tech/lifecycle-datascience.png -------------------------------------------------------------------------------- /career/roles-in-tech/productmanage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/career/roles-in-tech/productmanage.png -------------------------------------------------------------------------------- /career/roles-in-tech/security-locks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/career/roles-in-tech/security-locks.jpg -------------------------------------------------------------------------------- /code-challenges/Week_1/Find_All_Anagrams_in_a_String.py: -------------------------------------------------------------------------------- 1 | # An anagram is a word formed by rearranging the letters of a different word using all the original letters exactly once. The function is given two strings: s - to search in, p - a p word. Find the starting indexes of anagrams of p among substrings of the given s. 2 | 3 | # Examples 4 | # findAnagrams("cbaebabacd", "abc") ➞ [0, 6] 5 | # // Anagrams: "cba", "bac" 6 | 7 | # findAnagrams("abab", "ab") ➞ [0, 1, 2] 8 | # // Anagrams: "ab", "ba", "ab" 9 | -------------------------------------------------------------------------------- /code-challenges/Week_1/Reverse_a_String.py: -------------------------------------------------------------------------------- 1 | # Reverse the provided string and return the reversed string. For example, "hello" should become "olleh". 2 | 3 | # Examples 4 | # reverseString("hello") should return a string. 5 | # reverseString("hello") should return the string olleh. 6 | # reverseString("Howdy") should return the string ydwoH. 7 | # reverseString("Greetings from Earth") should return the string htraE morf sgniteerG. 8 | -------------------------------------------------------------------------------- /code-challenges/Week_10/Boolean-to-String-Conversion.js: -------------------------------------------------------------------------------- 1 | /* 2 | Implement a function which will convert the given boolean value into its string representation. 3 | 4 | Example: Example: 5 | Input: boolean false Input: boolean true 6 | Output: "false" Output: “true” 7 | 8 | */ 9 | -------------------------------------------------------------------------------- /code-challenges/Week_10/Climbing-Stairs.js: -------------------------------------------------------------------------------- 1 | /* 2 | You are climbing a staircase. It takes n steps to reach the top. Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top? 3 | 4 | Example 1: 5 | Input: n = 2 6 | Output: 2 7 | Explanation: There are 2 ways to the top. 8 | 1. 1 step + 1 step 9 | 2. 2 steps 10 | 11 | 12 | Example 2: 13 | Input: n = 3 14 | Output: 3 15 | Explanation: There are 3 ways to the top. 16 | 1. 1 step + 1 step + 1 step 17 | 2. 1 step + 2 steps 18 | 3. 2 steps + 1 step 19 | */ 20 | -------------------------------------------------------------------------------- /code-challenges/Week_10/Largest-Swap.js: -------------------------------------------------------------------------------- 1 | /* 2 | Largest Swap 3 | Given a positive integer, find the largest number that could be generated by swapping only two digits at most once. 4 | 5 | Example 1: 6 | Input: 2736 7 | Output : 7236 8 | Explanation: 9 | If we swap the number 2 and the number 10 | 7 then the generated number would be 11 | the largest number. 12 | 13 | Example 2: 14 | Input : 432 15 | Output : 432 16 | Explanation:Here, no swap is required. The given number is already the largest. 17 | */ 18 | -------------------------------------------------------------------------------- /code-challenges/Week_10/Nested-Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Create a function that returns true if the first array can be nested inside the second and false otherwise. 3 | arr1 can be nested inside arr2 if: 4 | arr1's min is greater than arr2's min. 5 | arr1's max is less than arr2's max. 6 | Examples 7 | canNest([1, 2, 3, 4], [0, 6]) ➞ true 8 | 9 | canNest([3, 1], [4, 0]) ➞ true 10 | 11 | canNest([9, 9, 8], [8, 9]) ➞ false 12 | 13 | canNest([1, 2, 3, 4], [2, 3]) ➞ false 14 | 15 | */ 16 | -------------------------------------------------------------------------------- /code-challenges/Week_11/Find-the-Missing-Number.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Create a function that takes an array of numbers between 1 and 10 (excluding one number) and returns the missing number. The array of numbers will be unsorted (not in order). Only one number will be missing. 4 | 5 | Examples 6 | missingNum([1, 2, 3, 4, 6, 7, 8, 9, 10]) ➞ 5 7 | missingNum([7, 2, 3, 6, 5, 9, 1, 4, 8]) ➞ 10 8 | missingNum([10, 5, 1, 2, 4, 6, 8, 3, 9]) ➞ 7 9 | 10 | */ 11 | -------------------------------------------------------------------------------- /code-challenges/Week_11/Fizz-Buzz.js: -------------------------------------------------------------------------------- 1 | // Write a short program that prints each number from 1 to 100 on a new line. For numbers which are multiples of both 3 and 5, print "FizzBuzz" instead of the number. 2 | 3 | // Example 1: 4 | // Input: n = 3 5 | // Output: [1 2 Fizz] 6 | 7 | // Example 2: 8 | // Input: n = 5 9 | // Output: [1 2 Fizz 4 Buzz] 10 | 11 | // Example 3: 12 | // Input: n = 19 13 | // Output: [1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 Fizz 19 Buzz] 14 | -------------------------------------------------------------------------------- /code-challenges/Week_11/Remove-Vowel-from-a-String.js: -------------------------------------------------------------------------------- 1 | // Given an array arr[] of size N-1 with integers in the range of [1, N], the task is to find the missing number from the first N integers. There are no duplicates in the list. 2 | 3 | // Example 1: 4 | // Input: arr[] = 5 | // {1, 2, 4, 6, 3, 7, 8}, N = 8 6 | // Output: 5 7 | // Explanation: The missing number between 1 to 8 is 5 8 | 9 | // Example 2: 10 | // Input: arr[] = {1, 2, 3, 5}, N = 5 11 | // Output: 4 12 | // Explanation: The missing number between 1 to 5 is 4 13 | -------------------------------------------------------------------------------- /code-challenges/Week_12/Find-the-Time.js: -------------------------------------------------------------------------------- 1 | /* 2 | The time has a format: hours:minutes. Both given hours and minutes will always have two digits, like 09:00. 3 | 4 | Make a regex to find time in the string: Breakfast at 09:00 in the room 123:456. In this task there’s no need to check time correctness yet, so 25:99 can also be a valid result. The regex should not match 123:456. Take your time with this problem. You will be learning how to use a new syntax: regular expression. 5 | 6 | Example 1 7 | Input: I will have lunch at 12:00pm today at 925 Restaurant. 8 | Output: 12:00 9 | 10 | Example 2 11 | Input: Their daughter was born at 03:00am at 55 Melbourne Dr 12 | Output: 03:00 13 | */ 14 | -------------------------------------------------------------------------------- /code-challenges/Week_12/Trick-or-Treat.js: -------------------------------------------------------------------------------- 1 | /* 2 | Halloween is the time of year when youth prepare for tricks or treats! Create a function that accepts a Date object and returns true if it's Halloween (October 31st) and false otherwise. Keep in mind JavaScript's Date month is 0 based, meaning October is the 9th month while January is 0. 3 | 4 | Examples: 5 | timeForTrickOrTreat(new Date(2013, 9, 31)) ➞ true 6 | timeForTrickorTreat(new Date(2013, 0, 23)) ➞ false 7 | timeForTrickorTreat(new Date(3000, 9, 31)) ➞ true 8 | 9 | */ 10 | -------------------------------------------------------------------------------- /code-challenges/Week_12/Valid-Palindrome.js: -------------------------------------------------------------------------------- 1 | /* 2 | A phrase is a palindrome if, after converting all uppercase letters into lowercase letters and removing all non-alphanumeric characters, it reads the same forward and backward. Alphanumeric characters include letters and numbers. Given a string s, return true if it is a palindrome, or false otherwise. 3 | 4 | Example 1: 5 | Input: s = "A man, a plan, a canal: Panama" 6 | Output: true 7 | Explanation: "amanaplanacanalpanama" is a palindrome. 8 | 9 | Example 2: 10 | Input: s = "race a car" 11 | Output: false 12 | Explanation: "raceacar" is not a palindrome. 13 | 14 | Example 3: 15 | Input: s = " " 16 | Output: true 17 | Explanation: s is an empty string "" after removing non-alphanumeric characters. 18 | Since an empty string reads the same forward and backward, it is a palindrome. 19 | 20 | */ 21 | -------------------------------------------------------------------------------- /code-challenges/Week_13/Find-Lucky-Integer-in-Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Given an array of integers arr, a lucky integer is an integer that has a frequency in the array equal to its value. Return the largest lucky integer in the array. If there is no lucky integer return -1. 3 | 4 | Example 1: 5 | Input: arr = [2,2,3,4] 6 | Output: 2 7 | Explanation: The only lucky 8 | number in the array is 2 because frequency[2] == 2. 9 | 10 | Example 2: 11 | Input: arr = [1,2,2,3,3,3] 12 | Output: 3 13 | Explanation: 1, 2 and 3 are all lucky numbers, return the largest of them. 14 | 15 | Example 3: 16 | Input: arr = [2,2,2,3,3] 17 | Output: -1 18 | Explanation: There are no lucky numbers in the array. 19 | */ 20 | -------------------------------------------------------------------------------- /code-challenges/Week_13/Longest-Palindrome-Substring.js: -------------------------------------------------------------------------------- 1 | /* 2 | Given a string s, return the longest palindromic substring in s. A substring is a contiguous non-empty sequence of characters within a string. 3 | 4 | Example 1: 5 | Input: s = "babad" 6 | Output: "bab" 7 | Explanation: "aba" is also a valid answer. 8 | 9 | Example 2: 10 | Input: s = "cbbd" 11 | Output: "bb" 12 | */ 13 | -------------------------------------------------------------------------------- /code-challenges/Week_13/Palindrome-Regex.js: -------------------------------------------------------------------------------- 1 | /* 2 | A palindrome is a word or sentence that’s spelled the same way both forward and backward, ignoring punctuation, case, and spacing. Return true if the given string is a palindrome. Otherwise, return false. You should be able to pass strings with varying formats, such as “racecar”, “RaceCar”, and “race CAR” among others such as when the pattern includes special characters. Recall your new syntax: regular expression. 3 | 4 | Example 1: 5 | Input: “1 eye for of 1 eye.” 6 | Output: False 7 | 8 | 9 | Example 2: 10 | Input: “0_0 (: /-\ :) 0–0” 11 | Output: true 12 | */ 13 | -------------------------------------------------------------------------------- /code-challenges/Week_13/Sort-by-String-Length.js: -------------------------------------------------------------------------------- 1 | /* 2 | Create a function that returns an array of strings sorted by length in ascending order. Strings should have unique lengths (don't worry about comparing two strings with identical length). 3 | Return an empty array if the input array is empty. 4 | 5 | sortByLength(["a", "ccc", "dddd", "bb"]) ➞ ["a", "bb", "ccc", "dddd"] 6 | sortByLength(["apple", "pie", "shortcake"]) ➞ ["pie", "apple", "shortcake"] 7 | sortByLength(["may", "april", "september", "august"]) ➞ ["may", "april", "august", "september"] 8 | sortByLength([]) ➞ [] 9 | 10 | */ 11 | -------------------------------------------------------------------------------- /code-challenges/Week_14/Converting-Objects-to-Arrays.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | This may look familiar, it was your problem from Week 12 - Friday. If you were OOO that Friday, so I’ve moved it here for you to solve. If you’ve submitted this during Week 12, share that link with me. 4 | 5 | Given an array of objects and the task is to convert the object keys to an array with the help of JavaScript. Convert an object into a new array which consists of all the keys in sequential order. 6 | 7 | Example: 8 | Input: let myObj = { 9 | name: "your name", 10 | address: "your address", 11 | age: "your Age", 12 | }; 13 | Output: ["name", "address", "age"] 14 | 15 | */ 16 | -------------------------------------------------------------------------------- /code-challenges/Week_14/Removing-Elements.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Take an array and remove every second element from the array. Always keep the first element and start removing with the next element. There are no empty arrays. 4 | 5 | Example: 6 | Input: ["Keep", "Remove", "Keep", "Remove", "Keep", ...] 7 | Output: ["Keep", "Keep", "Keep", ...] 8 | 9 | */ 10 | -------------------------------------------------------------------------------- /code-challenges/Week_14/String-Cleaning.js: -------------------------------------------------------------------------------- 1 | /* 2 | Your boss decided to save money by purchasing some cut-rate optical character recognition software for scanning in the text of old novels to your database. At first it seems to capture words okay, but you quickly notice that it throws in a lot of numbers at random places in the text. Your harried co-workers are looking to you for a solution to take this garbled text and remove all of the numbers. Your program will take in a string and clean out all numeric characters, and return a string with spacing and special characters ~#$%^&!@*():;"'.,? all intact. 3 | 4 | Example 1 Example 2 Example 3 5 | Input: '! !' Input:'123456789' Input: 'This looks5 grea8t!' 6 | Output: '! !' Output: '' Output: 'This looks great!' 7 | 8 | */ 9 | -------------------------------------------------------------------------------- /code-challenges/Week_15/Check-Same-Case.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Write a function that will check if two given characters are the same case. If either of the characters is not a letter, return -1. If both characters are the same case, return 1. If both characters are letters, but not the same case, return 0. 4 | 5 | Examples 6 | 'a' and 'g' returns 1 'A' and 'C' returns 1 'b' and 'G' returns 0 7 | 'B' and 'g' returns 0 '0' and '?' returns -1 8 | 9 | 10 | */ 11 | -------------------------------------------------------------------------------- /code-challenges/Week_15/Remove-Trailing-and-Leading-Zeroes.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Create a function that takes in a number as a string n and returns the number without trailing and leading zeros. If you get a number with .0 on the end, return the integer value (e.g. return "4" rather than "4.0"). If the number is 0, 0.0, 000, 00.00, etc... return "0". Return a string. 4 | 5 | Trailing Zeros are the zeros after a decimal point which don't affect the value (e.g. the last three zeros in 3.4000 and 3.04000). 6 | 7 | Leading Zeros are the zeros before a whole number which don't affect the value (e.g. the first three zeros in 000234 and 000230). 8 | 9 | Examples 10 | removeLeadingTrailing("230.000") ➞ "230" 11 | 12 | removeLeadingTrailing("00402") ➞ "402" 13 | 14 | removeLeadingTrailing("03.1400") ➞ "3.14" 15 | 16 | removeLeadingTrailing("30") ➞ "30" 17 | 18 | */ 19 | -------------------------------------------------------------------------------- /code-challenges/Week_15/Short-Long-Short.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Given 2 strings, a and b, return a string of the form short+long+short, with the shorter string on the outside and the longer string on the inside. The strings will not be the same length, but they may be empty (zero length ). The length of string is not always the same as the number of characters 4 | 5 | Example 1 Example 2 6 | Input: ("1", "22") Input: ("22", "1") 7 | Output: "1221" Output: "1221" 8 | 9 | 10 | */ 11 | -------------------------------------------------------------------------------- /code-challenges/Week_16/Find-the-Missing-Number.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Create a function that takes an array of numbers between 1 and 10 (excluding one number) and returns the missing number. The array of numbers will be unsorted (not in order). Only one number will be missing. 4 | 5 | Examples 6 | missingNum([1, 2, 3, 4, 6, 7, 8, 9, 10]) ➞ 5 7 | missingNum([7, 2, 3, 6, 5, 9, 1, 4, 8]) ➞ 10 8 | missingNum([10, 5, 1, 2, 4, 6, 8, 3, 9]) ➞ 7 9 | 10 | */ 11 | -------------------------------------------------------------------------------- /code-challenges/Week_16/Format-Number-with-Commas-Separating-Thousands.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Create a function that takes a number as an argument and returns a string formatted to separate thousands. You can expect a valid number for all test cases. 4 | 5 | Examples 6 | formatNum(1000) ➞ "1,000" 7 | formatNum(100000) ➞ "100,000" 8 | formatNum(20) ➞ "20" 9 | 10 | */ 11 | -------------------------------------------------------------------------------- /code-challenges/Week_16/Online-Shopping.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Create a function that determines whether a shopping order is eligible for free shipping. An order is eligible for free shipping if the total cost of items purchased exceeds $50.00. Ignore tax or additional fees when calculating the total order cost. 4 | 5 | Examples 6 | freeShipping({ "Shampoo": 5.99, "Rubber Ducks": 15.99 }) ➞ false 7 | 8 | freeShipping({ "Flatscreen TV": 399.99 }) ➞ true 9 | 10 | freeShipping({ "Monopoly": 11.99, "Secret Hitler": 35.99, "Bananagrams": 13.99 }) ➞ true 11 | 12 | */ 13 | -------------------------------------------------------------------------------- /code-challenges/Week_16/Return-the-Middle-Characters-of-a-String.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Create a function that takes a string and returns the middle character(s). If the word's length is odd, return the middle character. If the word's length is even, return the middle two characters. All test cases contain a single word (as a string). 4 | 5 | Examples 6 | getMiddle("test") ➞ "es" 7 | getMiddle("testing") ➞ "t" 8 | getMiddle("middle") ➞ "dd" 9 | getMiddle("A") ➞ "A" 10 | 11 | 12 | */ 13 | -------------------------------------------------------------------------------- /code-challenges/Week_17/Assign-Person-to-Occupation.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | You have two arrays. One shows the names of the people names, while the other shows their occupation jobs. Your task is to create an object displaying each person to their respective occupation. The two arrays have the same length. The index of a name in the names array is the same as the index of the person's job in the jobs array, as shown in the table above. 4 | 5 | Names: Annie Steven Lisa Osman 6 | Jobs: Teacher Engineer Doctor Cashier 7 | 8 | Example 9 | const names = ["Dennis", "Vera", "Mabel", "Annette", "Sussan"] 10 | const jobs = ["Butcher", "Programmer", "Doctor", "Teacher", "Lecturer"] 11 | 12 | assignPersonToJob(names, jobs) ➞ { 13 | Dennis: "Butcher", 14 | Vera: "Programmer", 15 | Mabel: "Doctor", 16 | Annette: "Teacher", 17 | Sussan: "Lecturer" 18 | } 19 | 20 | 21 | */ 22 | -------------------------------------------------------------------------------- /code-challenges/Week_17/Is-the-Word-an-Isogram.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | An isogram is a word that has no duplicate letters. Create a function that takes a string and returns either true or false depending on whether or not it's an "isogram". Ignore letter case (should not be case sensitive). All test cases contain valid one word strings. 4 | 5 | Examples 6 | isIsogram("Algorism") ➞ true 7 | isIsogram("PasSword") ➞ false // Not case sensitive. 8 | isIsogram("Consecutive") ➞ false 9 | 10 | 11 | */ 12 | -------------------------------------------------------------------------------- /code-challenges/Week_17/Lowercase-and-Uppercase-Map.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Write a function that creates an object with each (key, value) pair being the (lower case, upper case) versions of a letter, respectively. All of the letters in the input list will always be lowercase. 4 | 5 | Examples 6 | mapping(["p", "s"]) ➞ { "p": "P", "s": "S" } 7 | mapping(["a", "b", "c"]) ➞ { "a": "A", "b": "B", "c": "C" } 8 | mapping(["a", "v", "y", "z"]) ➞ { "a": "A", "v": "V", "y": "Y", "z": "Z" } 9 | 10 | 11 | */ 12 | -------------------------------------------------------------------------------- /code-challenges/Week_18/Basic-E-Mail-Validation.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Create a function that accepts a string, checks if it's a valid email address and returns either true or false, depending on the evaluation. Do not solve this problem with RegEx. 4 | 5 | The string must contain an @ character. 6 | The string must contain a . character. 7 | The @ must have at least one character in front of it. 8 | e.g. "e@edabit.com" is valid while "@edabit.com" is invalid. 9 | The . and the @ must be in the appropriate places. 10 | e.g. "hello.email@com" is invalid while "john.smith@email.com" is valid. 11 | If the string passes the above tests, it's considered a valid email address. 12 | 13 | Examples 14 | validateEmail("@gmail.com") ➞ false 15 | validateEmail("hello.gmail@com") ➞ false 16 | validateEmail("gmail") ➞ false 17 | validateEmail("hello@gmail") ➞ false 18 | validateEmail("hello@edabit.com") ➞ true 19 | 20 | 21 | */ 22 | -------------------------------------------------------------------------------- /code-challenges/Week_18/Replace-Vowel-with-Another-Character.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Create a function that takes a string and replaces the vowels with another character. The input will always be in lowercase. 4 | 5 | a = 1 e = 2 i = 3 o = 4 u = 5 6 | 7 | Examples 8 | replaceVowel("karachi") ➞ "k1r1ch3" 9 | replaceVowel("chembur") ➞ "ch2mb5r" 10 | replaceVowel("khandbari") ➞ "kh1ndb1r3" 11 | 12 | 13 | */ 14 | -------------------------------------------------------------------------------- /code-challenges/Week_18/Zip-It-If-You-Can.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | You are given an array of women and an array of men. Return "sizes don't match" if the two arrays have different sizes. If the sizes match, return an array of pairs, with the first woman paired with the first man, second woman paired with the second man, etc. 4 | 5 | Examples 6 | zipIt(["Elise", "Mary"], ["John", "Rick"]) 7 | ➞ [["Elise", "John"], ["Mary", "Rick"]] 8 | 9 | zipIt(["Ana", "Amy", "Lisa"], ["Bob", "Josh"]) 10 | ➞ "sizes don't match" 11 | 12 | zipIt(["Ana", "Amy", "Lisa"], ["Bob", "Josh", "Tim"]) 13 | ➞ [["Ana", "Bob"], ["Amy", "Josh"],["Lisa", "Tim"]] 14 | 15 | */ 16 | -------------------------------------------------------------------------------- /code-challenges/Week_2/array_search.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | You are given an array of integers arr and a target element target. Your task is to implement a function findLastIndex(arr, target) that returns the last index at which the target element appears in the array. If the target element is not present in the array, the function should return -1. 4 | 5 | Examples: 6 | console.log(findLastIndex([1, 2, 3, 4, 5, 2], 2)); // Output: 5 7 | console.log(findLastIndex([10, 20, 30, 40, 50], 25)); // Output: -1 8 | console.log(findLastIndex([5, 10, 15, 20, 10, 25], 10)); // Output: 4 9 | console.log(findLastIndex([1, 2, 3, 4, 5], 6)); // Output: 4 10 | 11 | */ 12 | -------------------------------------------------------------------------------- /code-challenges/Week_2/string_manipulation.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | You are given a string inputStr containing lowercase letters and a target substring targetStr. Your task is to implement a function findTargetIndex(inputStr, targetStr) that returns the starting index of the first occurrence of targetStr in inputStr. If targetStr is not found in inputStr, the function should return -1. 4 | 5 | 6 | Examples: 7 | console.log(findTargetIndex("hello world", "lo")); // Output: 3 8 | console.log(findTargetIndex("programming", "abc")); // Output: -1 9 | console.log(findTargetIndex("javascript", "script")); // Output: 4 10 | console.log(findTargetIndex("challenge", "len")); // Output: -1 11 | 12 | */ 13 | -------------------------------------------------------------------------------- /code-challenges/Week_3/Display_User_Name_in_Greeting.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Prompt a user for their name and then display a greeting message that repeats the name a specified number of times. Practice using concat, join, and repeat. 4 | 5 | You may also need some of the following (but not required): 6 | - parseInt 7 | - isNaN 8 | - new Array() 9 | 10 | */ 11 | 12 | // Do not remove the below line 13 | const prompt = require("prompt-sync")(); 14 | // Do not remove the above line 15 | 16 | function askForNameAndRepeat() { 17 | // Convert the repeat count to an integer if it's not already 18 | // Check if the repeat count is a number and greater than zero 19 | // Create an array filled with the user's name, repeated the desired number of times 20 | // Use concat to combine the repeated names into one string 21 | } 22 | 23 | askForNameAndRepeat(); 24 | -------------------------------------------------------------------------------- /code-challenges/Week_3/Display_User_Name_in_Greeting.py: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Prompt a user for their name and then display a greeting message that repeats the name a specified number of times. Practice using concat, join, and repeat. 4 | 5 | You may also need some of the following (but not required): 6 | - int() 7 | - isinstance() 8 | - list() 9 | 10 | */ 11 | 12 | import sys # do not remove line 13 | -------------------------------------------------------------------------------- /code-challenges/Week_3/HackerRank_Loops.js: -------------------------------------------------------------------------------- 1 | /*The HackerRank challenge titled "Loops" focuses on understanding loops in JavaScript, specifically for, while, and do...while loops. Each type of loop has its own syntax and use cases, and mastering them is essential for writing efficient and readable code. Below, I'll provide solutions for problems typically encountered in such challenges, including examples of each loop type.*/ 2 | 3 | // Problem 1: Print Numbers from 1 to N 4 | // Task: Print numbers from 1 to N. 5 | 6 | // Problem 2: Print Even Numbers from N to 1 7 | // Task: Print even numbers from N to 1. 8 | 9 | // Problem 3: Count Down and Up with Jump 10 | // Task: Count down from N to 1 with a jump of J, and count up from 1 to N with a jump of J. 11 | -------------------------------------------------------------------------------- /code-challenges/Week_4/Getting_Started_with_React_Hello_Component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React + TypeScript + Replit 8 | 9 | 10 |
11 | 12 | 13 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /code-challenges/Week_4/Getting_Started_with_React_Hello_Component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-javascript", 3 | "version": "1.0.0", 4 | "type": "module", 5 | "description": "React TypeScript on Replit, using Vite bundler", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/react": "^18.2.37", 16 | "@types/react-dom": "^18.2.15", 17 | "@vitejs/plugin-react": "^4.2.0", 18 | "react": "^18.2.0", 19 | "react-dom": "^18.2.0", 20 | "typescript": "^5.2.2", 21 | "vite": "^5.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.css: -------------------------------------------------------------------------------- 1 | main { 2 | } 3 | -------------------------------------------------------------------------------- /code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Hello from "./Hello"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 | React ⚛️ + Vite ⚡ + Replit 8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /code-challenges/Week_4/Getting_Started_with_React_Hello_Component/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /code-challenges/Week_4/Getting_Started_with_React_Hello_Component/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | host: "0.0.0.0" 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /code-challenges/Week_4/Map_Practice.py: -------------------------------------------------------------------------------- 1 | # Task 1: Calculate and add the sum of all ages to each friend object 2 | # Task 2: Create a list of friends older than the average age 3 | # Task 3: Generate a list of strings with initials and age 4 | # Bonus: Implement these tasks using functions 5 | 6 | 7 | def add_sum_of_ages(friends): 8 | 9 | def get_older_than_avg(friends): 10 | 11 | def generate_initials_and_age(friends): 12 | 13 | def main(): 14 | 15 | # do not remove below lines of code 16 | if __name__ == "__main__": 17 | main() 18 | 19 | # Example input: 20 | myFriends = [ 21 | {"firstname": "Alice", "lastname": "Smith", "age": 30}, 22 | {"firstname": "Bob", "Johnson": "Jane", "age": 25}, 23 | {"firstname": "Charlie", "lastname": "Brown", "age": 35}, 24 | {"firstname": "David", "lastname": "Wilson", "age": 28}, 25 | {"firstname": "Emily", "lastname": "Anderson", "age": 32}, 26 | ] 27 | -------------------------------------------------------------------------------- /code-challenges/Week_5/Pop_Shift_and_Unshift_Elements.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Write a function that takes an array of strings as input and returns a new array where the first element is moved to the end of the array. You must use both shift and push methods to achieve this. 4 | 5 | */ 6 | -------------------------------------------------------------------------------- /code-challenges/Week_5/Pop_Shift_and_Unshift_Elements.py: -------------------------------------------------------------------------------- 1 | # Write a function that takes a list of strings as input and returns a new list where the first element is moved to the end of the list. You must use both shift and push methods to achieve this. Additionally, handle edge cases such as empty lists or lists with fewer than two elements. 2 | 3 | def move_first_to_end(lst): 4 | -------------------------------------------------------------------------------- /code-challenges/Week_5/Remove_Duplicates_and_Add_Elements.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Write a function that takes an array of strings and a string item as input. The function should remove the first occurrence of item from the array and then add it to the end of the array. You must use both shift and push methods to achieve this. 4 | 5 | */ 6 | 7 | /* 8 | 9 | Write a function that takes an array of numbers as input and returns a new array with all duplicate numbers removed. You must use reduce and push methods to achieve this. 10 | 11 | */ 12 | -------------------------------------------------------------------------------- /code-challenges/Week_5/Remove_Duplicates_and_Add_Elements.py: -------------------------------------------------------------------------------- 1 | # Write a function that takes a list of strings and a string item as input. The function should remove the first occurrence of the item from the list and then add it to the end of the list. You must use both remove() and append() methods to achieve this. 2 | 3 | def move_item_to_end(lst, item): 4 | 5 | original_list = ['apple', 'banana', 'cherry', 'date', 'elderberry'] 6 | item_to_move = 'cherry' 7 | 8 | 9 | 10 | # Write a function that takes a list of numbers as input and returns a new list with all duplicate numbers removed. You must use set() and list() methods to achieve this. 11 | 12 | def remove_duplicates(numbers): 13 | 14 | numbers = [1, 2, 3, 2, 4, 5, 3, 6, 7, 8, 9, 1, 2] 15 | -------------------------------------------------------------------------------- /code-challenges/Week_5/Reverse_and_Rotate_Array_Elements.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Write a function that takes an array as input and returns a new array with the elements in reverse order. You must use both push and pop methods to achieve this. 4 | 5 | */ 6 | 7 | /* 8 | 9 | Write a function that takes an array of numbers and a number n as input. The function should return a new array where the first n elements are moved to the end of the array. You must use both shift and push methods to achieve this. 10 | 11 | */ 12 | -------------------------------------------------------------------------------- /code-challenges/Week_5/Reverse_and_Rotate_Array_Elements.py: -------------------------------------------------------------------------------- 1 | # Prompt 1: Reverse an array using push and pop 2 | # Write a function that takes a list as input and returns a new list with the elements in reverse order. You must use both append and pop methods to achieve this. 3 | 4 | def reverse_list_push_pop(lst): 5 | 6 | 7 | # Prompt 2: Move first N elements to the end of the array using shift and push 8 | # Write a function that takes a list of integers and a number n as input. The function should return a new list where the first n elements are moved to the end of the array. You must use both remove and append methods to achieve this. 9 | 10 | 11 | def move_first_n_to_end(lst, n): -------------------------------------------------------------------------------- /code-challenges/Week_6/Object_Keys_Values_For-Of.js: -------------------------------------------------------------------------------- 1 | // Iterating Over the Values of an Object [Object.values] 2 | const user1 = { name: "Alice", age: 30, city: "New York" }; 3 | // console.log(Object.values(user1)); 4 | 5 | // Syntax Example 6 | // Object.values(user1).forEach((value) => console.log(value)) 7 | 8 | // Iterating Over the Keys of an Object [Object.keys] 9 | const user2 = { name: "Alice", age: 30, city: "New York" }; 10 | 11 | // Syntax Example 12 | // Object.keys(user2).forEach((key) => console.log(key)) 13 | 14 | // Iterate over an Array of Strings [For Of] 15 | 16 | // Define an array of strings 17 | const fruits = ["apple", "banana", "cherry"]; 18 | 19 | /* 20 | Syntax Example 21 | 22 | const array1 = ['a', 'b', 'c']; 23 | 24 | for (const element of array1) { 25 | console.log(element); 26 | } 27 | */ 28 | -------------------------------------------------------------------------------- /code-challenges/Week_6/Sort_Some_and_Every.js: -------------------------------------------------------------------------------- 1 | // Sorting an Array of Objects by a Key [Sort] 2 | const users = [ 3 | { name: "Alice", age: 30 }, 4 | { name: "Bob", age: 25 }, 5 | { name: "Charlie", age: 35 } 6 | ]; 7 | 8 | // Checking if Any Element in an Array Meets a Condition [Some] 9 | const numbers = [1, 2, 3, 4, 5]; 10 | 11 | // Checking if All Elements in an Array Meet a Condition [Every] 12 | const evenNumbers = [2, 4, 6, 8, 10]; 13 | -------------------------------------------------------------------------------- /code-challenges/Week_6/Working_With_Promises/Working_with_Promises.js: -------------------------------------------------------------------------------- 1 | /* =========== Uppercase String Promise =========== */ 2 | 3 | function uppercaseString(str) {} 4 | 5 | /* ========== Simulated Data Fetching ========== */ 6 | 7 | function fetchData() {} 8 | 9 | /* ========== Asynchronous Request Queue ========== */ 10 | 11 | class AsyncQueue { 12 | constructor() {} 13 | } 14 | 15 | // // Example task factory function 16 | // const createTask = () => { 17 | 18 | // }; 19 | 20 | // // Create a queue with a concurrency limit of 3 21 | 22 | // // Add tasks to the queue 23 | -------------------------------------------------------------------------------- /code-challenges/Week_7/Remove_Duplicates_from_Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Write a JavaScript function that takes an array of numbers as input and returns a new array with all duplicates removed. Use the Set object to achieve this. 3 | 4 | */ 5 | function removeDuplicates(arr) {} 6 | 7 | const arrayWithDuplicates = [1, 2, 2, 3, 4, 5, 6, 7, 7, 8, 9, 10]; 8 | console.log(removeDuplicates(arrayWithDuplicates)); 9 | -------------------------------------------------------------------------------- /code-challenges/Week_7/Spread_an_Array_into_Another_Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Write a JavaScript function that takes two arrays as input and returns a new array that contains all elements from both input arrays. Use the spread operator (...) to achieve this. 3 | 4 | */ 5 | 6 | function combineArrays() {} 7 | 8 | console.log(combineArrays()); 9 | -------------------------------------------------------------------------------- /code-challenges/Week_7/Ternary_Operator_for_Conditional.js: -------------------------------------------------------------------------------- 1 | /* 2 | Write a JavaScript function that takes two numbers as input and returns the larger number. Use the ternary operator (condition? valueIfTrue : valueIfFalse) for this task. 3 | 4 | */ 5 | 6 | function findLargerNumber() {} 7 | 8 | console.log(findLargerNumber()); 9 | console.log(findLargerNumber()); 10 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Jest_Integration_and_Unit_Testing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "test": "jest" 10 | }, 11 | "dependencies": { 12 | "vite": "^5.0.12" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userController.js: -------------------------------------------------------------------------------- 1 | const UserService = require("./userService"); 2 | 3 | class UserController { 4 | constructor(userService) { 5 | this.userService = userService; 6 | } 7 | 8 | async getUserData(userId) { 9 | return this.userService.getUserData(userId); 10 | } 11 | } 12 | 13 | module.exports = UserController; 14 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userService.js: -------------------------------------------------------------------------------- 1 | class UserService { 2 | constructor(apiUrl) { 3 | this.apiUrl = apiUrl; 4 | } 5 | 6 | async getUserData(userId) { 7 | try { 8 | const response = await fetch(`${this.apiUrl}/users/${userId}`); 9 | if (!response.ok) { 10 | throw new Error(`HTTP error status: ${response.status}`); 11 | } 12 | return await response.json(); 13 | } catch (error) { 14 | console.error(error); 15 | throw error; 16 | } 17 | } 18 | } 19 | 20 | module.exports = UserService; 21 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Jest_Integration_and_Unit_Testing/vite.config: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | 3 | // https://vitejs.dev/config/ 4 | export default defineConfig({ 5 | plugins: [], 6 | server: { 7 | host: '0.0.0.0', 8 | hmr: true, // Change this line to false disable auto-refreshing. 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Math_methods_floor_ceil_min_max.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Working with Math methods: 4 | 5 | 1. Generate an array of 10 random integers between 1 and 100. 6 | 2. Then, round down half of the numbers to the nearest integer using Math.floor and round up the other half using Math.ceil. 7 | 3. Finally, find the minimum and maximum values among the rounded numbers. 8 | 9 | */ 10 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Working_with_Arrays_and_Objects.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Create a function named `filterObjects` that takes three arguments: 4 | - an array of objects (`data`), 5 | - a string representing a property name (`propertyName`), and 6 | - a value. 7 | 8 | The function should return a new array containing only the objects from the original array whose value for the specified property matches the provided value. If no objects match the criteria, the function should return an empty array. 9 | 10 | */ 11 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Working_with_React_Testing_Library/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React + TypeScript + Replit 8 | 9 | 10 |
11 | 12 | 13 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Working_with_React_Testing_Library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-javascript", 3 | "version": "1.0.0", 4 | "type": "module", 5 | "description": "React TypeScript on Replit, using Vite bundler", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "test": "jest" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "devDependencies": { 16 | "@types/react": "^18.2.37", 17 | "@types/react-dom": "^18.2.15", 18 | "@vitejs/plugin-react": "^4.2.0", 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0", 21 | "typescript": "^5.2.2", 22 | "vite": "^5.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Working_with_React_Testing_Library/src/App.css: -------------------------------------------------------------------------------- 1 | main { 2 | } 3 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Working_with_React_Testing_Library/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | 3 | export default function App() { 4 | return
React ⚛️ + Vite ⚡ + Replit
; 5 | } 6 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Working_with_React_Testing_Library/src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Working_with_React_Testing_Library/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /code-challenges/Week_8/Working_with_React_Testing_Library/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | host: "0.0.0.0" 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /code-challenges/Week_9/Add-Digits.js: -------------------------------------------------------------------------------- 1 | /* 2 | Given an integer num, repeatedly add all its digits until the result has only one digit, and return it. 3 | 4 | Example 1: Example 2: 5 | Input: num = 38 Input: num = 0 6 | Output: 2 Output: 0 7 | Explanation: The process is 8 | 38 --> 3 + 8 --> 11 9 | 11 --> 1 + 1 --> 2 10 | Since 2 has only one digit, return it. 11 | 12 | Challenge: Could you do it without any loop/recursion in O(1) runtime? 13 | 14 | */ 15 | -------------------------------------------------------------------------------- /code-challenges/Week_9/Find-the-Longest-Word-in-a-String.js: -------------------------------------------------------------------------------- 1 | /* 2 | Return the length of the longest word in the provided sentence. 3 | Your output should be a number. 4 | 5 | Examples: 6 | findLongestWordLength("The quick brown fox jumped over the lazy dog") ---> 6 7 | findLongestWordLength("May the force be with you") ---> 5 8 | findLongestWordLength("What if we try a super-long word such as otorhinolaryngology") ---> 19 9 | 10 | */ 11 | -------------------------------------------------------------------------------- /code-challenges/Week_9/Move-Zeros.js: -------------------------------------------------------------------------------- 1 | /* 2 | Given an integer array nums, move all 0's to the end of it while maintaining the relative order of the non-zero elements. 3 | 4 | Example 1: 5 | Input: nums = [0,1,0,3,12] 6 | Output: [1,3,12,0,0] 7 | 8 | Example 2: 9 | Input: nums = [0] 10 | Output: [0] 11 | 12 | Challenge: Can you write your answer without making a copy of the array. Could you minimize the total number of operations done? 13 | 14 | */ 15 | -------------------------------------------------------------------------------- /code-challenges/Week_9/Return-the-Sum-of-Two-Numbers.js: -------------------------------------------------------------------------------- 1 | /* 2 | Create a function that takes two numbers as arguments and returns their sum. 3 | 4 | Examples: 5 | addition(3, 2) ➞ 5 addition(-3, -6) ➞ -9 addition(7, 3) ➞ 10 6 | 7 | Notes: Don't forget to return the result and check for edge cases! 8 | 9 | 10 | */ 11 | -------------------------------------------------------------------------------- /code-challenges/Week_9/Single-Number.js: -------------------------------------------------------------------------------- 1 | /* 2 | Given a non-empty array of integers nums, every element appears twice except for one. Find that single one. 3 | 4 | Example 1: Example 2: Example 3: 5 | Input: nums = [2,2,1] Input: nums = [4,1,2,1,2] Input: nums = [1] 6 | Output: 1 Output: 4 Output: 1 7 | 8 | Notes: Each element in the array appears twice except for one element which appears only once. 9 | 10 | Challenge: Can you optimize your implementation to be linear runtime complexity?. 11 | 12 | 13 | */ 14 | -------------------------------------------------------------------------------- /data-structures/queue-screenshots/queue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/data-structures/queue-screenshots/queue.png -------------------------------------------------------------------------------- /data-structures/stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/data-structures/stack.png -------------------------------------------------------------------------------- /databases/bash/create_db_sample.sql: -------------------------------------------------------------------------------- 1 | 2 | -- Run via command line: psql -U username --file=create_db_sample.sql 3 | 4 | -- Set variables 5 | DECLARE database_name varchar(50) 6 | SET database_name = 'test_database'; 7 | DECLARE table_name varchar(50) 8 | SET table_name = 'account'; 9 | 10 | -- Create database 11 | CREATE DATABASE database_name; 12 | 13 | -- Create table 14 | CREATE TABLE table_name( 15 | user_id serial PRIMARY KEY, 16 | username VARCHAR (50) UNIQUE NOT NULL, 17 | password VARCHAR (50) NOT NULL, 18 | email VARCHAR (355) UNIQUE NOT NULL 19 | ); 20 | 21 | -- Insert table 22 | INSERT INTO table_name (username, password, email) VALUES ('Sally Ride', 'letmein', 'sallyride@gmail.com'); 23 | 24 | 25 | SELECT * FROM table_name; -------------------------------------------------------------------------------- /databases/bash/sample_bash_script.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e # Flag causes script to exit if there's an error 3 | 4 | 5 | # The `echo` statement is like print 6 | echo Hello World! 7 | 8 | # Shell scripts can perform multiple command line operations exactly as if they were typed in terminal 9 | echo Print working directory: 10 | pwd 11 | 12 | # One can also use variables in shell scripts denoted by $, and read in variables 13 | echo "Enter your name:" 14 | read name 15 | echo "Hello, $name" 16 | -------------------------------------------------------------------------------- /databases/bash/teardown_db_sample.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | username='postgres' 4 | database_name='test_database' 5 | table_name='account' 6 | 7 | 8 | read -p "Are you sure you want to drop table $table_name? Reply y or n " -n 1 -r 9 | echo # (optional) move to a new line 10 | if [[ $REPLY =~ ^[Yy]$ ]] 11 | then 12 | echo Dropping table $table_name... 13 | psql -U $username -d $database_name -c "DROP TABLE $table_name" 14 | fi 15 | 16 | 17 | read -p "Are you sure you want to drop database $database_name? Reply y or n " -n 1 -r 18 | echo # (optional) move to a new line 19 | if [[ $REPLY =~ ^[Yy]$ ]] 20 | then 21 | echo Dropping database $database_name... 22 | psql -U $username -c "DROP DATABASE $database_name" 23 | fi 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /deploying/screenshots/production-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-1.png -------------------------------------------------------------------------------- /deploying/screenshots/production-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-10.png -------------------------------------------------------------------------------- /deploying/screenshots/production-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-11.png -------------------------------------------------------------------------------- /deploying/screenshots/production-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-2.png -------------------------------------------------------------------------------- /deploying/screenshots/production-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-3.png -------------------------------------------------------------------------------- /deploying/screenshots/production-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-4.png -------------------------------------------------------------------------------- /deploying/screenshots/production-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-5.png -------------------------------------------------------------------------------- /deploying/screenshots/production-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-6.png -------------------------------------------------------------------------------- /deploying/screenshots/production-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-7.png -------------------------------------------------------------------------------- /deploying/screenshots/production-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-8.png -------------------------------------------------------------------------------- /deploying/screenshots/production-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/production-9.png -------------------------------------------------------------------------------- /deploying/screenshots/render-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/render-1.png -------------------------------------------------------------------------------- /deploying/screenshots/render-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/render-2.png -------------------------------------------------------------------------------- /deploying/screenshots/render-3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/render-3.gif -------------------------------------------------------------------------------- /deploying/screenshots/render-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/render-4.png -------------------------------------------------------------------------------- /deploying/screenshots/render-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/render-5.png -------------------------------------------------------------------------------- /deploying/screenshots/render-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/deploying/screenshots/render-6.png -------------------------------------------------------------------------------- /docker/docker-architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/docker/docker-architecture.png -------------------------------------------------------------------------------- /express-js/middleware-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/express-js/middleware-example.png -------------------------------------------------------------------------------- /git/basic-gitignore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/git/basic-gitignore.png -------------------------------------------------------------------------------- /javascript/advanced-javascript-resources.md: -------------------------------------------------------------------------------- 1 | ## Additional JavaScript Resources 2 | 3 | - [Code this, not that](https://www.youtube.com/watch?v=Mus_vwhTCq0) - a 13min YouTube video containing some power tips, leveraging a lot of nice ES2015 features 4 | -------------------------------------------------------------------------------- /javascript/week-4-JS-assessment.md: -------------------------------------------------------------------------------- 1 | ## Week 4 Review: Loops, Conditionals, Runtime Complexity 2 | 3 | ### Languages 4 | 5 | - JavaScript 6 | 7 | ### Tools 8 | 9 | - A personal repl.it account 10 | - A timer 11 | 12 | ### Primary Goals 13 | 14 | - Demonstrate knowledge of JavaScript Loops, Conditionals, If statements, Switch statements, and Big O Notation 15 | - Practice code challenge situations 16 | 17 | ### Overview 18 | 19 | Apprentices will be emailed 5 repl.it assessments at 9am. You have 2 hours to complete and turn in all 5 challenges. 20 | 21 | --- 22 | 23 | ## Project Instructions 24 | 25 | - [ ] Do not open the emailed repl.it link until the assessment begins. 26 | - [ ] This is meant to be an independent assessment - no pair programming please. 27 | - [ ] Plan your solution before starting to code. 28 | - [ ] The code should run. 29 | - [ ] Test your function. 30 | - [ ] Be sure to submit each assessment to your program facilitator. 31 | -------------------------------------------------------------------------------- /node-js/images/control-c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/control-c.jpg -------------------------------------------------------------------------------- /node-js/images/download-screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/download-screen.jpg -------------------------------------------------------------------------------- /node-js/images/install-window.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/install-window.jpg -------------------------------------------------------------------------------- /node-js/images/js-in-browser.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/js-in-browser.jpg -------------------------------------------------------------------------------- /node-js/images/node-repl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/node-repl.jpg -------------------------------------------------------------------------------- /node-js/images/node-v.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/node-v.jpg -------------------------------------------------------------------------------- /node-js/images/node.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/node.jpg -------------------------------------------------------------------------------- /node-js/images/npm-init-msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/npm-init-msg.png -------------------------------------------------------------------------------- /node-js/images/npm-init-y-msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/npm-init-y-msg.png -------------------------------------------------------------------------------- /node-js/images/npm-json.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/npm-json.png -------------------------------------------------------------------------------- /node-js/images/npm-walkthrough.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/npm-walkthrough.png -------------------------------------------------------------------------------- /node-js/images/server-running.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/server-running.jpg -------------------------------------------------------------------------------- /node-js/images/which-node.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/node-js/images/which-node.jpg -------------------------------------------------------------------------------- /objectives/2.md: -------------------------------------------------------------------------------- 1 | # Assessment 2 Objectives 2 | 3 | Here are the concepts in [Assessment #2: Portfolio Project - Incorporate SEO & a11y 4 | ](../projects/portfolio/portfolio-webpage-2.md): 5 | 6 | ### Web Accessibility 7 | 8 | - [ ] Evaluate whether their website, app, or product is accessible with respect to visual, audio, motor, or cognitive impairments. 9 | - [ ] Determine changes that can make websites more accessible. 10 | - [ ] Implement those changes. 11 | 12 | ### SEO 13 | 14 | - [ ] Define SEO, its purpose, and how it works 15 | - [ ] Learn a few tools (Google Analytics, Google Search Console, Google My Business) to measure and experiment with SEO and site performance 16 | - [ ] Learn the basics of creating SEO-friendly content 17 | -------------------------------------------------------------------------------- /objectives/9.md: -------------------------------------------------------------------------------- 1 | # Assessment 9 Objectives 2 | 3 | --- 4 | 5 | ## [Assessment Outline 9.0: React/Enzyme](/projects/react-assessment.md) 6 | 7 | ### React 8 | 9 | - Explain the Pros and Cons of using React instead of other tools, like jQuery. 10 | - Create a simple React Component. 11 | Hook up user actions to state changes in the UI. 12 | 13 | ### Enzyme 14 | 15 | - Add through testing with Enzyme and Jest to one of your React components. 16 | 17 | --- 18 | 19 | ## [Assessment Outline 9.5: Auth0](/projects/auth0-assessment.md) 20 | 21 | ### Auth0 22 | 23 | - Describe the three roles associated with OAuth social media integration 24 | - Explain the difference between OAuth (the protocol) and Auth0 (the service) 25 | - Set up an Auth0 account and associate a social media login with a sample app 26 | -------------------------------------------------------------------------------- /objectives/ReadMe.md: -------------------------------------------------------------------------------- 1 | # Assessment Objectives: A Grader's Guide 2 | 3 | ### How to Use 4 | 5 | The files in the objectives folder each contain a checklist of the objectives covered in worksheets, projects, and assessments. 6 | 7 | As an example, "0.md" contains the things learners should demonstrate in "Week 1 Worksheet". If a participant fails to demonstrate understanding, they should receive feedback from the grader that they need to put additional effort into meeting that objective. In most cases, this will mean improving their submitted project, but otherwise the participant may be required to submit an additional code challenge or write-up to prove they've truly learned the concept. 8 | -------------------------------------------------------------------------------- /onboarding/YCLA_LessonPlan_v10.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/onboarding/YCLA_LessonPlan_v10.pdf -------------------------------------------------------------------------------- /pair-programming/week-1/Divs_and_DOM_Manipulation/README.md: -------------------------------------------------------------------------------- 1 | The goal of this mini webpage is to get used to creating sections and using basic HTML and CSS and practice DOM Manipulation 2 | 3 | Make 3 or 4 `
`s (as many as are in your group). Put one of your names in an `

` in each `
` 4 | 5 | Add a paragraph within each div with your names in it. add "I live in city" using the `` tag to make the city bold 6 | 7 | Make an unordered list with each of your names 8 | 9 | In the list, add a [ tag with the link to your favorite restaurant. Make sure the text of the link says the restuarnt name--!] 10 | 11 | [ ] 12 | [ 13 | Try using JS DOM manipulation to change the text of the first li to "I'm learning JS" 14 | 15 | Using DOM manipulation add one more li to the end of your list, with your favorite plate from your favorite restaurant 16 | 17 | ] 18 | -------------------------------------------------------------------------------- /pair-programming/week-1/Divs_and_DOM_Manipulation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | replit 7 | 8 | 9 | 10 | 11 |
12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /pair-programming/week-1/Divs_and_DOM_Manipulation/script.js: -------------------------------------------------------------------------------- 1 | // Create a div 2 | 3 | // Second task 4 | 5 | // Creating a list - the third task 6 | -------------------------------------------------------------------------------- /pair-programming/week-1/Divs_and_DOM_Manipulation/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | 6 | body { 7 | background-color: #bcb4f9; 8 | } 9 | -------------------------------------------------------------------------------- /pair-programming/week-1/Modeling-A-Bank-Account/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/pair-programming/week-1/Modeling-A-Bank-Account/index.js -------------------------------------------------------------------------------- /pair-programming/week-1/Modeling-A-Bank-Account/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodejs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@types/node": "^18.0.6", 14 | "node-fetch": "^3.2.6" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /pair-programming/week-1/Week-1-PP-Slice-and-Split/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodejs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@types/node": "^18.0.6", 14 | "node-fetch": "^3.2.6" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /pair-programming/week-1/first-div/README.md: -------------------------------------------------------------------------------- 1 | # First Div 2 | 3 | The goal of this mini webpage is to get used to creating sections and using basic HTML and CSS and practice DOM Manipulation 4 | 5 | 1. Make 3 or 4 `
`s (as many as are in your group). Put one of your names in an `

` in each `
` 6 | 2. Add a paragraph within each div with your names in it. add "I live in **city**" using the `` tag to make the city bold 7 | 3. Make an unordered list with each of your names 8 | 4. In the list, add a tag with the link to your favorite restaurant. Make sure the text of the link says the restuarnt name--!> 9 | 10 | 5. Try using JS DOM manipulation to change the text of the first li to "I'm learning JS" 11 | 12 | 6. Using DOM manipulation add one more li to the end of your list, with your favorite plate from your favorite restaurant 13 | -------------------------------------------------------------------------------- /pair-programming/week-1/first-div/script.js: -------------------------------------------------------------------------------- 1 | document.getElementById("first-li").innerHTML = "I'm learning JS"; 2 | 3 | function addAnotherLi() { 4 | // creating new li element 5 | 6 | const newLi = document.createElement("li"); 7 | 8 | // and give it some content 9 | const newContent = document.createTextNode( 10 | "My favorite plate from my favorite restaurant is cheese pizza" 11 | ); 12 | 13 | // add the text node to the newly created div 14 | newLi.appendChild(newContent); 15 | 16 | // add the newly created element and its content into the DOM 17 | const currentUl = document.getElementById("unordered-list-three"); 18 | 19 | currentUl.appendChild(newLi); 20 | } 21 | -------------------------------------------------------------------------------- /pair-programming/week-2/JS_DOM_Manipulation/README.md: -------------------------------------------------------------------------------- 1 | 1. Create a prompt pop-up that asks the user for a color. 2 | 2. Use the input color to change the background of the body, using DOM manipulation on the style property. Be sure to handle for invalid (non-color) inputs. 3 | 3. Using Javascript, add mouse-enter and mouse-leave event listeners on the div with the "element" id; change the text upon a hover-effect toggle. 4 | 5 | ## Hint 6 | 7 | To change the background of an element we need to set the `element.style.background` property to the color we want. 8 | -------------------------------------------------------------------------------- /pair-programming/week-2/JS_DOM_Manipulation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | replit 7 | 8 | 9 | 10 | 11 | Change my Background Color 12 |
Hover Me
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /pair-programming/week-2/JS_DOM_Manipulation/script.js: -------------------------------------------------------------------------------- 1 | //This function return true o false if the color is valid - PLEASE DONT MODIFY 2 | function isValidColor(string) { 3 | const validColor = new Option().style; 4 | validColor.color = string; 5 | return validColor.color === string.toLowerCase(); 6 | } 7 | 8 | // ========== DO NOT MODIFY ABOVE FUNCTION =========== 9 | 10 | // Event Listeners 11 | 12 | // Color Prompt 13 | 14 | // Use color prompt to change background color 15 | 16 | // Add an event listener for the mouse enter 17 | 18 | // Add an event listener for the mouse leave 19 | -------------------------------------------------------------------------------- /pair-programming/week-2/JS_DOM_Manipulation/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /pair-programming/week-2/Manipulating_HTML_with_JS/README.md: -------------------------------------------------------------------------------- 1 | ## Newspaper list 2 | 3 | Here is the HTML code of a web page. 4 | 5 | ``` 6 |

Some newspapers

7 |
8 | ``` 9 | 10 | Write a function that shows on the page a list of newspapers defined in a JavaScript array. Each link must be clickable. 11 | 12 | ``` 13 | // Newspaper list 14 | const newspapers = ["https://www.nytimes.com", "https://www.washingtonpost.com", "http://www.economist.com"]; 15 | ``` 16 | -------------------------------------------------------------------------------- /pair-programming/week-2/Manipulating_HTML_with_JS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Newspaper Links 7 | 8 | 9 |

Some newspapers

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /pair-programming/week-2/Manipulating_HTML_with_JS/script.js: -------------------------------------------------------------------------------- 1 | // Newspaper list 2 | const newspapers = [ 3 | "https://www.nytimes.com", 4 | "https://www.washingtonpost.com", 5 | "http://www.economist.com" 6 | ]; 7 | -------------------------------------------------------------------------------- /pair-programming/week-2/Manipulating_HTML_with_JS/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /pair-programming/week-2/Media_Queries_Exercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | replit 7 | 8 | 9 | 10 | 11 | Hello world 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /pair-programming/week-2/Media_Queries_Exercise/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/pair-programming/week-2/Media_Queries_Exercise/script.js -------------------------------------------------------------------------------- /pair-programming/week-2/Media_Queries_Exercise/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /pair-programming/week-2/modify-dom/README.md: -------------------------------------------------------------------------------- 1 | ### Exercises 2 | 3 | 1. Using Javascript, please change the background of the body to blue. 4 | 2. Using Javascript, please change the color of the text to white. 5 | 3. In your script.js file there is a list of fruits. Using Javascript please add an unordered list html element; add a list item for each of the fruits. 6 | 7 | ### Bonus 8 | 9 | If you have time, add an image to your li element 10 | 11 | ## Hint 12 | 13 | To change the background of an element we need to set the `element.style.background` property to the color we want. 14 | -------------------------------------------------------------------------------- /pair-programming/week-2/modify-dom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Modify Dom 7 | 8 | 9 |

List of Fruits

10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /pair-programming/week-2/modify-dom/script.js: -------------------------------------------------------------------------------- 1 | let fruits = ["Apple", "Banana", "Strawbery"]; 2 | 3 | let bodyEle = document.querySelector("body"); 4 | 5 | bodyEle.style.backgroundColor = "blue"; 6 | bodyEle.style.color = "white"; 7 | 8 | let div = document.createElement("div"); 9 | document.body.appendChild(div); 10 | 11 | function getFruits(fruits) { 12 | let ul = document.createElement("ul"); 13 | div.appendChild(ul); 14 | 15 | for (let item in fruits) { 16 | console.log(fruits[item]); 17 | let li = document.createElement("li"); 18 | ul.appendChild(li); 19 | li.innerText = fruits[item]; 20 | } 21 | } 22 | 23 | getFruits(fruits); 24 | -------------------------------------------------------------------------------- /pair-programming/week-2/newspaper-list/README.md: -------------------------------------------------------------------------------- 1 | ### Newspaper list 2 | 3 | Here is the HTML code of a web page. 4 | 5 | ```html 6 |

Some newspapers

7 |
8 | ``` 9 | 10 | Write a function that shows on the page a list of newspapers defined in a JavaScript array. Each link must be clickable. 11 | 12 | ```js 13 | // Newspaper list 14 | const newspapers = [ 15 | 'https://www.nytimes.com', 16 | 'https://www.washingtonpost.com', 17 | 'http://www.economist.com' 18 | ]; 19 | ``` 20 | -------------------------------------------------------------------------------- /pair-programming/week-2/newspaper-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | News paper list 7 | 8 | 9 |

Some newspapers

10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /pair-programming/week-2/newspaper-list/script.js: -------------------------------------------------------------------------------- 1 | const newspapers = [ 2 | "https://www.nytimes.com", 3 | "https://www.washingtonpost.com", 4 | "http://www.economist.com" 5 | ]; 6 | 7 | function listNewsPaper(arr) { 8 | let divContent = document.getElementById("content"); 9 | let ulEle = document.createElement("ul"); 10 | // loop through the arr of newspaper 11 | for (i = 0; i < arr.length; i++) { 12 | let liEle = document.createElement("li"); 13 | let aTag = document.createElement("a"); 14 | // appending ul to div 15 | divContent.appendChild(ulEle); 16 | // appending li to ul 17 | ulEle.appendChild(liEle); 18 | // appending anchor tag to li 19 | liEle.appendChild(aTag); 20 | 21 | aTag.href = arr[i]; 22 | 23 | aTag.innerText = arr[i]; 24 | } 25 | } 26 | // calling function 27 | listNewsPaper(newspapers); 28 | -------------------------------------------------------------------------------- /pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/README.md: -------------------------------------------------------------------------------- 1 | ### Create a form and validate its inputs with HTML, JavaScript, and CSS 2 | 3 | 1. Set up the form structure in HTML with input fields for the `username`, `email`, and `password`. Each input field should have a corresponding label and two of the fields should include a `required` attribute to enforce a mandatory fields. 4 | 5 | 2. Apply styles with CSS to make it visually appealing and to highlight invalid inputs. Add classes to handle errors and apply styles. 6 | 7 | 3. Add validation logic with JavaScript to handle client-side validation when the form is submitted. This script should check the input values against whether the email is in a valid format and the password meets length requirements. 8 | -------------------------------------------------------------------------------- /pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | replit 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/script.js -------------------------------------------------------------------------------- /pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /pair-programming/week-3/Object_Literals_Maps_and_Sets.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Implement a simple program that demonstrates the creation and manipulation of Object Literals, Maps, and Sets. The program should include operations like adding elements, accessing values, and iterating over each collection type. 4 | 5 | Step 1: Define an Object Literal Representing a Person 6 | Step 2: Create a Map to Store Additional Details About the Person 7 | Step 3: Create a Set to Store Unique Hobbies of the Person 8 | 9 | */ 10 | -------------------------------------------------------------------------------- /pair-programming/week-3/Practice_Forms_and_CSS_Media_Queries/README.md: -------------------------------------------------------------------------------- 1 | ## Create a responsive form using HTML and CSS. 2 | 3 | 1. Start by defining the HTML structure (using tags such as `form`, `label`, `input`) for the form elements 4 | 5 | 2. Style the form using CSS (including setting margins, padding, colors, fonts, and other visual properties) 6 | 7 | 3. Afterward, you can utilize media queries to adjust the layout and appearance of the form based on the viewport size. Media queries allow you to apply different styles depending on the characteristics of the device, such as its width. 8 | -------------------------------------------------------------------------------- /pair-programming/week-3/Practice_Forms_and_CSS_Media_Queries/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/pair-programming/week-3/Practice_Forms_and_CSS_Media_Queries/index.html -------------------------------------------------------------------------------- /pair-programming/week-3/Practice_Forms_and_CSS_Media_Queries/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /pair-programming/week-3/forEach_for_while_and_switch_statements.js: -------------------------------------------------------------------------------- 1 | /* 2 | For Loop: Write a for loop that prints numbers from 1 to 5. 3 | */ 4 | 5 | /* 6 | While Loop: Write a while loop that prints numbers from 1 to 5. 7 | */ 8 | 9 | /* 10 | Do-While Loop: Write a do...while loop that prints numbers from 1 to 5. 11 | */ 12 | 13 | /* 14 | Switch Statement: Write a switch statement that performs different actions based on the input value: 15 | 16 | - If the input is 'apple', output 'It's an apple.' 17 | - If the input is 'banana', output 'It's a banana.' 18 | - If the input is 'cherry', output 'It's a cherry.' 19 | - Otherwise, output 'Unknown fruit.' 20 | 21 | */ 22 | 23 | /* 24 | forEach Loop: Write a forEach loop that iterates over an array of fruits and logs each one to the console. 25 | 26 | */ 27 | -------------------------------------------------------------------------------- /pair-programming/week-3/form-validation/README.md: -------------------------------------------------------------------------------- 1 | ### Validate Form 2 | 3 | Write the JavaScript code that validates the password when the user submits the form. The validation rules are as follow: 4 | 5 | - The two inputted passwords must be identical. 6 | - The minimal password length is 6 characters. 7 | - The password must contain at least one digit. 8 | - The validation result must be shown on the page with an appropriate message in each case. 9 | 10 | ## Hint 11 | 12 | Review how to do a password validation in this [link](https://github.com/thejsway/thejsway/blob/master/manuscript/chapter17.md#instant-validation) 13 | -------------------------------------------------------------------------------- /pair-programming/week-3/form-validation/script.js: -------------------------------------------------------------------------------- 1 | // In your JS file, write a function that changes the value of the variable `testBoolean` each time the button is clicked. 2 | // Notice that I'm already giving you the connector `"onclick="toggle()"` inside the HTML of the button, so you don't need to worry about it. 3 | 4 | // ## Bonus 5 | // What do you need to do to change the name of the function? 6 | 7 | let testBoolean = true; 8 | console.log("Default value of your boolean is " + testBoolean); 9 | 10 | function toggleValue() { 11 | if (testBoolean) { 12 | testBoolean = false; 13 | 14 | console.log("The value of your boolean is " + testBoolean); 15 | } else { 16 | testBoolean = true; 17 | 18 | console.log("The value of your boolean is " + testBoolean); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /pair-programming/week-3/media-and-forms/README.md: -------------------------------------------------------------------------------- 1 | ### Tasks 2 | 3 | 1. Replace the area with the pink/orange background with any image you would like. Feel free to find any picture online you would like. You can change the size if you want it, but make sure the picture maintains its proportions. 4 | 5 | 2. Add Media Queries for the Mobile Version. If the screen is smaller then 425px the picture should be removed, and at 900px you should have just one column.(you probably will need to test this part in your VSCode, to see the proportions inside the Inspect Element) 6 | 7 | 3. Using JavaScript: 8 | 9 | - Make the button work and console.log the name of the user 10 | - If the user makes a click without inputting a string, alert that the field es mandatory 11 | 12 | ### Bonus 13 | 14 | The HTML file has a `
` tag. Print the error message there using DOM manipulation 15 | -------------------------------------------------------------------------------- /pair-programming/week-3/media-and-forms/script.js: -------------------------------------------------------------------------------- 1 | const submitBtn = document.getElementById("submit"); 2 | 3 | submitBtn.addEventListener("click", (e) => { 4 | e.preventDefault(); 5 | const userName = document.getElementById("username"); 6 | 7 | if (userName.value === "") { 8 | const errDiv = document.getElementById("error"); 9 | 10 | alert("Please enter the name. This field is mandatory"); 11 | 12 | errDiv.innerText = "Please enter the name. This field is mandatory"; 13 | } else { 14 | console.log(userName.value); 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /pair-programming/week-3/toggle-button/README.md: -------------------------------------------------------------------------------- 1 | In your JS file, write a function that changes the value of the variable `testBoolean` each time the button is clicked. 2 | Notice that I'm already giving you the connector `"onclick="toggle()"` inside the HTML of the button, so you don't need to worry about it. 3 | 4 | ## Bonus 5 | 6 | What do you need to do to change the name of the function? 7 | -------------------------------------------------------------------------------- /pair-programming/week-3/toggle-button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Togggle 7 | 8 | 9 |

Techtonica Pair Programming

10 | 11 | How to toggle a boolean using JavaScript? 12 | 13 |

The boolean should be toggled whenever the button is pressed.

14 | 15 |

See the console for the output

16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /pair-programming/week-3/toggle-button/script.js: -------------------------------------------------------------------------------- 1 | let testBoolean = true; 2 | console.log("Default value of your boolean is " + testBoolean); 3 | 4 | function toggleValue() { 5 | if (testBoolean) { 6 | testBoolean = false; 7 | 8 | console.log("The value of your boolean is " + testBoolean); 9 | } else { 10 | testBoolean = true; 11 | 12 | console.log("The value of your boolean is " + testBoolean); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /pair-programming/week-4/button-component/App.js: -------------------------------------------------------------------------------- 1 | import "./styles.css"; 2 | import Button from "./Button"; 3 | 4 | export default function App() { 5 | const handleClick = (event) => { 6 | // 👇️ toggle styles on click 7 | if (event.currentTarget.style.backgroundColor) { 8 | event.currentTarget.style.backgroundColor = null; 9 | event.currentTarget.style.color = null; 10 | } else { 11 | event.currentTarget.style.backgroundColor = "salmon"; 12 | event.currentTarget.style.color = "white"; 13 | } 14 | 15 | // 👇️ toggle class on click 16 | 17 | event.currentTarget.classList.add("my-class-1", "my-class-2"); 18 | }; 19 | 20 | return ( 21 |
22 |

Hello from Techtonica

23 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /pair-programming/week-4/button-component/Button.js: -------------------------------------------------------------------------------- 1 | export default function Button({ num, handleClick }) { 2 | return ( 3 |
4 | 5 |
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /pair-programming/week-4/button-component/README.md: -------------------------------------------------------------------------------- 1 | ### Button Component 2 | 3 | Create a button component that takes a number property. Make 4 instances of this button (with numbers 1-4). The button should display the number passed in. 4 | 5 | If you have time add styling. When a button is pressed have that button change color, when it is pressed a second time it should return to the original color. 6 | 7 | **Note**: For live demo refer this [codesandbox](https://codesandbox.io/s/techtonica-toggle-button-00gqfb) 8 | -------------------------------------------------------------------------------- /pair-programming/week-4/hello-component/App.js: -------------------------------------------------------------------------------- 1 | import Hello from "./Hello"; 2 | 3 | export default function App() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /pair-programming/week-4/hello-component/Hello.js: -------------------------------------------------------------------------------- 1 | export default function Hi({ firstName, lastName }) { 2 | return ( 3 |
4 |

Hello Component

5 |

6 | Hello, {firstName} {lastName} 7 |

8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /pair-programming/week-4/hello-component/README.md: -------------------------------------------------------------------------------- 1 | ### Pair programming 2 | 3 | You are going to write a React component named ``, pass two properties into this component `firstName` and `lastName`. When you run your program your HTML should say `"Hello, yourFirstName yourLastName"` 4 | 5 | ### Hint 6 | 7 | For an example of how to do this pease watch the intro to React video from the GitHub lesson https://www.youtube.com/watch?v=ycstRj2i66k 8 | 9 | ### Hint 2 10 | 11 | Properties in a react component are not the same as parameters in a function 12 | 13 | **Note**: Open [codesandbox](https://codesandbox.io/s/techtonica-hi-component-vewdx3?file=/src/App.js:23-183) for live demo 14 | -------------------------------------------------------------------------------- /pair-programming/week-4/mini-project-OOP/README.md: -------------------------------------------------------------------------------- 1 | ### Mini Project: Object Oriented Programming in JS 2 | 3 | ### Task: 4 | 5 | - Use the new JS object-oriented programming skills to create an "Event" class. 6 | - Write functions on the "Event" class that will: 7 | - allow the event host to add tickets with prices and "ticket type" (e.g. regular, VIP, mezzanine, balcony, etc) 8 | - allows a user to input a price range they are willing to pay to see what ticket types are available to them 9 | - Create a few event objects 10 | - Push the event objects into an array and use [DOM manipulation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents) to display the list of events to an html page. 11 | 12 | **Note:** For guided practice, please refer Techtonica [lesson](../../../javascript/first-js-oop-project.md) 13 | -------------------------------------------------------------------------------- /pair-programming/week-4/mini-project-OOP/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Events:

8 |
    9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /pair-programming/week-4/react-props/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React + TypeScript + Replit 8 | 9 | 10 |
11 | 12 | 13 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /pair-programming/week-4/react-props/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-javascript", 3 | "version": "1.0.0", 4 | "type": "module", 5 | "description": "React TypeScript on Replit, using Vite bundler", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/react": "^18.2.37", 16 | "@types/react-dom": "^18.2.15", 17 | "@vitejs/plugin-react": "^4.2.0", 18 | "react": "^18.2.0", 19 | "react-dom": "^18.2.0", 20 | "typescript": "^5.2.2", 21 | "vite": "^5.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pair-programming/week-4/react-props/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const App = () => { 4 | const handleClick = () => { 5 | alert("you clicked a button"); 6 | }; 7 | 8 | return
Hello World
; 9 | }; 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /pair-programming/week-4/react-props/src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")).render( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /pair-programming/week-4/react-props/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /pair-programming/week-4/react-props/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | host: "0.0.0.0" 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /pair-programming/week-5/Counter_App/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /pair-programming/week-5/Counter_App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React + TypeScript + Replit 8 | 9 | 10 |
11 | 12 | 13 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /pair-programming/week-5/Counter_App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-javascript", 3 | "version": "1.0.0", 4 | "type": "module", 5 | "description": "React TypeScript on Replit, using Vite bundler", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/react": "^18.2.37", 16 | "@types/react-dom": "^18.2.15", 17 | "@vitejs/plugin-react": "^4.2.0", 18 | "react": "^18.2.0", 19 | "react-dom": "^18.2.0", 20 | "typescript": "^5.2.2", 21 | "vite": "^5.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pair-programming/week-5/Counter_App/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /pair-programming/week-5/Counter_App/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | 3 | export default function App() { 4 | return ( 5 |
6 |

Hello Techtonica

7 |

Some content here!

8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /pair-programming/week-5/Counter_App/src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")).render( 6 | 7 | 8 | 9 | ); 10 | 11 | import { StrictMode } from "react"; 12 | import { createRoot } from "react-dom/client"; 13 | -------------------------------------------------------------------------------- /pair-programming/week-5/Counter_App/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /pair-programming/week-5/Counter_App/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | host: "0.0.0.0" 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /pair-programming/week-5/Weather_Forecast_App/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /pair-programming/week-5/Weather_Forecast_App/README.md: -------------------------------------------------------------------------------- 1 | # Weather API 2 | 3 | ### Tasks 4 | 5 | 1. Sign up or log in to OpenWeatherMap (https://openweathermap.org/) and generate an API key from the dashboard. 6 | 7 | 2. Define a functional component named Weather 8 | 9 | 3. Add a form input that fetches weather data based on the city name entered by the user 10 | 11 | 4. Display the city's weather details on your page (description, wind speed, humidity, temperature, etc) 12 | 13 | 5. [Bonus] handle errors gracefully and consider edge cases, such as invalid input or issues with the API request 14 | -------------------------------------------------------------------------------- /pair-programming/week-5/Weather_Forecast_App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React + TypeScript + Replit 8 | 9 | 10 |
11 | 12 | 13 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /pair-programming/week-5/Weather_Forecast_App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-javascript", 3 | "version": "1.0.0", 4 | "type": "module", 5 | "description": "React TypeScript on Replit, using Vite bundler", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@types/react": "^18.2.37", 16 | "@types/react-dom": "^18.2.15", 17 | "@vitejs/plugin-react": "^4.2.0", 18 | "react": "^18.2.0", 19 | "react-dom": "^18.2.0", 20 | "typescript": "^5.2.2", 21 | "vite": "^6.3.4" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pair-programming/week-5/Weather_Forecast_App/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /pair-programming/week-5/Weather_Forecast_App/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Weather from "./Weather"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |

Weather Forecast

8 | 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /pair-programming/week-5/Weather_Forecast_App/src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | 5 | ReactDOM.createRoot(document.getElementById("root")).render( 6 | 7 | 8 | 9 | ); 10 | 11 | import { StrictMode } from "react"; 12 | import { createRoot } from "react-dom/client"; 13 | -------------------------------------------------------------------------------- /pair-programming/week-5/Weather_Forecast_App/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /pair-programming/week-5/Weather_Forecast_App/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | server: { 8 | host: "0.0.0.0" 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /pair-programming/week-5/fetch-api/README.md: -------------------------------------------------------------------------------- 1 | ### Using Fetch to get Data from an API 2 | -------------------------------------------------------------------------------- /pair-programming/week-5/fetch-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fetch-Api 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /pair-programming/week-5/fetch-api/index.js: -------------------------------------------------------------------------------- 1 | // Using Fetch make an API call to the URL. The API will return the data in an Array 2 | async function fetchData() { 3 | const URL = "https://catfact.ninja/facts"; 4 | // Use fetch to call the api with the URL 5 | const response = await fetch(URL); // complete this line; 6 | // Storing data in form of JSON 7 | let data = await response.json(); // complete this line; 8 | console.log(data); 9 | // add the return for the function 10 | return data.data; 11 | } 12 | 13 | // Don't change this code! 14 | async function renderData() { 15 | let catFacts = await fetchData(); 16 | let html = "
    "; 17 | catFacts.forEach((fact) => { 18 | let htmlText = fact.fact; 19 | let htmlSegment = `
  • ${htmlText}
    • `; 20 | html += htmlSegment; 21 | }); 22 | html += "
"; 23 | 24 | let container = document.querySelector(".container"); 25 | container.innerHTML = html; 26 | } 27 | 28 | renderData(); 29 | -------------------------------------------------------------------------------- /pair-programming/week-5/react-couter-app/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export default function App() { 4 | let [count, setCount] = useState(0); 5 | 6 | function handleIncrement() { 7 | setCount(count++); 8 | } 9 | 10 | function handleDecrement() { 11 | setCount(count--); 12 | } 13 | 14 | function handleReset() { 15 | setCount(0); 16 | } 17 | 18 | return ( 19 |
20 |

Hello Techtonica

21 |

Count: {count}

22 | 23 | 24 | 25 | 26 | 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /pair-programming/week-5/react-couter-app/README.md: -------------------------------------------------------------------------------- 1 | ### React Counter App 2 | 3 | Create a counter app using React on any of the following platforms: 4 | 5 | - [CodeSandbox](https://codesandbox.io/) 6 | - [Replit](https://replit.com/) 7 | - Your **techtonica-assignment** folder in GitHub 8 | - [CodePen](https://codepen.io/) 9 | 10 | Once completed, attach the link in the "finished work" column. 11 | 12 | Use **useState()** to update the counter button and **onClick()** for handling the increment and decrement logic on each button. If you need guidance, check out [Learn useState In 15 Minutes](https://www.youtube.com/watch?v=O6P86uwfdR0) - React Hooks Explained. 13 | 14 | **Note**: You can also see a live demo of the counter app on CodeSandbox by clicking [here](https://codesandbox.io/s/techtonica-couter-app-4vwpfv?file=/src/App.js:0-549). 15 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Multiple_Table/department.sql: -------------------------------------------------------------------------------- 1 | CREATE TABLE department( 2 | ID int PRIMARY KEY, 3 | SALARY int, 4 | NAME VARCHAR(20), 5 | DEPT_ID VARCHAR(255) 6 | ); 7 | 8 | INSERT INTO department (ID, SALARY, NAME, DEPT_ID) 9 | VALUES 10 | (1, 50000, 'Engineering', 'ENG'), 11 | (2, 60000, 'Marketing', 'MKT'), 12 | (3, 70000, 'Sales', 'SLS'), 13 | (4, 80000, 'HR', 'HR'), 14 | (5, 90000, 'Finance', 'FIN'), 15 | (6, 100000, 'IT', 'IT'); 16 | (7, 750000, 'Sales', 'SLS'), 17 | (8, 750000, 'Marketing', 'MKT'), 18 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Multiple_Table/employee.sql: -------------------------------------------------------------------------------- 1 | -- DO NOT EDIT 2 | 3 | CREATE TABLE employee( 4 | ID int PRIMARY KEY, 5 | Email VARCHAR(255), 6 | City VARCHAR(20), 7 | DEPT_ID VARCHAR(255), 8 | FOREIGN KEY (DEPT_ID) REFERENCES department(DEPT_ID) 9 | ); 10 | 11 | INSERT INTO employee (ID, Email, City, DEPT_ID) 12 | VALUES 13 | (1, 'john.doe@example.com', 'New York', 'ENG'), 14 | (2, 'jane.smith@example.com', 'Los Angeles', 'MKT'), 15 | (3, 'billy.johnson@example.com', 'Chicago', 'SLS'), 16 | (4, 'miranda.brown@example.com', 'Houston', 'HR'), 17 | (5, 'alex.williams@example.com', 'Phoenix', 'FIN'), 18 | (6, 'sophia.davis@example.com', 'Seattle', 'IT'), 19 | (7, 'daaimah.tibrey@example.com', 'Fort Worth', 'SLS'), 20 | (8, 'pepper.anne@example.com', 'San Francisco', 'MKT'); 21 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Multiple_Table/query1.sql: -------------------------------------------------------------------------------- 1 | -- To query data across multiple tables, you can use the JOIN clause 2 | 3 | -- INNER_JOIN clause 4 | 5 | -- OR 6 | 7 | -- LEFT_OUTER_JOIN or LEFT_JOIN 8 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Multiple_Table/query2.sql: -------------------------------------------------------------------------------- 1 | -- Fnd all employee emails in the employee and department tables where the salary is 70000 or more, you can use a SQL query that involves a JOIN operation between the two tables 2 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Multiple_Table/query3.sql: -------------------------------------------------------------------------------- 1 | -- Modify the query to include the department name in the results as well, you can adjust the SELECT statement to include the department name from the department table 2 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Multiple_Table/query4.sql: -------------------------------------------------------------------------------- 1 | -- Sort the results by department name, you can modify the query to include an ORDER BY clause that specifies the NAME column from the department table - this will sort the results based on the department names in ascending order 2 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Single_Table/employees.sql: -------------------------------------------------------------------------------- 1 | -- DO NOT EDIT 2 | 3 | 4 | -- This command creates a table named Employees with columns for employee ID, first name, last name, email, phone number, and hire date 5 | CREATE TABLE Employees ( 6 | EmployeeID INT PRIMARY KEY, 7 | FirstName VARCHAR(50), 8 | LastName VARCHAR(50), 9 | Email VARCHAR(100), 10 | PhoneNumber VARCHAR(15), 11 | HireDate DATE 12 | ); 13 | 14 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Single_Table/query1.sql: -------------------------------------------------------------------------------- 1 | -- Insert multiple rows into a Employees table using a single INSERT statement 2 | 3 | -- Retrieve and display all rows from the Employees table, including the new data you've inserted 4 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Single_Table/query2.sql: -------------------------------------------------------------------------------- 1 | -- Arrange the data in the Employees table in ascending order by HireDate, use the ORDER BY clause in your SQL query 2 | 3 | 4 | 5 | -- Arrange the data in the Employees table in descending order by HireDate, use the ORDER BY clause in your SQL query. This will sort the results so that the employees with the most recent hire dates appear first. 6 | 7 | 8 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Single_Table/query3.sql: -------------------------------------------------------------------------------- 1 | -- To display all of the data in the Employees table that has an email address ending with "yahoo" or "gmail", you can use the LIKE operator in your SQL query. This operator allows you to search for a specified pattern in a column. 2 | 3 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Single_Table/query4.sql: -------------------------------------------------------------------------------- 1 | -- Display all of the first names in the Employees table in alphabetical order (A to Z), you can use the ORDER BY clause in your SQL query. 2 | -------------------------------------------------------------------------------- /pair-programming/week-6/SQL_Single_Table/query5.sql: -------------------------------------------------------------------------------- 1 | -- Display employees hired on or after "2024-03-01" and whose first names start with the letters "A" to "D", you can use the SELECT statement with a WHERE clause that includes conditions for both the hire date and the first name. 2 | -------------------------------------------------------------------------------- /pair-programming/week-6/expressjs-router/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Express app 6 | 12 | 17 | 18 | 19 |
20 |
21 |

Hello from Techtonica

22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /pair-programming/week-6/expressjs-router/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import path from "path"; 3 | import { fileURLToPath } from "url"; 4 | const __filename = fileURLToPath(import.meta.url); 5 | 6 | const __dirname = path.dirname(__filename); 7 | console.log("directory-name 👉️", __dirname); 8 | 9 | console.log(path.join(__dirname, "/dist", "index.html")); 10 | 11 | const PORT = 8080; 12 | 13 | const app = express(); 14 | 15 | // sendFile will go here 16 | app.get("/", function (req, res) { 17 | res.sendFile(path.join(__dirname, "/index.html")); 18 | }); 19 | 20 | app.get("/about", function (req, res) { 21 | res.sendFile(path.join(__dirname, "/about.html")); 22 | }); 23 | 24 | app.listen(PORT, () => { 25 | console.log(`app is listening to port: ${PORT}`); 26 | }); 27 | -------------------------------------------------------------------------------- /pair-programming/week-6/nodejs-weather-app/README.md: -------------------------------------------------------------------------------- 1 | # Promises-Fetch Api 2 | 3 | You will need to create a free account with open weather map to get a key. Make sure to save your key somewhere safe, we will use the open weather map api again! Create your account [here](https://home.openweathermap.org/users/sign_up) 4 | 5 | ### Quick Guide 6 | 7 | - Initialize the project with `npm init` command 8 | - Install following dependencies `npm install express node-fetch dotenv ejs` 9 | - Create `.env` file to store your API key. For example: `API_KEY=YOUR-API_KEY-GOES-HERE` 10 | - Create `index.ejs` and `server.mjs` file. Copy the content from this repo. 11 | - Navigate to `http://localhost:5000/` to make the weather request. 12 | -------------------------------------------------------------------------------- /pair-programming/week-7/Factorial_Calculation_Using_Recursion.js: -------------------------------------------------------------------------------- 1 | /* 2 | Write a JavaScript function to calculate the factorial of a given number using recursion. The factorial of a non-negative integer n is the product of all positive integers less than or equal to n. It is denoted by n!. 3 | */ 4 | 5 | function factorial() { 6 | // Base case 7 | // Recursive case 8 | } 9 | 10 | console.log(factorial()); 11 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/react-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/pair-programming/week-7/react-express-app/react-express.png -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/public/favicon.ico -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/public/logo192.png -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/public/logo512.png -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | function App() { 4 | const [data, setData] = useState(""); 5 | 6 | const connectToBackend = () => { 7 | fetch("/api") 8 | .then((res) => res.json()) 9 | .then((data) => setData(data.message)); 10 | }; 11 | 12 | return ( 13 |
14 |

React Website with an Express backend

15 | 16 | 17 | 18 |

{data}

19 |
20 | ); 21 | } 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import App from "./App"; 3 | 4 | test("renders learn react link", () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-express-app", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "start": "node server/index.js", 10 | "client": "cd client && npm start", 11 | "dev": "concurrently -n 'server, client' -c 'cyan, green' \"nodemon server/index.js\" \"npm run client\"" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "dependencies": { 17 | "concurrently": "^7.0.0", 18 | "express": "^4.17.2", 19 | "nodemon": "^2.0.15" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/port-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/port-error.png -------------------------------------------------------------------------------- /pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/server/index.js: -------------------------------------------------------------------------------- 1 | // server/index.js 2 | 3 | import express from "express"; 4 | 5 | const app = express(); 6 | 7 | //Set the port that you want the server to run on 8 | const PORT = process.env.PORT || 5000; 9 | 10 | //creates an endpoint for the route /api 11 | app.get("/api", (req, res) => { 12 | res.json({ message: "Hello from ExpressJS" }); 13 | }); 14 | 15 | // console.log that your server is up and running 16 | app.listen(PORT, () => { 17 | console.log(`Server listening on ${PORT}`); 18 | }); 19 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-forms/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import "./styles.css"; 3 | import RegisterYourCatForm from "./RegisterYourCatForm"; 4 | 5 | const COLORS = ["white", "red", "blue", "black", "cream"]; 6 | 7 | export default function App() { 8 | let initialValue = { name: "", age: "", habit: "", color: "" }; 9 | const [values, setValues] = useState(initialValue); 10 | 11 | function handleChange(e) { 12 | setValues((preValues) => ({ 13 | ...preValues, 14 | [e.target.name]: e.target.value 15 | })); 16 | } 17 | 18 | function handleSubmit(ev) { 19 | ev.preventDefault(); 20 | console.log(values); 21 | } 22 | 23 | return ( 24 |
25 | 31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /pair-programming/week-7/react-forms/README.md: -------------------------------------------------------------------------------- 1 | ## React Forms 2 | 3 | ### Tasks 4 | 5 | 1. Move the `function RegisterYourCatForm` to its own component. 6 | 2. Using state `import {useState} from React` control the form component 7 | 3. Add form validations to the HTML5 tags 8 | 4. Add an onSubmit function and make the form work console.log the cat information 9 | 10 | ### Hint. 11 | 12 | If you got stuck, here is a (good resource)[https://dmitripavlutin.com/react-forms-tutorial/] 13 | 14 | **Note**: For demo refer this [codesandbox](https://codesandbox.io/s/techtonica-forms-register-cat-771vjb) 15 | -------------------------------------------------------------------------------- /prework/codeSamples.js: -------------------------------------------------------------------------------- 1 | // Code samples for use as JS reference 2 | 3 | const myVariable = 1; 4 | 5 | console.log(`Value of myVariable is ${myVariable}`); 6 | 7 | if (myVariable < 10) { 8 | console.log("< 10"); 9 | } else if (myVariable === 10) { 10 | console.log("=== 10"); 11 | } else { 12 | console.log("> 10"); 13 | } 14 | 15 | for (let i = 0; i < 10; i++) { 16 | console.log(i); 17 | } 18 | 19 | let j = 0; 20 | while (j < 10) { 21 | console.log(j); 22 | j++; 23 | } 24 | 25 | function myFunc1(param1) { 26 | return param1 * 7; 27 | } 28 | 29 | myFunc1(8); 30 | 31 | const myFunc2 = (param1, param2) => { 32 | return param1 + param2; 33 | }; 34 | 35 | myFunc2(5, 3); 36 | 37 | let emptyArray = []; 38 | let myArray = ["one", "two"]; 39 | myArray.push("hello"); 40 | myArray.pop(); 41 | myArray[0] = "goodbye"; 42 | console.log(myArray.length); 43 | 44 | const obj = { 45 | prop1: "value1", 46 | prop2: "value2" 47 | }; 48 | obj.prop1 = "new value"; 49 | -------------------------------------------------------------------------------- /prework/git-udacity-instructions.md: -------------------------------------------------------------------------------- 1 | We are using ZSH but Udacity expects you to use Bash. They are very similar, but they load configurations from different files. Complete the following steps before starting the Udacity course. 2 | 3 | From your terminal, paste the following lines: 4 | 5 | - `cd ~ # Navigate to your home directory` 6 | - `atom .zshrc # Create a file named .zshrc if one does not already exist, and open it in Atom` 7 | 8 | (If the second step fails, you may need to [install Atom](https://atom.io/) first) 9 | 10 | In your Atom window, add the following lines to the bottm of .zshrc and then save: 11 | 12 | ``` 13 | # If bash profile exists, 14 | if [ -f ~/.bash_profile ]; then 15 | . ~/.bash_profile; 16 | fi 17 | ``` 18 | -------------------------------------------------------------------------------- /project-example/week-1/bank-account/phase-2-HTML/style.css: -------------------------------------------------------------------------------- 1 | .main-button { 2 | display: flex; 3 | } 4 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-10/sample-code/client/public/favicon.ico -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-10/sample-code/client/public/logo192.png -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-10/sample-code/client/public/logo512.png -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/src/App.js: -------------------------------------------------------------------------------- 1 | import Header from "./components/header/Header"; 2 | 3 | import Controller from "./components/Controller"; 4 | 5 | function App() { 6 | return ( 7 |
8 |
9 | 10 |
11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/src/components/detail/DetailPage.css: -------------------------------------------------------------------------------- 1 | .detailPage { 2 | width: 100%; 3 | height: 100vh; 4 | 5 | justify-content: center; 6 | align-items: center; 7 | text-align: justify; 8 | } 9 | h1 { 10 | color: blue; 11 | } 12 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/src/components/header/Header.css: -------------------------------------------------------------------------------- 1 | ul { 2 | display: flex; 3 | align-content: flex-end; 4 | list-style-type: none; 5 | } 6 | li { 7 | padding: 1em; 8 | font-weight: bold; 9 | font-size: 18px; 10 | } 11 | 12 | .header { 13 | font-size: 38px; 14 | text-shadow: -1px -1px #f00, 1px 1px #a00, -3px 0 4px #000; 15 | font-family: "Segoe print", Arial, Helvetica, sans-serif; 16 | color: #dd0000; 17 | } 18 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/src/components/header/Header.js: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import "./Header.css"; 3 | 4 | const Header = () => { 5 | return ( 6 | <> 7 |
8 |

Animal Sighting tracker

9 |
10 |
    11 |
  • 12 | Home 13 |
    • 14 | 15 |
  • 16 | Add Sighting 17 |
    • 18 |
19 |
20 |
21 | 22 | ); 23 | }; 24 | 25 | export default Header; 26 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/src/components/sighting/SightingList.css: -------------------------------------------------------------------------------- 1 | .Table { 2 | width: 100%; 3 | height: 100vh; 4 | display: flex; 5 | } 6 | 7 | table { 8 | border: 2px solid rgba(9, 9, 9, 0.1); 9 | width: 800px; 10 | height: 200px; 11 | } 12 | 13 | th { 14 | border-bottom: 1px solid black; 15 | padding-left: 20px; 16 | } 17 | 18 | td { 19 | padding-left: 20px; 20 | } 21 | 22 | .List-Header { 23 | color: blue; 24 | } 25 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | padding-left: 36px; 9 | margin-left: 36px; 10 | } 11 | 12 | code { 13 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 14 | monospace; 15 | } 16 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import "./index.css"; 5 | import App from "./App"; 6 | import reportWebVitals from "./reportWebVitals"; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById("root") 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/client/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "create-react-app": "^5.0.0" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/screenshots/add-sighting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-10/sample-code/screenshots/add-sighting.png -------------------------------------------------------------------------------- /project-example/week-10/sample-code/screenshots/client.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-10/sample-code/screenshots/client.png -------------------------------------------------------------------------------- /project-example/week-10/sample-code/screenshots/detailpage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-10/sample-code/screenshots/detailpage.png -------------------------------------------------------------------------------- /project-example/week-10/sample-code/screenshots/erd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-10/sample-code/screenshots/erd.png -------------------------------------------------------------------------------- /project-example/week-10/sample-code/screenshots/homepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-10/sample-code/screenshots/homepage.png -------------------------------------------------------------------------------- /project-example/week-10/sample-code/screenshots/server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-10/sample-code/screenshots/server.png -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/.env.example: -------------------------------------------------------------------------------- 1 | DB_URI="postgresql://user:password@localhost/database" 2 | 3 | DB_URI="postgres://localhost:5432/animal_sighting_tracker" -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/controller/individuals.js: -------------------------------------------------------------------------------- 1 | const model = require("../models/individuals"); 2 | // Get all individual 3 | 4 | const getAllIndividuals = async (req, res) => { 5 | try { 6 | const result = await model.getIndividual(); 7 | res.send(result); 8 | } catch (e) { 9 | return res.status(400).json({ e }); 10 | } 11 | }; 12 | 13 | const getIndividualsOfSpecies = async (req, res) => { 14 | try { 15 | const speciesId = req.params.id; 16 | const result = await model.getIndividualsOfSpecies(speciesId); 17 | res.send(result); 18 | } catch (e) { 19 | return res.status(400).json({ e }); 20 | } 21 | }; 22 | 23 | module.exports = { 24 | getAllIndividuals, 25 | getIndividualsOfSpecies 26 | }; 27 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/controller/speciesController.js: -------------------------------------------------------------------------------- 1 | const model = require("../models/species"); 2 | 3 | // Get all species 4 | const getAllSpecies = async (req, res) => { 5 | try { 6 | const species = await model.getAllSpecies(); 7 | console.log(species); 8 | res.send(species); 9 | } catch (e) { 10 | return res.status(400).json({ e }); 11 | } 12 | }; 13 | 14 | module.exports = { 15 | getAllSpecies 16 | }; 17 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/db/db-connection.js: -------------------------------------------------------------------------------- 1 | const { Pool } = require("pg"); 2 | 3 | let db; 4 | function init() { 5 | if (!db) { 6 | db = new Pool({ 7 | connectionString: process.env.DB_URI 8 | }); 9 | } 10 | return db; 11 | } 12 | 13 | function reset() { 14 | db.end(); 15 | db = null; 16 | } 17 | 18 | module.exports = { init, reset }; 19 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/models/individuals.js: -------------------------------------------------------------------------------- 1 | const db = require("../db/db-connection").init(); 2 | 3 | const getIndividual = async () => { 4 | const { rows: individual } = await db.query("SELECT * FROM individuals"); 5 | return individual; 6 | }; 7 | 8 | const getIndividualsOfSpecies = async (speciesId) => { 9 | const { rows: individual } = await db.query( 10 | "SELECT * FROM individuals where species_id=$1", 11 | [speciesId] 12 | ); 13 | return individual; 14 | }; 15 | 16 | module.exports = { 17 | getIndividual, 18 | 19 | getIndividualsOfSpecies 20 | }; 21 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/models/species.js: -------------------------------------------------------------------------------- 1 | const db = require("../db/db-connection"); 2 | 3 | const getAllSpecies = async () => { 4 | const { rows: species } = await db.init().query("SELECT * FROM species"); 5 | return species; 6 | }; 7 | 8 | module.exports = { 9 | getAllSpecies 10 | }; 11 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "expresstemplate", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "start": "node server.js", 8 | "server": "nodemon server.js", 9 | "test": "jest", 10 | "test:watch": "jest --watch" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "concurrently": "^7.0.0", 16 | "cors": "^2.8.5", 17 | "dotenv": "^16.0.0", 18 | "express": "^4.21.2", 19 | "jest": "^28.0.1", 20 | "pg-promise": "^10.11.1" 21 | }, 22 | "devDependencies": { 23 | "sql-fixtures": "^1.0.4", 24 | "nodemon": "^2.0.20", 25 | "supertest": "^6.2.3" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/routes/routes.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const { getAllSpecies } = require("../controller/speciesController"); 3 | 4 | const { getIndividualsOfSpecies } = require("../controller/individuals"); 5 | 6 | const { 7 | getAllSighting, 8 | addNewSighting, 9 | deleteSighting, 10 | getSightingDetails 11 | } = require("../controller/sightings"); 12 | 13 | const router = express.Router(); 14 | 15 | // SPECIES ROUTE 16 | router.get("/api/species", getAllSpecies); 17 | 18 | // INDIVIDUAL ROUTE 19 | router.get("/api/individual/:id", getIndividualsOfSpecies); 20 | 21 | // SIGHTING ROUTE 22 | router.get("/api/sighting", getAllSighting); 23 | router.get("/api/sighting/:id", getSightingDetails); 24 | router.post("/api/sighting", addNewSighting); 25 | 26 | router.delete("/api/sighting/:id", deleteSighting); 27 | 28 | module.exports = router; 29 | -------------------------------------------------------------------------------- /project-example/week-10/sample-code/server/server.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const cors = require("cors"); 3 | require("dotenv").config(); 4 | const allRouter = require("./routes/routes"); 5 | 6 | const app = express(); 7 | 8 | // set port, listen for requests 9 | const PORT = process.env.PORT || 5000; 10 | 11 | app.use(cors()); 12 | app.use(express.json()); 13 | 14 | //creates an endpoint for the route /api 15 | app.get("/", (req, res) => { 16 | res.json({ message: "Hello from My ExpressJS" }); 17 | }); 18 | 19 | // getting all routes 20 | app.use("/", allRouter); 21 | 22 | // console.log that your server is up and running 23 | app.listen(PORT, () => { 24 | console.log(`Server listening on ${PORT}`); 25 | }); 26 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .env -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-7/weather-forecast/client/public/favicon.ico -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-7/weather-forecast/client/public/logo192.png -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-7/weather-forecast/client/public/logo512.png -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | /* text-align: center; */ 3 | margin: auto; 4 | padding-left: 20px; 5 | } 6 | .App-header { 7 | color: blue; 8 | } 9 | .data { 10 | color: purple; 11 | } 12 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/client/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-express-app", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "start": "node server/index.mjs", 10 | "client": "cd client && npm start", 11 | "dev": "concurrently -n 'server, client' -c 'cyan, green' \"nodemon server/index.mjs\" \"npm run client\"" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "dependencies": { 17 | "concurrently": "^7.0.0", 18 | "nodemon": "^2.0.20" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/server/.envexample: -------------------------------------------------------------------------------- 1 | API_KEY=Your_API_Key -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.mjs", 6 | "type": "module", 7 | "engines": { 8 | "node": ">=14.17.5" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1", 12 | "start": "nodemon ./index.mjs" 13 | }, 14 | "dependencies": { 15 | "dotenv": "^16.0.1", 16 | "express": "^4.17.2", 17 | "node-fetch": "^3.2.4" 18 | }, 19 | "keywords": [], 20 | "author": "", 21 | "license": "ISC" 22 | } 23 | -------------------------------------------------------------------------------- /project-example/week-7/weather-forecast/weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-7/weather-forecast/weather.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/eventonica-sample-code/client/public/favicon.ico -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/eventonica-sample-code/client/public/logo192.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/eventonica-sample-code/client/public/logo512.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import App from "./App"; 3 | 4 | test("renders learn react link", () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | function Footer() { 2 | return ( 3 | 15 | ); 16 | } 17 | 18 | export default Footer; 19 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import calendar from "../images/calendar.png"; 2 | function Header() { 3 | return ( 4 |
5 | Calendar Star Logo 6 |

Eventonica

7 |
8 | ); 9 | } 10 | 11 | export default Header; 12 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/src/components/UserList.jsx: -------------------------------------------------------------------------------- 1 | function UserList({ users, editUser, deleteUser }) { 2 | return ( 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {users.map((user) => ( 15 | 16 | 17 | 18 | 19 | 22 | 25 | 26 | ))} 27 | 28 |
IdNameEmail AddressEditDelete
{user.id}{user.name}{user.email} 20 | 21 | 23 | 24 |
29 | ); 30 | } 31 | 32 | export default UserList; 33 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/src/images/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/eventonica-sample-code/client/src/images/calendar.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById("root")); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/client/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/server/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/server/db/db-connection.js: -------------------------------------------------------------------------------- 1 | import pg from "pg"; 2 | const { Pool } = pg; 3 | const db = new Pool({ 4 | connectionString: "postgres://localhost:5432/eventonica" 5 | }); 6 | 7 | export default db; 8 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-sample-code/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "start": "node index.js", 9 | "server": "nodemon index.js" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "cors": "^2.8.5", 16 | "express": "^4.18.1", 17 | "pg": "^8.8.0", 18 | "pg-promise": "^10.12.0" 19 | }, 20 | "devDependencies": { 21 | "nodemon": "^2.0.20" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/eventonica-test-rtl.md: -------------------------------------------------------------------------------- 1 | # Eventonica - React Testing Library 2 | 3 | ### Primary Goals 4 | 5 | - Practice writing tests with RTL 6 | - Practice implementing a Jest snapshot 7 | - Catch any bugs in your project's React code 8 | 9 | ### Overview 10 | 11 | Now that you've written Jest tests to cover your frontend logic, you'll write React Testing Library tests to ensure your components work as expected. 12 | 13 | ### Instructions for adding tests 14 | 15 | 1. Take a look at the React components that make up the Events section of your page. Write down 6 things from this section that a user should expect to see, or how they can expect something to behave. 16 | 2. Your challenge is to write an RTL test for each of these listed items. 17 | 3. Write at least one Jest snapshot test that tests a component in this section. 18 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/images/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/images/calendar.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/images/create-table-psql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/images/create-table-psql.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/images/eventonica-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/images/eventonica-setup.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/images/get-post-request.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/images/get-post-request.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/images/login-psql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/images/login-psql.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/images/psql-test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/images/psql-test.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/images/put-delete-request.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/project-example/week-9/eventonica/images/put-delete-request.png -------------------------------------------------------------------------------- /project-example/week-9/eventonica/starter-code/events.js: -------------------------------------------------------------------------------- 1 | const allEvents = []; 2 | 3 | const addEvent = (/* arguments you decide go here */) => { 4 | // Adds a new Event 5 | }; 6 | 7 | const updateEvent = () => { 8 | // Update existing Event 9 | }; 10 | 11 | const deleteEvent = () => { 12 | // Deletes Event 13 | }; 14 | 15 | const findEventsByDate = () => { 16 | // Return Event object instances in this.allEvents with a specified date 17 | }; 18 | 19 | const findEventsbyCategory = () => { 20 | // Return Event object instances in this.allEvents with a specified category 21 | }; 22 | 23 | export { 24 | allEvents, 25 | addEvent, 26 | updateEvent, 27 | deleteEvent, 28 | findEventsByDate, 29 | findEventsbyCategory 30 | }; 31 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/starter-code/mockEvents.js: -------------------------------------------------------------------------------- 1 | // some sample events 2 | // feel free to edit the data, and/or edit the fields 3 | const event1 = { 4 | id: "1", 5 | name: "Birthday", 6 | date: "2021-09-01", 7 | description: "A birthday party for my best friend", 8 | category: "Celebration" 9 | }; 10 | 11 | const event2 = { 12 | id: "2", 13 | name: "Graduation", 14 | date: "2021-08-01", 15 | description: "The class of 2021 graduates from East High", 16 | category: "Education" 17 | }; 18 | 19 | const event3 = { 20 | id: "3", 21 | name: "JS Study Session", 22 | date: "2021-10-01", 23 | description: "A chance to practice Javascript interview questions", 24 | category: "Education" 25 | }; 26 | -------------------------------------------------------------------------------- /project-example/week-9/eventonica/starter-code/users.js: -------------------------------------------------------------------------------- 1 | const allUsers = []; 2 | 3 | const addUser = () => { 4 | // Adds a new User 5 | }; 6 | 7 | const updateUser = () => { 8 | // Update existing User 9 | }; 10 | 11 | const deleteUser = () => { 12 | // Deletes User 13 | }; 14 | 15 | export { allUsers, addUser, updateUser, deleteUser }; 16 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | client/node_modules 12 | server/node_modules/ 13 | dist 14 | dist-ssr 15 | *.local 16 | 17 | # Editor directories and files 18 | .vscode/* 19 | !.vscode/extensions.json 20 | .idea 21 | .DS_Store 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw? 27 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Techtonica's Template Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "bootstrap": "^5.2.3", 13 | "moment": "^2.29.4", 14 | "react": "^18.2.0", 15 | "react-bootstrap": "^2.7.2", 16 | "react-dom": "^18.2.0", 17 | "react-icons": "^4.8.0", 18 | "react-router-dom": "^7.5.2" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^18.0.28", 22 | "@types/react-dom": "^18.0.11", 23 | "@vitejs/plugin-react": "^4.3.4", 24 | "vite": "^6.2.6" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | import MyNavBar from "./components/Navbar"; 4 | import ListStudents from "./components/ListStudents"; 5 | 6 | function App() { 7 | return ( 8 |
9 | 10 | 11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/src/assets/BlueTechtonicaWord.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/2023TemplateWithVite/client/src/assets/BlueTechtonicaWord.png -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/src/assets/bridge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/2023TemplateWithVite/client/src/assets/bridge.png -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/src/components/error-page.jsx: -------------------------------------------------------------------------------- 1 | import { useRouteError } from "react-router-dom"; 2 | 3 | export default function ErrorPage() { 4 | const error = useRouteError(); 5 | console.error(error); 6 | 7 | return ( 8 |
9 |

Oops Techtonica template apologizes!!

10 |

Sorry, an unexpected error has occurred.

11 |

12 | {error.statusText || error.message} 13 |

14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/2023TemplateWithVite/client/src/index.css -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/client/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }); 8 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/server/.env: -------------------------------------------------------------------------------- 1 | DATABASE_URI="postgresql://postgres:Calle100No11B90@localhost/techtonica" -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/server/.envexample: -------------------------------------------------------------------------------- 1 | //If you have a postgres db with an user and password - 2 | //Replace everything between the <> with your variables and remove the <> 3 | DB_URI="postgresql://:@localhost/" 4 | 5 | //If you don't have postgres db with an user and password - 6 | //Replace everything between the <> with your variables and remove the <> 7 | DB_URI="postgresql://localhost/" -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/server/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | .vscode/ 6 | server/node_modules/ 7 | client/node_modules/ 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | server/.env 22 | .DS_Store 23 | server/.DS_Store 24 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/server/db/db-connection.js: -------------------------------------------------------------------------------- 1 | const { Pool } = require("pg"); 2 | const db = new Pool({ 3 | connectionString: process.env.DATABASE_URI 4 | }); 5 | 6 | module.exports = db; 7 | -------------------------------------------------------------------------------- /projects/2023TemplateWithVite/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "dev": " concurrently 'npm start' 'cd .. && cd client && npm run dev' ", 8 | "start": "node server.js", 9 | "server": "nodemon server.js" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "concurrently": "^7.6.0", 15 | "cors": "^2.8.5", 16 | "dotenv": "^16.0.3", 17 | "express": "^4.18.2", 18 | "nodemon": "^3.0.1", 19 | "pg-promise": "^11.4.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /projects/Eventful-API-test-page/connection.js: -------------------------------------------------------------------------------- 1 | //require packages 2 | const pg = require("pg"); 3 | const pgKey = require("./keys").pg; 4 | const Pool = require("pg").Pool; 5 | 6 | //create PostgreSQL connection 7 | const connection = new Pool({ 8 | host: "localhost", 9 | port: 5432, 10 | user: "XXXXXXX", // type your username here 11 | password: "XXXXXXX", // type your username here 12 | database: "XXXXXXX" // type your database name here 13 | }); 14 | 15 | module.exports = connection; 16 | -------------------------------------------------------------------------------- /projects/Eventful-API-test-page/index.js: -------------------------------------------------------------------------------- 1 | const pool = require("./connection"); 2 | const app = require("./app"); 3 | 4 | const pgConnect = () => { 5 | pool.connect((err, client) => { 6 | if (err) throw err; 7 | 8 | console.log("Welcome to Eventonica"); 9 | console.log("connected as Administrator"); 10 | 11 | app.startQuestion(() => { 12 | client.release(); 13 | pool.end().then(() => process.exit()); 14 | }); 15 | }); 16 | }; 17 | 18 | // *Uncomment below line once you have postgreSQL setup 19 | 20 | // pgConnect(); 21 | -------------------------------------------------------------------------------- /projects/Eventful-API-test-page/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "eventful-node": "^1.1.1", 4 | "inquirer": "^5.2.0", 5 | "pg": "^7.12.1" 6 | }, 7 | "scripts": { 8 | "start": "node index.js" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/auth0-assessment.md: -------------------------------------------------------------------------------- 1 | # Assessment #9.5: Auth0 2 | 3 | ### Languages 4 | 5 | - JS 6 | 7 | ### Tools 8 | 9 | - Auth0 10 | 11 | ### Primary Goals 12 | 13 | Demonstrate understanding of how to add oauth user authorization to a project with Auth0. 14 | 15 | ### Overview 16 | 17 | In this project, you will add Auth0 to your jQuery/SQL version of Eventonica. 18 | 19 | ### Context 20 | 21 | - This week you added Auth0 to your React/Enzyme/Mongo version of Eventonica. You have 2 hours to do the same with your earlier jQuery/SQL version of Eventonica. 22 | 23 | ### Basic Requirements 24 | 25 | 1. Your Auth0 secrets must be stored in an .env file. 26 | 2. You should make a new branch in your project called "auth" and add your new code there; you shouldn't have to worry about it messing up your main branch. 27 | 3. Push your final code (except the .env) up to GitHub, and send the repo URL to your Program Manager. 28 | -------------------------------------------------------------------------------- /projects/data-structures-algorithms-assessment.md: -------------------------------------------------------------------------------- 1 | # Data Structures and Algorithms Worksheet 2 | 3 | [(Worksheet Objectives / Grading Guide)](../objectives/11.md) 4 | 5 | ### Directions: For each of these data structures and algorithms, please explain in a few sentences: 6 | 7 | - what it is used for 8 | - what its advantages are (mention run-times when possible!) 9 | - the high-level ideas of how it is implemented 10 | 11 | ## Topics: 12 | 13 | - [ ] Stacks 14 | - [ ] Queues 15 | - [ ] Linked lists 16 | - [ ] Hash Table 17 | - [ ] Trees 18 | - [ ] Linear Search 19 | - [ ] Depth First and Breadth First Searches 20 | - [ ] Binary Search 21 | - [ ] Compare and contrast a few sorting algorithms 22 | 23 | ### Submission: 24 | 25 | Please put your answers in a _private gist_ and Slack the link to SEAM 26 | -------------------------------------------------------------------------------- /projects/eventonica-legacy/eventonica-part3-react.md: -------------------------------------------------------------------------------- 1 | # [LEGACY] Eventonica - React UI 2 | 3 | 🚧 This lesson was moved around as part of [Eventonica 2021 Improvement Epic](https://github.com/Techtonica/curriculum/issues/1296). 4 | 5 | The relevant contents can be found in [./eventonica-part7-react.md](./eventonica-part7-react.md). 6 | -------------------------------------------------------------------------------- /projects/eventonica-legacy/eventonica-part7-testing.md: -------------------------------------------------------------------------------- 1 | # [LEGACY] Eventonica - Jasmine Unit Testing 2 | 3 | 🚧 This lesson was moved around as part of [Eventonica 2021 Improvement Epic](https://github.com/Techtonica/curriculum/issues/1296). 4 | 5 | The relevant contents can be found in [./eventonica-part2-testing.md](./eventonica-part2-testing.md). 6 | -------------------------------------------------------------------------------- /projects/eventonica-legacy/starter-code/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/eventonica-legacy/starter-code/calendar.png -------------------------------------------------------------------------------- /projects/eventonica-legacy/starter-code/index.css: -------------------------------------------------------------------------------- 1 | fieldset { 2 | border: none; 3 | margin: 1rem 0; 4 | } 5 | 6 | header { 7 | /* For more about flexbox, see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ 8 | display: flex; 9 | align-items: center; 10 | } 11 | 12 | header img { 13 | height: 64px; 14 | margin-right: 1em; 15 | } 16 | 17 | main { 18 | display: flex; 19 | justify-content: space-between; 20 | } 21 | 22 | aside { 23 | margin-left: 2em; 24 | } 25 | 26 | footer { 27 | margin-top: 1rem; 28 | font-size: small; 29 | color: gray; 30 | } 31 | -------------------------------------------------------------------------------- /projects/eventonica-legacy/starter-code/models.js: -------------------------------------------------------------------------------- 1 | let _nextId = 100; 2 | function generateId() { 3 | return _nextId++; 4 | } 5 | 6 | /** 7 | * Paste your code from Part 1 into this file but keep the module check at the very end. 8 | * (The following is a just a small subset for the Add Event form on the example page to work) 9 | */ 10 | class Event { 11 | constructor(name) { 12 | this.name = name; 13 | this.id = generateId(); 14 | // attributes you choose will go here 15 | } 16 | } 17 | 18 | class User {} 19 | 20 | class Eventonica { 21 | constructor() { 22 | this.allUsers = []; 23 | this.allEvents = []; 24 | } 25 | 26 | addEvent(name) { 27 | const event = new Event(name); 28 | this.allEvents.push(event); 29 | return event; 30 | } 31 | 32 | getAllEvents() { 33 | return this.allEvents; 34 | } 35 | } 36 | 37 | if (typeof module !== "undefined") { 38 | module.exports = { Eventonica, User, Event }; 39 | } 40 | -------------------------------------------------------------------------------- /projects/final-project/data-model-schema.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/final-project/data-model-schema.png -------------------------------------------------------------------------------- /projects/final-project/user-flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/final-project/user-flow.png -------------------------------------------------------------------------------- /projects/final-project/wireframe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/final-project/wireframe.png -------------------------------------------------------------------------------- /projects/portfolio/Create-repo-no-README-no-.gitignore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/portfolio/Create-repo-no-README-no-.gitignore.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr-dommanipulation1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr-dommanipulation1.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr-dommanipulation2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr-dommanipulation2.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr-dommanipulation3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr-dommanipulation3.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr-example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr-example-1.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr-example-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr-example-2.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr-example-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr-example-3.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr-url.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr1.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr2-branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr2-branch.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr3-commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr3-commit.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr4-push.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr4-push.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr5.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr6.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr7.png -------------------------------------------------------------------------------- /projects/pr-screenshot/pr8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/pr-screenshot/pr8.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/Screen Shot 2018-01-17 at 3.05.48 PM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/Screen Shot 2018-01-17 at 3.05.48 PM.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/after-google-font-import.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/after-google-font-import.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/background-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/background-color.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/blue-blurb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/blue-blurb.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/change-header-colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/change-header-colors.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/complete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/complete.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/constrained-description.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/constrained-description.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/copy-font-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/copy-font-code.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/float-left-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/float-left-left.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/float-left-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/float-left-right.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/get-font-embeded-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/get-font-embeded-code.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/get-font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/get-font.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/git-status-static-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/git-status-static-folder.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/google-font-monoton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/google-font-monoton.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/google-font-selection-expanded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/google-font-selection-expanded.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/google-font-selection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/google-font-selection.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/intended_layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/intended_layout.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/step3-title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/step3-title.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/step4-blurb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/step4-blurb.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/step5-ingredients.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/step5-ingredients.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/step6-instructions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/step6-instructions.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/step7-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/step7-image.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/step7-photo-credit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/step7-photo-credit.png -------------------------------------------------------------------------------- /projects/recipe-page/screenshots/step8-other-recipes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/projects/recipe-page/screenshots/step8-other-recipes.png -------------------------------------------------------------------------------- /react-js/README.md: -------------------------------------------------------------------------------- 1 | # React Lessons 2 | 3 | React is a very popular framework for building web apps. 4 | 5 | - [Intro to React](./react-part-1-intro.md) 6 | - [React Props](./react-part-2-props.md) 7 | - [React State](./react-part-3-state.md) 8 | - [React Components & Hierarchies](./react-part-4-component-hierarchies.md) 9 | - [Full-stack Apps with Create React App](./react-part-5-full-apps.md) 10 | - App Architecture - [Open Issue #1338](https://github.com/Techtonica/curriculum/issues/1338) 11 | 12 | ### Feedback Wanted 13 | 14 | We're focusing on improving our React content. If you have ideas, feel free to add them to our [Improve React Epic](https://github.com/Techtonica/curriculum/issues/1301) 15 | -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:react/recommended", 7 | "plugin:react/jsx-runtime", 8 | "plugin:react-hooks/recommended" 9 | ], 10 | ignorePatterns: ["dist", ".eslintrc.cjs"], 11 | parserOptions: { ecmaVersion: "latest", sourceType: "module" }, 12 | settings: { react: { version: "18.2" } }, 13 | plugins: ["react-refresh"], 14 | rules: { 15 | "react-refresh/only-export-components": [ 16 | "warn", 17 | { allowConstantExport: true } 18 | ] 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | package-lock.json 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | 27 | # dependencies 28 | 29 | /.pnp 30 | .pnp.js 31 | 32 | # testing 33 | /coverage 34 | 35 | # production 36 | /build 37 | 38 | # misc 39 | .DS_Store 40 | .env.local 41 | .env.development.local 42 | .env.test.local 43 | .env.production.local -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "passingprops", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.37", 18 | "@types/react-dom": "^18.2.15", 19 | "@vitejs/plugin-react": "^4.3.4", 20 | "eslint": "^8.53.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.4", 24 | "vite": "^6.3.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Form from "./components/form.jsx"; 3 | import Message from "./components/message.jsx"; 4 | import "./App.css"; 5 | 6 | function App() { 7 | const [userEmail, setUserEmail] = useState(""); 8 | 9 | const handleReceiveData = (data) => { 10 | setUserEmail(data); 11 | }; 12 | 13 | return ( 14 | <> 15 |
16 |

Hello Techtonica

17 |
18 | {!userEmail ? null : } 19 |
20 | 21 | ); 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/src/components/form.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | function Form({ onSendData }) { 4 | const [inputValue, setInputValue] = useState(""); 5 | 6 | const handleInputChange = (e) => { 7 | setInputValue(e.target.value); 8 | }; 9 | 10 | const handleSendData = () => { 11 | onSendData(inputValue); 12 | }; 13 | 14 | return ( 15 |
16 | 22 | 23 |
24 | ); 25 | } 26 | 27 | export default Form; 28 | -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/src/components/message.jsx: -------------------------------------------------------------------------------- 1 | function Message({ email }) { 2 | return ( 3 |
4 | {!email ? null :

Thank you for submiting your email: {email}

} 5 |
6 | ); 7 | } 8 | 9 | export default Message; 10 | -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render( 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /react-js/quizzes/passingprops/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }); 8 | -------------------------------------------------------------------------------- /recursion/pnr-hierarchy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/recursion/pnr-hierarchy.png -------------------------------------------------------------------------------- /recursion/recursion-bear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/recursion/recursion-bear.jpg -------------------------------------------------------------------------------- /runtime-complexity/34_21-FibonacciBlocks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Techtonica/curriculum/1ac035d33ef1d5fe554c8c4d42af2c290de571f6/runtime-complexity/34_21-FibonacciBlocks.png -------------------------------------------------------------------------------- /runtime-complexity/README.md: -------------------------------------------------------------------------------- 1 | ## Running the Chart Code 2 | 3 | 1. Install `browserify` like this: `npm install -g browserify` 4 | 2. Bundle `runtime.js` and all its dependencies: `browserify runtime.js -o bundle.js` 5 | 3. Open `index.html` in your browser 6 | -------------------------------------------------------------------------------- /runtime-complexity/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 |
22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /runtime-complexity/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "performance-now": "^2.1.0", 4 | "chart.js": "2.7.2", 5 | "randomstring": "^1.1.5" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /testing-and-tdd/jasmine-pair-activity.js: -------------------------------------------------------------------------------- 1 | /* 2 | Take this source file as a starting point and copy it into a new folder in your personal assignments repo. 3 | 4 | Implement a function called invert. 5 | 6 | Creates an object composed of the inverted keys and values of object. If object contains duplicate values, subsequent values overwrite property assignments of previous values. 7 | 8 | let object = { 'a': 1, 'b': 2, 'c': 1 }; 9 | 10 | invert(object); 11 | // => { '1': 'c', '2': 'b' } 12 | 13 | Implement this function and then create Jasmine tests to verify its 14 | correctness. Think of all the input that could come in and decide 15 | what to do with them via tests. 16 | */ 17 | 18 | function invert() {} 19 | -------------------------------------------------------------------------------- /web/jquery-programming-fundamentals/static/js/myScript.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | // console.log('myScript.js loaded!'); 3 | $("#red-sentence").click(function () { 4 | // First remove the purple-text class in case it was added first. 5 | $(this).removeClass("purple-text"); 6 | // Then add the red-text class to turn the sentence red. 7 | $(this).addClass("red-text"); 8 | }); 9 | 10 | $("#blue-button").click(function () { 11 | // We can also "chain" methods together like this: 12 | $("#blue-sentence").removeClass("purple-text").addClass("blue-text"); 13 | }); 14 | 15 | $("#purple-button").click(function () { 16 | $(".colorful-sentence").addClass("purple-text"); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /web/jquery.md: -------------------------------------------------------------------------------- 1 | # jQuery 2 | 3 | Originally part of the Techtonica curriculum, our jQuery lesson was retired in 2020. Although still popular in legacy projects, jQuery is unnecessary with modern browsers since they all provide standardized DOM manipulation functions. 4 | 5 | - If you're looking to learn how to manipulate the DOM without a framework, see [JavaScript DOM Methods](./js-dom-methods.md) 6 | - If you're looking to make web applications, see [React Lessons](../react-js) 7 | -------------------------------------------------------------------------------- /web/js-dom-methods-walkthrough/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM methods practice 7 | 8 | 9 | 10 | 21 | 22 | 23 | 24 | --------------------------------------------------------------------------------