diff --git a/00-HTML-CSS-basics/1.HTML/signUp.html b/00-HTML-CSS-basics/1.HTML/signUp.html index efb3693c..56f2ec6b 100644 --- a/00-HTML-CSS-basics/1.HTML/signUp.html +++ b/00-HTML-CSS-basics/1.HTML/signUp.html @@ -1,5 +1,6 @@ + @@ -8,53 +9,49 @@ -
+

Sign Up

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- -
+ + +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+

-
diff --git a/00-HTML-CSS-basics/2.CSS/FirstExercises/css/style.css b/00-HTML-CSS-basics/2.CSS/FirstExercises/css/style.css index 683ad75e..629f388d 100644 --- a/00-HTML-CSS-basics/2.CSS/FirstExercises/css/style.css +++ b/00-HTML-CSS-basics/2.CSS/FirstExercises/css/style.css @@ -6,9 +6,6 @@ .my-grid { display: grid; - grid-template-columns: 0.20fr 0.80fr 0.20fr; - grid-auto-rows: 0.07fr 0.93fr 0.10fr; - grid-template-areas: 'head head head head' 'nav section section aside' diff --git a/01-JS-DOM-APIs/.empty b/01-JS-DOM-APIs/.empty deleted file mode 100644 index e69de29b..00000000 diff --git a/01-JS-DOM-APIs/README.md b/01-JS-DOM-APIs/README.md new file mode 100644 index 00000000..60aed149 --- /dev/null +++ b/01-JS-DOM-APIs/README.md @@ -0,0 +1,3 @@ +# 01-JS-DOM-APIs + +### \ No newline at end of file diff --git a/01-JS-DOM-APIs/css/grid.css b/01-JS-DOM-APIs/css/grid.css new file mode 100644 index 00000000..ba4204d5 --- /dev/null +++ b/01-JS-DOM-APIs/css/grid.css @@ -0,0 +1,144 @@ +/*________________________________________________________________________________________________ +Borders and padding are drawn inside the set width of your content. The margin is drawn outside.*/ + +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/*________________________________________________________________________________________________ +Grid Layout.*/ + +@media (min-width: 600px) { + main { + display: grid; + grid-template-columns: repeat(6, 1fr); + } + + + .col-1-row-1 { + grid-column: span 1; + grid-row: span 1; + } + + .col-2-row-1 { + grid-column: span 2; + grid-row: span 1; + } + + .col-3-row-1 { + grid-column: span 3; + grid-row: span 1; + } + + .col-4-row-1 { + grid-column: span 4; + grid-row: span 1; + } + + .col-5-row-1 { + grid-column: span 5; + grid-row: span 1; + } + + .col-6-row-1 { + grid-column: span 6; + grid-row: span 1; + } + + .col-1-row-1 { + grid-column: span 1; + grid-row: span 1; + } + + .col-2-row-2 { + grid-column: span 2; + grid-row: span 2; + } + + .col-3-row-2 { + grid-column: span 3; + grid-row: span 2; + } + + .col-4-row-2 { + grid-column: span 4; + grid-row: span 2; + } + + .col-5-row-2 { + grid-column: span 5; + grid-row: span 2; + } + + .col-6-row-2 { + grid-column: span 6; + grid-row: span 2; + } + + .col-1-row-3 { + grid-column: span 1; + grid-row: span 3; + } + + .col-2-row-3 { + grid-column: span 2; + grid-row: span 3; + } + + .col-3-row-3 { + grid-column: span 3; + grid-row: span 3; + } + + .col-4-row-3 { + grid-column: span 4; + grid-row: span 3; + } + + .col-5-row-3 { + grid-column: span 5; + grid-row: span 3; + } + + .col-6-row-3 { + grid-column: span 6; + grid-row: span 3; + } + + .col-1-row-4 { + grid-column: span 1; + grid-row: span 4; + } + + .col-2-row-4 { + grid-column: span 2; + grid-row: span 4; + } + + .col-3-row-4 { + grid-column: span 3; + grid-row: span 4; + } + + .col-4-row-4 { + grid-column: span 4; + grid-row: span 4; + } + + .col-5-row-4 { + grid-column: span 5; + grid-row: span 4; + } + + .col-6-row-4 { + grid-column: span 6; + grid-row: span 4; + } + +} + +/*________________________________________________________________________________________________*/ \ No newline at end of file diff --git a/01-JS-DOM-APIs/css/normalize.css b/01-JS-DOM-APIs/css/normalize.css new file mode 100644 index 00000000..aba238fe --- /dev/null +++ b/01-JS-DOM-APIs/css/normalize.css @@ -0,0 +1,341 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } \ No newline at end of file diff --git a/01-JS-DOM-APIs/css/style.css b/01-JS-DOM-APIs/css/style.css new file mode 100644 index 00000000..3e9f2984 --- /dev/null +++ b/01-JS-DOM-APIs/css/style.css @@ -0,0 +1,148 @@ +/*________________________________________________________________________________________*/ +/*Add a stylesheet to the HTML file and use it to center the texts of all section elements.*/ + +section > *{ + text-align: center; +} + +/*________________________________________________________________________________________*/ +/*Showcase a list of repositories, provided by the service, in the right side of the screen.*/ + +ul { + list-style-type: none; + float: right; + +} + +/*________________________________________________________________________________________*/ + +body { + max-width: 1600px; + margin: 0 auto; + font-family: Helvetica, sans-serif; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; +} + +li { + margin: 2rem; +} + +table { + border: 1px solid black; +} + +h1 { + border-collapse: collapse; + padding: 0; + margin: 0; + text-align: center; + font-size: 3em; + line-height: 1.3em; +} + +h2 { + font-size: 2em; + margin-bottom: 1em; +} + +@media only screen and (max-width: 600px) { + p { + font-size: 2em; + margin: 2rem; + } +} + +@media only screen and (min-width: 600px) { + p { + font-size: 1em; + margin: 2rem; + } +} + +.footer { + + right: 0; + bottom: 0; + left: 0; + padding: 1rem; + background-color: #efefef; + text-align: center; + font-size: 1em; + line-height: 1.3em; +} + +/*________________________________________________________________________________________*/ +/*Modal Seek.*/ + +.modalDialog { + position: fixed; + font-family: Arial, Helvetica, sans-serif; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(0,0,0,0.8); + z-index: 99999; + display:none; + -webkit-transition: opacity 400ms ease-in; + -moz-transition: opacity 400ms ease-in; + transition: opacity 400ms ease-in; + pointer-events: auto; + overflow: scroll; +} + +.modalDialog > div { + width: 400px; + position: relative; + margin: 10% auto; + padding: 5px 20px 13px 20px; + border-radius: 10px; + background: #fff; + background: -moz-linear-gradient(#fff, #999); + background: -webkit-linear-gradient(#fff, #999); + background: -o-linear-gradient(#fff, #999); + -webkit-transition: opacity 400ms ease-in; +-moz-transition: opacity 400ms ease-in; +transition: opacity 400ms ease-in; +} + +.close { + background: #606061; + color: #FFFFFF; + line-height: 25px; + position: absolute; + right: -12px; + text-align: center; + top: -10px; + width: 24px; + text-decoration: none; + font-weight: bold; + -webkit-border-radius: 12px; + -moz-border-radius: 12px; + border-radius: 12px; + -moz-box-shadow: 1px 1px 3px #000; + -webkit-box-shadow: 1px 1px 3px #000; + box-shadow: 1px 1px 3px #000; +} + +.close:hover { + background: #00d9ff; +} + +.visible { + display: block; +} + +.unseen { + display: none; +} + +.colorTextRed { + color: red; +} + +.colorTextGreen { + color: green; +} + diff --git a/01-JS-DOM-APIs/img/favicon.png b/01-JS-DOM-APIs/img/favicon.png new file mode 100644 index 00000000..1c8ea8e8 Binary files /dev/null and b/01-JS-DOM-APIs/img/favicon.png differ diff --git a/01-JS-DOM-APIs/index.html b/01-JS-DOM-APIs/index.html new file mode 100644 index 00000000..4ed7f28d --- /dev/null +++ b/01-JS-DOM-APIs/index.html @@ -0,0 +1,70 @@ + + + + + + + Topic 1 - JavaScript and DOM APIs + + + + + + + + + + +
+

Topic 1 - JavaScript and DOM APIs

+
+ +
+ +

+
+
+
+
+ + +
+
+ X +

Coincidences:

+
+
+
+ +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/01-JS-DOM-APIs/js/scripts.js b/01-JS-DOM-APIs/js/scripts.js new file mode 100644 index 00000000..67f66653 --- /dev/null +++ b/01-JS-DOM-APIs/js/scripts.js @@ -0,0 +1,224 @@ + +function fadeIn() { + document.getElementById("sectionOnLoad").hidden = false; +} + +//Another type of data fetching +function fetchAsync(url, within) { + + fetch(url, { + method: 'POST' + }) + .then(response => response.json()) + .then(response => this.handleResponse(response, within)) + .catch(error => this.handleError(error)) +} + +//Handle response from http://api.icndb.com/jokes/random +/** + * @param {method: String, url: String, user: String, password: String, params: String} options + * @param {"id HTML, to insert after, the new element"} after + */ +function handleResponseJoke(options, after) { + + let rtn = this.xhrRequestAsync(options); + + rtn.then((response) => { + let jsonResponse = JSON.parse(response); + + let data = jsonResponse['value']; + + let newElement = document.createElement('p'); + newElement.textContent = data["joke"]; + + this.insertAfter(newElement, after); + }) + rtn.catch((error) => this.handleError(error, within)) +} + +//Handle response from https://api.github.com/search/repositories +/** + * @param {method: String, url: String, user: String, password: String, params: String} options + * @param {"id HTML, to insert after, the new element"} after + */ +function handleResponseRepositories(options, after){ + + let rtn = this.xhrRequestAsync(options); + + rtn.then((response) => { + let jsonResponse = JSON.parse(response); + + if (document.getElementById("repositoriesList")) { + + let father = document.getElementById("results"); + + father.innerHTML='
'; + } + + let data = jsonResponse['items']; + + let ul = document.createElement('ul'); + ul.id = "repositoriesList"; + + this.insertAfter(ul, after); + + Object.keys(data).forEach(function(element){ + + let li = document.createElement('li'); + let text = document.createTextNode("Id: " + data[element]['id'] + " | OwnerName: " + data[element]['owner']['login'] + " | Url: " + data[element]['owner']['url']); + li.appendChild(text); + + let id = document.getElementById("repositoriesList"); + id.appendChild(li); + }) + }) + rtn.catch((error) => this.handleError(error, within)) +} + +function handleError(error, after) { + + let newElement = document.createElement('p'); + newElement.textContent = "ERROR:" + error["status"] + " " + error["statusText"]; + newElement.classList.add("colorTextRed"); + + this.insertAfter(newElement, after); +} + +function insertAfter(newElement, after) { + + let child = document.getElementById(after); + let parent = child.parentNode; + + parent.insertBefore(newElement, child.nextSibling); +} + +function xhrRequestAsync(options) { + + let rtn = new Promise(function (resolve, reject) { + + let xhr = new XMLHttpRequest(); + xhr.open(options.method, options.url+"?q="+options.params, true, options.user, options.password); + + xhr.onload = function() { + if (this.status >= 200 && this.status < 300) { //Promise Succes + resolve(xhr.response); + } else { + reject({ //Promise Fail (bad status) + status: this.status, + statusText: xhr.statusText + }); + } + }; + + xhr.onerror = function() { //Promise Fail (error in XMLHttpRequest) + reject({ + status: this.status, + statusText: xhr.statusText + }); + }; + + xhr.send(); + }); + return rtn; +} + +function seekRepositories() { + let toSeek = document.getElementById("seekRepositories").elements["searchRepositories"].value; + + if (toSeek === "" || toSeek === " ") { + alert("Please, write in the input before submit."); + + } else { + this.handleResponseRepositories({method: 'GET', url: 'https://api.github.com/search/repositories', user: 'null', password: 'null', params: toSeek}, 'inside'); + } +} + +function seek() { + let toSeek = document.getElementById("seekForm").elements["search"].value; + + if (document.getElementById("repositoriesList") == undefined) { + alert("Don't exists list of repositories to search."); + + } else if (toSeek === "" || toSeek === " ") { + alert("Please, write in the input before submit."); + + } else { + + let repositoriesList = document.getElementById("repositoriesList"); + let items = repositoriesList.getElementsByTagName("li"); + + let id = document.getElementById('insideModal'); //Remove Old Elements before insert new's elements. + id.innerHTML = ''; + + Object.keys(items).forEach(function(element){ + + if(items[element].innerText.includes(toSeek)) { + + this.handleSeek(items[element].innerText); + } + }) + + this.showModal(); + } +} + +function handleSeek(data) { + + let newElement = document.createElement('p'); + newElement.textContent = data; + newElement.classList.add("colorTextGreen"); + + let id = document.getElementById('insideModal'); + + id.appendChild(newElement); +} + +function showModal() { + let existUnseen = document.getElementById("openModal").classList.contains("unseen"); + + if (existUnseen) { + document.getElementById("openModal").classList.remove("unseen"); + } + + document.getElementById('openModal').classList.toggle("visible"); +} + +function CloseModal() { + document.getElementById('openModal').classList.toggle("visible"); + document.getElementById('openModal').classList.toggle("unseen"); +} + +function matrixDraw(matrix, within) { + + let table = document.createElement('table'); + + for(let row of matrix) { + + let tr = document.createElement('tr'); + table.appendChild(tr); + + for(let col of row) { + + let td = document.createElement('td'); + let textTd = document.createTextNode(col); + td.appendChild(textTd); + + tr.appendChild(td); + } + } + this.insertAfter(table, within); +} + +function drawSampleMatrix(within) { + + let matrixSample = []; + let col_1 = ['1', '2', '3']; + let col_2 = ['1', '2', '3']; + let col_3 = ['1', '2', '3']; + + matrixSample[0]=col_1; + matrixSample[1]=col_2; + matrixSample[2]=col_3; + + this.matrixDraw(matrixSample, within); +}