saliha54 · saliha54 · Aug 15, 2019 · Aug 15, 2019 · Aug 18, 2019 · Aug 18, 2019
diff --git a/exercises-event-loop/index.html b/exercises-event-loop/index.html
diff --git a/project/2.jpg b/project/2.jpg
diff --git a/project/index.css b/project/index.css
@@ -0,0 +1,75 @@
+body {
+  margin-top: 2em;
+  background-image: url('2.jpg');
+  background-size: cover;
+}
+
+#main {
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+}
+div {
+  display: grid;
+  justify-items: center;
+  align-items: start;
+}
+
+h1 {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0;
+  background: whitesmoke;
+  padding: 0.1em;
+  border-radius: 10px;
+  font-family: Impact, 'Arial Narrow Bold', sans-serif;
+}
+
+h2 {
+  font-size: 1.5em;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.1em;
+  background: whitesmoke;
+  border-radius: 10px;
+  font-family: Impact, 'Arial Narrow Bold', sans-serif;
+}
+
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #12222d; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  margin: auto;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+select {
+  background: whitesmoke;
+  color: black;
+  height: 4em;
+  width: 45em;
+  text-align: center;
+}
+ul {
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+  text-align: center;
+  font-size: 1.5em;
+  font-weight: 700;
+  background: whitesmoke;
+  padding: 0.1em;
+  border-radius: 10px;
+  font-family: Impact, 'Arial Narrow Bold', sans-serif;
+}
diff --git a/project/index.html b/project/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>home page</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+
+  <body>
+    <div id="main"></div>
+    <div class="loader" id="loading"></div>
+  </body>
+
+  <script src="index.js"></script>
+</html>
diff --git a/project/index.js b/project/index.js
@@ -0,0 +1,83 @@
+console.log('NEW');
+
+let xhr;
+let dropdown = document.createElement('select');
+dropdown.id = 'dropdown_menu';
+let mainDiv = document.getElementById('main');
+mainDiv.append(dropdown);
+headers_divs_etc();
+
+const dropdown_list = function(item, menu) {
+  let opt = document.createElement('option');
+  opt.id = item;
+  opt.innerHTML = item;
+  menu.appendChild(opt);
+};
+
+document.getElementById('loading').style.display = 'block';
+fetch('https://restcountries.eu/rest/v2/all/')
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(myJson) {
+    let myMenu = document.getElementById('dropdown_menu');
+    let result = myJson.map(a => {
+      dropdown_list(a.name, myMenu);
+      return a.name;
+    });
+    document.getElementById('loading').style.display = 'none';
+  });
+
+dropdown.onchange = function() {
+  document.getElementById('loading').style.display = 'block';
+  let index = dropdown.selectedIndex;
+  fetch('https://restcountries.eu/rest/v2/all/')
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(myJson) {
+      let my_name = myJson[index].name;
+      let my_capital = myJson[index].capital;
+      let my_borders_code = myJson[index].borders;
+      document.getElementById('name').innerHTML = my_name;
+      document.getElementById('capital').innerHTML = my_capital;
+      let border_ul = document.getElementById('border');
+      border_ul.innerHTML = '';
+
+      for (let border of my_borders_code) {
+        let border_list = myJson.filter(obj => obj.alpha3Code == border);
+        let border_li = document.createElement('li');
+        border_li.innerHTML = border_list[0].name;
+        border_ul.append(border_li);
+      }
+
+      document.getElementById('loading').style.display = 'none';
+    });
+};
+
+function headers_divs_etc() {
+  let name_div = document.createElement('div');
+  let name_header = document.createElement('h1');
+  let name_info = document.createElement('h2');
+
+  let capital_div = document.createElement('div');
+  let capital_header = document.createElement('h1');
+  let capital_info = document.createElement('h2');
+
+  let border_div = document.createElement('div');
+  let border_header = document.createElement('h1');
+  let border_info = document.createElement('ul');
+
+  name_info.id = 'name';
+  capital_info.id = 'capital';
+  border_info.id = 'border';
+
+  name_header.innerHTML = 'NAME';
+  capital_header.innerHTML = 'CAPITAL';
+  border_header.innerHTML = 'BORDERS';
+
+  name_div.append(name_header, name_info);
+  capital_div.append(capital_header, capital_info);
+  border_div.append(border_header, border_info);
+  mainDiv.append(name_div, capital_div, border_div);
+}
diff --git a/week-2/README.md b/week-2/README.md
@@ -2,8 +2,8 @@
 
 | :mortar_board: | your emoji | your comments | coach emoji | coach comments |
 | --- | --- | --- | --- | --- |
-| :egg: __[debug: basic crud](./debug-basic-crud)__ | | | | |
-| :egg: __[event loop: 3 & 4](../exercises-event-loop)__ | | | | |
+| :egg: __[debug: basic crud](./debug-basic-crud)__ | :egg:| | | |
+| :egg: __[event loop: 3 & 4](../exercises-event-loop)__ | :egg:| | | |
 | :hatching_chick: __[debug: API fetches](./debug-api-fetches)__ | | | | |
 | :hatching_chick: __[closure: 2 & 3](../exercises-closure)__ | | | | |
 | :hatched_chick: __[implement SearchableModel](./searchable-model)__ | | | | |

diff --git a/week-2/debug-basic-crud/create.js b/week-2/debug-basic-crud/create.js
@@ -1,51 +1,53 @@
 function add_city_handler() {
   // read user input
-  const name_field = document.getElementById("city-name");
+  const name_field = document.getElementById('city-name');
   const city_name = name_field.value;
 
-  const country_field = document.getElementById("city-country");
+  const country_field = document.getElementById('city-country');
   const city_country = country_field.value;
 
-  const population_field = document.getElementById("city-population");
+  const population_field = document.getElementById('city-population');
   const city_population_str = population_field.value;
   const city_population = Number(city_population_str);
 
   // perform core logic
   const new_city = {
     name: city_name,
     country: city_country,
-    population: city_population
-  }
+    population: city_population,
+    id: next_id,
+  };
   cities[next_id] = new_city;
   next_id++;
 
   // show results to user
-  const display_zone = document.getElementById("display-zone");
-  while(display_zone.firstChild){
-      display_zone.removeChild(display_zone.firstChild);
+  const display_zone = document.getElementById('display-zone');
+
+  var child = display_zone.lastElementChild;
+  while (child) {
+    display_zone.removeChild(child);
+    child = display_zone.lastElementChild;
   }
 
-  const name_p = document.createElement("p");
-  name_p.innerHTML = "NAME: <br>&nbsp;"+new_city.name;
+  const name_p = document.createElement('p');
+  name_p.innerHTML = 'NAME: <br>&nbsp;' + new_city.name;
 
-  const country_p = document.createElement("p");
-  country_p.innerHTML = "COUNTRY: <br>&nbsp;"+new_city.country;
+  const country_p = document.createElement('p');
+  country_p.innerHTML = 'COUNTRY: <br>&nbsp;' + new_city.country;
 
-  const pop_p = document.createElement("p");
-  pop_p.innerHTML = "POPULATION: <br>&nbsp;"+new_city.population;
+  const pop_p = document.createElement('p');
+  pop_p.innerHTML = 'POPULATION: <br>&nbsp;' + new_city.population;
 
-  const id_p = document.createElement("p");
-  id_p.innerHTML = "DB ID: <br>&nbsp;"+new_city.id;
+  const id_p = document.createElement('p');
+  id_p.innerHTML = 'DB ID: <br>&nbsp;' + new_city.id;
 
   display_zone.appendChild(name_p);
   display_zone.appendChild(country_p);
   display_zone.appendChild(pop_p);
   display_zone.appendChild(id_p);
 
-
-  console.log("you created "+new_city.name);
-
+  console.log('you created ' + new_city.name);
 }
 
-const add_city_button = document.getElementById("delete-city");
-add_city_button.addEventListener("click", add_city_handler);
+const add_city_button = document.getElementById('create-city');
+add_city_button.addEventListener('click', add_city_handler);
diff --git a/week-2/debug-basic-crud/delete.js b/week-2/debug-basic-crud/delete.js
@@ -1,27 +1,29 @@
 function delete_city_handler() {
   // read user input
-  const user_input_field = document.getElementById("city-to-delete");
+  const user_input_field = document.getElementById('city-to-delete');
   const id_string = user_input_field.value;
   const id_to_delete = Number(id_string);
 
   // perform core logic
-  const deleted_entry = delete cities[id_to_delete];
+  const deleted_entry = cities[id_to_delete];
 
   // show results to user
-  const display_zone = document.getElementById("display-zone");
-  while(display_zone.firstChild){
-      display_zone.removeChild(display_zone.firstChild);
+  const display_zone = document.getElementById('display-zone');
+  var child = display_zone.lastElementChild;
+  while (child) {
+    display_zone.removeChild(child);
+    child = display_zone.lastElementChild;
   }
 
-  const message_p = document.createElement("p");
-  message_p.innerHTML = "you just deleted "+deleted_entry.name;
-
+  const message_p = document.createElement('p');
+  message_p.innerHTML = 'you just deleted ' + deleted_entry.name;
 
   display_zone.appendChild(message_p);
 
-  console.log("you just deleted "+deleted_entry.name);
+  console.log('you just deleted ' + deleted_entry.name);
 
+  delete cities[id_to_delete];
 }
 
-const delete_city_button = document.getElementById("create-city");
-delete_city_button.addEventListener("click", delete_city_handler);
+const delete_city_button = document.getElementById('delete-city');
+delete_city_button.addEventListener('click', delete_city_handler);
diff --git a/week-2/debug-basic-crud/index.html b/week-2/debug-basic-crud/index.html
@@ -30,7 +30,7 @@ <h2>cities</h2>
   <div>
     <input id="id-to-update" value="city id to update"></input><br>
     <input id="new-population" value="new population"></input>
-    <button id="update-city-id">update city</button>
+    <button id="update-city">update city</button>
   </div>
   <br>
   <div>

diff --git a/week-2/debug-basic-crud/read-all.js b/week-2/debug-basic-crud/read-all.js
@@ -5,28 +5,28 @@ function view_all_handler() {
   // perform core logic
   const cities_entries = [];
   for (let key in cities) {
-    cities.push(cities[key]);
+    cities_entries.push(cities[key]);
   }
-
+  console.log(cities_entries);
   // show results to user
-  const display_zone = document.getElementById("display-zone");
-  while(display_zone.firstChild){
-      display_zone.removeChild(display_zone.firstChild);
+  const display_zone = document.getElementById('display-zone');
+  var child = display_zone.lastElementChild;
+  while (child) {
+    display_zone.removeChild(child);
+    child = display_zone.lastElementChild;
   }
 
-  const cities_ul = document.createElement("ul");
+  const cities_ul = document.createElement('ul');
   for (let city of cities_entries) {
-    const next_li = document.createElement("li");
-    citis_ul.innerHTML = city.id+": "+city.name;
+    const next_li = document.createElement('li');
+    next_li.innerHTML = city.id + ': ' + city.name;
     cities_ul.appendChild(next_li);
   }
 
   display_zone.appendChild(cities_ul);
 
-
-  console.log("you viewed all citites");
-
+  console.log('you viewed all cities');
 }
 
-const view_all_button = document.getElementById("view-all-cities");
-view_all_button.addEventListener("click", view_all_handler);
+const view_all_button = document.getElementById('view-all-cities');
+view_all_button.addEventListener('click', view_all_handler);