diff --git a/exercises-event-loop/index.html b/exercises-event-loop/index.html index c1c21b4..9a3de39 100644 --- a/exercises-event-loop/index.html +++ b/exercises-event-loop/index.html @@ -1,18 +1,16 @@ - + - + - + - - -

Event Loop Exercises

+

Event Loop Exercises

the smoothest workflow for these exercises will either be either:
-
-
+
+
-

exercise 1

+

exercise 1

all mixed up

-
+

exercise 2

-

+

values on arrival or on departure?

- -
+ +

exercise 3

-

+

arguments to callbacks

- -
+

exercise 4

- error first callbacks + error first callbacks

-
+

exercise 5

-

+

arguments to callbacks & modifying global variables

- -
+

exercise 6

- reference vs. value in the event loop + reference vs. value + in the event loop

-
+

exercise 7

- reference vs. value in the event loop + reference vs. value + in the event loop

-
- +

exercise 8

-

- var, let, const in for loops
- this is tricky, check it on pytut +

+ var, let, const in for loops
+ this is tricky, check it + + on pytut

- - -
+
- - \ No newline at end of file + diff --git a/project/2.jpg b/project/2.jpg new file mode 100644 index 0000000..0427bc2 Binary files /dev/null and b/project/2.jpg differ diff --git a/project/index.css b/project/index.css new file mode 100644 index 0000000..bc981f0 --- /dev/null +++ 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 new file mode 100644 index 0000000..6e754e7 --- /dev/null +++ b/project/index.html @@ -0,0 +1,16 @@ + + + + + + home page + + + + +
+
+ + + + diff --git a/project/index.js b/project/index.js new file mode 100644 index 0000000..411fe2e --- /dev/null +++ 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 index 9707f5d..30d446b 100644 --- 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 index 9d9271b..9248a3c 100644 --- a/week-2/debug-basic-crud/create.js +++ b/week-2/debug-basic-crud/create.js @@ -1,12 +1,12 @@ 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); @@ -14,38 +14,40 @@ function add_city_handler() { 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:
 "+new_city.name; + const name_p = document.createElement('p'); + name_p.innerHTML = 'NAME:
 ' + new_city.name; - const country_p = document.createElement("p"); - country_p.innerHTML = "COUNTRY:
 "+new_city.country; + const country_p = document.createElement('p'); + country_p.innerHTML = 'COUNTRY:
 ' + new_city.country; - const pop_p = document.createElement("p"); - pop_p.innerHTML = "POPULATION:
 "+new_city.population; + const pop_p = document.createElement('p'); + pop_p.innerHTML = 'POPULATION:
 ' + new_city.population; - const id_p = document.createElement("p"); - id_p.innerHTML = "DB ID:
 "+new_city.id; + const id_p = document.createElement('p'); + id_p.innerHTML = 'DB ID:
 ' + 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); \ No newline at end of file +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 index 631cd27..296d236 100644 --- 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); \ No newline at end of file +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 index 1e14881..fbc54c5 100644 --- a/week-2/debug-basic-crud/index.html +++ b/week-2/debug-basic-crud/index.html @@ -30,7 +30,7 @@

cities


- +

diff --git a/week-2/debug-basic-crud/read-all.js b/week-2/debug-basic-crud/read-all.js index 28578d1..a10025f 100644 --- 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); \ No newline at end of file +const view_all_button = document.getElementById('view-all-cities'); +view_all_button.addEventListener('click', view_all_handler); diff --git a/week-2/debug-basic-crud/read-one.js b/week-2/debug-basic-crud/read-one.js index 6dd462b..3dd3d01 100644 --- a/week-2/debug-basic-crud/read-one.js +++ b/week-2/debug-basic-crud/read-one.js @@ -1,6 +1,6 @@ function view_city_handler() { // read user input - const id_field = document.getElementById("city-to-view"); + const id_field = document.getElementById('view-city'); const string_id = id_field.value; const city_id = Number(string_id); @@ -8,32 +8,32 @@ function view_city_handler() { const city = cities[city_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.inerHTML = "NAME:
 "+city; + const name_p = document.createElement('p'); + name_p.innerHTML = 'NAME:
 ' + city.name; - const country_p = document.createElement("p"); - country_p.inerHTML = "COUNTRY:
 "+city; + const country_p = document.createElement('p'); + country_p.innerHTML = 'COUNTRY:
 ' + city.country; - const pop_p = document.createElement("p"); - pop_p.inerHTML = "POPULATION:
 "+city; + const pop_p = document.createElement('p'); + pop_p.innerHTML = 'POPULATION:
 ' + city.population; - const id_p = document.createElement("p"); - id_p.inerHTML = "DB ID:
 "+city; + const id_p = document.createElement('p'); + id_p.innerHTML = 'DB ID:
 ' + 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 viewed "+city.name); - + console.log('you viewed ' + city.name); } -const view_city_button = document.getElementById("view-one-city"); -view_city_button.addEventListener("click", view_city_handler); \ No newline at end of file +const view_city_button = document.getElementById('view-one-city'); +view_city_button.addEventListener('click', view_city_handler); diff --git a/week-2/debug-basic-crud/update.js b/week-2/debug-basic-crud/update.js index fa35e73..261082c 100644 --- a/week-2/debug-basic-crud/update.js +++ b/week-2/debug-basic-crud/update.js @@ -1,16 +1,15 @@ function update_city_handler() { // read user input - const id_field = document.getElementById("id-to-update"); + const id_field = document.getElementById('id-to-update'); const id_string = id_field.value; const id_to_update = Number(id_string); - const pop_field = document.getElementById("new-population"); + const pop_field = document.getElementById('new-population'); const pop_string = pop_field.value; const new_population = Number(pop_string); - // perform core logic - + const old_pop = cities[id_to_update].population; cities[id_to_update].population = new_population; @@ -18,26 +17,28 @@ function update_city_handler() { const city = cities[id_to_update]; // show results to user - 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:
 "+city.name; + const name_p = document.createElement('p'); + name_p.innerHTML = 'NAME:
 ' + city.name; - const old_pop_p = document.createElement(p); - old_pop_p.innerHTML = "OLD POP:
 "+old_pop; + const old_pop_p = document.createElement('p'); + old_pop_p.innerHTML = 'OLD POP:
 ' + old_pop; - const new_pop_p = document.createElement(p); - new_pop_p.innerHTML = "NEW POP:
 "+new_population; + const new_pop_p = document.createElement('p'); + new_pop_p.innerHTML = 'NEW POP:
 ' + new_population; display_zone.appendChild(name_p); display_zone.appendChild(old_pop_p); display_zone.appendChild(new_pop_p); - console.log("you updated "+city.name); - + console.log('you updated ' + city.name); } -const update_city_button = document.getElementById("update-city"); -update_city_button.addEventListener("click", update_city_handler); +const update_city_button = document.getElementById('update-city'); +update_city_button.addEventListener('click', update_city_handler);