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. + +```javascript copy showLineNumbers +let firstName = "Nishant" +let lastName = "Balaji" +console.log(firstName + " " + lastName) // Nishant Balaji +``` + + ## 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. + + +```javascript copy showLineNumbers +let student = { + name: "Billy", + college: "Sixth", + year: "Freshman", + favoriteSubject: "Math", +} +function updateFavoriteSubject(student, subject) { + student.favoriteSubject = subject +} +``` + ## 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. + +```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 +``` + + ## 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. + + +```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(); +``` + \ 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 ( +
+ + {isVisible && {children}} +
+ ); +}; + +export default ToggleCodeBlock;