HackYourFuture · dyosorio · Sep 15, 2020 · Sep 16, 2020
diff --git a/Week2/homework/.DS_Store b/Week2/homework/.DS_Store
diff --git a/Week2/homework/js-exercises/checkDigits.js b/Week2/homework/js-exercises/checkDigits.js
@@ -0,0 +1,36 @@
+'use strict';
+
+/*
+Exercise 2: Is it bigger than 10?
+
+Write a function called checkDoubleDigits that:
+
+Takes 1 argument: a number
+Returns a new Promise
+If the number is bigger than 10, resolve with the string: "The number is bigger than 10!"
+If the number is smaller than 10, reject with the error: "Error! The number is smaller than 10..."
+*/
+
+const checkDoubleDigits = number => {
+  // create a new Promise
+  const newPromise = new Promise((resolve, reject) => {
+    if (number > 10) {
+      resolve('The number is bigger than 10!');
+    }
+    if (number < 10) {
+      reject('Error! The number is smaller than 10...');
+    }
+  });
+
+  // call my promise and the .then() for resolved promises and catch() for rejected promises
+  newPromise
+    .then(message => {
+      console.log(message);
+    })
+    .catch(message => {
+      console.log(message);
+    });
+};
+
+checkDoubleDigits(20);
+checkDoubleDigits(5);
diff --git a/Week2/homework/js-exercises/getName.js b/Week2/homework/js-exercises/getName.js
@@ -0,0 +1,51 @@
+'use strict';
+
+/*
+Exercise 1: John who?
+
+Take a look at the following function (and try it out in your console):
+
+const getAnonName = (firstName, callback) => {
+  setTimeout(() => {
+    if (!firstName)
+      return callback(new Error("You didn't pass in a first name!"));
+
+    const fullName = `${firstName} Doe`;
+
+    return callback(fullName);
+  }, 2000);
+};
+
+getAnonName('John', console.log);
+Rewrite this function, but replace the callback syntax with the Promise syntax:
+
+Have the getAnonName function return a new Promise that uses the firstName parameter
+If the Promise resolves, pass the full name as an argument to resolve with
+If the Promise rejects, pass an error as the argument to reject with: "You didn't pass in a first name!"
+*/
+
+const getAnonName = firstName => {
+  // create a new Promise
+  const newPromise = new Promise((resolve, reject) => {
+    if (firstName) {
+      const fullName = `${firstName} Doe`;
+      resolve(`${fullName}`);
+    }
+    if (!firstName) {
+      reject(new Error("You didn't pass in a first name!"));
+    }
+  });
+
+  setTimeout(() => {
+    //call my promise and the .then() for resolved promises and catch() for rejected promises
+    newPromise
+      .then(message => {
+        console.log(message);
+      })
+      .catch(message => {
+        console.log(message);
+      });
+  }, 2000);
+};
+
+getAnonName('John');
diff --git a/Week2/homework/pokemon-app/index.html b/Week2/homework/pokemon-app/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div id="output"></div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Week2/homework/pokemon-app/script.js b/Week2/homework/pokemon-app/script.js
@@ -0,0 +1,86 @@
+'use strict';
+
+/*
+    In this exercise you're going to do several things:
+
+    Create and append DOM elements using JavaScript only
+    Fetch data twice from a public API PokeAPI
+    Display the results in the DOM.
+    Here are the requirements:
+
+    Create 3 functions: fetchData, addPokemonToDOM and main
+    The main function executes the other functions and contains all the variables
+    In the fetchData function, make use of fetch and its Promise syntax in order to get the data from the public API
+    Execute the main function when the window has finished loading
+*/
+
+function main() {
+  // 1. create fetch function
+  function fetchData(url) {
+    return fetch(url)
+      .then(response => response.json())
+      .catch(error => console.log(error));
+  }
+
+  // 2. Create DOM elements
+  const buttonEl = document.createElement('button');
+  buttonEl.innerText = 'Get Pokemon!';
+  const selectEl = document.createElement('select');
+  const imageDivEl = document.createElement('div');
+  imageDivEl.style.display = 'flex';
+  imageDivEl.style.justifyContent = 'center';
+  imageDivEl.style.marginTop = '5%';
+  const imageEl = document.createElement('img');
+  const outputContainer = document.getElementById('output');
+  outputContainer.style.display = 'flex';
+  outputContainer.style.justifyContent = 'center';
+  outputContainer.style.marginTop = '10%';
+
+  // 3. append DOM elements to the document body
+  outputContainer.appendChild(buttonEl);
+  outputContainer.appendChild(selectEl);
+  document.body.appendChild(imageDivEl);
+  imageDivEl.appendChild(imageEl);
+
+  // 4. add event listener
+  buttonEl.addEventListener('click', () => {
+    fetchData('https://pokeapi.co/api/v2/pokemon?limit=100').then(data => {
+      console.log(data);
+      addPokemonToDOM(data); // put this data into the DOM
+    });
+  });
+
+  // 5. feed the select tag with the pokemon options
+  function addPokemonToDOM(data) {
+    // grab array of objects
+    const pokemonArray = data.results;
+
+    for (let index = 0; index < pokemonArray.length; index++) {
+      const pokemonName = pokemonArray[index].name;
+      const optionEl = document.createElement('option');
+      optionEl.innerHTML = `
+            <option value="${index}">${pokemonName}</option>
+        `;
+      selectEl.appendChild(optionEl);
+    }
+  }
+
+  // select a pokemon and display a matching pokemon
+  selectEl.addEventListener('change', event => {
+    console.log(event.target.value); // the selected option value
+
+    fetchData('https://pokeapi.co/api/v2/pokemon?limit=100').then(data => {
+      data.results.forEach(result => {
+        if (event.target.value === result.name) {
+          const pokemonURL = result.url;
+          fetchData(pokemonURL).then(data => {
+            const imageData = data.sprites.other.dream_world.front_default;
+            imageEl.src = imageData;
+          });
+        }
+      });
+    });
+  });
+}
+
+main();
diff --git a/hackyourrepo-app/index.html b/hackyourrepo-app/index.html
@@ -13,13 +13,16 @@
     <link rel="apple-touch-icon" href="./hyf.png" />
     <link rel="shortcut icon" type="image/png" href="./hyf.png" />
     <title>HackYourRepo</title>
+    <script src="https://kit.fontawesome.com/fe89cf6951.js" crossorigin="anonymous"></script>
     <link
       href="https://fonts.googleapis.com/css?family=Roboto:400,700"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="./style.css" />
   </head>
   <body>
+
     <script src="./script.js"></script>
+
   </body>
 </html>