Add intermediate input field

HackYourFuture · Sep 13, 2019 · 0855a6d · 0855a6d
1 parent 2a001f4
commit 0855a6d
Showing 14 changed files with 123 additions and 105 deletions.
diff --git a/src/week1/10-dryest/app.js b/src/week1/10-dryest/app.js
@@ -0,0 +1,65 @@
+/*
+  Enhance createAndAppend() to take optional text and attributes parameters
+*/
+
+'use strict';
+
+{
+  const BASE_URL = 'http://api.nobelprize.org/v1';
+
+  function fetchJSON(url, cb) {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = 'json';
+    xhr.open('GET', url);
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status <= 299) {
+        cb(null, xhr.response);
+      } else {
+        cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+      }
+    };
+    xhr.onerror = () => cb(new Error('Network request failed'));
+    xhr.send();
+  }
+
+  function createAndAppend(name, parent, options = {}) {
+    const elem = document.createElement(name);
+    parent.appendChild(elem);
+    Object.entries(options).forEach(([key, value]) => {
+      if (key === 'text') {
+        elem.textContent = value;
+      } else {
+        elem.setAttribute(key, value);
+      }
+    });
+    return elem;
+  }
+
+  function onClick(countryCode, ul) {
+    ul.innerHTML = '';
+
+    const url = `${BASE_URL}/laureate.json?bornCountryCode=${countryCode}`;
+
+    fetchJSON(url, (err, data) => {
+      if (err) {
+        console.error(err.message); // TODO: render errors to the page
+        return; // exit early in case of errors
+      }
+      data.laureates.forEach(laureate => {
+        createAndAppend('li', ul, {
+          text: `${laureate.firstname} ${laureate.surname}`,
+        });
+      });
+    });
+  }
+
+  function main() {
+    const root = document.getElementById('root');
+    const input = createAndAppend('input', root, { type: 'text' });
+    const button = createAndAppend('button', root, { text: 'GO' });
+    const ul = createAndAppend('ul', root);
+    button.addEventListener('click', () => onClick(input.value, ul));
+  }
+
+  window.onload = main;
+}
diff --git a/src/week1/10-select-dryer/index.html → src/week1/10-dryest/index.html b/src/week1/10-select-dryer/index.html → src/week1/10-dryest/index.html
diff --git a/src/week1/10-select-dryer/app.js → src/week1/11-select/app.js b/src/week1/10-select-dryer/app.js → src/week1/11-select/app.js
@@ -37,13 +37,13 @@
   }
 
   function main() {
+    const root = document.getElementById('root');
+
     fetchJSON(`${API_BASE_URL}/country.json`, (err, data) => {
       if (err) {
         console.error(err.message); // TODO: render errors to the page
         return;
       }
-
-      const root = document.getElementById('root');
       const select = createAndAppend('select', root);
 
       data.countries

diff --git a/src/week1/11-combine/index.html → src/week1/11-select/index.html b/src/week1/11-combine/index.html → src/week1/11-select/index.html
diff --git a/src/week1/11-combine/app.js → src/week1/12-combine/app.js b/src/week1/11-combine/app.js → src/week1/12-combine/app.js
@@ -53,13 +53,14 @@
   }
 
   function main() {
+    const root = document.getElementById('root');
+
     fetchJSON(`${API_BASE_URL}/country.json`, (err, data) => {
       if (err) {
         console.error(err.message); // TODO: render errors to the page
         return;
       }
 
-      const root = document.getElementById('root');
       const select = createAndAppend('select', root);
 
       createAndAppend('option', select, {

diff --git a/src/week1/9-select/index.html → src/week1/12-combine/index.html b/src/week1/9-select/index.html → src/week1/12-combine/index.html
diff --git a/src/week1/12-final/app.js → src/week1/13-final/app.js b/src/week1/12-final/app.js → src/week1/13-final/app.js
diff --git a/src/week1/12-final/index.html → src/week1/13-final/index.html b/src/week1/12-final/index.html → src/week1/13-final/index.html
diff --git a/src/week1/12-final/style.css → src/week1/13-final/style.css b/src/week1/12-final/style.css → src/week1/13-final/style.css
diff --git a/src/week1/7-dry/app.js b/src/week1/7-dry/app.js
@@ -29,18 +29,18 @@
     return elem;
   }
 
-  const countryCode = 'TR';
-  const url = `${BASE_URL}/laureate.json?bornCountryCode=${countryCode}`;
-
   function main() {
+    const root = document.getElementById('root');
+    const ul = createAndAppend('ul', root);
+
+    const countryCode = 'TR';
+    const url = `${BASE_URL}/laureate.json?bornCountryCode=${countryCode}`;
+
     fetchJSON(url, (err, data) => {
       if (err) {
         console.error(err.message); // TODO: render errors to the page
         return; // exit early in case of errors
       }
-      const root = document.getElementById('root');
-
-      const ul = createAndAppend('ul', root);
 
       data.laureates.forEach(laureate => {
         const li = createAndAppend('li', ul);

diff --git a/src/week1/8-dryer/app.js b/src/week1/8-dryer/app.js
@@ -4,69 +4,6 @@
 
 'use strict';
 
-{
-  const API_BASE_URL = 'http://api.nobelprize.org/v1';
-
-  function fetchJSON(url, cb) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
-    xhr.responseType = 'json';
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status <= 299) {
-        cb(null, xhr.response);
-      } else {
-        cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
-      }
-    };
-    xhr.onerror = () => cb(new Error('Network request failed'));
-    xhr.send();
-  }
-
-  function createAndAppend(name, parent, text, attributes) {
-    const elem = document.createElement(name);
-    if (text) {
-      elem.textContent = text;
-    }
-    if (attributes) {
-      Object.keys(attributes).forEach(key => {
-        elem.setAttribute(key, attributes[key]);
-      });
-    }
-    parent.appendChild(elem);
-    return elem;
-  }
-
-  function main() {
-    fetchJSON(`${API_BASE_URL}/country.json`, (err, data) => {
-      if (err) {
-        console.error(err.message); // TODO: render errors to the page
-        return;
-      }
-
-      const root = document.getElementById('root');
-      const select = createAndAppend('select', root);
-
-      const countries = data.countries.sort((a, b) =>
-        a.name.localeCompare(b.name),
-      );
-      countries.forEach((country, index) => {
-        createAndAppend('option', select, country.name, {
-          value: index,
-        });
-      });
-
-      const p = createAndAppend('p', root);
-
-      select.addEventListener('change', () => {
-        const country = data.countries[select.value].name;
-        p.textContent = country;
-      });
-    });
-  }
-
-  window.onload = main;
-}
-
 {
   const BASE_URL = 'http://api.nobelprize.org/v1';
 
@@ -94,19 +31,18 @@
     return elem;
   }
 
-  const countryCode = 'TR';
-  const url = `${BASE_URL}/laureate.json?bornCountryCode=${countryCode}`;
-
   function main() {
+    const root = document.getElementById('root');
+    const ul = createAndAppend('ul', root);
+
+    const countryCode = 'TR';
+    const url = `${BASE_URL}/laureate.json?bornCountryCode=${countryCode}`;
+
     fetchJSON(url, (err, data) => {
       if (err) {
         console.error(err.message); // TODO: render errors to the page
         return; // exit early in case of errors
       }
-      const root = document.getElementById('root');
-
-      const ul = createAndAppend('ul', root);
-
       data.laureates.forEach(laureate => {
         createAndAppend('li', ul, `${laureate.firstname} ${laureate.surname}`);
       });

diff --git a/src/week1/9-select/app.js → src/week1/9-input/app.js b/src/week1/9-select/app.js → src/week1/9-input/app.js
@@ -1,17 +1,16 @@
 /*
-  Use DOM manipulation to create a <select> element and populate it with
-  <option> elements using country data obtained from the Nobel Prize API.
+  Enhance createAndAppend() to take optional text and attributes parameters
 */
 
 'use strict';
 
 {
-  const API_BASE_URL = 'http://api.nobelprize.org/v1';
+  const BASE_URL = 'http://api.nobelprize.org/v1';
 
   function fetchJSON(url, cb) {
     const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
     xhr.responseType = 'json';
+    xhr.open('GET', url);
     xhr.onload = () => {
       if (xhr.status >= 200 && xhr.status <= 299) {
         cb(null, xhr.response);
@@ -32,30 +31,30 @@
     return elem;
   }
 
-  function main() {
-    fetchJSON(`${API_BASE_URL}/country.json`, (err, data) => {
+  function onClick(countryCode, ul) {
+    ul.innerHTML = '';
+
+    const url = `${BASE_URL}/laureate.json?bornCountryCode=${countryCode}`;
+
+    fetchJSON(url, (err, data) => {
       if (err) {
         console.error(err.message); // TODO: render errors to the page
-        return;
+        return; // exit early in case of errors
       }
-
-      const root = document.getElementById('root');
-      const select = createAndAppend('select', root);
-
-      data.countries
-        .filter(country => country.code !== undefined)
-        .forEach(country => {
-          const option = createAndAppend('option', select, country.name);
-          option.setAttribute('value', country.code);
-        });
-
-      const p = createAndAppend('p', root);
-
-      select.addEventListener('change', () => {
-        p.textContent = select.value;
+      data.laureates.forEach(laureate => {
+        createAndAppend('li', ul, `${laureate.firstname} ${laureate.surname}`);
       });
     });
   }
 
+  function main() {
+    const root = document.getElementById('root');
+    const input = createAndAppend('input', root);
+    input.setAttribute('type', 'text');
+    const button = createAndAppend('button', root, 'GO');
+    const ul = createAndAppend('ul', root);
+    button.addEventListener('click', () => onClick(input.value, ul));
+  }
+
   window.onload = main;
 }
diff --git a/src/week1/9-input/index.html b/src/week1/9-input/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Nobel Prizes</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/src/week1/README.md b/src/week1/README.md
@@ -61,7 +61,8 @@ Note the URL field: we will be using similar URLs in the code examples to fetch
 | 6‑render-ul  | Use DOM manipulation to create a `<ul>` element and populate it with `<li>` elements using laureate data obtained from the Nobel Prize API. |
 | 7‑dry        | Apply the DRY principle by creating the `createAndAppend()`function to reduce repetitive code. |
 | 8‑dryer      | Enhance `createAndAppend()` to take an optional text parameter. |
-| 9‑select     | Get country info from the API and render in a `<select>` element. |
-| 10‑select-dryer | Finalize createAndAppend functionality. |
-| 11-combine   | Combine `<select>` element with laureates data. |
-| 12‑final     | Render laureate details and add CSS styling. |
+| 9-input      | Add `<input>` element for country code. |
+| 10-dryest    | Finalize createAndAppend functionality. |
+| 11-select    | Get country info from the API and render in a `<select>` element. |
+| 12-combine   | Combine `<select>` element with laureates data. |
+| 13‑final     | Render laureate details and add CSS styling. |