globant-ui · RodrigoAlejandroBelsito · May 2, 2019 · May 9, 2019
diff --git a/01-JS-DOM-APIs/Exercise6/css/style.css b/01-JS-DOM-APIs/Exercise6/css/style.css
@@ -0,0 +1,45 @@
+p {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 15px;
+}
+
+p.oculto {
+ visibility: hidden;
+}
+
+p.visible {
+ visibility: visible;
+}
+
+ul.lista {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ display: flexbox;
+ float: right;
+}
+
+#pa {
+ display: none;
+}
+
+#p1 {
+ font-family: 'Droid serif', serif;
+ font-size: 21px;
+ font-weight: 400;
+ text-align: center;
+ padding-top: 15px;
+ margin: auto;
+ width: 100%;
+}
+
+div {
+ text-align: center;
+}
+
+section {
+ text-align: center;
+}
+
+nav {
+ text-align: center;
+}
diff --git a/01-JS-DOM-APIs/Exercise6/index.html b/01-JS-DOM-APIs/Exercise6/index.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html class="no-js" lang="es">
+
+<head>
+ <meta charset="utf-8">
+ <title>Bootcamp - Topic 1</title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="css/style.css">
+ <meta name="theme-color" content="#fafafa">
+</head>
+
+<body>
+ <div>
+ <p id="p1" class="oculto">(UN)Hidden Paragraph</p>
+ </br>
+ <!-- <input type="button" value="Make Paragraph Visible" id="bt1"> -->
+ <input type="button" value="Fetch Data" id="bt1">
+ </br>
+ <input id="searchValue" type="text" placeholder="Search...">
+ </br>
+ <button id="btnAPI">Hit the API</button>
+ </br>
+ <ul class="lista" id="listaAPI"></ul>
+ <table id="table">
+ </table>
+ </div>
+ <div>
+ <input type="button" value="Create Table from JSON" id="btTable">
+ </div>
+ <script type="text/javascript" src="js/script.js"></script>
+</body>
+
+</html>
+
+<!-- /*
+
+Creating our index page with some sections.
+Create a file called index.html with the correct doctype and some random content.
+Add a stylesheet to the HTML file and use it to center the texts of all section elements.
+Add a hidden section with Hello World inside of it.
+When the page finished loading the section must fade in.
+Adding some events
+Add a button below the section to your index page.
+Create a function that showcases an alert message when called.
+Attach a click event to the created button which calls the function previously created.
+
+Data fetching
+
+Create a function to get the response from http://api.icndb.com/jokes/random.
+
+Replace the button's click event with this new function.
+
+Write the response inside the section element.
+
+Create a reusable function to perform AJAX calls. This function must accept a config object and return an ES6 Promise.
+
+If a server error occurs section content must turn red.
+
+Hint: Use the XMLHttpRequest to fetch data from the service.
+
+Data fetching with parameters:
+Create a function to get the response from https://api.github.com/search/repositories with parameters q = 'JavaScript'.
+
+Showcase a list of repositories, provided by the service, in the right side of the screen.
+Hint: ul must be used to list the repositories.
+
+Add an input with type="text" to perform a search for any value.
+
+W3C
+
+Validate your page using W3C validator: https://addons.mozilla.org/en-US/firefox/addon/web-developer/
+DOM manipulation
+
+Write a function that takes as input a matrix of data and outputs a DOM structure representing a table. Attach it to the body of a given page.
+
+Hint: use document.createElement, document.createTextNode, and Node.appendChild methods.
+
+*/ -->
diff --git a/01-JS-DOM-APIs/Exercise6/js/script.js b/01-JS-DOM-APIs/Exercise6/js/script.js
@@ -0,0 +1,74 @@
+/* window.onload = function() {
+ document.getElementById('pa').className = "visible";
+}; */
+
+const pr1 = document.getElementById("p1");
+var bT1 = document.getElementById("bt1");
+var bt2 = document.getElementById("btnAPI");
+var btTable = document.getElementById("btTable");
+const table = document.getElementById('table');
+
+const getJSON = (url) => {
+ let req = new XMLHttpRequest();
+ req.open('GET', url, false);
+ req.send(null);
+ if (req.status == 200) {
+ let res = JSON.parse(req.responseText);
+ return (res)
+ }
+}
+
+const printMatrix = (matrix) => {
+ matrix.forEach((rowData) => {
+ const row = document.createElement('tr');
+ rowData.forEach((columnItem) => {
+ const column = document.createTextNode(columnItem);
+ row.appendChild(column);
+ });
+ table.appendChild(row);
+ });
+}
+
+bT1.addEventListener("click", function() {
+ const joke = getJSON('http://api.icndb.com/jokes/random').value.joke;
+ pr1.innerHTML = joke;
+});
+
+bt2.addEventListener("click", function() {
+ const url = "https://api.github.com/search/repositories?q=";
+ const value = document.getElementById("searchValue").value;
+ if (value.length === 0) {
+ return;
+ }
+ const data = getJSON(`${url}${value}`);
+ const doc = data.items.map((item) => item.full_name);
+ doc.forEach((docItem) => {
+ document.getElementById("listaAPI").innerHTML += `<li> ${docItem} </li>`
+ });
+});
+
+btTable.addEventListener("click", function() {
+ const matrix = [
+ [0, 1],
+ [2, 3]
+ ];
+ printMatrix(matrix);
+});
+
+document.getElementById("bt1").onclick = function() {
+
+};
+
+function makeItVisible() {
+ pr1.className = "visible";
+}
+
+function alertMessage() {
+ alert("Alert Message");
+}
+
+
+window.onload = makeItVisible();
+//bT1.addEventListener("click", () => alertMessage());
+
+/* btV.addEventListener("click", () => makeItVisible()); */
diff --git a/topic-0/css/main.css b/topic-0/css/main.css