feat: The Odin Project Learn Data Types and Conditionals (#54012)

Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

client/i18n/locales/english/intro.json

@@ -1113,7 +1113,8 @@
       "freeCodeCamp has expanded upon the open source curriculum to make it run interactively in the browser, with tests to evaluate your code and ensure you've understood key concepts.",
       "If you want the original experience of configuring all of The Odin Project to run on your local computer, you can check out the original Odin Project on <a href='https://www.theodinproject.com/' target='_blank' rel='noopener noreferrer nofollow'>The Odin Project website</a>. A huge thanks to The Odin Project community for continuing to maintain this valuable learning resource for developers all around the world.",
       "This course is unofficial, and not endorsed by The Odin Project. Changes to The Odin Project curriculum content have been made, and all instructional material for this course is licenced under <a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' target='_blank' rel='noopener noreferrer nofollow'>CC-BY-SA-NC 4.0</a>",
-      "<a href='https://github.com/TheOdinProject/curriculum?tab=License-1-ov-file#readme' target='_blank' rel='noopener noreferrer nofollow'>&copy; The Odin Project</a>"
+      "<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/deed' target='_blank' rel='noopener noreferrer nofollow'>&copy; The Odin Project</a>",
+      "This course includes content from <a href='javascript.info'>JavaScript.info</a>, which is licenced under <a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' target='_blank' rel='noopener noreferrer nofollow'>CC-BY-NC-SA 4.0</a>"
     ],
     "blocks": {
       "top-learn-html-foundations": {
@@ -1181,6 +1182,10 @@
         "intro": [
           "Get started with JavaScript by learning about variables and operators. This course covers the fundamentals of JavaScript programming, including data types, operators, and variable declarations."
         ]
+      },
+      "top-learn-data-types-and-conditionals": {
+        "title": "Learn Data Types and Conditionals",
+        "intro": ["Learn about data types and conditionals in JavaScript."]
       }
     }
   },

curriculum/challenges/_meta/top-learn-data-types-and-conditionals/meta.json

@@ -0,0 +1,61 @@
+{
+  "name": "TOP Learn Data Types and Conditionals",
+  "isUpcomingChange": true,
+  "dashedName": "top-learn-data-types-and-conditionals",
+  "helpCategory": "Odin",
+  "order": 11,
+  "time": "",
+  "template": "",
+  "required": [],
+  "superBlock": "the-odin-project",
+  "challengeOrder": [
+    {
+      "id": "65e9713d484dd50f720e6fe6",
+      "title": "Learn Data Types and Conditionals Question A"
+    },
+    {
+      "id": "65e97164484dd50f720e6fe7",
+      "title": "Learn Data Types and Conditionals Question B"
+    },
+    {
+      "id": "65e97251484dd50f720e6fe8",
+      "title": "Learn Data Types and Conditionals Question C"
+    },
+    {
+      "id": "65e9725a484dd50f720e6fe9",
+      "title": "Learn Data Types and Conditionals Question D"
+    },
+    {
+      "id": "65e97260484dd50f720e6fea",
+      "title": "Learn Data Types and Conditionals Question E"
+    },
+    {
+      "id": "65e97267484dd50f720e6feb",
+      "title": "Learn Data Types and Conditionals Question F"
+    },
+    {
+      "id": "65e9726d484dd50f720e6fec",
+      "title": "Learn Data Types and Conditionals Question G"
+    },
+    {
+      "id": "65e9727a484dd50f720e6fed",
+      "title": "Learn Data Types and Conditionals Question H"
+    },
+    {
+      "id": "65e97280484dd50f720e6fee",
+      "title": "Learn Data Types and Conditionals Question I"
+    },
+    {
+      "id": "65e97288484dd50f720e6fef",
+      "title": "Learn Data Types and Conditionals Question J"
+    },
+    {
+      "id": "65e9728d484dd50f720e6ff0",
+      "title": "Learn Data Types and Conditionals Question K"
+    },
+    {
+      "id": "65e97293484dd50f720e6ff1",
+      "title": "Learn Data Types and Conditionals Question L"
+    }
+  ]
+}

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-a.md

@@ -0,0 +1,50 @@
+---
+id: 65e9713d484dd50f720e6fe6
+title: Learn Data Types and Conditionals Question A
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-a
+---
+# --description--
+
+Depending on what kind of work you're doing, you might end up working more with pieces of text rather than numbers. A **string** is a piece of text… and is a fundamental building block of the language.
+
+HTML provides structure and meaning to text, CSS allows us to precisely style it, and JavaScript offers many features for manipulating strings. These include creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more.
+
+Strings are a fundamental data type in JavaScript. They are used to represent text and are wrapped in either single, double quotes or backticks:
+
+```javascript
+let greeting = "Hello World!";
+
+let greeting2 = 'I am learning JavaScript!';
+
+let greeting3 = `with The Odin Project!`;
+```
+
+Strings declared using single quotes and strings declared using double quotes are the same, and which you use is down to personal preference — although it is good practice to choose one style and use it consistently in your code.
+
+# --assignment--
+
+There are many ways to manipulate strings in JavaScript. Go through points 8 through 12 of our <a href="https://www.freecodecamp.org/news/javascript-string-handbook/" target="_blank">JavaScript String Handbook</a>
+
+# --question--
+
+## --text--
+
+Which statement accurately describes the versatility and use of strings in JavaScript in conjunction with HTML, CSS, and JavaScript itself?
+
+## --answers--
+
+Strings in JavaScript can only be manipulated using CSS for web page design.
+
+---
+
+JavaScript strings are exclusively used for mathematical computations and cannot interact with HTML or CSS.
+
+---
+
+Strings allow for text manipulation in JavaScript, including but not limited to creating custom messages, sorting terms, and dynamically updating HTML content with CSS styling.
+
+
+## --video-solution--
+
+3

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-b.md

@@ -0,0 +1,45 @@
+---
+id: 65e97164484dd50f720e6fe7
+title: Learn Data Types and Conditionals Question B
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-b
+---
+# --description--
+
+Now that you have gone through the points listed in the assignment of the previous challenge, you should have a good understanding of how strings can be manipulated in JavaScript.
+
+Currently, this given string has a trailing space at the end after the exclamation mark. To solve this, you need to remove the trailing space from the string using a predefined method.
+
+```javascript
+let greeting = "Hello World!  ";
+
+console.log(greeting);
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Following the problem above, which method should be used to only remove the trailing space from the string?
+
+## --answers--
+
+The `trim()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `replace()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimEnd()` method should be used to only remove the trailing space from the string.
+
+---
+
+The `trimStart()` method should be used to only remove the trailing space from the string.
+
+## --video-solution--
+
+3

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-c.md

@@ -0,0 +1,41 @@
+---
+id: 65e97251484dd50f720e6fe8
+title: Learn Data Types and Conditionals Question C
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-c
+---
+# --description--
+
+Seeing the example below, You want to make sure the word `loves` is present in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to check if the word `loves` is present in the string?
+
+## --answers--
+
+The `includes()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `indexOf()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `search()` method should be used to check if the word `loves` is present in the string.
+
+---
+
+The `toUpperCase()` method should be used to check if the word `loves` is present in the string.
+
+## --video-solution--
+
+1

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-d.md

@@ -0,0 +1,41 @@
+---
+id: 65e9725a484dd50f720e6fe9
+title: Learn Data Types and Conditionals Question D
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-d
+---
+# --description--
+
+Seeing the example below You want to know the index of the last occurence of the word `The` in the string.
+
+```javascript
+let sentence = "freeCodeCamp loves The Odin Project! The Odin Project is great!";
+```
+
+<a href="https://www.freecodecamp.org/news/javascript-string-handbook" target="_blank"> Link to Guide </a>
+
+# --question--
+
+## --text--
+
+Which method should be used to find the index of the last occurence of the word `The` in the string?
+
+## --answers--
+
+The `includes()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `lastIndexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `indexOf()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+---
+
+The `search()` method should be used to find the index of the last occurence of the word `The` in the string.
+
+## --video-solution--
+
+2

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-e.md

@@ -0,0 +1,45 @@
+---
+id: 65e97260484dd50f720e6fea
+title: Learn Data Types and Conditionals Question E
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-e
+---
+# --description--
+
+Strings defined using backticks are called template literals. They are a new way to define strings in JavaScript. They allow you to embed expressions within the string. This is done by wrapping the expression in `${}`.
+
+For example, the following code:
+
+```javascript
+let name = "John";
+let age = 25;
+let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+```
+
+will result in the `greeting` variable containing the string "Hello, my name is John and I am 25 years old."
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to define a template literal in JavaScript?
+
+## --answers--
+
+``` `Hello, my name is ${name} and I am ${age} years old.` ```
+
+---
+
+``` `Hello, my name is `name` and I am `age` years old.` ```
+
+---
+
+``` `Hello, my name is {name} and I am {age} years old.` ```
+
+---
+
+``` `Hello, my name is $name and I am $age years old.` ```
+
+## --video-solution--
+
+1

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-f.md

@@ -0,0 +1,58 @@
+---
+id: 65e97267484dd50f720e6feb
+title: Learn Data Types and Conditionals Question F
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-f
+---
+# --description--
+
+You know that JavaScript has a variety of data types, including strings, numbers and booleans. You can use comparison operators to compare these data types and make decisions based on the results.
+
+The following comparison operators are available in JavaScript:
+
+| Operator | Description                              | Example      |
+|----------|------------------------------------------|--------------|
+| ==       | Equal (value comparison)                 | x == y       |
+| !=       | Not equal                                | x != y       |
+| >        | Greater than                             | x > y        |
+| <        | Less than                                | x < y        |
+| >=       | Greater than or equal to                 | x >= y       |
+| <=       | Less than or equal to                    | x <= y       |
+
+To use a comparison in a variable assignment, you can use the `==` operator. For example:
+
+```javascript
+let x = 5;
+let y = 5;
+
+let result = x == y;
+
+console.log(result); // true
+```
+
+
+# --question--
+
+## --text--
+
+Which of the following is the correct way to check if the variable `x` is equal to the number `5` in JavaScript?
+
+## --answers--
+
+`x = 5`
+
+---
+
+`x <= 5`
+
+---
+
+`x == 5`
+
+---
+
+`x >= 5`
+
+## --video-solution--
+
+3

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-g.md

@@ -0,0 +1,53 @@
+---
+id: 65e9726d484dd50f720e6fec
+title: Learn Data Types and Conditionals Question G
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-g
+---
+# --description--
+
+JavaScript also has the ability to compare types and values using the strict equality operator `===`. This operator checks if the two values are equal and of the same type. For example:
+
+```javascript
+let x = 5;
+let y = "5";
+
+let result = x === y;
+
+console.log(result); // false
+```
+
+In this example, the `result` variable will contain `false` because `x` is a number and `y` is a string. But if you use the `==` operator, the result will be `true` because JavaScript will convert the string to a number and compare the values.
+
+This operator is called the strict equality operator because it checks for both value and type equality. It is often recommended to use the `===` operator to avoid unexpected results when comparing values.
+
+There is also a strict inequality operator `!==` that checks if the two values are not equal and of the same type.
+
+There are a lot of ways to use the strict equality operator, and it's important to understand how it works.
+
+# --assignment--
+
+Read <a href="https://javascript.info/comparison" target="_blank" rel="noopener noreferrer nofollow">this article on JavaScript.info</a> to learn more about the strict equality operator.
+
+# --question--
+
+## --text--
+
+What happens when you use the strict equality operator `===` to compare a number of the value `0` and a boolean of the value `false`?
+
+## --answers--
+
+The output would be `true`.
+
+---
+
+The output would be `false`.
+
+---
+
+You cannot compare a number and a boolean using the strict equality operator.
+
+
+## --video-solution--
+
+2

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-h.md

@@ -0,0 +1,57 @@
+---
+id: 65e9727a484dd50f720e6fed
+title: Learn Data Types and Conditionals Question H
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-h
+---
+# --description--
+
+In any programming language, you need to compare values to make decisions. For example, if the weather is sunny, you will go out, otherwise you will stay at home. Another example would be to see if a user has enough points to level up in a game.
+
+The `if-else` conditional statement is used to make decisions in JavaScript. It is often used with comparison operators to compare values and make decisions based on the results.
+
+An example of an if statement is:
+
+```javascript
+let x = 5;
+
+if (x > 3) {
+  console.log("x is greater than 3");
+} else {
+  console.log("x is less than or equal to 3");
+}
+```
+
+In this example, the `x` variable is compared to the number `3` using the `>` operator. If `x` is greater than `3`, the first block of code will be executed. Otherwise, the second block of code will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+
+let x = 9;
+let y = "5";
+
+if (x == y) {
+  console.log("x is equal to y");
+} else {
+  console.log("x is not equal to y");
+}
+
+```
+
+## --answers--
+
+`x is equal to y`
+
+---
+
+`x is not equal to y`
+
+
+## --video-solution--
+
+2

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-i.md

@@ -0,0 +1,59 @@
+---
+id: 65e97280484dd50f720e6fee
+title: Learn Data Types and Conditionals Question I
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-i
+---
+# --description--
+
+In the last example, you had two choices `if` or `else`. But what if you want to have more than two choices? You can use the `else if` statement to add more conditions to our code. The `else if` statement allows us to check multiple conditions and execute a block of code when the first condition is true. If the first condition is false, it will check the next condition and so on. If none of the conditions are true, the `else` block will be executed.
+
+Here is an example of the `else if` statement:
+
+```javascript
+let x = 5;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+In this example, the `x` variable is compared to the number `10` using the `>` operator. If `x` is greater than `10`, the first block of code will be executed. Otherwise, the `else if` statement will check the next condition. If `x` is greater than `5`, the second block of code will be executed. Otherwise, the `else` block will be executed.
+
+# --question--
+
+## --text--
+
+What will be the output of the following code?
+
+```javascript
+let x = 4;
+
+if (x > 10) {
+  console.log("x is greater than 10");
+} else if (x > 5) {
+  console.log("x is greater than 5");
+} else {
+  console.log("x is less than or equal to 5");
+}
+```
+
+## --answers--
+
+`x is less than or equal to 5`
+
+---
+
+`x is greater than 5`
+
+---
+
+`x is greater than 10`
+
+## --video-solution--
+
+1

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-j.md

@@ -0,0 +1,100 @@
+---
+id: 65e97288484dd50f720e6fef
+title: Learn Data Types and Conditionals Question J
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-j
+---
+# --description--
+
+More complex conditional statements might include multiple conditions. That is why logical operators are used to combine multiple conditions. The logical operators are `&&`, `||` and `!` which are used to represent `and`, `or` and `not` respectively.
+
+The logical operator `||` is used to combine two boolean conditions. It returns `true` if at least one of the conditions is `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a > b || a > c) {
+  console.log("At least one of the conditions is true");
+} else {
+  console.log("Both of the conditions are false");
+}
+```
+
+The logical operator `&&` is used to combine two boolean conditions. It returns `true` only if both of the conditions are `true`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+let c = 15;
+
+if (a < b && a < c) {
+  console.log("Both of the conditions are true");
+} else {
+  console.log("At least one of the conditions is false");
+}
+```
+
+The logical operator `!` is used to negate a boolean condition. It returns `true` if the condition is `false`. Otherwise, it returns `false`:
+
+```javascript
+let a = 5;
+let b = 10;
+
+if (!(a > b)) {
+  console.log("The condition is false");
+} else {
+  console.log("The condition is true");
+}
+```
+
+In the above example, the extra pair of parentheses is used to make the code more readable. It is not necessary to use them.
+
+# --question--
+
+## --text--
+
+You're tasked with writing an `if` statement that checks for the following conditions in a web app to display `Welcome!` to the user:
+
+1. The user must either have a premium account (`isPremium`) or have been a member for more than a year (`membershipDuration` > 12 months).
+
+1. The user must not be currently blocked from the service (`!isBlocked`).
+
+Which if statement correctly checks these conditions?
+
+## --answers--
+
+```javascript
+if (isPremium && membershipDuration > 12 && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (isPremium || (membershipDuration > 12 && !isBlocked)) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if ((isPremium || membershipDuration > 12) && !isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+---
+
+```javascript
+if (!isPremium || membershipDuration <= 12 || isBlocked) {
+  console.log("Welcome!");
+}
+```
+
+## --video-solution--
+
+3

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-k.md

@@ -0,0 +1,101 @@
+---
+id: 65e9728d484dd50f720e6ff0
+title: Learn Data Types and Conditionals Question K
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-k
+---
+# --description--
+
+The `switch` statement is used to perform different actions based on different conditions. It is similar to the `if-else` statement, but is more readable and easier to understand when there are multiple conditions to check. The `switch` statement is used to select one of many code blocks to be executed.
+
+The `switch` statement evaluates an expression and compares it with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+```javascript
+let day = "Monday";
+
+switch (day) {
+  case "Monday":
+    console.log("Today is Monday");
+    break;
+  case "Tuesday":
+    console.log("Today is Tuesday");
+    break;
+  case "Wednesday":
+    console.log("Today is Wednesday");
+    break;
+  case "Thursday":
+    console.log("Today is Thursday");
+    break;
+  case "Friday":
+    console.log("Today is Friday");
+    break;
+  case "Saturday":
+    console.log("Today is Saturday");
+    break;
+  case "Sunday":
+    console.log("Today is Sunday");
+    break;
+  default:
+    console.log("Invalid day");
+}
+```
+
+In the above example, the value of the `day` variable is compared with the values of each case. If there is a match, the associated block of code is executed. If there is no match, the default block of code is executed.
+
+# --question--
+
+## --text--
+
+Given the JavaScript code snippet below, which modifies the `activity` variable based on the day of the week, what will be the value of the `activity` variable if the value of the `day` variable is `"Tuesday"`?
+
+```javascript
+let day = "Tuesday";
+let activity;
+
+switch (day) {
+  case "Monday":
+    activity = "Go to the gym";
+    break;
+  case "Tuesday":
+    activity = "Attend coding meetup";
+    break;
+  case "Wednesday":
+    activity = "Watch a movie";
+    break;
+  case "Thursday":
+    activity = "Visit a museum";
+    break;
+  case "Friday":
+    activity = "Dinner with friends";
+    break;
+  case "Saturday":
+    activity = "Hiking in the mountains";
+    break;
+  case "Sunday":
+    activity = "Rest at home";
+    break;
+  default:
+    activity = "Undefined day";
+}
+
+```
+
+## --answers--
+
+The value of the `activity` variable will be `"Attend coding meetup"`.
+
+---
+
+The value of the `activity` variable will be `"Watch a movie"`.
+
+---
+
+The value of the `activity` variable will be `"Undefined day"`.
+
+---
+
+The value of the `activity` variable will be `"Go to the gym"`.
+
+## --video-solution--
+
+1

curriculum/challenges/english/16-the-odin-project/top-learn-data-types-and-conditionals/learn-data-types-and-conditionals-question-l.md

@@ -0,0 +1,41 @@
+---
+id: 65e97293484dd50f720e6ff1
+title: Learn Data Types and Conditionals Question L
+challengeType: 15
+dashedName: learn-data-types-and-conditionals-question-l
+---
+# --description--
+
+Another way to compare conditional statements would be the ternary operator. The ternary operator is a shorthand way of writing an `if-else` statement. It is used to evaluate a condition and return a value based on the result of the condition. The syntax of the ternary operator is as follows:
+
+```javascript
+let result = condition ? value1 : value2;
+```
+
+In the above example, if the condition is true, the value of `result` will be `value1`. Otherwise, the value of `result` will be `value2`.
+
+Ternary operators are often used to assign a value to a variable based on a condition. They are also used to return a value based on a condition.
+
+# --question--
+
+## --text--
+
+What is the value of the `result` variable if the value of the `condition` variable is `true`?
+
+```javascript
+let condition = true;
+let result = condition ? "option 1" : "option 2";
+```
+
+## --answers--
+
+`"option 2"`
+
+---
+
+`"option 1"`
+
+
+## --video-solution--
+
+2