From c08ca4902af4a64aa93d84e49349cc05c192d72f Mon Sep 17 00:00:00 2001
From: kevinlu021 <115970778+kevinlu021@users.noreply.github.com>
Date: Sat, 21 Sep 2024 17:42:25 -0700
Subject: [PATCH] added 3 exercises to js school (#80)

* added 3 exercises to js school

* fixed lint issues

* fixed lint issues for TOOD button

* Fix build errors

* added async exercise and slightly reworked button styling

* changed button color to light orange

* fixed linting issues

* fixed setIsVisible nit

* fixed linting

---------

Co-authored-by: Kevin Lu <kevinlu@acmucsd.org>
Co-authored-by: Angela Hu <angelahu925@gmail.com>
---
 pages/hack-school/js.mdx               | 86 +++++++++++++++++++++++++-
 pages/hack-school/toggle_component.tsx | 25 ++++++++
 2 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 pages/hack-school/toggle_component.tsx

diff --git a/pages/hack-school/js.mdx b/pages/hack-school/js.mdx
index a6084e4..cdb2e28 100644
--- a/pages/hack-school/js.mdx
+++ b/pages/hack-school/js.mdx
@@ -1,3 +1,5 @@
+import ToggleCodeBlock from './toggle_component';
+
 # Week 2: JavaScript
 
 ## What is JavaScript?
@@ -136,6 +138,18 @@ const communites = ["Hack", "AI", "Cyber", "Design"];
 const date = new Date("10-18-2023");
 ```
 
+## Exercise 1: Javascript Syntax Quiz
+Create a variable called firstName, that has your first name as it's value. 
+Then, create a variable called lastName, that has your last name as it's value.
+Using the console.log() function, print the two variables together.
+<ToggleCodeBlock>
+```javascript copy showLineNumbers
+let firstName = "Nishant"
+let lastName = "Balaji"
+console.log(firstName + " " + lastName) // Nishant Balaji
+```
+</ToggleCodeBlock>
+
 ## Operators
 Operators in JavaScript perform actions on values and variables. 
 These include arithmetic, comparison, logical, and assignment operators.
@@ -238,7 +252,24 @@ console.log(organization[age]);; // prints 6
 organization.hackschool(); // prints "JavaScript Workshop"
 ```
 
+## Exercise 2: Creating and Manipulating Objects
+Create an object representing a UCSD student. Include properties such as name, college, year, and favorite subject.
+Then, write a function that updates the student's favorite subject.
+
+<ToggleCodeBlock>
+```javascript copy showLineNumbers
+let student = {
+  name: "Billy",
+  college: "Sixth",
+  year: "Freshman",
+  favoriteSubject: "Math",
+}
 
+function updateFavoriteSubject(student, subject) {
+  student.favoriteSubject = subject
+}
+```
+</ToggleCodeBlock>
 ## Loops
 Loops allow you to execute a block of code repeatedly. Common loop types are `while`and `for` loops.
 
@@ -405,6 +436,28 @@ obj.greeting();
 // prints window
 ```
 
+## Exercise 3: Creating Functions
+Create your own array of food items.
+Then, write a function findFood() that takes in the array and a food item.
+It will loop through the array and return true if the item exists in the array, and false otherwise. 
+<ToggleCodeBlock>
+```javascript copy showLineNumbers
+let foodList = ["banana", "apple", "peach", "orange"]
+
+function findFood(foodList, food){
+  for (item in foodList){
+    if (item === food){
+      return true
+    }
+  }
+  return false
+}
+
+console.log(findFood(foodList, "apple")) // true
+console.log(findFood(foodList, "kiwi")) // false
+```
+</ToggleCodeBlock>
+
 ## Callbacks
 Callbacks are functions passed as arguments to other functions. They are commonly used for asynchronous programming and event handling.
 
@@ -494,4 +547,35 @@ findUser()
     console.log("Age:", age + 5);
   })
   .catch((error) => console.error("Error:", error.message));
-```
\ No newline at end of file
+```
+
+## Exercise 4: Async await practice
+
+Create an async function fetchData that simulates an API call to fetch user data. The function should return a promise that resolves after 2 seconds with a user object containing name and email.
+
+Then, write another async function displayUser that uses await to call fetchData and logs the user's information to the console.
+
+<ToggleCodeBlock> 
+```javascript copy showLineNumbers 
+// Simulate API call using a Promise that resolves after 2 seconds 
+async function fetchData() { 
+  return new Promise((resolve) => { 
+    setTimeout(() => { 
+      resolve({ name: "John Doe", email: "john.doe@example.com" }); 
+    }, 2000); 
+  }); 
+}
+
+// Use async/await to fetch and display user data
+async function displayUser() { 
+  try { 
+    const user = await fetchData(); 
+    console.log("User Name:", user.name); 
+    console.log("User Email:", user.email); 
+  } catch (error) { 
+    console.error("Error:", error.message); 
+  } 
+}
+// Call the displayUser function displayUser();
+```
+</ToggleCodeBlock>
\ No newline at end of file
diff --git a/pages/hack-school/toggle_component.tsx b/pages/hack-school/toggle_component.tsx
new file mode 100644
index 0000000..f85017e
--- /dev/null
+++ b/pages/hack-school/toggle_component.tsx
@@ -0,0 +1,25 @@
+import { useState, FC, ReactNode } from 'react';
+
+const ToggleCodeBlock: FC<{ children: ReactNode }> = ({ children }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setIsVisible(isVisible => !isVisible)}
+        style={{
+          backgroundColor: 'hsl(var(--nextra-primary-hue) 100% 70% / var(--tw-bg-opacity))',
+          borderRadius: '4px',
+          padding: '0.5rem',
+          margin: '0.5rem',
+        }}
+      >
+        {isVisible ? 'Hide Code' : 'Show Code'}
+      </button>
+      {isVisible && <code>{children}</code>}
+    </div>
+  );
+};
+
+export default ToggleCodeBlock;