From 0855a6d55e324c912237879a2e9da26b3715874f Mon Sep 17 00:00:00 2001
From: Jim Cramer <remarcmij@gmail.com>
Date: Fri, 13 Sep 2019 23:31:09 +0200
Subject: [PATCH] Add intermediate input field

---
 src/week1/10-dryest/app.js                    | 65 ++++++++++++++++
 .../{10-select-dryer => 10-dryest}/index.html |  0
 .../{10-select-dryer => 11-select}/app.js     |  4 +-
 .../{11-combine => 11-select}/index.html      |  0
 src/week1/{11-combine => 12-combine}/app.js   |  3 +-
 src/week1/{9-select => 12-combine}/index.html |  0
 src/week1/{12-final => 13-final}/app.js       |  0
 src/week1/{12-final => 13-final}/index.html   |  0
 src/week1/{12-final => 13-final}/style.css    |  0
 src/week1/7-dry/app.js                        | 12 +--
 src/week1/8-dryer/app.js                      | 76 ++-----------------
 src/week1/{9-select => 9-input}/app.js        | 43 +++++------
 src/week1/9-input/index.html                  | 16 ++++
 src/week1/README.md                           |  9 ++-
 14 files changed, 123 insertions(+), 105 deletions(-)
 create mode 100644 src/week1/10-dryest/app.js
 rename src/week1/{10-select-dryer => 10-dryest}/index.html (100%)
 rename src/week1/{10-select-dryer => 11-select}/app.js (96%)
 rename src/week1/{11-combine => 11-select}/index.html (100%)
 rename src/week1/{11-combine => 12-combine}/app.js (97%)
 rename src/week1/{9-select => 12-combine}/index.html (100%)
 rename src/week1/{12-final => 13-final}/app.js (100%)
 rename src/week1/{12-final => 13-final}/index.html (100%)
 rename src/week1/{12-final => 13-final}/style.css (100%)
 rename src/week1/{9-select => 9-input}/app.js (51%)
 create mode 100644 src/week1/9-input/index.html

diff --git a/src/week1/10-dryest/app.js b/src/week1/10-dryest/app.js
new file mode 100644
index 0000000..6b15acc
--- /dev/null
+++ 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 b/src/week1/10-dryest/index.html
similarity index 100%
rename from src/week1/10-select-dryer/index.html
rename to src/week1/10-dryest/index.html
diff --git a/src/week1/10-select-dryer/app.js b/src/week1/11-select/app.js
similarity index 96%
rename from src/week1/10-select-dryer/app.js
rename to src/week1/11-select/app.js
index a6079e7..147272a 100644
--- a/src/week1/10-select-dryer/app.js
+++ b/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 b/src/week1/11-select/index.html
similarity index 100%
rename from src/week1/11-combine/index.html
rename to src/week1/11-select/index.html
diff --git a/src/week1/11-combine/app.js b/src/week1/12-combine/app.js
similarity index 97%
rename from src/week1/11-combine/app.js
rename to src/week1/12-combine/app.js
index 2028c30..9b84d4b 100644
--- a/src/week1/11-combine/app.js
+++ b/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 b/src/week1/12-combine/index.html
similarity index 100%
rename from src/week1/9-select/index.html
rename to src/week1/12-combine/index.html
diff --git a/src/week1/12-final/app.js b/src/week1/13-final/app.js
similarity index 100%
rename from src/week1/12-final/app.js
rename to src/week1/13-final/app.js
diff --git a/src/week1/12-final/index.html b/src/week1/13-final/index.html
similarity index 100%
rename from src/week1/12-final/index.html
rename to src/week1/13-final/index.html
diff --git a/src/week1/12-final/style.css b/src/week1/13-final/style.css
similarity index 100%
rename from src/week1/12-final/style.css
rename to src/week1/13-final/style.css
diff --git a/src/week1/7-dry/app.js b/src/week1/7-dry/app.js
index 802891b..962572b 100644
--- 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
index 7aa5b20..3569074 100644
--- 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 b/src/week1/9-input/app.js
similarity index 51%
rename from src/week1/9-select/app.js
rename to src/week1/9-input/app.js
index d0f6c5d..f227591 100644
--- a/src/week1/9-select/app.js
+++ b/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
new file mode 100644
index 0000000..563fb72
--- /dev/null
+++ 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>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+
+<body>
+  <div id="root"></div>
+  <script src="app.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/week1/README.md b/src/week1/README.md
index d911828..660321e 100644
--- 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. |