Concept exercise: Template string and Ternary

concepts/conditionals-ternary/.meta/config.json

@@ -0,0 +1,5 @@
+{
+  "blurb": "The conditional ternary operator is used to write a condensed expression that returns one of two alternate values based on some condition.",
+  "authors": ["pertrai1"],
+  "contributors": []
+}

concepts/conditionals-ternary/about.md

@@ -0,0 +1,17 @@
+# About
+
+The conditional ternary operator is used to write a condensed expression that returns one of two alternate values based on some condition.
+It is often referred to as the "ternary operator".
+The name stems from the fact that the operator has three operands: `predicate ? consequent-expression : alternative-expression`
+It can be used as a replacement for short if-else statements.
+
+Similar to `if` statements, JavaScript will perform implicit type conversion to evaluate the condition.
+If the condition is truthy, the operand on the left-hand side of the colon will be returned.
+Otherwise the result of the ternary expression is the operand on the right-hand side of the colon.
+
+```javascript
+const year = 2020;
+
+year > 2000 ? 'in the past years' : 'a long time ago';
+// => 'in the past years'
+```

concepts/conditionals-ternary/introduction.md

@@ -0,0 +1,17 @@
+# Introduction
+
+The conditional ternary operator is used to write a condensed expression that returns one of two alternate values based on some condition.
+It is often referred to as the "ternary operator".
+The name stems from the fact that the operator has three operands: `predicate ? consequent-expression : alternative-expression`
+It can be used as a replacement for short if-else statements.
+
+Similar to `if` statements, JavaScript will perform implicit type conversion to evaluate the condition.
+If the condition is truthy, the operand on the left-hand side of the colon will be returned.
+Otherwise the result of the ternary expression is the operand on the right-hand side of the colon.
+
+```javascript
+const year = 2020;
+
+year > 2000 ? 'in the past years' : 'a long time ago';
+// => 'in the past years'
+```

concepts/conditionals-ternary/links.json

@@ -0,0 +1,10 @@
+[
+  {
+    "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Instance_methods",
+    "description": "MDN: Conditional (ternary) operator"
+  },
+  {
+    "url": "https://javascript.info/ifelse",
+    "description": "javascript.info: Conditional branching"
+  }
+]

concepts/template-strings/.meta/config.json

@@ -0,0 +1,5 @@
+{
+  "blurb": "You can create template strings in JavaScript by wrapping text in backticks. They not only allow the text to include new lines and other special characters, you can also embed variables and other expressions.",
+  "authors": ["pertrai1"],
+  "contributors": []
+}

concepts/template-strings/about.md

@@ -0,0 +1,52 @@
+# Introduction
+
+In JavaScript, _template strings_ allows for embedding expressions in strings, also referred to as string interpolation.
+This functionality extends the functionality of the built in [`String`][string-reference] global object.
+
+You can create template strings in JavaScript by wrapping text in backticks.
+They not only allow the text to include new lines and other special characters, you can also embed variables and other expressions.
+
+```javascript
+const num1 = 1;
+const num2 = 2;
+
+`Adding ${num1} and ${num2} gives ${num1 + num2}.`;
+// => Adding 1 and 2 gives 3.
+```
+
+In the example above, backticks - (<code>\`\`</code>) - are used to represent a template string. The`${...}` is the placeholder that is used for substitution.
+Any non-string types are _implicitly_ converted to strings.
+This topic is covered in the [type conversion][type-conversion-concept] concept.
+All types of expressions can be used with template strings.
+
+```javascript
+const track = 'JavaScript';
+
+`This track on exercism.io is ${track.toUpperCase()}.`;
+// => This track on exercism.io is JAVASCRIPT.
+```
+
+When you are needing to have strings formatted on multiple lines:
+
+```javascript
+`This is example of using template
+strings to accomplish multiple
+lines`;
+```
+
+With the substitution capabilities that are available, you can also introduce logic into the process to determine what the output string should be.
+One way to handle the logic could be using the [ternary operator][ternary-operator].
+This gives the same conditional `if/else` functionality in a slightly different format.
+
+To implement logic into template string syntax:
+
+```javascript
+const grade = 95;
+
+`You have ${grade > 90 ? 'passed' : 'failed'} the exam.`;
+// => You have passed the exam.
+```
+
+[string-reference]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
+[type-conversion-concept]: /tracks/javascript/concepts/type-conversion
+[ternary-operator]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

concepts/template-strings/introduction.md

@@ -0,0 +1,52 @@
+# Introduction
+
+In JavaScript, _template strings_ allows for embedding expressions in strings, also referred to as string interpolation.
+This functionality extends the functionality of the built in [`String`][string-reference] global object.
+
+You can create template strings in JavaScript by wrapping text in backticks.
+They not only allow the text to include new lines and other special characters, you can also embed variables and other expressions.
+
+```javascript
+const num1 = 1;
+const num2 = 2;
+
+`Adding ${num1} and ${num2} gives ${num1 + num2}.`;
+// => Adding 1 and 2 gives 3.
+```
+
+In the example above, backticks - (<code>\`\`</code>) - are used to represent a template string. The`${...}` is the placeholder that is used for substitution.
+Any non-string types are _implicitly_ converted to strings.
+This topic is covered in the [type conversion][type-conversion-concept] concept.
+All types of expressions can be used with template strings.
+
+```javascript
+const track = 'JavaScript';
+
+`This track on exercism.io is ${track.toUpperCase()}.`;
+// => This track on exercism.io is JAVASCRIPT.
+```
+
+When you are needing to have strings formatted on multiple lines:
+
+```javascript
+`This is example of using template
+strings to accomplish multiple
+lines`;
+```
+
+With the substitution capabilities that are available, you can also introduce logic into the process to determine what the output string should be.
+One way to handle the logic could be using the [ternary operator][ternary-operator].
+This gives the same conditional `if/else` functionality in a slightly different format.
+
+To implement logic into template string syntax:
+
+```javascript
+const grade = 95;
+
+`You have ${grade > 90 ? 'passed' : 'failed'} the exam.`;
+// => You have passed the exam.
+```
+
+[string-reference]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
+[type-conversion-concept]: /tracks/javascript/concepts/type-conversion
+[ternary-operator]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

concepts/template-strings/links.json

@@ -0,0 +1,10 @@
+[
+  {
+    "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals",
+    "description": "MDN: Template literals"
+  },
+  {
+    "url": "https://developers.google.com/web/updates/2015/01/ES6-Template-Strings",
+    "description": "Google Developers: Getting Literal With ES6 Template Strings"
+  }
+]

config.json

@@ -238,6 +238,14 @@
         "concepts": ["array-transformations"],
         "prerequisites": ["arrays", "callbacks", "arrow-functions"],
         "status": "wip"
+      },
+      {
+        "slug": "custom-signs",
+        "name": "Custom Signs",
+        "uuid": "02a9c753-614f-4814-a7a8-43c1971d2eb7",
+        "concepts": ["conditionals-ternary", "template-strings"],
+        "prerequisites": ["strings", "conditionals", "type-conversion"],
+        "status": "beta"
       }
     ],
     "practice": [
@@ -1713,8 +1721,8 @@
     },
     {
       "uuid": "19085ad2-038a-4e08-ad34-47ff2a78fec6",
-      "slug": "string-formatting",
-      "name": "String Formatting"
+      "slug": "template-strings",
+      "name": "Template Strings"
     },
     {
       "uuid": "7d5c1533-c7cf-418e-b0f2-080da1e5bdc5",
@@ -1766,6 +1774,11 @@
       "slug": "type-conversion",
       "name": "Type Conversion"
     },
+    {
+      "uuid": "168cb8e8-c4f9-4e10-9d79-bffc77b86bbf",
+      "slug": "conditionals-ternary",
+      "name": "Ternary Operator"
+    },
     {
       "uuid": "c890e216-5acb-4fb8-8081-61eb78eabe87",
       "slug": "inheritance",

exercises/concept/custom-signs/.docs/hints.md

@@ -0,0 +1,25 @@
+# Hints
+
+## 1. Build an occasion sign
+
+- [template strings][mdn-template-strings] (Template literals) allow for substitution of one or more strings and embedded expressions
+
+## 2. Build a birthday sign
+
+- [template strings][mdn-template-strings] (Template literals) allow for substitution of strings and embedded expressions
+- [ternary operator][mdn-ternary-operator] is a short-hand way of operating on conditions, similar to `if/else`. It can be easier to use in template strings because it is condensed.
+
+## 4. Build a graduation sign
+
+- [template strings][mdn-template-strings] allow strings to span onto multiple lines.
+
+## 5. Compute the cost of a sign
+
+- Figure out the [`length`][mdn-string-length] of the characters.
+- Only show the first two decimal numbers using [fixed-point][mdn-to-fixed] notation.
+
+[mdn-const]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+[mdn-template-strings]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+[mdn-string-length]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length
+[mdn-to-fixed]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
+[mdn-ternary-operator]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

exercises/concept/custom-signs/.docs/instructions.md

@@ -0,0 +1,41 @@
+# Instructions
+
+In this exercise you'll be writing code to help a sign company create custom messages for their signs.
+
+## 1. Build an occasion sign
+
+Implement the function `buildSign(occasion, name)` that accepts a string as the `occasion` parameter and a string holding someone's name as the `name` parameter. The two parameters will be embedded into a template string to output the message on the sign.
+
+```javascript
+buildSign('Birthday', 'Rob');
+// => "Happy Birthday Rob!"
+```
+
+## 2. Build a birthday sign
+
+Implement the function `buildBirthdaySign(age)` that accepts an age and based on the age will determine part of the message on the sign. If the age is 50 or older, the sign will include the word _old_, otherwise the sign will include the word _young_.
+
+```javascript
+buildBirthdaySign(45);
+// => "Happy Birthday! What a young fellow you are."
+```
+
+## 3. Build a graduation sign
+
+Implement the function `graduationFor(name, year)` which takes a name as a string parameter and a year as a number parameter and uses string interpolation to create a phrase for a sign that uses a newline to separate the two lines of the message.
+
+```javascript
+graduationFor('Hannah', 2022);
+// => "Congratulations Hannah!\nClass of 2022"
+```
+
+## 5. Compute the cost of a sign
+
+Implement the function `costOf(sign, currency)` which takes a string that holds the contents of the sign and a string that represents the currency.
+The sign has a base price of 20 in the given currency. Additionally each letter costs 2. (Whitespaces are included in the calculation.)
+The phrase returned includes the cost to create the sign, written with two digits after the decimal point, followed by the currency string.
+
+```javascript
+costOf('Happy Birthday Rob!', 'dollars');
+// => "Your sign costs 58.00 dollars."
+```

exercises/concept/custom-signs/.docs/introduction.md

@@ -0,0 +1,54 @@
+# Introduction
+
+In JavaScript, _template strings_ allows for embedding expressions in strings, also referred to as string interpolation.
+This functionality extends the functionality of the built in [`String`][string-reference] global object.
+
+You can create template strings in JavaScript by wrapping text in backticks.
+They not only allow the text to include new lines and other special characters, you can also embed variables and other expressions.
+
+```javascript
+const num1 = 1;
+const num2 = 2;
+
+`Adding ${num1} and ${num2} gives ${num1 + num2}.`;
+// => Adding 1 and 2 gives 3.
+```
+
+In the example above, backticks - (<code>\`\`</code>) - are used to represent a template string. The`${...}` is the placeholder that is used for substitution.
+Any non-string types are _implicitly_ converted to strings.
+This topic is covered in the [type conversion][type-conversion-concept] concept.
+All types of expressions can be used with template strings.
+
+```javascript
+const track = 'JavaScript';
+
+`This track on exercism.io is ${track.toUpperCase()}.`;
+// => This track on exercism.io is JAVASCRIPT.
+```
+
+When you are needing to have strings formatted on multiple lines:
+
+```javascript
+`This is example of using template
+strings to accomplish multiple
+lines`;
+```
+
+With the substitution capabilities that are available, you can also introduce logic into the process to determine what the output string should be.
+
+An example for this is embedding a [ternary operator][ternary-operator].
+This operator is a short form for writing an `if/else` statement.
+The syntax is `condition ? consequent-expression : alternative-expression`.
+If the condition is truthy, the operand on the left-hand side of the colon will be returned.
+Otherwise the result of the ternary expression is the operand on the right-hand side of the colon.
+
+```javascript
+const grade = 95;
+
+`You have ${grade > 90 ? 'passed' : 'failed'} the exam.`;
+// => You have passed the exam.
+```
+
+[string-reference]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
+[type-conversion-concept]: /tracks/javascript/concepts/type-conversion
+[ternary-operator]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

exercises/concept/custom-signs/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "root": true,
+  "extends": "@exercism/eslint-config-javascript",
+  "env": {
+    "jest": true
+  },
+  "overrides": [
+    {
+      "files": [".meta/proof.ci.js", ".meta/exemplar.js", "*.spec.js"],
+      "excludedFiles": ["custom.spec.js"],
+      "extends": "@exercism/eslint-config-javascript/maintainers"
+    }
+  ]
+}

exercises/concept/custom-signs/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+yarn-error.log
+

exercises/concept/custom-signs/.meta/config.json

@@ -0,0 +1,11 @@
+{
+  "blurb": "Learn about template strings and the ternary operator ...",
+  "authors": ["pertrai1"],
+  "contributors": [],
+  "files": {
+    "solution": ["custom-signs.js"],
+    "test": ["custom-signs.spec.js"],
+    "exemplar": [".meta/exemplar.js"]
+  },
+  "forked_from": ["swift/custom-signs"]
+}