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,47 @@
+# About
+
+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`;
+```
+
+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

concepts/template-strings/introduction.md

@@ -0,0 +1,47 @@
+# 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`;
+```
+
+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

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,26 @@
+# 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 that can be _parsed_ and return a _floating point_ number.
+- Once you have the [floating point][mdn-parse-float] number, you will need to set it to only show the first two 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-parse-float]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
+[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,42 @@
+# 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!"
+
+buildSign('Anniversary', 'Jen');
+// => "Happy Anniversary Jen!"
+```
+
+## 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 and returns a phrase that includes the cost to create the sign, formatted with a fixed point notation set to 2 points, followed by the currency string.
+
+```javascript
+costOf('Congratulations Rob Class of 2021', 'dollars');
+// => "Your sign costs 90.00 dollars."
+```

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

@@ -0,0 +1,47 @@
+# 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`;
+```
+
+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

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 characters by helping a sign company create custom messages for their signs.",
+  "authors": ["pertrai1"],
+  "contributors": [],
+  "files": {
+    "solution": ["custom-signs.js"],
+    "test": ["custom-signs.spec.js"],
+    "exemplar": [".meta/exemplar.js"]
+  },
+  "forked_from": ["swift/custom-signs"]
+}