i bEt yoU lIkE jAvAsCrIpT

wesbos · wesbos · commit 6cef5ebbcb5f · 2019-11-05T13:49:13.000-05:00
diff --git a/exercises/55 - Sarcastic Text/index.html b/exercises/55 - Sarcastic Text/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Text Generator</title>
+  <link rel="stylesheet" href="../../base.css">
+  <style>
+    body {
+      min-height: 100vh;
+      display: grid;
+      align-items: center;
+    }
+
+    .typer {
+      margin: 0 auto;
+      background: white;
+      width: 500px;
+      padding: 2rem;
+      padding: 2rem;
+      border-radius: 3px;
+      display: grid;
+    }
+
+    textarea {
+      width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="typer">
+    <label for="sarcastic">
+      <input type="radio" value="sarcastic" id="sarcastic" name="filter" checked>
+      Sarcastic
+    </label>
+    <label for="funky">
+      <input type="radio" value="funky" id="funky" name="filter">
+      Funky
+    </label>
+    <label for="unable">
+      <input type="radio" value="unable" id="unable" name="filter">
+      Unable to Structure a Sentence
+    </label>
+    <textarea name="text">so I was thinking about going to the store.</textarea>
+    <p class="result"></p>
+  </div>
+
+  <script src="./text.js"></script>
+</body>
+
+</html>
diff --git a/exercises/55 - Sarcastic Text/text-DEMO.js b/exercises/55 - Sarcastic Text/text-DEMO.js
@@ -0,0 +1,54 @@
+// functions as arguments
+
+const textarea = document.querySelector('[name="text"]');
+const result = document.querySelector('.result');
+const filterInputs = document.querySelectorAll('[name="filter"]');
+
+/* eslint-disable */
+const funkyLetters = {
+  '-': '₋', '!': 'ᵎ', '?': 'ˀ', '(': '⁽', ')': '₎', '+': '⁺', '=': '₌', '0': '⁰', '1': '₁', '2': '²', '4': '₄', '5': '₅', '6': '₆', '7': '⁷', '8': '⁸', '9': '⁹', a: 'ᵃ', A: 'ᴬ', B: 'ᴮ', b: 'ᵦ', C: '𝒸', d: 'ᵈ', D: 'ᴰ', e: 'ₑ', E: 'ᴱ', f: '𝒻', F: 'ᶠ', g: 'ᵍ', G: 'ᴳ', h: 'ʰ', H: 'ₕ', I: 'ᵢ', i: 'ᵢ', j: 'ʲ', J: 'ᴶ', K: 'ₖ', k: 'ₖ', l: 'ˡ', L: 'ᴸ', m: 'ᵐ', M: 'ₘ', n: 'ₙ', N: 'ᴺ', o: 'ᵒ', O: 'ᴼ', p: 'ᵖ', P: 'ᴾ', Q: 'ᵠ', q: 'ᑫ', r: 'ʳ', R: 'ᵣ', S: 'ˢ', s: 'ˢ', t: 'ᵗ', T: 'ₜ', u: 'ᵘ', U: 'ᵤ', v: 'ᵛ', V: 'ᵥ', w: '𝓌', W: 'ʷ', x: 'ˣ', X: 'ˣ', y: 'y', Y: 'Y', z: '𝓏', Z: 'ᶻ' };
+/* eslint-enable */
+
+const filters = {
+  sarcastic(letter, index) {
+    if (index % 2) {
+      return letter.toUpperCase();
+    }
+    return letter.toLowerCase();
+  },
+  funky(letter, index) {
+    // first check if there is a letter in this case
+    let funkyLetter = funkyLetters[letter];
+    console.log(funkyLetter);
+    if (!funkyLetter) {
+      // then check for a lowercase version
+      funkyLetter = funkyLetters[letter.toLowerCase()];
+    }
+    // if we still don't have something, just use the regular letter
+    if (!funkyLetter) {
+      funkyLetter = letter;
+    }
+    return funkyLetter;
+  },
+  unable(letter) {
+    const random = Math.floor(Math.random() * 3);
+    if (letter === ' ' && random === 2) {
+      return '...';
+    }
+    return letter;
+  },
+};
+
+function handleInput(text) {
+  const filter = document.querySelector('[name="filter"]:checked').value;
+  const mod = Array.from(text)
+    .map(filters[filter])
+    .join('');
+  result.textContent = mod;
+}
+
+textarea.addEventListener('input', e => handleInput(e.target.value));
+
+filterInputs.forEach(input =>
+  input.addEventListener('input', () => handleInput(textarea.value))
+);
diff --git a/exercises/55 - Sarcastic Text/text-FINISHED.js b/exercises/55 - Sarcastic Text/text-FINISHED.js
@@ -0,0 +1,53 @@
+const textarea = document.querySelector('[name="text"]');
+const result = document.querySelector('.result');
+const filterInputs = Array.from(document.querySelectorAll('[name="filter"]'));
+
+/* eslint-disable */
+const funkyLetters = {
+  '-': '₋', '!': 'ᵎ', '?': 'ˀ', '(': '⁽', ')': '₎', '+': '⁺', '=': '₌', '0': '⁰', '1': '₁', '2': '²', '4': '₄', '5': '₅', '6': '₆', '7': '⁷', '8': '⁸', '9': '⁹', a: 'ᵃ', A: 'ᴬ', B: 'ᴮ', b: 'ᵦ', C: '𝒸', d: 'ᵈ', D: 'ᴰ', e: 'ₑ', E: 'ᴱ', f: '𝒻', F: 'ᶠ', g: 'ᵍ', G: 'ᴳ', h: 'ʰ', H: 'ₕ', I: 'ᵢ', i: 'ᵢ', j: 'ʲ', J: 'ᴶ', K: 'ₖ', k: 'ₖ', l: 'ˡ', L: 'ᴸ', m: 'ᵐ', M: 'ₘ', n: 'ₙ', N: 'ᴺ', o: 'ᵒ', O: 'ᴼ', p: 'ᵖ', P: 'ᴾ', Q: 'ᵠ', q: 'ᑫ', r: 'ʳ', R: 'ᵣ', S: 'ˢ', s: 'ˢ', t: 'ᵗ', T: 'ₜ', u: 'ᵘ', U: 'ᵤ', v: 'ᵛ', V: 'ᵥ', w: '𝓌', W: 'ʷ', x: 'ˣ', X: 'ˣ', y: 'y', Y: 'Y', z: '𝓏', Z: 'ᶻ'
+};
+/* eslint-enable */
+
+const filters = {
+  sarcastic(letter, index) {
+    // if it is odd, it will return 1, and that is truthy, so this if statement will trip
+    if (index % 2) {
+      return letter.toUpperCase();
+    }
+    // if it is even, it will return zero and we will lowercase it
+    return letter.toLowerCase();
+  },
+  funky(letter) {
+    // first check if there is a funky letter for this case
+    let funkyLetter = funkyLetters[letter];
+    if (funkyLetter) return funkyLetter;
+    // if there is not, check if there is a lowercase version
+    funkyLetter = funkyLetters[letter.toLowerCase()];
+    if (funkyLetter) return funkyLetter;
+    // if there is nothing, return the regular letter
+    return letter;
+  },
+  unable(letter) {
+    const random = Math.floor(Math.random() * 3);
+    if (letter === ' ' && random === 2) {
+      return '...';
+    }
+    return letter;
+  },
+};
+
+function transformText(text) {
+  // const filter = document.querySelector('[name="filter"]:checked').value;
+  const filter = filterInputs.find(input => input.checked).value;
+  // take the text, and loop over each letter.
+  const mod = Array.from(text).map(filters[filter]);
+  result.textContent = mod.join('');
+}
+
+textarea.addEventListener('input', e => transformText(e.target.value));
+
+filterInputs.forEach(input =>
+  input.addEventListener('input', () => {
+    transformText(textarea.value);
+  })
+);
diff --git a/exercises/55 - Sarcastic Text/text.js b/exercises/55 - Sarcastic Text/text.js
