From 36600ba138a2a645aeda325b8c507ce2a3ddce9f Mon Sep 17 00:00:00 2001 From: "Kaylah Rose M." <111713452+kaylahrose@users.noreply.github.com> Date: Thu, 10 Apr 2025 23:09:25 -0700 Subject: [PATCH 01/20] Add deprecation notice --- react-js/react-part-5-full-apps.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/react-js/react-part-5-full-apps.md b/react-js/react-part-5-full-apps.md index 0074ed4b6..a28008e82 100644 --- a/react-js/react-part-5-full-apps.md +++ b/react-js/react-part-5-full-apps.md @@ -1,4 +1,5 @@ -# React Part 5 - Full Apps using React Using Vite +# [DEPRECATED] +## React Part 5 - Full Apps using React Using Vite ## Projected Time From 922a8c7dff1a96faaf9f8797e0dd0725c0b8ee9a Mon Sep 17 00:00:00 2001 From: "Kaylah Rose M." <111713452+kaylahrose@users.noreply.github.com> Date: Thu, 10 Apr 2025 23:10:52 -0700 Subject: [PATCH 02/20] Remove create-react-app --- testing-and-tdd/jest.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/testing-and-tdd/jest.md b/testing-and-tdd/jest.md index c4f3735b5..8418518a8 100644 --- a/testing-and-tdd/jest.md +++ b/testing-and-tdd/jest.md @@ -54,7 +54,7 @@ _Participants will be able to:_ #### Jest Testing -The nice thing about using Jest with React is that it is already included in projects built with `create-react-app` or a React + Vite project. You should just be able to run `npm test` in both a `create-react-app` and React + Vite project and it should run Jest. If your project was started another way besides CRA or React + Vite, you can still [install jest](https://jestjs.io/docs/getting-started) with `npm install --save-dev jest` or `yarn add --dev jest`. +The nice thing about using Jest with React is that it is already included in projects built with `create-react-app` or a React + Vite project. You should just be able to run `npm test` in both a `create-react-app` and React + Vite project and it should run Jest. If your project was started another way besides React + Vite, you can still [install jest](https://jestjs.io/docs/getting-started) with `npm install --save-dev jest` or `yarn add --dev jest`. 1. Spend 5 minutes looking at the jest landing page: https://jestjs.io/ From 6ddf7d45d86aa0e2444b7ba4c2b9122c325b4969 Mon Sep 17 00:00:00 2001 From: "Kaylah Rose M." <111713452+kaylahrose@users.noreply.github.com> Date: Thu, 10 Apr 2025 23:12:44 -0700 Subject: [PATCH 03/20] Remove create-react-app --- deploying/deploying.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/deploying/deploying.md b/deploying/deploying.md index 0683ed9ef..f63091ee9 100644 --- a/deploying/deploying.md +++ b/deploying/deploying.md @@ -178,12 +178,6 @@ Ensure you don't have any missing files: `git status` and commit them if you nee Lastly, we'll configure your React frontend client to work seamlessly with your express server backend locally, even though they're running on two different ports. -create-react-app: add the following line to `client/package.json`: - -``` -"proxy": "http://localhost:3000/" -``` - React + Vite: add the following line to `client/vite.config.js`: ``` @@ -204,7 +198,7 @@ server: { - Don't forget to configure `port` to come from `process.env` - Use `heroku logs --tail` to see what's wrong -All done! Small differences in the way you've set up your site may make bits of this process not work as expected, so there may be some debugging required. Here is a sample repository you can refer to https://github.com/esausilva/example-create-react-app-express +All done! Small differences in the way you've set up your site may make bits of this process not work as expected, so there may be some debugging required. ### Supplemental Resources From b4587a9e255b81db01b46b75368819e0d0121347 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Wed, 14 May 2025 15:59:11 -0700 Subject: [PATCH 04/20] Remove create react app tutorial --- .github/ISSUE_TEMPLATE/config.yml | 2 +- code-challenges/README.md | 9 ++- .../Week_10/Boolean-to-String-Conversion.js | 2 +- code-challenges/Week_10/Climbing-Stairs.js | 2 +- code-challenges/Week_10/Largest-Swap.js | 2 +- code-challenges/Week_10/Nested-Array.js | 2 +- .../Week_11/Find-the-Missing-Number.js | 2 +- code-challenges/Week_11/How-Many-Vowels.js | 58 +++++++++---------- .../Week_11/Remove-Vowel-from-a-String.js | 13 ++--- code-challenges/Week_12/Find-the-Time.js | 2 +- code-challenges/Week_12/Trick-or-Treat.js | 2 +- code-challenges/Week_12/Valid-Palindrome.js | 2 +- .../Week_13/Find-Lucky-Integer-in-Array.js | 2 +- .../Week_13/Longest-Palindrome-Substring.js | 2 +- code-challenges/Week_13/Palindrome-Regex.js | 2 +- .../Week_13/Sort-by-String-Length.js | 2 +- .../Week_14/Converting-Objects-to-Arrays.js | 2 +- code-challenges/Week_14/String-Cleaning.js | 2 +- .../Week_14/Switching-Between-Pencils.js | 2 +- code-challenges/Week_15/Check-Same-Case.js | 2 +- .../Remove-Trailing-and-Leading-Zeroes.js | 2 +- code-challenges/Week_15/Short-Long-Short.js | 2 +- ...Number-with-Commas-Separating-Thousands.js | 2 +- code-challenges/Week_16/Online-Shopping.js | 2 +- ...eturn-the-Middle-Characters-of-a-String.js | 2 +- .../Week_17/Assign-Person-to-Occupation.js | 2 +- .../Week_17/Is-the-Word-an-Isogram.js | 2 +- .../Week_17/Lowercase-and-Uppercase-Map.js | 2 +- code-challenges/Week_18/Zip-It-If-You-Can.js | 2 +- code-challenges/Week_2/array_search.js | 2 +- code-challenges/Week_2/search_and_replace.js | 15 +---- code-challenges/Week_2/string_manipulation.js | 2 +- .../Week_3/Display_User_Name_in_Greeting.js | 18 ++---- code-challenges/Week_3/HackerRank_Loops.js | 2 - code-challenges/Week_4/Filter_and_Reduce.js | 2 +- .../index.html | 8 ++- .../src/App.css | 2 +- .../src/App.jsx | 6 +- .../src/index.jsx | 16 ++--- .../vite.config.js | 8 +-- code-challenges/Week_4/Map_Practice.js | 22 ++++--- .../Week_5/Pop_Shift_and_Unshift_Elements.js | 3 - .../Remove_Duplicates_and_Add_Elements.js | 2 - .../Reverse_and_Rotate_Array_Elements.js | 2 - .../Week_6/Object_Keys_Values_For-Of.js | 14 ++--- code-challenges/Week_6/Sort_Some_and_Every.js | 32 ++++------ .../Working_with_Promises.js | 23 +------- .../Week_7/Remove_Duplicates_from_Array.js | 5 +- .../Spread_an_Array_into_Another_Array.js | 8 +-- .../Ternary_Operator_for_Conditional.js | 10 +--- .../package.json | 25 ++++---- .../userController.js | 26 ++++----- .../userService.js | 28 ++++----- .../Week_8/Working_with_Arrays_and_Objects.js | 2 +- .../README.md | 16 ++--- .../index.html | 8 ++- .../package.json | 45 +++++++------- .../src/App.css | 2 +- .../src/App.jsx | 8 +-- .../src/index.jsx | 16 ++--- .../tsconfig.json | 39 ++++++------- .../vite.config.js | 8 +-- .../Find-the-Longest-Word-in-a-String.js | 2 +- .../Week_9/Return-the-Sum-of-Two-Numbers.js | 2 +- command-line/env.md | 17 +++--- .../Divs_and_DOM_Manipulation/index.html | 29 ++++------ .../Divs_and_DOM_Manipulation/script.js | 4 +- .../Divs_and_DOM_Manipulation/style.css | 16 +++-- .../week-1/Modeling-A-Bank-Account/index.js | 5 -- .../week-1/Week-1-PP-Slice-and-Split/index.js | 15 +---- .../index.html | 25 ++++---- .../style.css | 2 +- .../week-3/Object_Literals_Maps_and_Sets.js | 1 - .../style.css | 2 +- ...forEach_for_while_and_switch_statements.js | 8 --- pair-programming/week-4/react-props/README.md | 1 + .../week-4/react-props/index.html | 8 ++- .../week-4/react-props/src/App.jsx | 16 ++--- .../week-4/react-props/src/index.jsx | 16 ++--- .../week-4/react-props/vite.config.js | 8 +-- .../week-5/Counter_App/index.html | 8 ++- .../week-5/Counter_App/src/index.jsx | 18 +++--- .../week-5/Counter_App/vite.config.js | 8 +-- .../week-5/Weather_Forecast_App/README.md | 10 ++-- .../week-5/Weather_Forecast_App/index.html | 8 ++- .../week-5/Weather_Forecast_App/src/App.jsx | 2 +- .../Weather_Forecast_App/src/Weather.jsx | 34 +++++------ .../week-5/Weather_Forecast_App/src/index.jsx | 18 +++--- .../Weather_Forecast_App/vite.config.js | 8 +-- .../Factorial_Calculation_Using_Recursion.js | 14 ++--- .../react-express-app/react-expressjs.md | 3 +- practice/effective-performance-reviews.md | 41 ++++++++++--- projects/react-game.md | 1 - projects/recipe-page/phase-2-css-prompt.md | 2 +- projects/rest-api-project.md | 1 + react-js/react-part-1-intro.md | 2 +- react-js/react-part-5-full-apps.md | 1 + 97 files changed, 416 insertions(+), 497 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index ec4bb386b..3ba13e0ce 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1 +1 @@ -blank_issues_enabled: false \ No newline at end of file +blank_issues_enabled: false diff --git a/code-challenges/README.md b/code-challenges/README.md index 83036bb74..7a7e36020 100644 --- a/code-challenges/README.md +++ b/code-challenges/README.md @@ -1,4 +1,4 @@ -Participants will be provided a prompted code-challenge. Work on it for 20 minutes! Your code challenge block will be used to go over any questions you may have. Every week you will [screen record](https://docs.google.com/document/d/1LWUXCqAlOBhyhp5Mg5bkB-78O64tPztU5miDOMQ_unM/edit?usp=sharing) a single code-challenge in addition to your [Yoodli](https://yoodli.ai/) core skills review. That’s two recordings each week! You will receive feedback at the beginning of the following week. +Participants will be provided a prompted code-challenge. Work on it for 20 minutes! Your code challenge block will be used to go over any questions you may have. Every week you will [screen record](https://docs.google.com/document/d/1LWUXCqAlOBhyhp5Mg5bkB-78O64tPztU5miDOMQ_unM/edit?usp=sharing) a single code-challenge in addition to your [Yoodli](https://yoodli.ai/) core skills review. That’s two recordings each week! You will receive feedback at the beginning of the following week. 🎗️ **Reminder:** any stated challenges in your code problems should be after-thoughts - you can begin to apply the challenge once you’ve already solved the main challenge objective(s). @@ -7,20 +7,25 @@ Participants will be provided a prompted code-challenge. Work on it for 20 minut Lastly, for your core skills mock interviews, challenge yourself to not have scripted answers! Do NOT write your answers down and read them off. You can definitely go through the exercise of practicing answering questions, but then put those written answers away while you are interviewing. In most real world interviews, you won't always have the chance to write your answers out in advance of an interview. Challenge yourself to answer these questions in the moment so that you can really practice what it's like to organically collect your thoughts and think on the spot! That said, you can have your two employer questions written down. In fact, it is good practice to have a list of questions to ask the interviewer; you are thinking through which questions to ask, to develop your list! ### 💡 Mondays will be used to review feedback -Mondays will be used to review the feedback of your recorded session from the previous week. Consider and rework your answers to incorporate any actionable changes. + +Mondays will be used to review the feedback of your recorded session from the previous week. Consider and rework your answers to incorporate any actionable changes. ### 🧠 How to Solve Code Challenges + Review the [lesson](https://github.com/Techtonica/curriculum/blob/main/solving-coding-challenges/solving-coding-challenges.md) on how to address problem-solving technical questions. Practice in your own time with this code challenge. ### 🎦 Recorded Interviews (Weeks 1 - 8) + Each Wednesday you will record your code challenge and core skills interviews, and add it into your “Growth Feedback” sheet. That’s two recordings each week! You will receive feedback at the beginning of the following week. If you are using resources while on your recorded interview, be sure you are sharing your screen with the interviewer and including them in on your research - this is another part of including them in on your thought process. ### 💬 Mock Interviews & Optional Recorded Interviews (Weeks 9 - 18) + In the coming weeks, you will focus on using less resources to problem solve, you won't always be able to use google or external resources when interviewing. If it is unclear to you at the time of interviewing, that is something that you should explicitly ask. A major part of these technical interviews, beyond knowing how to code and having methods memorized, is showing that you can communicate - so walk through your thought processes and share them with the interviewer. ## Resources: + - 🌐 [Edabit](https://edabit.com/challenges) - 🌐 [codewars](https://www.codewars.com/) - 🤓 [Solving Code Challenges](https://github.com/Techtonica/curriculum/blob/main/solving-coding-challenges/solving-coding-challenges.md) diff --git a/code-challenges/Week_10/Boolean-to-String-Conversion.js b/code-challenges/Week_10/Boolean-to-String-Conversion.js index cc772b303..d2f5df1aa 100644 --- a/code-challenges/Week_10/Boolean-to-String-Conversion.js +++ b/code-challenges/Week_10/Boolean-to-String-Conversion.js @@ -5,4 +5,4 @@ Example: Example: Input: boolean false Input: boolean true Output: "false" Output: “true” -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_10/Climbing-Stairs.js b/code-challenges/Week_10/Climbing-Stairs.js index 857318a56..209ae9a1f 100644 --- a/code-challenges/Week_10/Climbing-Stairs.js +++ b/code-challenges/Week_10/Climbing-Stairs.js @@ -16,4 +16,4 @@ Explanation: There are 3 ways to the top. 1. 1 step + 1 step + 1 step 2. 1 step + 2 steps 3. 2 steps + 1 step -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_10/Largest-Swap.js b/code-challenges/Week_10/Largest-Swap.js index 454d0882e..073ab14ca 100644 --- a/code-challenges/Week_10/Largest-Swap.js +++ b/code-challenges/Week_10/Largest-Swap.js @@ -14,4 +14,4 @@ Example 2: Input : 432 Output : 432 Explanation:Here, no swap is required. The given number is already the largest. -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_10/Nested-Array.js b/code-challenges/Week_10/Nested-Array.js index b66c649b8..82d2a9ae7 100644 --- a/code-challenges/Week_10/Nested-Array.js +++ b/code-challenges/Week_10/Nested-Array.js @@ -12,4 +12,4 @@ canNest([9, 9, 8], [8, 9]) ➞ false canNest([1, 2, 3, 4], [2, 3]) ➞ false -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_11/Find-the-Missing-Number.js b/code-challenges/Week_11/Find-the-Missing-Number.js index a4677892b..b240c9633 100644 --- a/code-challenges/Week_11/Find-the-Missing-Number.js +++ b/code-challenges/Week_11/Find-the-Missing-Number.js @@ -7,4 +7,4 @@ missingNum([1, 2, 3, 4, 6, 7, 8, 9, 10]) ➞ 5 missingNum([7, 2, 3, 6, 5, 9, 1, 4, 8]) ➞ 10 missingNum([10, 5, 1, 2, 4, 6, 8, 3, 9]) ➞ 7 -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_11/How-Many-Vowels.js b/code-challenges/Week_11/How-Many-Vowels.js index 20a6ec82d..79e6821c1 100644 --- a/code-challenges/Week_11/How-Many-Vowels.js +++ b/code-challenges/Week_11/How-Many-Vowels.js @@ -1,7 +1,7 @@ // Given a string, count the total number of vowels (a, e, i, o, u) in it. // Example 1: Example 2: -// Input: ”abc de” Input: ”geeksforgeeks portal” +// Input: ”abc de” Input: ”geeksforgeeks portal” // Output: 2 Output: 7 // Challenge: Think about how you can you solve this recursively after solving the problem. @@ -22,39 +22,39 @@ RECURSIVELY */ -function countVowels(str){ - // check if the input is a string is a - if (typeof str !== 'string'){ - return "Input must be a string"; +function countVowels(str) { + // check if the input is a string is a + if (typeof str !== "string") { + return "Input must be a string"; + } + // - define a set of vowels that we should count, lower/uppercase + const vowels = "aeiouAEIOU"; + // init counter + let count = 0; + // - iterate through each character in the string provided + for (let char of str) { + // - check if each character is in fact a vowel based on vowels given + if (vowels.includes(char)) { + // - increment counter for each vowel found + count++; } - // - define a set of vowels that we should count, lower/uppercase - const vowels ='aeiouAEIOU'; - // init counter - let count = 0; - // - iterate through each character in the string provided - for (let char of str){ - // - check if each character is in fact a vowel based on vowels given - if (vowels.includes(char)){ - // - increment counter for each vowel found - count++; - } - } - // - return total count - return count; + } + // - return total count + return count; } // console.log(countVowels('abc de')); // 2 // console.log(countVowels('geeksforgeeks portal')); // 7 -function countVowelsRecursive(str){ -// - base case: empty string length - if(str.length === 0) return 0; -// - check if the first character is a vowel - const vowels ='aeiouAEIOU'; - const isVowel = vowels.includes(str[0]); -// - recursively call the rest of the string - return (isVowel ? 1 : 0) + countVowelsRecursive(str.slice(1)); +function countVowelsRecursive(str) { + // - base case: empty string length + if (str.length === 0) return 0; + // - check if the first character is a vowel + const vowels = "aeiouAEIOU"; + const isVowel = vowels.includes(str[0]); + // - recursively call the rest of the string + return (isVowel ? 1 : 0) + countVowelsRecursive(str.slice(1)); } -console.log(countVowelsRecursive('abc de')); // 2 -console.log(countVowelsRecursive('geeksforgeeks portal')); // 7 \ No newline at end of file +console.log(countVowelsRecursive("abc de")); // 2 +console.log(countVowelsRecursive("geeksforgeeks portal")); // 7 diff --git a/code-challenges/Week_11/Remove-Vowel-from-a-String.js b/code-challenges/Week_11/Remove-Vowel-from-a-String.js index 0659954ac..e4bfa1955 100644 --- a/code-challenges/Week_11/Remove-Vowel-from-a-String.js +++ b/code-challenges/Week_11/Remove-Vowel-from-a-String.js @@ -1,13 +1,12 @@ // 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. -// Example 1: -// Input: arr[] = -// {1, 2, 4, 6, 3, 7, 8}, N = 8 -// Output: 5 -// Explanation: The missing number between 1 to 8 is 5 +// Example 1: +// Input: arr[] = +// {1, 2, 4, 6, 3, 7, 8}, N = 8 +// Output: 5 +// Explanation: The missing number between 1 to 8 is 5 -// Example 2: +// Example 2: // Input: arr[] = {1, 2, 3, 5}, N = 5 // Output: 4 // Explanation: The missing number between 1 to 5 is 4 - diff --git a/code-challenges/Week_12/Find-the-Time.js b/code-challenges/Week_12/Find-the-Time.js index 706f1e2f7..21c0a84c3 100644 --- a/code-challenges/Week_12/Find-the-Time.js +++ b/code-challenges/Week_12/Find-the-Time.js @@ -10,4 +10,4 @@ Output: 12:00 Example 2 Input: Their daughter was born at 03:00am at 55 Melbourne Dr Output: 03:00 -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_12/Trick-or-Treat.js b/code-challenges/Week_12/Trick-or-Treat.js index ef00214e5..1e0df38af 100644 --- a/code-challenges/Week_12/Trick-or-Treat.js +++ b/code-challenges/Week_12/Trick-or-Treat.js @@ -6,4 +6,4 @@ timeForTrickOrTreat(new Date(2013, 9, 31)) ➞ true timeForTrickorTreat(new Date(2013, 0, 23)) ➞ false timeForTrickorTreat(new Date(3000, 9, 31)) ➞ true -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_12/Valid-Palindrome.js b/code-challenges/Week_12/Valid-Palindrome.js index 3b5235cb1..f77204667 100644 --- a/code-challenges/Week_12/Valid-Palindrome.js +++ b/code-challenges/Week_12/Valid-Palindrome.js @@ -17,4 +17,4 @@ Output: true Explanation: s is an empty string "" after removing non-alphanumeric characters. Since an empty string reads the same forward and backward, it is a palindrome. -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_13/Find-Lucky-Integer-in-Array.js b/code-challenges/Week_13/Find-Lucky-Integer-in-Array.js index 612b510e7..1dbfa6885 100644 --- a/code-challenges/Week_13/Find-Lucky-Integer-in-Array.js +++ b/code-challenges/Week_13/Find-Lucky-Integer-in-Array.js @@ -16,4 +16,4 @@ Example 3: Input: arr = [2,2,2,3,3] Output: -1 Explanation: There are no lucky numbers in the array. -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_13/Longest-Palindrome-Substring.js b/code-challenges/Week_13/Longest-Palindrome-Substring.js index ee4787fb3..c0205fb66 100644 --- a/code-challenges/Week_13/Longest-Palindrome-Substring.js +++ b/code-challenges/Week_13/Longest-Palindrome-Substring.js @@ -9,4 +9,4 @@ Explanation: "aba" is also a valid answer. Example 2: Input: s = "cbbd" Output: "bb" -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_13/Palindrome-Regex.js b/code-challenges/Week_13/Palindrome-Regex.js index cfa63a014..7d68fb05d 100644 --- a/code-challenges/Week_13/Palindrome-Regex.js +++ b/code-challenges/Week_13/Palindrome-Regex.js @@ -9,4 +9,4 @@ Output: False Example 2: Input: “0_0 (: /-\ :) 0–0” Output: true -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_13/Sort-by-String-Length.js b/code-challenges/Week_13/Sort-by-String-Length.js index 7de72847d..801dbd981 100644 --- a/code-challenges/Week_13/Sort-by-String-Length.js +++ b/code-challenges/Week_13/Sort-by-String-Length.js @@ -7,4 +7,4 @@ sortByLength(["apple", "pie", "shortcake"]) ➞ ["pie", "apple", "shortcake"] sortByLength(["may", "april", "september", "august"]) ➞ ["may", "april", "august", "september"] sortByLength([]) ➞ [] -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_14/Converting-Objects-to-Arrays.js b/code-challenges/Week_14/Converting-Objects-to-Arrays.js index 4d15724cc..7934e236d 100644 --- a/code-challenges/Week_14/Converting-Objects-to-Arrays.js +++ b/code-challenges/Week_14/Converting-Objects-to-Arrays.js @@ -12,4 +12,4 @@ Input: let myObj = { }; Output: ["name", "address", "age"] -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_14/String-Cleaning.js b/code-challenges/Week_14/String-Cleaning.js index 5200dbe8a..27a92bcdf 100644 --- a/code-challenges/Week_14/String-Cleaning.js +++ b/code-challenges/Week_14/String-Cleaning.js @@ -5,4 +5,4 @@ Example 1 Example 2 Example 3 Input: '! !' Input:'123456789' Input: 'This looks5 grea8t!' Output: '! !' Output: '' Output: 'This looks great!' -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_14/Switching-Between-Pencils.js b/code-challenges/Week_14/Switching-Between-Pencils.js index cb98a832d..d2deca241 100644 --- a/code-challenges/Week_14/Switching-Between-Pencils.js +++ b/code-challenges/Week_14/Switching-Between-Pencils.js @@ -14,4 +14,4 @@ colorPatternTimes(["Red", "Yellow", "Green", "Blue"]) ➞ 11 colorPatternTimes(["Blue", "Blue", "Blue", "Red", "Red", "Red"]) ➞ 13 -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_15/Check-Same-Case.js b/code-challenges/Week_15/Check-Same-Case.js index 27e643771..0bce81481 100644 --- a/code-challenges/Week_15/Check-Same-Case.js +++ b/code-challenges/Week_15/Check-Same-Case.js @@ -7,4 +7,4 @@ Examples 'B' and 'g' returns 0 '0' and '?' returns -1 -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_15/Remove-Trailing-and-Leading-Zeroes.js b/code-challenges/Week_15/Remove-Trailing-and-Leading-Zeroes.js index 144fac0b4..7aec396d2 100644 --- a/code-challenges/Week_15/Remove-Trailing-and-Leading-Zeroes.js +++ b/code-challenges/Week_15/Remove-Trailing-and-Leading-Zeroes.js @@ -15,4 +15,4 @@ removeLeadingTrailing("03.1400") ➞ "3.14" removeLeadingTrailing("30") ➞ "30" -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_15/Short-Long-Short.js b/code-challenges/Week_15/Short-Long-Short.js index 599944b35..d4e854a02 100644 --- a/code-challenges/Week_15/Short-Long-Short.js +++ b/code-challenges/Week_15/Short-Long-Short.js @@ -7,4 +7,4 @@ Input: ("1", "22") Input: ("22", "1") Output: "1221" Output: "1221" -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_16/Format-Number-with-Commas-Separating-Thousands.js b/code-challenges/Week_16/Format-Number-with-Commas-Separating-Thousands.js index a842671a5..3a33dd11d 100644 --- a/code-challenges/Week_16/Format-Number-with-Commas-Separating-Thousands.js +++ b/code-challenges/Week_16/Format-Number-with-Commas-Separating-Thousands.js @@ -7,4 +7,4 @@ formatNum(1000) ➞ "1,000" formatNum(100000) ➞ "100,000" formatNum(20) ➞ "20" -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_16/Online-Shopping.js b/code-challenges/Week_16/Online-Shopping.js index c0e1511c2..fa48e83c5 100644 --- a/code-challenges/Week_16/Online-Shopping.js +++ b/code-challenges/Week_16/Online-Shopping.js @@ -9,4 +9,4 @@ freeShipping({ "Flatscreen TV": 399.99 }) ➞ true freeShipping({ "Monopoly": 11.99, "Secret Hitler": 35.99, "Bananagrams": 13.99 }) ➞ true -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_16/Return-the-Middle-Characters-of-a-String.js b/code-challenges/Week_16/Return-the-Middle-Characters-of-a-String.js index 74cf4d259..ac4ef9cb2 100644 --- a/code-challenges/Week_16/Return-the-Middle-Characters-of-a-String.js +++ b/code-challenges/Week_16/Return-the-Middle-Characters-of-a-String.js @@ -9,4 +9,4 @@ getMiddle("middle") ➞ "dd" getMiddle("A") ➞ "A" -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_17/Assign-Person-to-Occupation.js b/code-challenges/Week_17/Assign-Person-to-Occupation.js index f1e2a5f1e..dab7d9df0 100644 --- a/code-challenges/Week_17/Assign-Person-to-Occupation.js +++ b/code-challenges/Week_17/Assign-Person-to-Occupation.js @@ -18,4 +18,4 @@ assignPersonToJob(names, jobs) ➞ { } -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_17/Is-the-Word-an-Isogram.js b/code-challenges/Week_17/Is-the-Word-an-Isogram.js index 2cdfd8712..dbf7bef66 100644 --- a/code-challenges/Week_17/Is-the-Word-an-Isogram.js +++ b/code-challenges/Week_17/Is-the-Word-an-Isogram.js @@ -8,4 +8,4 @@ isIsogram("PasSword") ➞ false // Not case sensitive. isIsogram("Consecutive") ➞ false -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_17/Lowercase-and-Uppercase-Map.js b/code-challenges/Week_17/Lowercase-and-Uppercase-Map.js index 0b36222f0..2c50888de 100644 --- a/code-challenges/Week_17/Lowercase-and-Uppercase-Map.js +++ b/code-challenges/Week_17/Lowercase-and-Uppercase-Map.js @@ -8,4 +8,4 @@ mapping(["a", "b", "c"]) ➞ { "a": "A", "b": "B", "c": "C" } mapping(["a", "v", "y", "z"]) ➞ { "a": "A", "v": "V", "y": "Y", "z": "Z" } -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_18/Zip-It-If-You-Can.js b/code-challenges/Week_18/Zip-It-If-You-Can.js index e00623f23..15c8d880c 100644 --- a/code-challenges/Week_18/Zip-It-If-You-Can.js +++ b/code-challenges/Week_18/Zip-It-If-You-Can.js @@ -12,4 +12,4 @@ zipIt(["Ana", "Amy", "Lisa"], ["Bob", "Josh"]) zipIt(["Ana", "Amy", "Lisa"], ["Bob", "Josh", "Tim"]) ➞ [["Ana", "Bob"], ["Amy", "Josh"],["Lisa", "Tim"]] -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_2/array_search.js b/code-challenges/Week_2/array_search.js index 50e4e3be7..999e62e79 100644 --- a/code-challenges/Week_2/array_search.js +++ b/code-challenges/Week_2/array_search.js @@ -8,4 +8,4 @@ console.log(findLastIndex([10, 20, 30, 40, 50], 25)); // Output: -1 console.log(findLastIndex([5, 10, 15, 20, 10, 25], 10)); // Output: 4 console.log(findLastIndex([1, 2, 3, 4, 5], 6)); // Output: 4 -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_2/search_and_replace.js b/code-challenges/Week_2/search_and_replace.js index 397407486..dfb433661 100644 --- a/code-challenges/Week_2/search_and_replace.js +++ b/code-challenges/Week_2/search_and_replace.js @@ -14,20 +14,11 @@ myReplace("Let us get back to more Coding", "Coding", "algorithms") should retur */ - - - - - - - - - - - console.log(myReplace("Let us go to the store", "store", "mall")); // "Let us go to the mall." console.log(myReplace("He is Sleeping on the couch", "Sleeping", "sitting")); // "He is Sitting on the couch." console.log(myReplace("I think we should look up there", "up", "Down")); // "I think we should look down there." console.log(myReplace("This has a spellngi error", "spellngi", "spelling")); // "This has a spelling error." console.log(myReplace("His name is Tom", "Tom", "john")); // "His name is John." -console.log(myReplace("Let us get back to more Coding", "Coding", "algorithms")); // "Let us get back to more Algorithms." \ No newline at end of file +console.log( + myReplace("Let us get back to more Coding", "Coding", "algorithms") +); // "Let us get back to more Algorithms." diff --git a/code-challenges/Week_2/string_manipulation.js b/code-challenges/Week_2/string_manipulation.js index 6678142c0..bbcdd86bd 100644 --- a/code-challenges/Week_2/string_manipulation.js +++ b/code-challenges/Week_2/string_manipulation.js @@ -9,4 +9,4 @@ console.log(findTargetIndex("programming", "abc")); // Output: -1 console.log(findTargetIndex("javascript", "script")); // Output: 4 console.log(findTargetIndex("challenge", "len")); // Output: -1 -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_3/Display_User_Name_in_Greeting.js b/code-challenges/Week_3/Display_User_Name_in_Greeting.js index 0bf6994aa..d696e6f3e 100644 --- a/code-challenges/Week_3/Display_User_Name_in_Greeting.js +++ b/code-challenges/Week_3/Display_User_Name_in_Greeting.js @@ -10,20 +10,14 @@ You may also need some of the following (but not required): */ // Do not remove the below line -const prompt = require("prompt-sync")(); +const prompt = require("prompt-sync")(); // Do not remove the above line function askForNameAndRepeat() { - - // Convert the repeat count to an integer if it's not already - - // Check if the repeat count is a number and greater than zero - - // Create an array filled with the user's name, repeated the desired number of times - - // Use concat to combine the repeated names into one string - - + // Convert the repeat count to an integer if it's not already + // Check if the repeat count is a number and greater than zero + // Create an array filled with the user's name, repeated the desired number of times + // Use concat to combine the repeated names into one string } -askForNameAndRepeat(); \ No newline at end of file +askForNameAndRepeat(); diff --git a/code-challenges/Week_3/HackerRank_Loops.js b/code-challenges/Week_3/HackerRank_Loops.js index ad8780f08..f9f5acba3 100644 --- a/code-challenges/Week_3/HackerRank_Loops.js +++ b/code-challenges/Week_3/HackerRank_Loops.js @@ -3,10 +3,8 @@ // Problem 1: Print Numbers from 1 to N // Task: Print numbers from 1 to N. - // Problem 2: Print Even Numbers from N to 1 // Task: Print even numbers from N to 1. - // Problem 3: Count Down and Up with Jump // Task: Count down from N to 1 with a jump of J, and count up from 1 to N with a jump of J. diff --git a/code-challenges/Week_4/Filter_and_Reduce.js b/code-challenges/Week_4/Filter_and_Reduce.js index e851a670b..35339ee68 100644 --- a/code-challenges/Week_4/Filter_and_Reduce.js +++ b/code-challenges/Week_4/Filter_and_Reduce.js @@ -34,4 +34,4 @@ const coffeeShops = [ ]; -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/index.html b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/index.html index 63b44c3af..38dc71c44 100644 --- a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/index.html +++ b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/index.html @@ -9,12 +9,16 @@
- + - + diff --git a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.css b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.css index 7150519b4..513d5ad3c 100644 --- a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.css +++ b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.css @@ -1,2 +1,2 @@ main { -} \ No newline at end of file +} diff --git a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.jsx b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.jsx index 5fbe64634..663462d8d 100644 --- a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.jsx +++ b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/App.jsx @@ -1,5 +1,5 @@ -import './App.css' -import Hello from './Hello'; +import "./App.css"; +import Hello from "./Hello"; export default function App() { return ( @@ -7,5 +7,5 @@ export default function App() { React ⚛️ + Vite ⚡ + Replit - ) + ); } diff --git a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/index.jsx b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/index.jsx index e128ccd68..0d1758ab8 100644 --- a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/index.jsx +++ b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/src/index.jsx @@ -1,9 +1,9 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; -ReactDOM.createRoot(document.getElementById('root')).render( - - - -) \ No newline at end of file +ReactDOM.createRoot(document.getElementById("root")).render( + + + +); diff --git a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/vite.config.js b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/vite.config.js index 7972b08f4..5cda5a675 100644 --- a/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/vite.config.js +++ b/code-challenges/Week_4/Getting_Started_with_React_Hello_Component/vite.config.js @@ -1,10 +1,10 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { - host: '0.0.0.0', + host: "0.0.0.0" } -}) +}); diff --git a/code-challenges/Week_4/Map_Practice.js b/code-challenges/Week_4/Map_Practice.js index 8caabf5ed..05322b5df 100644 --- a/code-challenges/Week_4/Map_Practice.js +++ b/code-challenges/Week_4/Map_Practice.js @@ -15,18 +15,16 @@ How you can work in this programmatically (using a function) */ - // A list of friends stored as an array of objects const myFriends = [ - { firstname: 'Isma', lastname: 'Kirby', age: 27 }, - { firstname: 'Aaliya', lastname: 'Becker', age: 35 }, - { firstname: 'Adnaan', lastname: 'Tang', age: 22 }, - { firstname: 'Rafi', lastname: 'Pearson', age: 29 }, - { firstname: 'Eshaal', lastname: 'Gould', age: 29 }, - { firstname: 'Scarlett', lastname: 'Whitehead', age: 45 }, - { firstname: 'Arslan', lastname: 'Esparza', age: 38 }, - { firstname: 'Isla-Mae', lastname: 'Hastings', age: 46 }, - { firstname: 'Eamonn', lastname: 'Vang', age: 21 }, - { firstname: 'Haya', lastname: 'Mcdougall', age: 31 }, + { firstname: "Isma", lastname: "Kirby", age: 27 }, + { firstname: "Aaliya", lastname: "Becker", age: 35 }, + { firstname: "Adnaan", lastname: "Tang", age: 22 }, + { firstname: "Rafi", lastname: "Pearson", age: 29 }, + { firstname: "Eshaal", lastname: "Gould", age: 29 }, + { firstname: "Scarlett", lastname: "Whitehead", age: 45 }, + { firstname: "Arslan", lastname: "Esparza", age: 38 }, + { firstname: "Isla-Mae", lastname: "Hastings", age: 46 }, + { firstname: "Eamonn", lastname: "Vang", age: 21 }, + { firstname: "Haya", lastname: "Mcdougall", age: 31 } ]; - diff --git a/code-challenges/Week_5/Pop_Shift_and_Unshift_Elements.js b/code-challenges/Week_5/Pop_Shift_and_Unshift_Elements.js index 5c5d75bcf..7c87ba6a0 100644 --- a/code-challenges/Week_5/Pop_Shift_and_Unshift_Elements.js +++ b/code-challenges/Week_5/Pop_Shift_and_Unshift_Elements.js @@ -3,6 +3,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. */ - - - diff --git a/code-challenges/Week_5/Remove_Duplicates_and_Add_Elements.js b/code-challenges/Week_5/Remove_Duplicates_and_Add_Elements.js index 2cfa2747c..ea7aa51b4 100644 --- a/code-challenges/Week_5/Remove_Duplicates_and_Add_Elements.js +++ b/code-challenges/Week_5/Remove_Duplicates_and_Add_Elements.js @@ -4,8 +4,6 @@ Write a function that takes an array of strings and a string item as input. The */ - - /* 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. diff --git a/code-challenges/Week_5/Reverse_and_Rotate_Array_Elements.js b/code-challenges/Week_5/Reverse_and_Rotate_Array_Elements.js index 743e783d4..75729721a 100644 --- a/code-challenges/Week_5/Reverse_and_Rotate_Array_Elements.js +++ b/code-challenges/Week_5/Reverse_and_Rotate_Array_Elements.js @@ -4,8 +4,6 @@ Write a function that takes an array as input and returns a new array with the e */ - - /* 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. diff --git a/code-challenges/Week_6/Object_Keys_Values_For-Of.js b/code-challenges/Week_6/Object_Keys_Values_For-Of.js index 6a5b0e665..a7d2b5d22 100644 --- a/code-challenges/Week_6/Object_Keys_Values_For-Of.js +++ b/code-challenges/Week_6/Object_Keys_Values_For-Of.js @@ -1,26 +1,20 @@ // Iterating Over the Values of an Object [Object.values] -const user1 = { name: 'Alice', age: 30, city: 'New York' }; +const user1 = { name: "Alice", age: 30, city: "New York" }; // console.log(Object.values(user1)); // Syntax Example // Object.values(user1).forEach((value) => console.log(value)) - - - // Iterating Over the Keys of an Object [Object.keys] -const user2 = { name: 'Alice', age: 30, city: 'New York' }; +const user2 = { name: "Alice", age: 30, city: "New York" }; // Syntax Example // Object.keys(user2).forEach((key) => console.log(key)) - - - // Iterate over an Array of Strings [For Of] // Define an array of strings -const fruits = ['apple', 'banana', 'cherry']; +const fruits = ["apple", "banana", "cherry"]; /* Syntax Example @@ -30,4 +24,4 @@ const array1 = ['a', 'b', 'c']; for (const element of array1) { console.log(element); } -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_6/Sort_Some_and_Every.js b/code-challenges/Week_6/Sort_Some_and_Every.js index afd054fe6..362690f04 100644 --- a/code-challenges/Week_6/Sort_Some_and_Every.js +++ b/code-challenges/Week_6/Sort_Some_and_Every.js @@ -1,24 +1,12 @@ // Sorting an Array of Objects by a Key [Sort] const users = [ - { name: 'Alice', age: 30 }, - { name: 'Bob', age: 25 }, - { name: 'Charlie', age: 35 } - ]; - - - - - - - // Checking if Any Element in an Array Meets a Condition [Some] - const numbers = [1, 2, 3, 4, 5]; - - - - - - - - // Checking if All Elements in an Array Meet a Condition [Every] - const evenNumbers = [2, 4, 6, 8, 10]; - \ No newline at end of file + { name: "Alice", age: 30 }, + { name: "Bob", age: 25 }, + { name: "Charlie", age: 35 } +]; + +// Checking if Any Element in an Array Meets a Condition [Some] +const numbers = [1, 2, 3, 4, 5]; + +// Checking if All Elements in an Array Meet a Condition [Every] +const evenNumbers = [2, 4, 6, 8, 10]; diff --git a/code-challenges/Week_6/Working_With_Promises/Working_with_Promises.js b/code-challenges/Week_6/Working_With_Promises/Working_with_Promises.js index 028f69c17..fa4c7fd77 100644 --- a/code-challenges/Week_6/Working_With_Promises/Working_with_Promises.js +++ b/code-challenges/Week_6/Working_With_Promises/Working_with_Promises.js @@ -1,32 +1,15 @@ /* =========== Uppercase String Promise =========== */ -function uppercaseString(str) { - -} - - - - - - +function uppercaseString(str) {} /* ========== Simulated Data Fetching ========== */ -function fetchData() { - -} - - - - +function fetchData() {} /* ========== Asynchronous Request Queue ========== */ class AsyncQueue { - constructor() { - - } - + constructor() {} } // // Example task factory function diff --git a/code-challenges/Week_7/Remove_Duplicates_from_Array.js b/code-challenges/Week_7/Remove_Duplicates_from_Array.js index ff87a8bc6..aedf10b5f 100644 --- a/code-challenges/Week_7/Remove_Duplicates_from_Array.js +++ b/code-challenges/Week_7/Remove_Duplicates_from_Array.js @@ -2,10 +2,7 @@ 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. */ -function removeDuplicates(arr) { - -} +function removeDuplicates(arr) {} const arrayWithDuplicates = [1, 2, 2, 3, 4, 5, 6, 7, 7, 8, 9, 10]; console.log(removeDuplicates(arrayWithDuplicates)); - diff --git a/code-challenges/Week_7/Spread_an_Array_into_Another_Array.js b/code-challenges/Week_7/Spread_an_Array_into_Another_Array.js index bcc74390b..f295b27a9 100644 --- a/code-challenges/Week_7/Spread_an_Array_into_Another_Array.js +++ b/code-challenges/Week_7/Spread_an_Array_into_Another_Array.js @@ -3,10 +3,6 @@ Write a JavaScript function that takes two arrays as input and returns a new arr */ +function combineArrays() {} -function combineArrays() { - -} - - -console.log(combineArrays()); \ No newline at end of file +console.log(combineArrays()); diff --git a/code-challenges/Week_7/Ternary_Operator_for_Conditional.js b/code-challenges/Week_7/Ternary_Operator_for_Conditional.js index 0214cb882..8ddd1ee83 100644 --- a/code-challenges/Week_7/Ternary_Operator_for_Conditional.js +++ b/code-challenges/Week_7/Ternary_Operator_for_Conditional.js @@ -3,11 +3,7 @@ Write a JavaScript function that takes two numbers as input and returns the larg */ +function findLargerNumber() {} -function findLargerNumber() { - -} - - -console.log(findLargerNumber()); -console.log(findLargerNumber()); +console.log(findLargerNumber()); +console.log(findLargerNumber()); diff --git a/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/package.json b/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/package.json index 1362ba75d..8b39fc8e3 100644 --- a/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/package.json +++ b/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/package.json @@ -1,15 +1,14 @@ { - "name": "my-project", - "private": true, - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview", - "test": "jest" - }, - "dependencies": { - "vite": "^5.0.12" - } + "name": "my-project", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "test": "jest" + }, + "dependencies": { + "vite": "^5.0.12" } - \ No newline at end of file +} diff --git a/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userController.js b/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userController.js index a6f5bebbc..3697525ab 100644 --- a/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userController.js +++ b/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userController.js @@ -1,13 +1,13 @@ -const UserService = require('./userService'); - -class UserController { - constructor(userService) { - this.userService = userService; - } - - async getUserData(userId) { - return this.userService.getUserData(userId); - } -} - -module.exports = UserController; +const UserService = require("./userService"); + +class UserController { + constructor(userService) { + this.userService = userService; + } + + async getUserData(userId) { + return this.userService.getUserData(userId); + } +} + +module.exports = UserController; diff --git a/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userService.js b/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userService.js index cb5aab1ed..b046b52da 100644 --- a/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userService.js +++ b/code-challenges/Week_8/Jest_Integration_and_Unit_Testing/userService.js @@ -1,20 +1,20 @@ class UserService { - constructor(apiUrl) { - this.apiUrl = apiUrl; - } + constructor(apiUrl) { + this.apiUrl = apiUrl; + } - async getUserData(userId) { - try { - const response = await fetch(`${this.apiUrl}/users/${userId}`); - if (!response.ok) { - throw new Error(`HTTP error status: ${response.status}`); - } - return await response.json(); - } catch (error) { - console.error(error); - throw error; - } + async getUserData(userId) { + try { + const response = await fetch(`${this.apiUrl}/users/${userId}`); + if (!response.ok) { + throw new Error(`HTTP error status: ${response.status}`); + } + return await response.json(); + } catch (error) { + console.error(error); + throw error; } + } } module.exports = UserService; diff --git a/code-challenges/Week_8/Working_with_Arrays_and_Objects.js b/code-challenges/Week_8/Working_with_Arrays_and_Objects.js index 8a32d5d76..4d79d0919 100644 --- a/code-challenges/Week_8/Working_with_Arrays_and_Objects.js +++ b/code-challenges/Week_8/Working_with_Arrays_and_Objects.js @@ -7,4 +7,4 @@ Create a function named `filterObjects` that takes three arguments: 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. -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_8/Working_with_React_Testing_Library/README.md b/code-challenges/Week_8/Working_with_React_Testing_Library/README.md index 1d7fb7cfb..0ca125ad8 100644 --- a/code-challenges/Week_8/Working_with_React_Testing_Library/README.md +++ b/code-challenges/Week_8/Working_with_React_Testing_Library/README.md @@ -12,6 +12,7 @@ Create a simple React component that displays a list of items. Then, write tests 3. Install and run your RTL tests using: `npm install --save-dev @testing-library/react` and `npm run test` ## What's in your package.json + - @testing-library/react - Core RTL package for component testing - @testing-library/jest-dom - Adds custom DOM element matchers for assertions - @testing-library/user-event - Provides realistic user interaction simulation @@ -21,16 +22,17 @@ Create a simple React component that displays a list of items. Then, write tests - jest-transformer-svg - Processes SVG imports during tests If you were to build on this and utilize each of these dependencies beyond the scope of this exercise, you would also install the following + ``` -npm install --save-dev @testing-library/jest-dom -npm install --save-dev @testing-library/user-event -npm install --save-dev jest -npm install --save-dev ts-jest -npm install --save-dev identity-obj-proxy +npm install --save-dev @testing-library/jest-dom +npm install --save-dev @testing-library/user-event +npm install --save-dev jest +npm install --save-dev ts-jest +npm install --save-dev identity-obj-proxy npm install --save-dev jest-transformer-svg ``` --or with a single line command- -`npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event jest ts-jest identity-obj-proxy jest-transformer-svg` +-or with a single line command- +`npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event jest ts-jest identity-obj-proxy jest-transformer-svg` diff --git a/code-challenges/Week_8/Working_with_React_Testing_Library/index.html b/code-challenges/Week_8/Working_with_React_Testing_Library/index.html index 63b44c3af..38dc71c44 100644 --- a/code-challenges/Week_8/Working_with_React_Testing_Library/index.html +++ b/code-challenges/Week_8/Working_with_React_Testing_Library/index.html @@ -9,12 +9,16 @@
- + - + diff --git a/code-challenges/Week_8/Working_with_React_Testing_Library/package.json b/code-challenges/Week_8/Working_with_React_Testing_Library/package.json index 3440e4e83..c8e84598a 100644 --- a/code-challenges/Week_8/Working_with_React_Testing_Library/package.json +++ b/code-challenges/Week_8/Working_with_React_Testing_Library/package.json @@ -1,25 +1,24 @@ { - "name": "react-javascript", - "version": "1.0.0", - "type": "module", - "description": "React TypeScript on Replit, using Vite bundler", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview", - "test": "jest", - }, - "keywords": [], - "author": "", - "license": "ISC", - "devDependencies": { - "@types/react": "^18.2.37", - "@types/react-dom": "^18.2.15", - "@vitejs/plugin-react": "^4.2.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "typescript": "^5.2.2", - "vite": "^5.0.0" - } + "name": "react-javascript", + "version": "1.0.0", + "type": "module", + "description": "React TypeScript on Replit, using Vite bundler", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "test": "jest" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "@types/react": "^18.2.37", + "@types/react-dom": "^18.2.15", + "@vitejs/plugin-react": "^4.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "typescript": "^5.2.2", + "vite": "^5.0.0" } - +} diff --git a/code-challenges/Week_8/Working_with_React_Testing_Library/src/App.css b/code-challenges/Week_8/Working_with_React_Testing_Library/src/App.css index 7150519b4..513d5ad3c 100644 --- a/code-challenges/Week_8/Working_with_React_Testing_Library/src/App.css +++ b/code-challenges/Week_8/Working_with_React_Testing_Library/src/App.css @@ -1,2 +1,2 @@ main { -} \ No newline at end of file +} diff --git a/code-challenges/Week_8/Working_with_React_Testing_Library/src/App.jsx b/code-challenges/Week_8/Working_with_React_Testing_Library/src/App.jsx index 97d248ae0..0d0d55fe0 100644 --- a/code-challenges/Week_8/Working_with_React_Testing_Library/src/App.jsx +++ b/code-challenges/Week_8/Working_with_React_Testing_Library/src/App.jsx @@ -1,9 +1,5 @@ -import './App.css' +import "./App.css"; export default function App() { - return ( -
- React ⚛️ + Vite ⚡ + Replit -
- ) + return
React ⚛️ + Vite ⚡ + Replit
; } diff --git a/code-challenges/Week_8/Working_with_React_Testing_Library/src/index.jsx b/code-challenges/Week_8/Working_with_React_Testing_Library/src/index.jsx index e128ccd68..0d1758ab8 100644 --- a/code-challenges/Week_8/Working_with_React_Testing_Library/src/index.jsx +++ b/code-challenges/Week_8/Working_with_React_Testing_Library/src/index.jsx @@ -1,9 +1,9 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; -ReactDOM.createRoot(document.getElementById('root')).render( - - - -) \ No newline at end of file +ReactDOM.createRoot(document.getElementById("root")).render( + + + +); diff --git a/code-challenges/Week_8/Working_with_React_Testing_Library/tsconfig.json b/code-challenges/Week_8/Working_with_React_Testing_Library/tsconfig.json index 2abfa9fd1..86457a74a 100644 --- a/code-challenges/Week_8/Working_with_React_Testing_Library/tsconfig.json +++ b/code-challenges/Week_8/Working_with_React_Testing_Library/tsconfig.json @@ -1,21 +1,20 @@ { - "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "allowJs": false, - "skipLibCheck": true, - "esModuleInterop": false, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "Node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx" - }, - "include": ["src"] - } - \ No newline at end of file + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"] +} diff --git a/code-challenges/Week_8/Working_with_React_Testing_Library/vite.config.js b/code-challenges/Week_8/Working_with_React_Testing_Library/vite.config.js index 7972b08f4..5cda5a675 100644 --- a/code-challenges/Week_8/Working_with_React_Testing_Library/vite.config.js +++ b/code-challenges/Week_8/Working_with_React_Testing_Library/vite.config.js @@ -1,10 +1,10 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { - host: '0.0.0.0', + host: "0.0.0.0" } -}) +}); diff --git a/code-challenges/Week_9/Find-the-Longest-Word-in-a-String.js b/code-challenges/Week_9/Find-the-Longest-Word-in-a-String.js index 1a4f37e26..25d761ace 100644 --- a/code-challenges/Week_9/Find-the-Longest-Word-in-a-String.js +++ b/code-challenges/Week_9/Find-the-Longest-Word-in-a-String.js @@ -7,4 +7,4 @@ findLongestWordLength("The quick brown fox jumped over the lazy dog") ---> 6 findLongestWordLength("May the force be with you") ---> 5 findLongestWordLength("What if we try a super-long word such as otorhinolaryngology") ---> 19 -*/ \ No newline at end of file +*/ diff --git a/code-challenges/Week_9/Return-the-Sum-of-Two-Numbers.js b/code-challenges/Week_9/Return-the-Sum-of-Two-Numbers.js index bad9f3aac..05b5fdc93 100644 --- a/code-challenges/Week_9/Return-the-Sum-of-Two-Numbers.js +++ b/code-challenges/Week_9/Return-the-Sum-of-Two-Numbers.js @@ -7,4 +7,4 @@ addition(3, 2) ➞ 5 addition(-3, -6) ➞ -9 addition(7, 3) ➞ 10 Notes: Don't forget to return the result and check for edge cases! -*/ \ No newline at end of file +*/ diff --git a/command-line/env.md b/command-line/env.md index f61fd5ef2..9bf770b77 100644 --- a/command-line/env.md +++ b/command-line/env.md @@ -118,9 +118,9 @@ export I_LOVE=lamp - In your .env.example, add this line: - ``` - export I_LOVE=example - ``` + ``` + export I_LOVE=example + ``` 5. Add .env to your .gitignore right away! @@ -153,17 +153,18 @@ console.log("I love ", I_LOVE); 9. Type in the terminal, `source .env`, and then press enter. Now run your project. “lamp” should print in the console! 10. Destructuring: object assignment - - Did you notice that the whole config printed out, not just I_LOVE? We can destructure the config object to pinpoint just the variable that we want. - - Add brackets to your declaration in server.js or app.js so it looks like this: + +- Did you notice that the whole config printed out, not just I_LOVE? We can destructure the config object to pinpoint just the variable that we want. +- Add brackets to your declaration in server.js or app.js so it looks like this: ``` const { I_LOVE } = require('./config'); ``` - Declaring I_LOVE gives that variable name to everything that config.js exported. Destructuring assignment unpacks the config object, picking out specific variables. Essentially, adding brackets is the same as saying: - ``` - const I_LOVE = require('./config').I_LOVE; - ``` + ``` + const I_LOVE = require('./config').I_LOVE; + ``` 11. In your terminal, press ctrl + c to stop your process. Start it again. You should see the variable you extracted!: diff --git a/pair-programming/week-1/Divs_and_DOM_Manipulation/index.html b/pair-programming/week-1/Divs_and_DOM_Manipulation/index.html index 35d4d8e04..f830ccf97 100644 --- a/pair-programming/week-1/Divs_and_DOM_Manipulation/index.html +++ b/pair-programming/week-1/Divs_and_DOM_Manipulation/index.html @@ -1,24 +1,19 @@ + + + + replit + + - - - - replit - - + +
- -
- -
- - - - - - \ No newline at end of file + --> + + diff --git a/pair-programming/week-1/Divs_and_DOM_Manipulation/script.js b/pair-programming/week-1/Divs_and_DOM_Manipulation/script.js index 26da9c793..ec53bcefc 100644 --- a/pair-programming/week-1/Divs_and_DOM_Manipulation/script.js +++ b/pair-programming/week-1/Divs_and_DOM_Manipulation/script.js @@ -1,7 +1,5 @@ // Create a div - // Second task - -// Creating a list - the third task +// Creating a list - the third task diff --git a/pair-programming/week-1/Divs_and_DOM_Manipulation/style.css b/pair-programming/week-1/Divs_and_DOM_Manipulation/style.css index 4cc912ea3..e63733ffb 100644 --- a/pair-programming/week-1/Divs_and_DOM_Manipulation/style.css +++ b/pair-programming/week-1/Divs_and_DOM_Manipulation/style.css @@ -1,10 +1,8 @@ html { - height: 100%; - width: 100%; - } - - body { - background-color: #bcb4f9; - } - - \ No newline at end of file + height: 100%; + width: 100%; +} + +body { + background-color: #bcb4f9; +} diff --git a/pair-programming/week-1/Modeling-A-Bank-Account/index.js b/pair-programming/week-1/Modeling-A-Bank-Account/index.js index 3f2ff2d6c..e69de29bb 100644 --- a/pair-programming/week-1/Modeling-A-Bank-Account/index.js +++ b/pair-programming/week-1/Modeling-A-Bank-Account/index.js @@ -1,5 +0,0 @@ - - - - - diff --git a/pair-programming/week-1/Week-1-PP-Slice-and-Split/index.js b/pair-programming/week-1/Week-1-PP-Slice-and-Split/index.js index 79f5d03a6..ca315a719 100644 --- a/pair-programming/week-1/Week-1-PP-Slice-and-Split/index.js +++ b/pair-programming/week-1/Week-1-PP-Slice-and-Split/index.js @@ -11,7 +11,6 @@ Prompt: Extract a substring from index 2 to 5. const sliceStr = "Hello, World!"; - /* -Example 2: Extracting the Last Few Characters- Prompt: Extract the last 5 characters of a string. @@ -26,7 +25,6 @@ Prompt: Extract the protocol from a URL. const url = "https://www.example.com/path/to/resource"; - /* -PRACTICE: Secret Message Decoder- Prompt: Given a string where the secret message starts at a fixed position and ends at a fixed position, extract the secret message using the slice() method. @@ -36,11 +34,7 @@ const encodedString = "MessageStart: Secret Message:MessageEnd"; const startPosition = 14; const endPosition = 29; - -function decodeFixedPositionMessage( - -} - +function decodeFixedPositionMessage() {} /* ======================================= @@ -55,7 +49,6 @@ Prompt: Split a sentence into individual words using space as the separator. let sentence = "The quick brown fox jumps over the lazy dog"; - /* -Example 2: Splitting a CSV String- Prompt: Split a comma-separated values (CSV) string into an array. @@ -63,7 +56,6 @@ Prompt: Split a comma-separated values (CSV) string into an array. let csvString = "apple,banana,cherry,dragonfruit"; - /* -Example 3: Limiting the Number of Splits- Prompt: Split a string into a limited number of substrings. @@ -71,7 +63,6 @@ Prompt: Split a string into a limited number of substrings. let splitStr = "one:two:three:four"; - /* -PRACTICE: Split & Solve- Given the string "apple, banana; orange, watermelon; grape". Split the string by ';', and find the number of elements. @@ -79,6 +70,4 @@ Given the string "apple, banana; orange, watermelon; grape". Split the string by const fruitString = "apple, banana; orange, watermelon; grape"; -function splitFunc(fruitString) { - -} +function splitFunc(fruitString) {} diff --git a/pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/index.html b/pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/index.html index 0ad4159b1..8fa7a39dd 100644 --- a/pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/index.html +++ b/pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/index.html @@ -1,16 +1,13 @@ - - - - - replit - - - - - - - - - \ No newline at end of file + + + + replit + + + + + + + diff --git a/pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/style.css b/pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/style.css index 70880da74..d3f8e9256 100644 --- a/pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/style.css +++ b/pair-programming/week-3/How_to_Create_a_Form_and_Validate_an_Input/style.css @@ -1,4 +1,4 @@ html { - height: 100%; + height: 100%; width: 100%; } diff --git a/pair-programming/week-3/Object_Literals_Maps_and_Sets.js b/pair-programming/week-3/Object_Literals_Maps_and_Sets.js index 00dd20b51..9041de2a5 100644 --- a/pair-programming/week-3/Object_Literals_Maps_and_Sets.js +++ b/pair-programming/week-3/Object_Literals_Maps_and_Sets.js @@ -7,4 +7,3 @@ Step 2: Create a Map to Store Additional Details About the Person Step 3: Create a Set to Store Unique Hobbies of the Person */ - diff --git a/pair-programming/week-3/Practice_Forms_and_CSS_Media_Queries/style.css b/pair-programming/week-3/Practice_Forms_and_CSS_Media_Queries/style.css index cd9ec6224..d3f8e9256 100644 --- a/pair-programming/week-3/Practice_Forms_and_CSS_Media_Queries/style.css +++ b/pair-programming/week-3/Practice_Forms_and_CSS_Media_Queries/style.css @@ -1,4 +1,4 @@ html { height: 100%; width: 100%; -} \ No newline at end of file +} diff --git a/pair-programming/week-3/forEach_for_while_and_switch_statements.js b/pair-programming/week-3/forEach_for_while_and_switch_statements.js index 1d72c2487..84e06087d 100644 --- a/pair-programming/week-3/forEach_for_while_and_switch_statements.js +++ b/pair-programming/week-3/forEach_for_while_and_switch_statements.js @@ -1,23 +1,15 @@ - - /* For Loop: Write a for loop that prints numbers from 1 to 5. */ - - /* While Loop: Write a while loop that prints numbers from 1 to 5. */ - - /* Do-While Loop: Write a do...while loop that prints numbers from 1 to 5. */ - - /* Switch Statement: Write a switch statement that performs different actions based on the input value: diff --git a/pair-programming/week-4/react-props/README.md b/pair-programming/week-4/react-props/README.md index 12029fc03..55f23f84f 100644 --- a/pair-programming/week-4/react-props/README.md +++ b/pair-programming/week-4/react-props/README.md @@ -10,6 +10,7 @@ Use the color prop to customize button's background color. Create a ColorButton - React passing props ## Running the server + 1. run `$ npm install` 1. run `$ npm run dev` diff --git a/pair-programming/week-4/react-props/index.html b/pair-programming/week-4/react-props/index.html index 63b44c3af..38dc71c44 100644 --- a/pair-programming/week-4/react-props/index.html +++ b/pair-programming/week-4/react-props/index.html @@ -9,12 +9,16 @@
- + - + diff --git a/pair-programming/week-4/react-props/src/App.jsx b/pair-programming/week-4/react-props/src/App.jsx index 7f71635f0..58064de5f 100644 --- a/pair-programming/week-4/react-props/src/App.jsx +++ b/pair-programming/week-4/react-props/src/App.jsx @@ -1,15 +1,11 @@ -import React from 'react'; +import React from "react"; const App = () => { - const handleClick = () => { - alert('you clicked a button') - }; + const handleClick = () => { + alert("you clicked a button"); + }; - return ( -
- Hello World -
- ); + return
Hello World
; }; -export default App; \ No newline at end of file +export default App; diff --git a/pair-programming/week-4/react-props/src/index.jsx b/pair-programming/week-4/react-props/src/index.jsx index e128ccd68..0d1758ab8 100644 --- a/pair-programming/week-4/react-props/src/index.jsx +++ b/pair-programming/week-4/react-props/src/index.jsx @@ -1,9 +1,9 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; -ReactDOM.createRoot(document.getElementById('root')).render( - - - -) \ No newline at end of file +ReactDOM.createRoot(document.getElementById("root")).render( + + + +); diff --git a/pair-programming/week-4/react-props/vite.config.js b/pair-programming/week-4/react-props/vite.config.js index 7972b08f4..5cda5a675 100644 --- a/pair-programming/week-4/react-props/vite.config.js +++ b/pair-programming/week-4/react-props/vite.config.js @@ -1,10 +1,10 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { - host: '0.0.0.0', + host: "0.0.0.0" } -}) +}); diff --git a/pair-programming/week-5/Counter_App/index.html b/pair-programming/week-5/Counter_App/index.html index 63b44c3af..38dc71c44 100644 --- a/pair-programming/week-5/Counter_App/index.html +++ b/pair-programming/week-5/Counter_App/index.html @@ -9,12 +9,16 @@
- + - + diff --git a/pair-programming/week-5/Counter_App/src/index.jsx b/pair-programming/week-5/Counter_App/src/index.jsx index 75b037224..8b64c1976 100644 --- a/pair-programming/week-5/Counter_App/src/index.jsx +++ b/pair-programming/week-5/Counter_App/src/index.jsx @@ -1,12 +1,12 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; -ReactDOM.createRoot(document.getElementById('root')).render( - - - -) +ReactDOM.createRoot(document.getElementById("root")).render( + + + +); import { StrictMode } from "react"; -import { createRoot } from "react-dom/client"; \ No newline at end of file +import { createRoot } from "react-dom/client"; diff --git a/pair-programming/week-5/Counter_App/vite.config.js b/pair-programming/week-5/Counter_App/vite.config.js index 7972b08f4..5cda5a675 100644 --- a/pair-programming/week-5/Counter_App/vite.config.js +++ b/pair-programming/week-5/Counter_App/vite.config.js @@ -1,10 +1,10 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { - host: '0.0.0.0', + host: "0.0.0.0" } -}) +}); diff --git a/pair-programming/week-5/Weather_Forecast_App/README.md b/pair-programming/week-5/Weather_Forecast_App/README.md index ce314e8b7..622fcca6a 100644 --- a/pair-programming/week-5/Weather_Forecast_App/README.md +++ b/pair-programming/week-5/Weather_Forecast_App/README.md @@ -2,14 +2,12 @@ ### Tasks -1. Sign up or log in to OpenWeatherMap (https://openweathermap.org/) and generate an API key from the dashboard. +1. Sign up or log in to OpenWeatherMap (https://openweathermap.org/) and generate an API key from the dashboard. -2. Define a functional component named Weather +2. Define a functional component named Weather -3. Add a form input that fetches weather data based on the city name entered by the user +3. Add a form input that fetches weather data based on the city name entered by the user -4. Display the city's weather details on your page (description, wind speed, humidity, temperature, etc) +4. Display the city's weather details on your page (description, wind speed, humidity, temperature, etc) 5. [Bonus] handle errors gracefully and consider edge cases, such as invalid input or issues with the API request - - diff --git a/pair-programming/week-5/Weather_Forecast_App/index.html b/pair-programming/week-5/Weather_Forecast_App/index.html index 63b44c3af..38dc71c44 100644 --- a/pair-programming/week-5/Weather_Forecast_App/index.html +++ b/pair-programming/week-5/Weather_Forecast_App/index.html @@ -9,12 +9,16 @@
- + - + diff --git a/pair-programming/week-5/Weather_Forecast_App/src/App.jsx b/pair-programming/week-5/Weather_Forecast_App/src/App.jsx index feb87d4be..a99822485 100644 --- a/pair-programming/week-5/Weather_Forecast_App/src/App.jsx +++ b/pair-programming/week-5/Weather_Forecast_App/src/App.jsx @@ -1,5 +1,5 @@ import "./App.css"; -import Weather from './Weather'; +import Weather from "./Weather"; export default function App() { return ( diff --git a/pair-programming/week-5/Weather_Forecast_App/src/Weather.jsx b/pair-programming/week-5/Weather_Forecast_App/src/Weather.jsx index 2cd8ce266..8ae75891e 100644 --- a/pair-programming/week-5/Weather_Forecast_App/src/Weather.jsx +++ b/pair-programming/week-5/Weather_Forecast_App/src/Weather.jsx @@ -1,25 +1,21 @@ -import React, { useState } from 'react'; +import React, { useState } from "react"; const Weather = () => { - const [city, setCity] = useState(''); - const [weatherData, setWeatherData] = useState(null); + const [city, setCity] = useState(""); + const [weatherData, setWeatherData] = useState(null); - const fetchData = async () => { - }; + const fetchData = async () => {}; - const handleInputChange = (event) => { - // capture and handle city input value - }; + const handleInputChange = (event) => { + // capture and handle city input value + }; - const handleSubmit = (event) => { - }; + const handleSubmit = (event) => {}; - return ( - - - // Add a form input that fetches weather data based on the city name entered by the user - // Display the city's weather details on your page (description, wind speed, humidity, temperature, etc) - // [Bonus] handle errors gracefully and consider edge cases, such as invalid input or issues with the API request + return ( + // Add a form input that fetches weather data based on the city name entered by the user + // Display the city's weather details on your page (description, wind speed, humidity, temperature, etc) + // [Bonus] handle errors gracefully and consider edge cases, such as invalid input or issues with the API request
{weatherData ? ( <> @@ -28,10 +24,8 @@ const Weather = () => { ) : (

Loading weather data...

)} - -
- ); + ); }; -export default Weather; \ No newline at end of file +export default Weather; diff --git a/pair-programming/week-5/Weather_Forecast_App/src/index.jsx b/pair-programming/week-5/Weather_Forecast_App/src/index.jsx index 75b037224..8b64c1976 100644 --- a/pair-programming/week-5/Weather_Forecast_App/src/index.jsx +++ b/pair-programming/week-5/Weather_Forecast_App/src/index.jsx @@ -1,12 +1,12 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; -ReactDOM.createRoot(document.getElementById('root')).render( - - - -) +ReactDOM.createRoot(document.getElementById("root")).render( + + + +); import { StrictMode } from "react"; -import { createRoot } from "react-dom/client"; \ No newline at end of file +import { createRoot } from "react-dom/client"; diff --git a/pair-programming/week-5/Weather_Forecast_App/vite.config.js b/pair-programming/week-5/Weather_Forecast_App/vite.config.js index 7972b08f4..5cda5a675 100644 --- a/pair-programming/week-5/Weather_Forecast_App/vite.config.js +++ b/pair-programming/week-5/Weather_Forecast_App/vite.config.js @@ -1,10 +1,10 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { - host: '0.0.0.0', + host: "0.0.0.0" } -}) +}); diff --git a/pair-programming/week-7/Factorial_Calculation_Using_Recursion.js b/pair-programming/week-7/Factorial_Calculation_Using_Recursion.js index f7b236f57..9b880af18 100644 --- a/pair-programming/week-7/Factorial_Calculation_Using_Recursion.js +++ b/pair-programming/week-7/Factorial_Calculation_Using_Recursion.js @@ -3,12 +3,8 @@ Write a JavaScript function to calculate the factorial of a given number using r */ function factorial() { - // Base case - - // Recursive case - - } - - - console.log(factorial()); - \ No newline at end of file + // Base case + // Recursive case +} + +console.log(factorial()); diff --git a/pair-programming/week-7/react-express-app/react-expressjs.md b/pair-programming/week-7/react-express-app/react-expressjs.md index 5ce21d45d..46863dbc0 100644 --- a/pair-programming/week-7/react-express-app/react-expressjs.md +++ b/pair-programming/week-7/react-express-app/react-expressjs.md @@ -38,7 +38,7 @@ Walmart was among the first large companies that benefited from using React with ### Lesson -React is a javascript library for building web apps and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of React application with all the dependencies(CSS and js files) in the browser. In this case, we are using node as the webserver which loads React assets and accepts any API calls from the React UI app. +React is a javascript library for building web apps, and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of React application with all the dependencies(CSS and js files) in the browser. In this case, we are using node as the webserver which loads React assets and accepts any API calls from the React UI app. ![](react-express.png) @@ -331,6 +331,5 @@ Hint: [Concurrently](https://www.npmjs.com/package/concurrently) ### Supplemental Materials -- [How to Create a React App with a Node Backend: The Complete Guide](https://www.freecodecamp.org/news/how-to-create-a-react-app-with-a-node-backend-the-complete-guide/) - This article contains the instruction for Deploying your app to the web with Heroku - [How To Connect Node.JS BackEnd To A React.JS FrontEnd 2020 | NodeJs + React Tutorial For Beginners](https://www.youtube.com/watch?v=PPjpHaLkV7A) - 12min video -[React Proxy | Easiest Fix to CORS Errors](https://www.youtube.com/watch?v=N4yUiQiTvwU)- 15min video - [Create a Full-Stack Web App Using React and Node.js](https://javascript.plainenglish.io/create-a-full-stack-web-app-using-react-and-node-js-b5149efd3629) - React and Node.js: Build a Full Stack Web App From Development to Deployment in 5 steps diff --git a/practice/effective-performance-reviews.md b/practice/effective-performance-reviews.md index d0eba87d4..415a7de76 100644 --- a/practice/effective-performance-reviews.md +++ b/practice/effective-performance-reviews.md @@ -1,12 +1,15 @@ # Effective Performance Reviews: Giving and Receiving Actionable Feedback ## Objectives + This activity aims to prepare participants for the performance review process (weeks 9-11) by providing clarity on giving constructive feedback and effectively receiving and processing feedback from peers and mentors. ## Pre-Requisites + - [Feedback Training Guide](https://github.com/Techtonica/curriculum/blob/main/career/feedback_training_guide.md) ## Participants Will Be Able To + - Distinguish between actionable and non-actionable feedback - Craft specific, constructive feedback that promotes growth - Respond professionally to both positive and constructive feedback @@ -15,6 +18,7 @@ This activity aims to prepare participants for the performance review process (w - Give feedback that respects others' identities and experiences ## Specific Things to Learn + - The structure and purpose of performance reviews - Components of effective feedback (specific, actionable, balanced) - Techniques for delivering constructive criticism respectfully @@ -23,10 +27,13 @@ This activity aims to prepare participants for the performance review process (w - How to prioritize which feedback to act upon first ## Motivation + Performance reviews are a critical professional skill that extends beyond this program. Learning to give thoughtful feedback helps others grow, while receiving feedback gracefully accelerates your own development. These skills directly translate to workplace success and career advancement. ## Challenge + Many people find performance reviews uncomfortable—both giving and receiving feedback can be emotionally challenging. Specific challenges include: + - Providing feedback that is honest yet respectful - Receiving criticism without becoming defensive - Determining which feedback requires action and which doesn't @@ -34,6 +41,7 @@ Many people find performance reviews uncomfortable—both giving and receiving f - Balancing positive recognition with areas for improvement ## Real-World Application + - Regular performance reviews are standard in most professional environments - The ability to give and receive feedback effectively is valued by employers - These skills improve team dynamics and project outcomes @@ -41,7 +49,9 @@ Many people find performance reviews uncomfortable—both giving and receiving f - Self-awareness from feedback processes accelerates career growth ## Common Mistakes & Misconceptions + A mistake is an incorrect action, behavior, or execution. A misconception is an incorrect belief, understanding, or mental model. + - **Mistake**: Giving vague feedback like "you need to participate more" without specific examples - **Misconception**: All feedback requires immediate action or change - **Mistake**: Focusing only on weaknesses without acknowledging strengths @@ -51,16 +61,19 @@ A mistake is an incorrect action, behavior, or execution. A misconception is an - **Mistake**: Not considering the recipient's communication style when delivering feedback ## Lesson Plan & Activity -You will be provided example feedback given to person 🅰️ and person 🅱️. Over the course of the day, you will analyze the feedback in efforts to inform the way you give and receive your own feedback during the cohort performance review. + +You will be provided example feedback given to person 🅰️ and person 🅱️. Over the course of the day, you will analyze the feedback in efforts to inform the way you give and receive your own feedback during the cohort performance review. ### During Stand Up (30 minutes) 1. **Staff Overview** (10 minutes) + - Review cohort accomplishments to date - Explain performance review timeline and expectations - Share anonymized example feedback 🅰️ about participation and autonomy 2. **Group Discussion** (20 minutes) + - Analyze the following feedback example: 🅰️ This individual's engagement in team activities fluctuates, making it hard to gauge their full potential for independent work. On occasions when they're fully involved, their self-reliance shines through. Consistent participation would provide a clearer picture of their capabilities. @@ -71,6 +84,7 @@ You will be provided example feedback given to person 🅰️ and person 🅱️ ### After Stand Up (45 minutes) 1. **Cohort Buddy Activity** (45 minutes) + - Review the following feedback example: 🅱️ When confronted with obstacles, this person tends to dwell on identifying issues rather than brainstorming solutions. Adopting a more solution-centric approach could enhance their ability to handle frustrations and serve as an inspiration to their peers. @@ -84,10 +98,11 @@ You will be provided example feedback given to person 🅰️ and person 🅱️ ### Throughout the Day (60 minutes) 1. **Mentor Session** (60 minutes) + - Review both feedback examples: - __** Question: What is one thing this person could do to improve their recommendation score as a great coworker (please give clear and actionable feedback)?**__ - + \***\* Question: What is one thing this person could do to improve their recommendation score as a great coworker (please give clear and actionable feedback)?\*\*** + 🅰️ I suggest they actively pursue more collaborative opportunities and voice their opinions more frequently during informal group discussions. Their insights are valuable, and increased engagement would benefit both their personal growth and team dynamics. 🅱️ There have been occasions where they've inadvertently used incorrect pronouns for team members. I recommend they pay extra attention to learning and correctly using everyone's preferred pronouns, or respectfully asking for clarification when uncertain. @@ -99,6 +114,7 @@ You will be provided example feedback given to person 🅰️ and person 🅱️ ### During Wrap Up (30 minutes) 1. **Reflection and Sharing** (20 minutes) + - Participants share insights from mentor discussions - Discuss the following positive feedback examples: @@ -111,6 +127,7 @@ You will be provided example feedback given to person 🅰️ and person 🅱️ - Identify one feedback skill to focus on improving 2. **Action Planning** (10 minutes) + - Analyze feedback: - What is the core message? - Is this feedback specific enough to act on? @@ -127,20 +144,26 @@ You will be provided example feedback given to person 🅰️ and person 🅱️ 🅱️ While your commitment to projects is admirable and the results are impressive, it's vital to prioritize self-care and maintain healthy boundaries. Ensure you're getting adequate rest and personal time to sustain your outstanding work and overall well-being. ### Additional Examples with Analysis by Category + - **Participation feedback**: "It can be difficult to fully assess their autonomy due to some inconsistencies in participation." - - *Analysis*: Actionable through more consistent engagement and self-advocacy + + - _Analysis_: Actionable through more consistent engagement and self-advocacy - **Problem-solving feedback**: "When faced with challenges, they tend to focus on identifying problems rather than exploring solutions." - - *Analysis*: Actionable by practicing solution-oriented approaches to challenges + + - _Analysis_: Actionable by practicing solution-oriented approaches to challenges - **Collaboration feedback**: "I would encourage them to proactively seek more opportunities for collaboration and advocate for themselves." - - *Analysis*: Actionable through specific collaboration initiatives + + - _Analysis_: Actionable through specific collaboration initiatives - **Respect feedback**: "There's been times that they have used the incorrect pronouns for someone." - - *Analysis*: Immediately actionable through more careful attention to others' identities + + - _Analysis_: Immediately actionable through more careful attention to others' identities - **Positive feedback**: "I love their energy, their positivity, their communication style, and their ability to pick up concepts." - - *Analysis*: Reinforces strengths to continue developing + + - _Analysis_: Reinforces strengths to continue developing - **Self-care feedback**: "You are going above and beyond with your projects... BUT please take care of yourself!" - - *Analysis*: Actionable through better work-life boundaries + - _Analysis_: Actionable through better work-life boundaries diff --git a/projects/react-game.md b/projects/react-game.md index a504ce254..75fd03781 100644 --- a/projects/react-game.md +++ b/projects/react-game.md @@ -29,7 +29,6 @@ We encourage you to use git version control and GitHub to save your progress as - Commit your code at least 15 times - Submit at least 1 PR by the end of the week - #### Optional Extension Activity If you have extra time, consider [hosting your game on GitHub Pages](https://betterprogramming.pub/how-to-host-your-react-app-on-github-pages-for-free-919ad201a4cb). diff --git a/projects/recipe-page/phase-2-css-prompt.md b/projects/recipe-page/phase-2-css-prompt.md index 47cdfa141..f9fceac10 100644 --- a/projects/recipe-page/phase-2-css-prompt.md +++ b/projects/recipe-page/phase-2-css-prompt.md @@ -131,7 +131,7 @@ When you find a font you want to use, click the "Get Font" button in the upper r ![Google Font Selection](./screenshots/get-font.png) -[Click on "Get embeded code"](./screenshots/get-font-embeded-code.png) +[Click on "Get embeded code"](./screenshots/get-font-embeded-code.png) You'll now see a pane that contains some HTML code and some CSS code. Copy and paste these code snippets into the proper files in order to include this new font in your project. diff --git a/projects/rest-api-project.md b/projects/rest-api-project.md index f124f0827..288e3338c 100644 --- a/projects/rest-api-project.md +++ b/projects/rest-api-project.md @@ -109,6 +109,7 @@ Expectations: ``` (doing this, you will delete the test script) + 8. Run `npm run start` in your terminal 9. Set up express by running `npm install express --save` 10. Consult [these instructions](https://docs.google.com/document/d/12MFPDYC0LPKpzrYHZVmfs2NeCUfquNpEKCLKtDkcK4E/edit?usp=sharing) for more details. diff --git a/react-js/react-part-1-intro.md b/react-js/react-part-1-intro.md index ec20302cb..61fe05749 100644 --- a/react-js/react-part-1-intro.md +++ b/react-js/react-part-1-intro.md @@ -22,7 +22,7 @@ React is an open-source JavaScript library that is used for building user interf React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. -[Jordan Walke](https://en.wikipedia.org/wiki/React_(software)#:~:text=JavaScript%20syntax%20improvements.-,History,-%5Bedit%5D), a software engineer at Meta, created React as a library to create reuseable components, like posts or comments, and allow the user see updates instantly. [Instagram](https://www.instagram.com/) and [Airbnb](https://www.airbnb.com/) use it too. +[Jordan Walke](), a software engineer at Meta, created React as a library to create reuseable components, like posts or comments, and allow the user see updates instantly. [Instagram](https://www.instagram.com/) and [Airbnb](https://www.airbnb.com/) use it too. ### Objectives diff --git a/react-js/react-part-5-full-apps.md b/react-js/react-part-5-full-apps.md index a28008e82..835dbf97c 100644 --- a/react-js/react-part-5-full-apps.md +++ b/react-js/react-part-5-full-apps.md @@ -1,4 +1,5 @@ # [DEPRECATED] + ## React Part 5 - Full Apps using React Using Vite ## Projected Time From 5d511058c4b7d1bc3137236843756ce78eafb52d Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 11:50:10 -0700 Subject: [PATCH 05/20] Remove create react app material --- .../week-7/react-express-app/react-expressjs.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/pair-programming/week-7/react-express-app/react-expressjs.md b/pair-programming/week-7/react-express-app/react-expressjs.md index 46863dbc0..cf8d7099a 100644 --- a/pair-programming/week-7/react-express-app/react-expressjs.md +++ b/pair-programming/week-7/react-express-app/react-expressjs.md @@ -16,7 +16,7 @@ Total: 60 minutes ### Motivation -Creating React app using ExpressJs server is very useful if you are creating a full stack app using Express, React, Node with any database. So you can run your React and Node app on the same port, avoiding the need of running two separate commands to start Node.js and React.js app. +Creating a React app using ExpressJs server is very useful if you are creating a full stack app using Express, React, Node with any database. So you can run your React and Node app on the same port, avoiding the need of running two separate commands to start Node.js and React.js app. Walmart was among the first large companies that benefited from using React with Node.js. In 2015, the company migrated about 25 apps that powered their eCommerce website from Java to the React and Node technology bundle.[^1] @@ -32,13 +32,9 @@ Walmart was among the first large companies that benefited from using React with - to integrate React with Express by proxying requests - to make the HTTP requests from React To Express -### Materials - -- [Proxying API Requests in Development](https://create-react-app.dev/docs/proxying-api-requests-in-development/) - Create React App doc - ### Lesson -React is a javascript library for building web apps, and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of React application with all the dependencies(CSS and js files) in the browser. In this case, we are using node as the webserver which loads React assets and accepts any API calls from the React UI app. +React is a javascript library for building web apps, and it doesn’t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of React application with all the dependencies (CSS and js files) in the browser. In this case, we are using node as the webserver which loads React assets and accepts any API calls from the React UI app. ![](react-express.png) @@ -143,10 +139,10 @@ Go to `http://localhost:5000/api` in your browser, you will see `{"message":"Hel 1. Go back to the main folder of your project ```bash -cd ../react-express-app +cd .. ``` -2. Make sure that the project that you're creating is called client +2. Create a Vite project named `client` ```bash npm create vite@latest client From 73ed2299312f3bc2810268553dc71b42f0035149 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:00:54 -0700 Subject: [PATCH 06/20] Add working directory --- .../starter-code/React-express-starter-code/client/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md index 58beeaccd..f3ff7b355 100644 --- a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md +++ b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md @@ -4,7 +4,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo ## Available Scripts -In the project directory, you can run: +From the project directory `/curriculum/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code`, you can run: ### `npm start` From 09d073718dc137b6dfc320f85cc5012b57b9222d Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:01:44 -0700 Subject: [PATCH 07/20] Add npm command --- .../starter-code/React-express-starter-code/client/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md index f3ff7b355..b2a1eeb8f 100644 --- a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md +++ b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md @@ -6,6 +6,10 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo From the project directory `/curriculum/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code`, you can run: +### `npm install` + +Installs app dependencies + ### `npm start` Runs the app in the development mode.\ From 649872355ac2c61f043e2962b99342f757317405 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:02:22 -0700 Subject: [PATCH 08/20] Add port number --- .../starter-code/React-express-starter-code/client/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md index b2a1eeb8f..9eb1d3ea3 100644 --- a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md +++ b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md @@ -13,7 +13,7 @@ Installs app dependencies ### `npm start` Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. +Open [http://localhost:5000](http://localhost:5000) to view it in your browser. The page will reload when you make changes.\ You may also see any lint errors in the console. From cdc749e3a5e74a1da6c8695bc380933b479908d8 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:11:13 -0700 Subject: [PATCH 09/20] Add deprecation note --- .../starter-code/React-express-starter-code/client/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md index 9eb1d3ea3..88e2d3b90 100644 --- a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md +++ b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/client/README.md @@ -2,6 +2,8 @@ This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +> **_NOTE:_** Create React app has been deprecated as of 2/25/2025. There is still value in continuing your tutorial, but we do not recommend starting production apps based on Create React App. + ## Available Scripts From the project directory `/curriculum/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code`, you can run: From d6bffe467d3a97c0e90f4904f2c155b07f4eb4e7 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:17:54 -0700 Subject: [PATCH 10/20] Update instructions --- .../starter-code/React-express-starter-code/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md index b3d5611d5..f336f0d59 100644 --- a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md +++ b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md @@ -22,7 +22,7 @@ npm install node index.js ``` -Open another terminal then cd into the client, install dependencies and start the server +Open another terminal tab or window (`cmd + t` or `cmd + n` respectively) then `cd` into the client, install dependencies and start the server ```bash cd client From 726d39f70e253498499cfef5ff56a66803ce3364 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:21:54 -0700 Subject: [PATCH 11/20] Update commands --- .../starter-code/React-express-starter-code/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md index f336f0d59..fe8bcb001 100644 --- a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md +++ b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md @@ -22,10 +22,10 @@ npm install node index.js ``` -Open another terminal tab or window (`cmd + t` or `cmd + n` respectively) then `cd` into the client, install dependencies and start the server +Open another terminal tab (`cmd + t`) then `cd` into the client, install dependencies and start the server ```bash -cd client +cd ../client npm install npm start ``` From bfce86cc9c65f475fcbcb322d23a4546204b59ff Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:34:57 -0700 Subject: [PATCH 12/20] Remove CRA --- react-js/advanced-routing-navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react-js/advanced-routing-navigation.md b/react-js/advanced-routing-navigation.md index 4490c0343..376c9ca54 100644 --- a/react-js/advanced-routing-navigation.md +++ b/react-js/advanced-routing-navigation.md @@ -598,7 +598,7 @@ Create a new React app and implement basic routing with React Router v6 for a si **Steps:** -1. Create a new React application using Create React App or Vite +1. Create a new React application using Vite 2. Install React Router: `npm install react-router-dom` 3. Create three page components: Home, About, and Contact 4. Set up BrowserRouter and Routes in your App component From 90d47f6b6c0c76228c2c38e792994e5a31e275d3 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:35:33 -0700 Subject: [PATCH 13/20] Remove CRA deploy --- react-js/react-part-5-full-apps.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/react-js/react-part-5-full-apps.md b/react-js/react-part-5-full-apps.md index 835dbf97c..a22508b89 100644 --- a/react-js/react-part-5-full-apps.md +++ b/react-js/react-part-5-full-apps.md @@ -16,14 +16,11 @@ ### Motivation -Until now, we've been using simple React development setups good for learning. But real apps usually need a bit more features available, so for your eventual final project you'll want to use React with Vite, a tool that generates a template empty React project so you can just starting writing your own code and not worry about how to setup all the moving parts. - #### Benefits - **👀 Live reload!** When you save a change to a file, it will almost instantly update in your browser. No more need to hit Cmd+R to reload the page - You can organize your React components and CSS any way you want and consistently use `import` to refer to them (no more confusion about `require` vs `import`) - Quickly add npm packages using `yarn add` -- Easily deploy to the cloud. You can use the `build` command to package all your code up - Lots of help available on Stack Overflow. Because many users, especially beginner engineers, are using CRA, they have probably encountered the same problem as you and are posting about it! ### Objectives From 5dac2e31c97e80630049f8fa60e85d6294f46782 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:39:17 -0700 Subject: [PATCH 14/20] Add CRA depracation note --- react-js/react-part-5-full-apps.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react-js/react-part-5-full-apps.md b/react-js/react-part-5-full-apps.md index a22508b89..ee91836ef 100644 --- a/react-js/react-part-5-full-apps.md +++ b/react-js/react-part-5-full-apps.md @@ -1,6 +1,6 @@ -# [DEPRECATED] +# React Part 5 - Full Apps using React Using Vite -## React Part 5 - Full Apps using React Using Vite +> **_NOTE:_** Create React app has been deprecated as of 2/25/2025. There is still value in continuing your tutorial, but we do not recommend starting production apps based on Create React App. ## Projected Time From 3bbb1e88621daa3c332d003297cc3fc6516470b0 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:40:45 -0700 Subject: [PATCH 15/20] Add CRA depracation note --- react-js/react-routing-forms.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/react-js/react-routing-forms.md b/react-js/react-routing-forms.md index de5d1ff5d..1123cfb30 100644 --- a/react-js/react-routing-forms.md +++ b/react-js/react-routing-forms.md @@ -1,5 +1,7 @@ # React Routing & Forms: Building Dynamic User Interfaces +> **_NOTE:_** Create React app has been deprecated as of 2/25/2025. There is still value in continuing your tutorial, but we do not recommend starting production apps based on Create React App. + ⚠️ **_This is intended to be a comprehensive advanced self-guided topic outline. You may come back to the various activities over the course of a week. See respective time estimates for each [activity](#lesson-activities) below._** ⚠️ ## Prerequisites From d071b39ff0a78bc902cc517804f4b09161b3fcee Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:48:57 -0700 Subject: [PATCH 16/20] Remove CRA --- projects/eventonica-legacy/eventonica-part7-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/eventonica-legacy/eventonica-part7-react.md b/projects/eventonica-legacy/eventonica-part7-react.md index 212fae2bb..b3170f2c3 100644 --- a/projects/eventonica-legacy/eventonica-part7-react.md +++ b/projects/eventonica-legacy/eventonica-part7-react.md @@ -153,7 +153,7 @@ class App extends React.Component { } ``` -Now you will have to modify `UsersList.js` to accept this prop. If you change the seed data above, CRA should live reload with the changes. +Now you will have to modify `UsersList.js` to accept this prop. If you change the seed data above, your app should live reload with the changes. ### Event Handling From 2d850b94200b8cd1c33b93da14f053d0e57b60ae Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 12:50:31 -0700 Subject: [PATCH 17/20] Add CRA depracation note --- react-js/class-based-components/react-part4-full-apps.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/react-js/class-based-components/react-part4-full-apps.md b/react-js/class-based-components/react-part4-full-apps.md index 4997d151a..75207ab3b 100644 --- a/react-js/class-based-components/react-part4-full-apps.md +++ b/react-js/class-based-components/react-part4-full-apps.md @@ -1,5 +1,7 @@ # React Part 4 - Full Apps using `create-react-app` (CRA) +> **_NOTE:_** Create React app has been deprecated as of 2/25/2025. There is still value in continuing your tutorial, but we do not recommend starting production apps based on Create React App. + ## Projected Time - 6 hours From 42f998ffc6f286667ae5e22120f980db51ebb7e4 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 13:10:12 -0700 Subject: [PATCH 18/20] Revert change --- .../starter-code/React-express-starter-code/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md index fe8bcb001..b3d5611d5 100644 --- a/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md +++ b/pair-programming/week-7/react-express-app/starter-code/React-express-starter-code/README.md @@ -22,10 +22,10 @@ npm install node index.js ``` -Open another terminal tab (`cmd + t`) then `cd` into the client, install dependencies and start the server +Open another terminal then cd into the client, install dependencies and start the server ```bash -cd ../client +cd client npm install npm start ``` From e13d05e44ad92c3bc874a4dd7f880684ea88f738 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 13:12:32 -0700 Subject: [PATCH 19/20] Revert change --- react-js/react-part-5-full-apps.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/react-js/react-part-5-full-apps.md b/react-js/react-part-5-full-apps.md index ee91836ef..d21c1eea1 100644 --- a/react-js/react-part-5-full-apps.md +++ b/react-js/react-part-5-full-apps.md @@ -16,6 +16,8 @@ ### Motivation +Until now, we've been using simple React development setups good for learning. But real apps usually need a bit more features available, so for your eventual final project you'll want to use React with Vite, a tool that generates a template empty React project so you can just starting writing your own code and not worry about how to setup all the moving parts. + #### Benefits - **👀 Live reload!** When you save a change to a file, it will almost instantly update in your browser. No more need to hit Cmd+R to reload the page From 17227fcf3489e98cc521f320cc0d6835f572cce9 Mon Sep 17 00:00:00 2001 From: Kaylah Rose Mitchell Date: Mon, 9 Jun 2025 13:34:06 -0700 Subject: [PATCH 20/20] Merge to main into current branc --- deploying/deploying.md | 206 ----------------------------------------- 1 file changed, 206 deletions(-) delete mode 100644 deploying/deploying.md diff --git a/deploying/deploying.md b/deploying/deploying.md deleted file mode 100644 index f63091ee9..000000000 --- a/deploying/deploying.md +++ /dev/null @@ -1,206 +0,0 @@ -# Deploying your project to Heroku - -### Projected Time - -About 3-4.5 hours - -### Prerequisites - -- Node.js and npm must be installed. -- An existing Node.js app -- [JS I - VI](../javascript) -- [Node](../node-js/node-js.md) -- [Express](../express-js/express.md) -- [PostgreSQL](../databases/installing-postgresql.md) - -### Motivation - -Deployment is a fancy term for getting your website on the web. After building out your app, you might want to share it with others and to do that you need to deploy your app to the web where others can access it. In this lesson, we'll learn more about deployment and learn one way to deploy an app. - -### Objectives - -**Participants will be able to:** - -- Deploy their website to a third-party hosting service such as Heroku. - -### Specific Things to Learn - -- What is deployment? -- Heroku - a cloud-based server - -### Materials - -- [Video - What is Heroku (4 mins watch)](https://youtu.be/r5ZUQvl9BtE) -- [Techtonica Slides: Deploying](https://docs.google.com/presentation/d/1Enwhd9hl1fn1-afMXJ6xvkJm5SDJpHjfQoA7s2znHpw/edit?usp=sharing) -- [Deploy Node.JS Apps to Heroku (10 mins Video)](https://youtu.be/AZNFox2CvBk) - -### Lesson - -- Heroku is a cloud-based service you can use to put your site on the internet for people to interact with. -- Learn about deployment by going through the [Techtonica Slides on Deploying](https://docs.google.com/presentation/d/1Enwhd9hl1fn1-afMXJ6xvkJm5SDJpHjfQoA7s2znHpw/edit?usp=sharing) -- Learn a little about Heroku by watching: [Video - What is Heroku (4 mins watch)](https://youtu.be/r5ZUQvl9BtE) -- Watch [Deploy Node.JS Apps to Heroku (10 min Video)](https://youtu.be/AZNFox2CvBk) - -#### Deploying - -Now we'll work on deploying your app to Heroku. - -We'll be combining your front-end (React) with your back-end (Express) and deploying it to Heroku. Your front-end contains "static" JavaScript files -- when you deploy to Heroku, it turns your whole React app into a couple of static files that it will serve to the browser. No matter what data you have in the database, these files will always be the same. - -Your backend, on the other hand, is dynamic -- when you make an API request, the backend runs javascript code to do things like reading and writing to a database. Unlike the React app, which always serves the same files to the browser, the backend will serve different information to the browser depending on what's in the database. We're going to combine your dynamic code (Express), with your static code (React). - -1. cd into the React app and create 2 new directories `client` and `server`, then move _everything_ into the directory `client`: - -``` -cd -mkdir client -mv * client -``` - -2. Create a server directory. You will copy all the files from your Express API folder (1-3 JS files + package.json) into the `server` folder you're about to create inside your React app. _**This is where your API code will live from now on -- don't modify or use the old directory or repo**_ - -``` -mkdir server -cp my-express-server/* server -# We need to keep package.json and node_modules at the top level. -mv server/package.json . -mv server/package-lock.json . -mv server/node_modules . -``` - -At this point, you should have the following directory structure: - -``` -./eventonica-app -./eventonica-app/client/* # The code for your React App -./eventonica-app/server/* # Your express API (app.js etc.) -./eventonica-app/package.json # Toplevel package.json used by Heroku to run your app -./eventonica-app/package-lock.json # Toplevel package-lock.json used by Heroku to run your app -``` - -3. Test out your new server locally: - -``` -# Make sure you use the filename you used when you created your Express API -node server/app.js -``` - -4. Modify your gitignore to ensure you don't commit `build` or `node_modules`, even though they aren't at the root. Add these lines: - -``` -**/node_modules/ -**/build/ -``` - -5. Change the port your server is listening on to be - `process.env.PORT || 3000` (Replace 3000 by a different number if your Express app was configured to run on a different port) - -When we deploy to Heroku, Heroku will choose what port our server runs on. - -6. Modify your express server to serve static files by adding this block to your express server AFTER all your other defined routes: - -```javascript -// Add this below all your other routes -if (process.env.NODE_ENV === 'production') { - // Serve any static files - app.use(express.static(path.join(__dirname, '../client/build'))); - // Handle React routing, return all requests to React app - app.get('*', function (req, res) { - res.sendFile(path.join(__dirname, '../client/build', 'index.html')); - }); -} -``` - -This block of code only runs in production. When it runs, it will serve your JavaScript files if the URL doesn't match an existing API. - -6. Configure the top-level `package.json` to work with Heroku by adding the following two lines to the `scripts` section: - -```json - "start": "node server/server.js", - "heroku-postbuild": "npm install --only=dev --no-shrinkwrap && npm run build" -``` - -You can replace `node server/server.js` with whatever you named your API code -file. - -7. Create a free Heroku account at https://signup.heroku.com/dc. - ThroughtheHerokuwebUI,createanewApplication.Onceyoucreatetheapp,addthePostgresadd-onbygoingtotheResourcestabandsearchinginthe"Add-ons"searchboxforPostgres.Clickthe"HerokuPostgres"option.Finally,selectthefreeversionandclick"Provision".OryoucancreateanewApplicationfromtheCLI.Tocreateanapplicationwithname,installtheHerokuCLIandrunthefollowingcommand`heroku create app_name` - This command will only be used on an initialized git repository. In that case, the command creates the application as well as a git remote, that you can use to push your code to Heroku: - - ```mkdir example - cd example - git init - heroku apps:create app_name - - ``` - -8. Install the Heroku CLI: `brew tap heroku/brew && brew install heroku` then use `heroku login` - -9. Attach your Heroku app to your code by running `heroku git:remote -a YOUR-APP-NAME` - inside the terminal at the root of your project directory. - -10. Configure your database. Heroku will specify environment variables you can use to connect to the DB: - -```javascript -new Pool({ - // Make sure you swap out and - connectionString: process.env.DATABASE_URL || 'postgres://localhost:5432/' - // Use SSL but only in production - ssl: process.env.NODE_ENV === 'production' -}); -``` - -Fill in your local database name in the Postgres URL. This is the default -database URL when your app is running locally. - -11. Use Heroku to create the database tables you need: - `heroku pg:psql` - You should use the same commands you ran to create your database locally - `create table events (.....)` - If you've forgotten, `psql` into your local database and check your table schema - with `\d events`. Copy that schema into your new Heroku database. - -12. Commit everything! - -``` -git add -a -git commit -m "Heroku setup\!" -``` - -Ensure you don't have any missing files: `git status` and commit them if you need to. - -13. Deploy your app! - `git push heroku main` - This takes a long time. - This will print the URL your app was deployed to. Try going to it! If something goes wrong, use `heroku logs --tail` to debug. - -### Wrapping Up - -Lastly, we'll configure your React frontend client to work seamlessly with your express server backend locally, even though they're running on two different ports. - -React + Vite: add the following line to `client/vite.config.js`: - -``` -server: { - proxy: { - '/api': { - target: "http://localhost:8080", - changeOrigin: true, - secure: false, - } - } - } -``` - -### Gotchas - -- Ensure you don't accidentally commit `node_modules` -- Don't forget to configure `port` to come from `process.env` -- Use `heroku logs --tail` to see what's wrong - -All done! Small differences in the way you've set up your site may make bits of this process not work as expected, so there may be some debugging required. - -### Supplemental Resources - -- [Tutorial - Heroku Dev Center Deployment](https://devcenter.heroku.com/articles/deploying-nodejs) -- [Overview of Deployment Options - MDN Express & Node Deployment](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment)