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..de46e5008
--- /dev/null
+++ b/01-JS-DOM-APIs/public/css/style.css
@@ -0,0 +1,109 @@
+html {
+ font-family: Sans-serif;
+}
+
+h1 {
+ font-size: 50px;
+ margin: 20px;
+}
+
+h2 {
+ font-size: 20px;
+ margin-top: 1%;
+ margin-bottom: 5%;
+ font-weight: bold;
+}
+
+header {
+ text-align: center;
+}
+
+#joke {
+ margin: 10px;
+}
+
+section.section {
+ float: left;
+ width: 800px;
+ margin-left: 230px;
+}
+
+button.button {
+ display: block;
+ font-size: 20px;
+ margin-top: 1%;
+ width: 150px;
+ height: 50px;
+ border-color: grey;
+ background: lightgreen;
+ margin-top: 20px;
+}
+
+button.button:hover {
+ border-color: green;
+ color: green;
+}
+
+button.button:active {
+ border-color: lightgreen;
+ color: white;
+ background: lightgreen;
+}
+
+header#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;
+}
+
+.sidebar {
+ visibility: hidden;
+ width: 265px;
+ height: auto;
+ margin: 1%;
+ padding: 1%;
+ float: right;
+ background: lightgreen;
+ box-shadow: 5px 5px #888888;
+}
+
+li {
+ margin-top: 2px;
+}
+
+input {
+ display: block;
+ margin: 0 auto;
+
+ margin-bottom: 10px;
+ width: 100%;
+ height: 30px;
+ 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/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..ec385dc94
--- /dev/null
+++ b/01-JS-DOM-APIs/public/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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..82eea876a
--- /dev/null
+++ b/01-JS-DOM-APIs/public/script.js
@@ -0,0 +1,149 @@
+function showSection() {
+ document.getElementById("hide").style.visibility = "visible";
+ document.getElementById("hide").style.opacity = "1";
+}
+
+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 && xhttp.status == 200) {
+ resolve(xhttp);
+ } else {
+ reject();
+ }
+ }
+
+ xhttp.onerror = function() {
+ show_error();
+ }
+
+ xhttp.send();
+ });
+
+ return get_async_response;
+}
+
+function show_error() {
+ document.getElementById("title").style.color = "red";
+}
+
+// EXCERCISE 4
+
+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();
+ 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("No repositories found");
+ li.appendChild(text);
+ document.getElementById("displaylist").appendChild(li);
+ }
+}
+
+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