Modules

sunguru98 · Nov 21, 2019 · 95f8fa4 · 95f8fa4
1 parent 270bd4b
commit 95f8fa4
Show file tree

Hide file tree

Showing 27 changed files with 773 additions and 0 deletions.
diff --git a/exercises/75 - Currency Converter/index.html b/exercises/75 - Currency Converter/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Currency Converter</title>
+  <link rel="stylesheet" href="../../base.css">
+  <link rel="stylesheet" href="./money.css">
+</head>
+
+<body>
+  <div class="app">
+    <form>
+      <input type="number" name="from_amount">
+      <select name="from_currency">
+        <option>Select a Currency</option>
+      </select>
+      <p>in</p>
+      <select name="to_currency">
+        <option>Select a Currency</option>
+      </select>
+      <p>is</p>
+      <p class="to_amount">$0</p>
+    </form>
+  </div>
+  <script src="./money.js"></script>
+</body>
+
+</html>
diff --git a/exercises/75 - Currency Converter/money-FINISHED.js b/exercises/75 - Currency Converter/money-FINISHED.js
@@ -0,0 +1,97 @@
+const fromSelect = document.querySelector('[name="from_currency"]');
+const fromInput = document.querySelector('[name="from_amount"]');
+const toSelect = document.querySelector('[name="to_currency"]');
+const toEl = document.querySelector('.to_amount');
+const form = document.querySelector('.app form');
+const endpoint = 'https://api.exchangeratesapi.io/latest';
+const ratesByBase = {};
+
+const currencies = {
+  USD: 'United States Dollar',
+  AUD: 'Australian Dollar',
+  BGN: 'Bulgarian Lev',
+  BRL: 'Brazilian Real',
+  CAD: 'Canadian Dollar',
+  CHF: 'Swiss Franc',
+  CNY: 'Chinese Yuan',
+  CZK: 'Czech Republic Koruna',
+  DKK: 'Danish Krone',
+  GBP: 'British Pound Sterling',
+  HKD: 'Hong Kong Dollar',
+  HRK: 'Croatian Kuna',
+  HUF: 'Hungarian Forint',
+  IDR: 'Indonesian Rupiah',
+  ILS: 'Israeli New Sheqel',
+  INR: 'Indian Rupee',
+  JPY: 'Japanese Yen',
+  KRW: 'South Korean Won',
+  MXN: 'Mexican Peso',
+  MYR: 'Malaysian Ringgit',
+  NOK: 'Norwegian Krone',
+  NZD: 'New Zealand Dollar',
+  PHP: 'Philippine Peso',
+  PLN: 'Polish Zloty',
+  RON: 'Romanian Leu',
+  RUB: 'Russian Ruble',
+  SEK: 'Swedish Krona',
+  SGD: 'Singapore Dollar',
+  THB: 'Thai Baht',
+  TRY: 'Turkish Lira',
+  ZAR: 'South African Rand',
+  EUR: 'Euro',
+};
+
+function generateOptions(options) {
+  return Object.entries(options)
+    .map(
+      ([currencyCode, currencyName]) =>
+        `<option value="${currencyCode}">${currencyCode} - ${currencyName}</option>`
+    )
+    .join('');
+}
+
+async function fetchRates(base = 'USD') {
+  const res = await fetch(`${endpoint}?base=${base}`);
+  const rates = await res.json();
+  return rates;
+}
+
+async function convert(amount, from, to) {
+  // first check if we even have the rates to convert from that currency
+  if (!ratesByBase[from]) {
+    console.log(
+      `Oh no, we dont have ${from} to convert to ${to}. So gets go get it!`
+    );
+    const rates = await fetchRates(from);
+    console.log(rates);
+    // store them for next time
+    ratesByBase[from] = rates;
+  }
+  // convert that amount that they passed it
+  const rate = ratesByBase[from].rates[to];
+  const convertedAmount = rate * amount;
+  console.log(`${amount} ${from} is ${convertedAmount} in ${to}`);
+  return convertedAmount;
+}
+
+function formatCurrency(amount, currency) {
+  return Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+  }).format(amount);
+}
+async function handleInput(e) {
+  const rawAmount = await convert(
+    fromInput.value,
+    fromSelect.value,
+    toSelect.value
+  );
+  toEl.textContent = formatCurrency(rawAmount, toSelect.value);
+}
+
+const optionsHTML = generateOptions(currencies);
+// populate the options elements
+fromSelect.innerHTML = optionsHTML;
+toSelect.innerHTML = optionsHTML;
+
+form.addEventListener('input', handleInput);
diff --git a/exercises/75 - Currency Converter/money.css b/exercises/75 - Currency Converter/money.css
@@ -0,0 +1,61 @@
+html, body {
+  background-color: #d0d0d0;
+}
+
+body {
+  display: grid;
+  grid-template-rows: 1fr;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+.app {
+  max-width: 800px;
+  background: white;
+}
+
+.app form {
+  border:0;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-auto-rows: 1fr;
+  font-size: 3rem;
+  text-align: center;
+  font-weight: 600;
+  padding: 2rem;
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  grid-gap:2rem;
+  align-items: stretch;
+}
+
+
+.app :is(button, input, select, textarea) {
+  margin:0;
+  text-align: center;
+  font-weight: 600;
+  border:0;
+}
+
+.app :is(button, input, select, textarea):focus {
+  outline-color: violet;
+}
+
+.app input {
+  width: 250px;
+}
+
+.app select {
+  background: none;
+  border:0;
+  padding: 2rem;
+}
+
+.app form > * {
+  background: var(--yellow);
+  margin: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+  display: grid;
+  align-content: center;
+}
diff --git a/exercises/75 - Currency Converter/money.js b/exercises/75 - Currency Converter/money.js
@@ -0,0 +1,34 @@
+const currencies = {
+  USD: 'United States Dollar',
+  AUD: 'Australian Dollar',
+  BGN: 'Bulgarian Lev',
+  BRL: 'Brazilian Real',
+  CAD: 'Canadian Dollar',
+  CHF: 'Swiss Franc',
+  CNY: 'Chinese Yuan',
+  CZK: 'Czech Republic Koruna',
+  DKK: 'Danish Krone',
+  GBP: 'British Pound Sterling',
+  HKD: 'Hong Kong Dollar',
+  HRK: 'Croatian Kuna',
+  HUF: 'Hungarian Forint',
+  IDR: 'Indonesian Rupiah',
+  ILS: 'Israeli New Sheqel',
+  INR: 'Indian Rupee',
+  JPY: 'Japanese Yen',
+  KRW: 'South Korean Won',
+  MXN: 'Mexican Peso',
+  MYR: 'Malaysian Ringgit',
+  NOK: 'Norwegian Krone',
+  NZD: 'New Zealand Dollar',
+  PHP: 'Philippine Peso',
+  PLN: 'Polish Zloty',
+  RON: 'Romanian Leu',
+  RUB: 'Russian Ruble',
+  SEK: 'Swedish Krona',
+  SGD: 'Singapore Dollar',
+  THB: 'Thai Baht',
+  TRY: 'Turkish Lira',
+  ZAR: 'South African Rand',
+  EUR: 'Euro',
+};
diff --git a/exercises/77 - Dad Jokes Modules - FINISHED/data/buttonText.js b/exercises/77 - Dad Jokes Modules - 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/77 - Dad Jokes Modules - FINISHED/index.html b/exercises/77 - Dad Jokes Modules - 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/77 - Dad Jokes Modules - FINISHED/jokes.js b/exercises/77 - Dad Jokes Modules - FINISHED/jokes.js
@@ -0,0 +1,4 @@
+import { handleClick } from './lib/handlers.js';
+import { jokeButton } from './lib/elements.js';
+
+jokeButton.addEventListener('click', handleClick);
diff --git a/exercises/77 - Dad Jokes Modules - FINISHED/lib/elements.js b/exercises/77 - Dad Jokes Modules - 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/77 - Dad Jokes Modules - FINISHED/lib/handlers.js b/exercises/77 - Dad Jokes Modules - 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/77 - Dad Jokes Modules - FINISHED/lib/index.js b/exercises/77 - Dad Jokes Modules - 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/77 - Dad Jokes Modules - FINISHED/lib/utils.js b/exercises/77 - Dad Jokes Modules - 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;
+}