From 047a8d9ab30049e8f96e100f781eedbd321ad66b Mon Sep 17 00:00:00 2001 From: Lisandro Cooper Date: Fri, 23 Feb 2018 17:38:07 -0300 Subject: [PATCH 1/5] Creating our index page with some sections --- 01-JS-DOM-APIs/public/css/normalize.css | 48 ++++++++++ 01-JS-DOM-APIs/public/css/style.css | 28 ++++++ 01-JS-DOM-APIs/public/css/style252.css | 121 ++++++++++++++++++++++++ 01-JS-DOM-APIs/public/index.html | 22 +++++ 01-JS-DOM-APIs/public/script.js | 4 + 5 files changed, 223 insertions(+) create mode 100644 01-JS-DOM-APIs/public/css/normalize.css create mode 100644 01-JS-DOM-APIs/public/css/style.css create mode 100644 01-JS-DOM-APIs/public/css/style252.css create mode 100644 01-JS-DOM-APIs/public/index.html create mode 100644 01-JS-DOM-APIs/public/script.js diff --git a/01-JS-DOM-APIs/public/css/normalize.css b/01-JS-DOM-APIs/public/css/normalize.css new file mode 100644 index 000000000..af944401f --- /dev/null +++ b/01-JS-DOM-APIs/public/css/normalize.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/public/css/style.css b/01-JS-DOM-APIs/public/css/style.css new file mode 100644 index 000000000..24af55b77 --- /dev/null +++ b/01-JS-DOM-APIs/public/css/style.css @@ -0,0 +1,28 @@ +html { + font-family: Sans-serif; +} + +h1 { + font-size: 50px; +} + +section { + text-align: center; +} + +section#hide { + opacity: 0; + visibility: hidden; + transition: opacity .25s ease-in-out; + -moz-transition: opacity .25s ease-in-out; + -webkit-transition: opacity .25s ease-in-out; +} + +.container { + clear: both; + background: white; + display: block; + float: left; + width: 100%; + padding: 8px; +} \ No newline at end of file diff --git a/01-JS-DOM-APIs/public/css/style252.css b/01-JS-DOM-APIs/public/css/style252.css new file mode 100644 index 000000000..cc2bfe64f --- /dev/null +++ b/01-JS-DOM-APIs/public/css/style252.css @@ -0,0 +1,121 @@ +html { + font-family: Sans-serif; +} + +h1 { + margin: 1%; +} + +.container { + clear: both; + background: white; + display: block; + float: left; + width: 100%; + padding: 8px; +} + +.third { + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3); + width: -ms-calc(33.3333% - 16px); + width: -moz-calc(33.3333% - 16px); + width: -webkit-calc(33.3333% - 16px); + width: calc(33.3333% - 16px); + margin: 8px; + height: auto; + position: relative; + float: left; +} + +.gallery-grid img { + width: 100%; + height: auto; + position: relative; + float: left; +} + +.screen { + background-color: rgba(0,0,0,0.5); + left: 0; + top: 0; + border-radius: 0; + height: 100%; + width: 100%; + position: absolute; + opacity: 0; + z-index: 1000; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +.screen:hover { + opacity: 1 +} + +.title { + color: #fff; + font-family: arial, helvetica, sans-serif; + font-weight: bold; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + margin-left: -30px; +} + +.screen:hover .title { + margin-left: 0; +} + +p { + font-size: 2em; + padding: 5%; +} + +.screen.fade-in .title { + margin-left: 0; +} + +.screen.fade-in:hover { +} + +img { + width: 100%; +} + +.row:before, +.row:after { + display: table; + clear: both; +} + +/* MEDIA QUERIES */ + +@media screen and (max-width: 950px) and (min-width: 600px) { + + .third { + width: -ms-calc(50% - 16px); + width: -moz-calc(50% - 16px); + width: -webkit-calc(50% - 16px); + width: calc(50% - 16px); + } +} + +@media screen and (max-width: 600px) { + + .third { + width: -ms-calc(100% - 16px); + width: -moz-calc(100% - 16px); + width: -webkit-calc(100% - 16px); + width: calc(100% - 16px); + } + + p { + font-size: 30px; + } +} + diff --git a/01-JS-DOM-APIs/public/index.html b/01-JS-DOM-APIs/public/index.html new file mode 100644 index 000000000..d001dd5b9 --- /dev/null +++ b/01-JS-DOM-APIs/public/index.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + +
+
+

Hello world!!!!

+
+
+ + \ No newline at end of file diff --git a/01-JS-DOM-APIs/public/script.js b/01-JS-DOM-APIs/public/script.js new file mode 100644 index 000000000..e8589a7b0 --- /dev/null +++ b/01-JS-DOM-APIs/public/script.js @@ -0,0 +1,4 @@ +function showSection() { + document.getElementById("hide").style.visibility = "visible"; + document.getElementById("hide").style.opacity = "1"; +} \ No newline at end of file From 8a76b6f8188b4c9a5af02a44535d6029eb009ee3 Mon Sep 17 00:00:00 2001 From: Lisandro Cooper Date: Fri, 23 Feb 2018 19:10:39 -0300 Subject: [PATCH 2/5] Adding some events --- 01-JS-DOM-APIs/public/css/style.css | 10 ++++++++++ 01-JS-DOM-APIs/public/index.html | 3 +++ 01-JS-DOM-APIs/public/script.js | 4 ++++ 3 files changed, 17 insertions(+) diff --git a/01-JS-DOM-APIs/public/css/style.css b/01-JS-DOM-APIs/public/css/style.css index 24af55b77..389915217 100644 --- a/01-JS-DOM-APIs/public/css/style.css +++ b/01-JS-DOM-APIs/public/css/style.css @@ -4,12 +4,22 @@ html { h1 { font-size: 50px; + margin: 1%; } section { text-align: center; } +button { + display: block; + margin: 0 auto; + width: 100px; + height: 30px; + border-color: blue; + background: lightblue; +} + section#hide { opacity: 0; visibility: hidden; diff --git a/01-JS-DOM-APIs/public/index.html b/01-JS-DOM-APIs/public/index.html index d001dd5b9..b60e57404 100644 --- a/01-JS-DOM-APIs/public/index.html +++ b/01-JS-DOM-APIs/public/index.html @@ -17,6 +17,9 @@

Hello world!!!!

+ \ No newline at end of file diff --git a/01-JS-DOM-APIs/public/script.js b/01-JS-DOM-APIs/public/script.js index e8589a7b0..04aed16b9 100644 --- a/01-JS-DOM-APIs/public/script.js +++ b/01-JS-DOM-APIs/public/script.js @@ -1,4 +1,8 @@ function showSection() { document.getElementById("hide").style.visibility = "visible"; document.getElementById("hide").style.opacity = "1"; +} + +function alertbox() { + alert("Hello! I am an alert box!"); } \ No newline at end of file From 4574441fb4c5884a9b4b7f6d9cc0f8721c63898d Mon Sep 17 00:00:00 2001 From: Lisandro Cooper Date: Sun, 25 Feb 2018 16:19:35 -0300 Subject: [PATCH 3/5] Data fetching --- 01-JS-DOM-APIs/public/css/style.css | 17 ++++++---- 01-JS-DOM-APIs/public/index.html | 7 +++-- 01-JS-DOM-APIs/public/script.js | 48 +++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+), 9 deletions(-) diff --git a/01-JS-DOM-APIs/public/css/style.css b/01-JS-DOM-APIs/public/css/style.css index 389915217..7d5bcd3b7 100644 --- a/01-JS-DOM-APIs/public/css/style.css +++ b/01-JS-DOM-APIs/public/css/style.css @@ -11,13 +11,18 @@ section { text-align: center; } -button { - display: block; +#joke { + margin: 10px; +} + +button.button { + display: block; + font-size: 30px; margin: 0 auto; - width: 100px; - height: 30px; - border-color: blue; - background: lightblue; + width: 150px; + height: 50px; + border-color: black; + background: lightgreen; } section#hide { diff --git a/01-JS-DOM-APIs/public/index.html b/01-JS-DOM-APIs/public/index.html index b60e57404..b244cb546 100644 --- a/01-JS-DOM-APIs/public/index.html +++ b/01-JS-DOM-APIs/public/index.html @@ -15,10 +15,11 @@
-

Hello world!!!!

+

Hello world!!!!

+

-
diff --git a/01-JS-DOM-APIs/public/script.js b/01-JS-DOM-APIs/public/script.js index 04aed16b9..d83843035 100644 --- a/01-JS-DOM-APIs/public/script.js +++ b/01-JS-DOM-APIs/public/script.js @@ -5,4 +5,52 @@ function showSection() { function alertbox() { alert("Hello! I am an alert box!"); +} + +function joke_response() { + fetch('http://api.icndb.com/jokes/random') + .then( + function(response) { + if (response.status !== 200) { + console.log('Looks like there was a problem. Status Code: ' + + response.status); + return; + } + + // Examine the text in the response + response.json().then(function(data) { + document.getElementById("joke").innerHTML = data.value.joke; + + }); + } + ) + .catch(function(err) { + console.log('Fetch Error :-S', err); + }); +} + +function ajax_call(config) { + + const get_async_response = new Promise (function (resolve, reject)) { + let xhttp = new XMLHttpRequest(); + xhttp.open(config.req_method, config.url, config.asynchronous); + + xhttp.onload = function() { + if(xhttp.readyState == 4 && this.status == 200) { + resolve(xhttp); + } else { + reject(); + } + } + + xhttp.onerror = function() { + show_error(); + } + } + + return get_async_response; +} + +function show_error() { + document.getElementById("title").style.color = "red"; } \ No newline at end of file From 62a17754cb4f52483bc6f121eace1e48880a7b01 Mon Sep 17 00:00:00 2001 From: Lisandro Cooper Date: Mon, 26 Feb 2018 22:05:27 -0300 Subject: [PATCH 4/5] Data fetching with parameters --- 01-JS-DOM-APIs/public/css/style.css | 49 +++++++++++++++++++++---- 01-JS-DOM-APIs/public/index.html | 11 ++++-- 01-JS-DOM-APIs/public/script.js | 57 +++++++++++++++++++++++++++-- 3 files changed, 103 insertions(+), 14 deletions(-) diff --git a/01-JS-DOM-APIs/public/css/style.css b/01-JS-DOM-APIs/public/css/style.css index 7d5bcd3b7..638f917b1 100644 --- a/01-JS-DOM-APIs/public/css/style.css +++ b/01-JS-DOM-APIs/public/css/style.css @@ -7,6 +7,13 @@ h1 { margin: 1%; } +h2 { + font-size: 20px; + margin-top: 1%; + margin-bottom: 5%; + font-weight: bold; +} + section { text-align: center; } @@ -17,14 +24,26 @@ section { button.button { display: block; - font-size: 30px; + font-size: 20px; margin: 0 auto; + margin-top: 1%; width: 150px; height: 50px; border-color: black; background: lightgreen; } +button.button:hover { + border-color: green; + color: green; +} + +button.button:active { + border-color: lightgreen; + color: white; + background: lightgreen; +} + section#hide { opacity: 0; visibility: hidden; @@ -33,11 +52,25 @@ section#hide { -webkit-transition: opacity .25s ease-in-out; } -.container { - clear: both; - background: white; - display: block; - float: left; - width: 100%; - padding: 8px; +.sidebar { + visibility: hidden; + width: 265px; + height: auto; + margin-right: 1%; + padding: 1%; + float: right; + background: lightgreen; +} + +li { + margin-top: 2px; +} + +input { + display: block; + margin: 0 auto; + margin-top: 1%; + width: 150px; + height: 30px; + border-color: green; } \ No newline at end of file diff --git a/01-JS-DOM-APIs/public/index.html b/01-JS-DOM-APIs/public/index.html index b244cb546..fc73a0aca 100644 --- a/01-JS-DOM-APIs/public/index.html +++ b/01-JS-DOM-APIs/public/index.html @@ -11,16 +11,21 @@ - + -
-
+
+

Hello world!!!!

+ +
\ No newline at end of file diff --git a/01-JS-DOM-APIs/public/script.js b/01-JS-DOM-APIs/public/script.js index d83843035..5c4f5e777 100644 --- a/01-JS-DOM-APIs/public/script.js +++ b/01-JS-DOM-APIs/public/script.js @@ -31,12 +31,12 @@ function joke_response() { function ajax_call(config) { - const get_async_response = new Promise (function (resolve, reject)) { + const get_async_response = new Promise (function (resolve, reject) { let xhttp = new XMLHttpRequest(); xhttp.open(config.req_method, config.url, config.asynchronous); xhttp.onload = function() { - if(xhttp.readyState == 4 && this.status == 200) { + if(xhttp.readyState == 4 && xhttp.status == 200) { resolve(xhttp); } else { reject(); @@ -46,11 +46,62 @@ function ajax_call(config) { xhttp.onerror = function() { show_error(); } - } + + xhttp.send(); + }); return get_async_response; } function show_error() { document.getElementById("title").style.color = "red"; +} + +let repos_list; + +function get_repos() { + const config = { + req_method: "GET", + url: "https://api.github.com/search/repositories?q=javascript", + asynchronous: true + }; + + let response = this.ajax_call(config); + + response.then(function(content) { + + document.getElementsByClassName("sidebar")[0].style.visibility = "visible"; + let list = JSON.parse(content.response); + this.repos_list = list.items; + this.display_list(this.repos_list); + }) +} + +function repos_filter(){ + if (this.repos_list) { + let input_repo_filter = document.getElementById("repofilter").value; + let filtered_response = this.filter_list(input_repo_filter, this.repos_list); + this.display_list(filtered_response); + } +} + +function filter_list(input, list) { //filters the given list by input + return list.filter(function(l) { + return l.owner.login.toLowerCase().indexOf(input.toLowerCase()) > -1; + }) +} + +function display_list(list) { + this.empty_list(); + for (let i = 0; list.length > i; i++) { + let li = document.createElement("LI"); + let text = document.createTextNode(list[i].owner.login); + li.appendChild(text); + document.getElementById("displaylist").appendChild(li); + } +} + +function empty_list() { + let list = document.getElementById("displaylist"); + list.innerHTML = ''; } \ No newline at end of file From fc82abadb0c35ed3ce5915ac7a935f8181a88e6f Mon Sep 17 00:00:00 2001 From: Lisandro Cooper Date: Tue, 27 Feb 2018 00:18:59 -0300 Subject: [PATCH 5/5] DOM manipulation + styling --- 01-JS-DOM-APIs/public/css/style.css | 51 ++++++++++++++++++++++++----- 01-JS-DOM-APIs/public/index.html | 29 +++++++++------- 01-JS-DOM-APIs/public/script.js | 46 ++++++++++++++++++++++++-- 3 files changed, 103 insertions(+), 23 deletions(-) diff --git a/01-JS-DOM-APIs/public/css/style.css b/01-JS-DOM-APIs/public/css/style.css index 638f917b1..de46e5008 100644 --- a/01-JS-DOM-APIs/public/css/style.css +++ b/01-JS-DOM-APIs/public/css/style.css @@ -4,7 +4,7 @@ html { h1 { font-size: 50px; - margin: 1%; + margin: 20px; } h2 { @@ -14,7 +14,7 @@ h2 { font-weight: bold; } -section { +header { text-align: center; } @@ -22,15 +22,21 @@ section { margin: 10px; } +section.section { + float: left; + width: 800px; + margin-left: 230px; +} + button.button { display: block; font-size: 20px; - margin: 0 auto; margin-top: 1%; width: 150px; height: 50px; - border-color: black; + border-color: grey; background: lightgreen; + margin-top: 20px; } button.button:hover { @@ -44,7 +50,7 @@ button.button:active { background: lightgreen; } -section#hide { +header#hide { opacity: 0; visibility: hidden; transition: opacity .25s ease-in-out; @@ -56,10 +62,11 @@ section#hide { visibility: hidden; width: 265px; height: auto; - margin-right: 1%; + margin: 1%; padding: 1%; float: right; background: lightgreen; + box-shadow: 5px 5px #888888; } li { @@ -69,8 +76,34 @@ li { input { display: block; margin: 0 auto; - margin-top: 1%; - width: 150px; + + margin-bottom: 10px; + width: 100%; height: 30px; - border-color: green; + border-color: grey; +} + +#matrix { + font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; + border-collapse: collapse; + width: 100%; + padding: 10px; + box-shadow: 5px 5px lightgreen; +} + +#matrix td, #matrix th { + border: 2px solid grey; + padding: 8px; +} + +#matrix tr:hover { + background-color: lightgreen; +} + +#matrix th { + padding-top: 12px; + padding-bottom: 12px; + text-align: left; + background-color: #4CAF50; + color: white; } \ No newline at end of file diff --git a/01-JS-DOM-APIs/public/index.html b/01-JS-DOM-APIs/public/index.html index fc73a0aca..ec385dc94 100644 --- a/01-JS-DOM-APIs/public/index.html +++ b/01-JS-DOM-APIs/public/index.html @@ -11,21 +11,26 @@ - + -
-
-

Hello world!!!!

-

-
+ +
+

Hello world!!!!

+
+ +
+
- - -
+

+
+ + + \ No newline at end of file diff --git a/01-JS-DOM-APIs/public/script.js b/01-JS-DOM-APIs/public/script.js index 5c4f5e777..82eea876a 100644 --- a/01-JS-DOM-APIs/public/script.js +++ b/01-JS-DOM-APIs/public/script.js @@ -57,6 +57,8 @@ function show_error() { document.getElementById("title").style.color = "red"; } +// EXCERCISE 4 + let repos_list; function get_repos() { @@ -93,9 +95,16 @@ function filter_list(input, list) { //filters the given list by input function display_list(list) { this.empty_list(); - for (let i = 0; list.length > i; i++) { + if(list.length){ + for (let i = 0; list.length > i; i++) { + let li = document.createElement("LI"); + let text = document.createTextNode(list[i].owner.login); + li.appendChild(text); + document.getElementById("displaylist").appendChild(li); + } + } else { let li = document.createElement("LI"); - let text = document.createTextNode(list[i].owner.login); + let text = document.createTextNode("No repositories found"); li.appendChild(text); document.getElementById("displaylist").appendChild(li); } @@ -104,4 +113,37 @@ function display_list(list) { function empty_list() { let list = document.getElementById("displaylist"); list.innerHTML = ''; +} + +// EXCERCISE 6 +function display_matrix(){ + let matris = [ + [ "Lisandro", "Cooper", 1 ], + [ "GG", "Allin", 2 ], + [ "Seth", "Putnam", 3 ], + [ "Martin", "El seductor", 4 ], + [ "Discordance", "Axis", 5 ], + [ "Local", "Burned", 6 ], + ]; + this.forreal_display_matrix(matris); +} + +function forreal_display_matrix(matrix) { + + let table = document.getElementById("matrix"); + for (let i_row = 0; matrix.length > i_row; i_row++) { + //let table_row = document.createElement("TR"); + let t_row = table.insertRow(i_row); + + for (let i_column = 0; matrix[i_row].length > i_column; i_column++) { + //let table_data = document.createElement("TD"); + //let column_data = document.createTextNode(matrix[row][column]); + //table_data.appendChild(column_data); + + //table_row.appendChild(table_data); + + let cell = t_row.insertCell(i_column); + cell.innerHTML = matrix[i_row][i_column]; + } + } } \ No newline at end of file