diff --git a/2-js-basics/1-data-types/README.md b/2-js-basics/1-data-types/README.md index e374e51c..d9570bf0 100644 --- a/2-js-basics/1-data-types/README.md +++ b/2-js-basics/1-data-types/README.md @@ -66,6 +66,8 @@ Creating and **declaring** a variable has the following syntax **[keyword] [name ✅ Try it! You can write JavaScript right in your browser. Open a browser window and navigate to Developer Tools. In the console, you will find a prompt; type `let myVariable = 123`, press return, then type `myVariable`. What happens? Note, you'll learn more about these concepts in subsequent lessons. + The value 123 will be shown in the console. + ## Constants Declaration and initialization of a constant follows the same concepts as a variable, with the exception of the `const` keyword. Constants are typically declared with all uppercase letters. @@ -109,6 +111,12 @@ Variables can store many different types of values, like numbers and text. These ✅ Data Types are also referred to as JavaScript data primitives, as they are the lowest-level data types that are provided by the language. There are 7 primitive data types: string, number, bigint, boolean, undefined, null and symbol. Take a minute to visualize what each of these primitives might represent. What is a `zebra`? How about `0`? `true`? +Zebra: A zebra is not directly related to any of the primitive data types. However, you could use a string data type to represent the word "zebra" or use an object to represent the characteristics of a zebra (e.g., color, stripes). + +0: The number 0 is a numeric value and can be represented using the number data type. + +True: True is a boolean value and can be represented using the boolean data type. It represents a logical condition or state of being true. + ### Numbers In the previous section, the value of `myVariable` was a number data type. @@ -131,6 +139,8 @@ There are several types of operators to use when performing arithmetic functions ✅ Try it! Try an arithmetic operation in your browser's console. Do the results surprise you? +The results didn't suprise me because it is just doing simple math arithmetic operation. + ### Strings Strings are sets of characters that reside between single or double quotes. @@ -159,6 +169,10 @@ myString1 + ", " + myString2 + "!"; //Hello, World! ✅ Why does `1 + 1 = 2` in JavaScript, but `'1' + '1' = 11?` Think about it. What about `'1' + 1`? +The reason behind the different outcomes in JavaScript when performing addition with different types of operands is due to the behavior of the addition operator and how it handles different data types. + +`'1' + 1 = `'11'` + **Template literals** are another way to format strings, except instead of quotes, the backtick is used. Anything that is not plain text must be placed inside placeholders `${ }`. This includes any variables that may be strings. ```javascript @@ -173,6 +187,10 @@ You can achieve your formatting goals with either method, but template literals ✅ When would you use a template literal vs. a plain string? +const name = 'John'; +const greeting = `Hello, ${name}!`; + + ### Booleans Booleans can be only two values: `true` or `false`. Booleans can help make decisions on which lines of code should run when certain conditions are met. In many cases, [operators](#arithmetic-operators) assist with setting the value of a Boolean and you will often notice and write variables being initialized or their values being updated with an operator. @@ -188,6 +206,8 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find? +It will return false because age = 1 and Age = 2. So 1 is not equal to 2. 1 != 2 + ## Post-Lecture Quiz [Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8) diff --git a/2-js-basics/1-data-types/assignment.md b/2-js-basics/1-data-types/assignment.md index 720dd7d2..3bbce535 100644 --- a/2-js-basics/1-data-types/assignment.md +++ b/2-js-basics/1-data-types/assignment.md @@ -4,6 +4,22 @@ Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices? + +Data Types for Shopping Cart +To build a shopping cart, we need to consider various data types that will facilitate the shopping experience. Below, I will discuss six essential data types and explain how they contribute to the functionality of a shopping cart. + +Product: The product data type represents the items available for purchase in the online store. It typically includes information such as the product name, description, price, quantity, and any other relevant details. Storing products allows us to display them in the user interface, track inventory, and calculate the total cost of the items in the shopping cart. + +User: The user data type represents the individuals who interact with the shopping cart. It includes details like the user's name, email address, shipping address, and payment information. Storing user data allows for personalization, order tracking, and facilitating the checkout process. + +Cart: The cart data type represents the actual shopping cart where users can add or remove products. It may contain information about the products added by the user, such as the product ID, quantity, and any applied discounts. Storing the cart allows users to review and modify their selections before proceeding to checkout. + +Order: The order data type represents a completed purchase. It includes information about the products purchased, the user who placed the order, the order date, and the total cost. Storing order data allows for order history, tracking shipments, and generating invoices. + +Coupon: The coupon data type represents discounts or promotional offers that users can apply to their cart. It typically includes details like the coupon code, discount percentage or amount, and any restrictions or expiration dates. Storing coupon data enables users to benefit from discounts and allows for validation during the checkout process. + +Payment: The payment data type represents the transaction details when a user completes a purchase. It includes information such as the payment method (credit card, PayPal, etc.), payment status, transaction ID, and billing information. Storing payment data is crucial for processing payments securely and verifying successful transactions. + ## Rubric Criteria | Exemplary | Adequate | Needs Improvement diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md index 79f87e49..768f0826 100644 --- a/2-js-basics/2-functions-methods/README.md +++ b/2-js-basics/2-functions-methods/README.md @@ -184,6 +184,8 @@ You've now seen we have three ways to pass a function as a parameter and might b Can you articulate in one sentence the difference between functions and methods? Give it a try! +nctions are standalone blocks of code that perform specific tasks, while methods are functions that are associated with objects and can access and modify their internal data. + ## Post-Lecture Quiz [Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10) diff --git a/2-js-basics/2-functions-methods/assignment.md b/2-js-basics/2-functions-methods/assignment.md index 4fbe387d..dcd9d1c2 100644 --- a/2-js-basics/2-functions-methods/assignment.md +++ b/2-js-basics/2-functions-methods/assignment.md @@ -4,6 +4,31 @@ Create different functions, both functions that return something and functions that don't return anything. +Function that returns a value: + +// Function to calculate the area of a rectangle +function calculateRectangleArea(length, width) { + var area = length * width; + return area; +} + +// Function call and storing the returned value +var rectangleArea = calculateRectangleArea(5, 8); +console.log(rectangleArea); // Output: 40 + + +Function that doesn't return anything: + +// Function to greet a person +function greetPerson(name) { + console.log("Hello, " + name + "!"); +} + +// Function call (no return value) +greetPerson("John"); // Output: Hello, John! + + + See if you can create a function that has a mix of parameters and parameters with default values. ## Rubric diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index 738772a5..76b45514 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -140,6 +140,8 @@ let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber; ✅ Take a minute to read this code a few times. Do you understand how these operators are working? +Yes, I do + The above states that - if `firstNumber` is larger than `secondNumber` - then assign `firstNumber` to `biggestNumber` @@ -162,6 +164,38 @@ if (firstNumber > secondNumber) { Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax? + +``` +// Program using logical operators +function checkNumber(num) { + if (num > 0) { + console.log("Positive"); + } else if (num < 0) { + console.log("Negative"); + } else { + console.log("Zero"); + } +} + +// Function call +checkNumber(5); // Output: Positive +checkNumber(-3); // Output: Negative +checkNumber(0); // Output: Zero +``` + +``` +// Program using ternary expression +function checkNumber(num) { + var result = (num > 0) ? "Positive" : (num < 0) ? "Negative" : "Zero"; + console.log(result); +} + +// Function call +checkNumber(5); // Output: Positive +checkNumber(-3); // Output: Negative +checkNumber(0); // Output: Zero +``` + --- ## Post-Lecture Quiz [Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12) diff --git a/2-js-basics/3-making-decisions/assignment.md b/2-js-basics/3-making-decisions/assignment.md index 54c15533..ae53f979 100644 --- a/2-js-basics/3-making-decisions/assignment.md +++ b/2-js-basics/3-making-decisions/assignment.md @@ -31,6 +31,16 @@ let allStudents = [ ] let studentsWhoPass = []; + +for (let i = 0; i < allStudents.length; i++) { + let grade = allStudents[i]; + + if ((typeof grade === 'number' && grade >= 3) || (typeof grade === 'string' && grade !== 'C-' && grade !== 'D' && grade !== 'F')) { + studentsWhoPass.push(grade); + } +} + +console.log(studentsWhoPass); ``` ## Rubric diff --git a/2-js-basics/4-arrays-loops/README.md b/2-js-basics/4-arrays-loops/README.md index e1fa4a72..ebbf321b 100644 --- a/2-js-basics/4-arrays-loops/README.md +++ b/2-js-basics/4-arrays-loops/README.md @@ -66,6 +66,25 @@ iceCreamFlavors.length; //5 ✅ Try it yourself! Use your browser's console to create and manipulate an array of your own creation. +``` +let myArray = [1, 2, 3, 4, 5]; + +console.log(myArray); // Output: [1, 2, 3, 4, 5] + +myArray.push(6); // Add an element to the end of the array +console.log(myArray); // Output: [1, 2, 3, 4, 5, 6] + +myArray.pop(); // Remove the last element from the array +console.log(myArray); // Output: [1, 2, 3, 4, 5] + +myArray.splice(2, 1); // Remove one element at index 2 +console.log(myArray); // Output: [1, 2, 4, 5] + +let doubledArray = myArray.map(num => num * 2); // Create a new array by doubling each element +console.log(doubledArray); // Output: [2, 4, 8, 10] + +``` + ## Loops Loops allow us to perform repetitive or **iterative** tasks, and can save a lot of time and code. Each iteration can vary in their variables, values, and conditions. There are different types of loops in JavaScript, and they all have small differences, but essentially do the same thing: loop over data. @@ -86,6 +105,17 @@ for (let i = 0; i < 10; i++) { ✅ Run this code in a browser console. What happens when you make small changes to the counter, condition, or iteration expression? Can you make it run backwards, creating a countdown? +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 + ### While loop Unlike the syntax of the `for` loop, `while` loops only require a condition that will stop the loop when the condition becomes `false`. Conditions in loops usually rely on other values like counters, and must be managed during the loop. Starting values for counters must be created outside the loop, and any expressions to meet a condition, including changing the counter must be maintained inside the loop. @@ -121,6 +151,28 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques. +``` +let allStudents = [ + 'A', + 'B-', + 1, + 4, + 5, + 2 +]; + +let studentsWhoPass = []; + +allStudents.forEach(grade => { + if ((typeof grade === 'number' && grade >= 3) || (typeof grade === 'string' && grade !== 'C-' && grade !== 'D' && grade !== 'F')) { + studentsWhoPass.push(grade); + } +}); + +console.log(studentsWhoPass); + +``` + ## Post-Lecture Quiz [Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14) diff --git a/2-js-basics/4-arrays-loops/assignment.md b/2-js-basics/4-arrays-loops/assignment.md index 0b9bd6dc..7672ae43 100644 --- a/2-js-basics/4-arrays-loops/assignment.md +++ b/2-js-basics/4-arrays-loops/assignment.md @@ -6,6 +6,12 @@ Create a program that lists every 3rd number between 1-20 and prints it to the c > TIP: use a for-loop and modify the iteration-expression +``` +for (let i = 1; i <= 20; i += 3) { + console.log(i); +} +``` + ## Rubric | Criteria | Exemplary | Adequate | Needs Improvement |