separate dad jokes lessons into 2 finished folders

Asjas · Asjas · commit 7c2f29a90da3 · 2020-04-29T19:44:26.000+02:00
diff --git a/exercises/81 - Dad Jokes Bundling - FINISHED/data/buttonText.js b/exercises/81 - Dad Jokes Bundling - FINISHED/data/buttonText.js
@@ -0,0 +1,13 @@
+const buttonText = [
+  'Ugh.',
+  '🤦🏻‍♂️',
+  'omg dad.',
+  'you are the worst',
+  'seriously',
+  'stop it.',
+  'please stop',
+  'that was the worst one',
+];
+
+// default export (only one per file)
+export default buttonText;
diff --git a/exercises/81 - Dad Jokes Bundling - FINISHED/index.html b/exercises/81 - Dad Jokes Bundling - FINISHED/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dad Jokes</title>
+  <link rel="stylesheet" href="../../base.css">
+  <style>
+    html {
+      --size: 20px;
+    }
+
+    .wrapper {
+      text-align: center;
+    }
+
+    .joke {
+      font-size: 5rem;
+      font-weight: 900;
+    }
+
+    .lds-ripple {
+      display: inline-block;
+      position: relative;
+
+      width: var(--size);
+      height: var(--size);
+    }
+
+    .lds-ripple div {
+      position: absolute;
+      border: 4px solid white;
+      opacity: 1;
+      border-radius: 50%;
+      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    }
+
+    .lds-ripple div:nth-child(2) {
+      animation-delay: -0.5s;
+    }
+
+    @keyframes lds-ripple {
+      0% {
+        top: calc(var(--size) / 2);
+        left: calc(var(--size) / 2);
+        width: 0;
+        height: 0;
+        opacity: 1;
+      }
+
+      100% {
+        top: 0px;
+        left: 0px;
+        width: calc(var(--size) * 0.9);
+        height: calc(var(--size) * 0.9);
+        opacity: 0;
+      }
+    }
+
+    .hidden {
+      display: none;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="wrapper app">
+    <div class="joke">
+      <p>Dad Jokes.</p>
+    </div>
+    <button class="getJoke">
+      <span class="jokeText">Get A Joke</span>
+      <div class="lds-ripple loader hidden">
+        <div></div>
+        <div></div>
+      </div>
+    </button>
+  </div>
+
+  <script src="./jokes.js" type="module"></script>
+</body>
+
+</html>
diff --git a/exercises/81 - Dad Jokes Bundling - FINISHED/jokes.js b/exercises/81 - Dad Jokes Bundling - FINISHED/jokes.js
@@ -0,0 +1,6 @@
+import { handleClick } from './lib/handlers.js';
+import { jokeButton } from './lib/elements.js';
+
+jokeButton.addEventListener('click', handleClick);
+
+console.log('heyy');
diff --git a/exercises/81 - Dad Jokes Bundling - FINISHED/lib/elements.js b/exercises/81 - Dad Jokes Bundling - FINISHED/lib/elements.js
@@ -0,0 +1,4 @@
+export const jokeButton = document.querySelector('.getJoke');
+export const jokeButtonSpan = jokeButton.querySelector('.jokeText');
+export const jokeHolder = document.querySelector('.joke p');
+export const loader = document.querySelector('.loader');
diff --git a/exercises/81 - Dad Jokes Bundling - FINISHED/lib/handlers.js b/exercises/81 - Dad Jokes Bundling - FINISHED/lib/handlers.js
@@ -0,0 +1,14 @@
+import { fetchJoke } from './index.js';
+import { loader, jokeHolder, jokeButtonSpan } from './elements.js';
+import { randomItemFromArray } from './utils.js';
+import buttonText from '../data/buttonText.js';
+
+// Named export
+export async function handleClick() {
+  const { joke } = await fetchJoke(loader);
+  jokeHolder.textContent = joke;
+  jokeButtonSpan.textContent = randomItemFromArray(
+    buttonText,
+    jokeButtonSpan.textContent
+  );
+}
diff --git a/exercises/81 - Dad Jokes Bundling - FINISHED/lib/index.js b/exercises/81 - Dad Jokes Bundling - FINISHED/lib/index.js
@@ -0,0 +1,14 @@
+// Named Export (we can have lots of these)
+export async function fetchJoke(loader) {
+  // turn loader on
+  loader.classList.remove('hidden');
+  const response = await fetch('https://icanhazdadjoke.com', {
+    headers: {
+      Accept: 'application/json',
+    },
+  });
+  const data = await response.json();
+  // turn the loader off
+  loader.classList.add('hidden');
+  return data;
+}
diff --git a/exercises/81 - Dad Jokes Bundling - FINISHED/lib/utils.js b/exercises/81 - Dad Jokes Bundling - FINISHED/lib/utils.js
@@ -0,0 +1,9 @@
+// named export
+export function randomItemFromArray(arr, not) {
+  const item = arr[Math.floor(Math.random() * arr.length)];
+  if (item === not) {
+    console.log('Ahh we used that one last time, look again');
+    return randomItemFromArray(arr, not);
+  }
+  return item;
+}
diff --git a/exercises/81 - Dad Jokes Bundling - FINISHED/package-lock.json b/exercises/81 - Dad Jokes Bundling - FINISHED/package-lock.json
diff --git a/exercises/81 - Dad Jokes Bundling - FINISHED/package.json b/exercises/81 - Dad Jokes Bundling - FINISHED/package.json
