globant-ui · RodrigoAlejandroBelsito · May 2, 2019 · May 8, 2019 · aganduglia · May 9, 2019
diff --git a/TOPIC 0/1 i - Expenses/expenses.css b/TOPIC 0/1 i - Expenses/expenses.css
@@ -0,0 +1,7 @@
+table {
+    border: 1px solid black;
+}
+
+th {
+    height: 50px;
+}
diff --git a/TOPIC 0/1 i - Expenses/expenses.html b/TOPIC 0/1 i - Expenses/expenses.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html class="no-js" lang="es">
+
+<head>
+    <meta charset="utf-8">
+    <title>Bootcamp - Expenses</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="expenses.css">
+
+    <meta name="theme-color" content="#fafafa">
+</head>
+
+<body>
+    <table>
+        <tr>
+            <th>Expense</th>
+            <th>Cost</th>
+        </tr>
+        <tr>
+            <td>Apples</td>
+            <td>20</td>
+        </tr>
+        <tr>
+            <td>Bananas</td>
+            <td>30</td>
+        </tr>
+    </table>
+</body>
+
+</html>
diff --git a/TOPIC 0/1 ii -Todo List/todolist.html b/TOPIC 0/1 ii -Todo List/todolist.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html class="no-js" lang="es">
+
+<head>
+    <meta charset="utf-8">
+    <title>Bootcamp - Todo List</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="">
+
+    <meta name="theme-color" content="#fafafa">
+</head>
+
+<body>
+    <header>My todo list</header>
+    <ul>
+        <li>Breakfast</li>
+        <li>Do some exercise</li>
+        <li>Do some code</li>
+        <li>Work</li>
+    </ul>
+</body>
+
+</html>
diff --git a/TOPIC 0/1 iii - Media/audio.mp3 b/TOPIC 0/1 iii - Media/audio.mp3
diff --git a/TOPIC 0/1 iii - Media/foto.jpg b/TOPIC 0/1 iii - Media/foto.jpg
diff --git a/TOPIC 0/1 iii - Media/media.css b/TOPIC 0/1 iii - Media/media.css
@@ -0,0 +1,7 @@
+img {
+    width: 30%;
+}
+
+video {
+    width: 30%;
+}
diff --git a/TOPIC 0/1 iii - Media/media.html b/TOPIC 0/1 iii - Media/media.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html class="no-js" lang="es">
+
+<head>
+    <meta charset="utf-8">
+    <title>Bootcamp - Media</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="media.css">
+
+    <meta name="theme-color" content="#fafafa">
+</head>
+
+<body>
+    <div>Image</div>
+    <img src="foto.jpg" alt="Italian Trulli">
+
+    <div>Video</div>
+    <video width="320" height="240" controls>
+        <source src="video.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <div>Audio</div>
+    <audio controls>
+        <source src="audio.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+    </audio>
+</body>
+
+</html>
diff --git a/TOPIC 0/1 iii - Media/video.mp4 b/TOPIC 0/1 iii - Media/video.mp4
diff --git a/TOPIC 0/1 iv -Form/form.css b/TOPIC 0/1 iv -Form/form.css
@@ -0,0 +1,4 @@
+input[type=text] {
+    background-color: #3CBC8D;
+    color: white;
+}
diff --git a/TOPIC 0/1 iv -Form/form.html b/TOPIC 0/1 iv -Form/form.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html class="no-js" lang="es">
+
+<head>
+    <meta charset="utf-8">
+    <title>Bootcamp - Form</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="form.css">
+
+    <meta name="theme-color" content="#fafafa">
+</head>
+
+<body>
+    <form action="/action_page.php" method="get">
+        <label>First name: <input type="text" name="fname"></label></br>
+        <label>Last name: <input type="text" name="lname"> </label></br>
+        <label>Email: <input type="text" name="fname"> </label></br>
+        <label>Birthday: <input type="text" name="lname"> </label></br>
+        <label>Favourite Sport: <input type="text" name="fname"></label></br>
+        <select>
+            <option value="Football">Football</option>
+            <option value="Basketball">Basketball</option>
+            <option value="Tenis">Tenis</option>
+            <option value="ArmWrestling">ArmWrestling</option>
+        </select> </br>
+        <label></label>BIO: <input type="text" name="lname"></label>
+        <input type="submit" value="Submit"><input type="reset">
+    </form>
+</body>
+
+</html>
diff --git a/TOPIC 0/2 - CSS/index.css b/TOPIC 0/2 - CSS/index.css
@@ -0,0 +1,39 @@
+html {
+    font-size: 14px;
+    font-family: Arial, Helvetica, sans-serif
+}
+
+header {
+    text-align: center;
+}
+
+footer {
+    text-align: center;
+}
+
+aside {}
+
+nav {}
+
+.header {
+    font-size: 46px;
+    background-color: #FF00FF;
+}
+
+.footer {
+    font-size: 10px;
+    background-color: #FF00FF;
+}
+
+.section {
+    font-size: 14px;
+}
+
+.nav {
+    font-size: 12px;
+    background-color: #0000FF;
+}
+
+.aside {
+    font-size: 10px;
+}
diff --git a/TOPIC 0/2 - CSS/index.html b/TOPIC 0/2 - CSS/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html class="no-js" lang="es">
+
+<head>
+    <meta charset="utf-8">
+    <title>Bootcamp - Form</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="normalize.css">
+    <link rel="stylesheet" href="index.css">
+
+    <meta name="theme-color" content="#fafafa">
+</head>
+
+<body>
+    <header class="header">HEADER</header>
+    <nav class="nav">NAV</nav>
+    <section class="section">
+        <header class="header">SECTION HEADER</header>
+        <article>SECTION ARTICLE</article>
+        <footer class="footer">SECTION FOOTER</footer>
+    </section>
+    <aside>ASIDE</aside>
+    <footer>FOOTER</footer>
+</body>
+
+</html>
diff --git a/TOPIC 1/1/css/style.css b/TOPIC 1/1/css/style.css
@@ -0,0 +1,28 @@
+p {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 15px;
+}
+
+p.oculto {
+    visibility: hidden;
+}
+
+p.visible {
+    visibility: visible;
+}
+
+#pa {
+    display: none;
+}
+
+div {
+    text-align: center;
+}
+
+section {
+    text-align: center;
+}
+
+nav {
+    text-align: center;
+}
diff --git a/TOPIC 1/1/index.html b/TOPIC 1/1/index.html
@@ -0,0 +1,70 @@
+<!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">Paragraph</p>
+        </br>
+        <input type="button" value="Make Paragraph Visible" id="bt1">
+        </br>
+        <footer>
+        </footer>
+    </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/TOPIC 1/1/js/script.js b/TOPIC 1/1/js/script.js
@@ -0,0 +1,28 @@
+/* window.onload = function() {
+    document.getElementById('pa').className = "visible";
+}; */
+
+var pr1 = document.getElementById("p1");
+var bT1 = document.getElementById("bt1");
+
+const Http = new XMLHttpRequest();
+const url = 'http://api.icndb.com/jokes/random';
+Http.open("GET", url);
+Http.send();
+
+Http.onreadystatechange = (e) => {
+    console.log(Http.responseText)
+}
+
+function makeItVisible() {
+    pr1.className = "visible";
+}
+
+function alertMessage() {
+    alert("Alert Message");
+}
+
+window.onload = makeItVisible();
+bT1.addEventListener("click", () => alertMessage());
+
+/* btV.addEventListener("click", () => makeItVisible()); */