globant-ui · giselalanciani · Nov 16, 2022 · Nov 17, 2022 · Nov 17, 2022 · Nov 17, 2022
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 **/node_modules
+.DS_Store
diff --git a/src/week1/day0/.empty → src/week1/day0-1/.empty b/src/week1/day0/.empty → src/week1/day0-1/.empty
diff --git a/src/week1/day0-1/expenses.html b/src/week1/day0-1/expenses.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Expenses</title>
+  </head>
+  <body>
+    <header>
+      <h1>Expenses</h1>
+    </header>
+    <table>
+      <thead>
+        <tr>
+          <th>Nombre</th>
+          <th>Empresa</th>
+          <th>Monto a pagar</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Luz</td>
+          <td>Edea</td>
+          <td>5000</td>
+        </tr>
+        <tr>
+          <td>Gas</td>
+          <td>Gas Pampeana</td>
+          <td>8000</td>
+        </tr>
+        <tr>
+          <td>Celular</td>
+          <td>Personal</td>
+          <td>1000</td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
diff --git a/src/week1/day0-1/lion-3576045_960_720.jpg b/src/week1/day0-1/lion-3576045_960_720.jpg
diff --git a/src/week1/day0-1/multimedia.html b/src/week1/day0-1/multimedia.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Multimedia</title>
+  </head>
+  <body>
+    <header>
+      <h1>Multimedia</h1>
+    </header>
+    <audio
+      autoplay
+      controls
+      src="https://file-examples.com/storage/fe7589721d63762859d6962/2017/11/file_example_MP3_700KB.mp3"
+    ></audio>
+    <video
+      controls
+      height="100%"
+      src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
+    ></video>
+    <img src="https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045_960_720.jpg" alt="Lion" width="460" height="345">
+  </body>
+</html>
diff --git a/src/week1/day0-1/sign-up.html b/src/week1/day0-1/sign-up.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sign up</title>
+  </head>
+
+  <body>
+    <header>
+      <h1>Sign up</h1>
+    </header>
+    <main>
+      <form autocomplete="off">
+        <div>
+          <label for="first-name">First name</label>
+          <input required type="text" id="first-name" />
+        </div>
+
+        <div>
+          <label for="last-name">Last name</label>
+          <input required type="text" id="last-name" />
+        </div>
+        <div>
+          <label for="email">Email</label>
+          <input required type="email" id="email" />
+        </div>
+        <div>
+          <label for="birthday">Birthday</label>
+          <input required type="date" id="birthday" max="2022-11-17" />
+        </div>
+        <div>
+          <label for="favourite-sport">Favourite sport</label>
+          <select required id="favourite-sport">
+            <option value="">seleccione..</option>
+            <option value="hockey">Hockey</option>
+            <option value="futbol">Futbol</option>
+          </select>
+        </div>
+
+        <textarea
+          required
+          maxlength="256"
+          name="Bio"
+          cols="30"
+          rows="10"
+        ></textarea>
+
+        <button id="submit-button" type="submit">Submit</button>
+        <button id="clear-button" type="button">Clear</button>
+      </form>
+    </main>
+  </body>
+</html>
diff --git a/src/week1/day0-1/todo-list.html b/src/week1/day0-1/todo-list.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My todo list</title>
+  </head>
+  <body>
+    <header>
+      <h1>My todo list</h1>
+    </header>
+    <main>
+      <ul>
+        <li>Study</li>
+        <li><a>Pick up Felipe</a></li>
+        <li><a>Grosery store</a></li>
+        <li><a>Make dinner</a></li>
+      </ul>
+    </main>
+  </body>
+</html>
diff --git a/src/week1/days2-5/FizzBuzzExercise.js b/src/week1/days2-5/FizzBuzzExercise.js
@@ -0,0 +1,10 @@
+for (let i = 1; i <= 100; i++) {
+  result = "";
+  if (i % 3 === 0) {
+    result = "fizz";
+  }
+  if (i % 5 === 0) {
+    result = "buzz";
+  }
+  console.log(result || i);
+}
diff --git a/src/week1/days2-5/aList.js b/src/week1/days2-5/aList.js
@@ -0,0 +1,43 @@
+function arrayToList(array) {
+    let list = null;
+    for (let i = array.length - 1; i >= 0; i--) {
+      list = {value: array[i], rest: list};
+    }
+    return list;
+  }
+
+  function listToArray(list) {
+    let array = [];
+    for (let node = list; node; node = node.rest) {
+      array.push(node.value);
+    }
+    return array;
+  }
+
+  function prepend(value, list) {
+    return {value, rest: list};
+  }
+
+  function nth(list, n) {
+    if (!list) return undefined;
+    else if (n == 0) return list.value;
+    else return nth(list.rest, n - 1);
+  }
+
+  console.log(arrayToList([10, 20]));
+  // → {value: 10, rest: {value: 20, rest: null}}
+  console.log(listToArray(arrayToList([10, 20, 30])));
+  // → [10, 20, 30]
+  console.log(prepend(10, prepend(20, null)));
+  // → {value: 10, rest: {value: 20, rest: null}}
+  console.log(nth(arrayToList([10, 20, 30]), 1));
+  // → 20
+
+  console.log(arrayToList([10, 20]));
+  // → {value: 10, rest: {value: 20, rest: null}}
+  console.log(listToArray(arrayToList([10, 20, 30])));
+  // → [10, 20, 30]
+  console.log(prepend(10, prepend(20, null)));
+  // → {value: 10, rest: {value: 20, rest: null}}
+  console.log(nth(arrayToList([10, 20, 30]), 1));
+  // → 20
diff --git a/src/week1/days2-5/beanCounting.js b/src/week1/days2-5/beanCounting.js
@@ -0,0 +1,17 @@
+function countChar(string, ch) {
+    let counted = 0;
+    for (let i = 0; i < string.length; i++) {
+      if (string[i] == ch) {
+        counted += 1;
+      }
+    }
+    return counted;
+  }
+
+  function countBs(string) {
+    return countChar(string, "B");
+  }
+  console.log(countBs("BBC"));
+  // → 2
+  console.log(countChar("kakkerlak", "k"));
+  // → 4
diff --git a/src/week1/days2-5/chessboard.js b/src/week1/days2-5/chessboard.js
@@ -0,0 +1,10 @@
+chessboard = (num) => {
+  let output = "";
+  for (i = 1; i <= num; i++) {
+    for (j = 1; j <= num; j++) {
+      (i + j) % 2 == 0 ? (output += "") : (output += "#");
+    }
+    output += "\n";
+  }
+  console.log(output);
+};
diff --git a/src/week1/days2-5/deepComparison.js b/src/week1/days2-5/deepComparison.js
@@ -0,0 +1,24 @@
+function deepEqual(a, b) {
+    if (a === b) return true;
+
+    if (a == null || typeof a != "object" ||
+        b == null || typeof b != "object") return false;
+
+    let keysA = Object.keys(a), keysB = Object.keys(b);
+
+    if (keysA.length != keysB.length) return false;
+
+    for (let key of keysA) {
+      if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false;
+    }
+
+    return true;
+  }
+
+  let obj = {here: {is: "an"}, object: 2};
+  console.log(deepEqual(obj, obj));
+  // → true
+  console.log(deepEqual(obj, {here: 1, object: 2}));
+  // → false
+  console.log(deepEqual(obj, {here: {is: "an"}, object: 2}));
+  // → true
diff --git a/src/week1/days2-5/index.html b/src/week1/days2-5/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <title>layout page test</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <meta property="og:title" content="" />
+    <meta property="og:type" content="" />
+    <meta property="og:url" content="" />
+    <meta property="og:image" content="" />
+
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="icon.png" />
+
+    <link rel="stylesheet" href="normalize.css" />
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="mobile.css"
+      media="screen and (max-width: 640px)"
+    />
+
+    <link
+      rel="stylesheet"
+      href="tablet.css"
+      media="screen and (min-width: 640px) and (max-width: 1280px)"
+    />
+
+    <link
+      rel="stylesheet"
+      href="desktop.css"
+      media="screen and (min-width: 1280px)"
+    />
+
+    <!-- <link rel="manifest" href="site.webmanifest" /> -->
+    <meta name="theme-color" content="#fafafa" />
+  </head>
+
+  <body>
+    <!-- Add your site or application content here -->
+
+    <header class="header">
+      <h1>Mi fantastico layout</h1>
+      <button type="menu" id="menu-btn">|||</button>
+    </header>
+
+    <div class="main-column">
+      <nav id="navigation-menu" class="navigation hidden">
+        Main menu
+        <ul>
+          <li><a href="/home">Home</a></li>
+          <li><a href="/profile">Profile</a></li>
+          <li><a href="/settings">Settings</a></li>
+          <li><a href="/sign-out">Sign out</a></li>
+        </ul>
+      </nav>
+
+      <section class="content">
+        <h2>Section title</h2>
+        <article>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at
+            lorem enim. Nulla mattis aliquam est, ut lobortis libero molestie
+            vel. Morbi eu urna quis nisi tincidunt volutpat vel sed arcu. Fusce
+            nibh dolor, malesuada nec luctus ac, lacinia tempus ex. Nullam
+            vestibulum volutpat lorem vel lobortis. Nunc congue mollis erat, nec
+            placerat nibh pulvinar ultrices. Vestibulum nisi lacus, tincidunt ut
+            elit non, eleifend ornare ligula. Fusce dignissim mauris id tellus
+            auctor, ac hendrerit turpis condimentum. Nulla tellus metus, cursus
+            ut finibus sit amet, aliquam ac ante. Proin fermentum felis et risus
+            molestie, feugiat faucibus ligula condimentum. Sed cursus purus
+            vulputate neque faucibus, ac semper velit bibendum. Duis nec mauris
+            laoreet nibh consequat maximus non at sapien. Ut sed pretium quam.
+            Fusce lacinia urna eget orci suscipit, id rhoncus elit pellentesque.
+            Vivamus quis eros in sem suscipit porta. Aliquam sit amet ex
+            pretium, interdum ipsum in, volutpat tortor.
+          </p>
+          <p>
+            Curabitur a augue dictum, consequat elit sit amet, scelerisque nisi.
+            Nullam tellus felis, sollicitudin a purus in, tristique ultricies
+            enim. Quisque sed tortor vel nulla vestibulum tristique sed eu nunc.
+            Phasellus ac magna nisl. Mauris non mi tristique, blandit risus a,
+            tempus velit. Aliquam porttitor posuere elementum. In imperdiet
+            mattis massa, ac egestas quam pretium nec. Suspendisse potenti.
+            Fusce eu dolor ex. Duis vitae elit scelerisque, malesuada mi at,
+            egestas enim. Suspendisse potenti. In pellentesque condimentum
+            euismod. In hac habitasse platea dictumst.
+          </p>
+        </article>
+        <footer>Section footer</footer>
+      </section>
+
+      <aside class="sidebar">
+        Aside panel
+        <ul>
+          <li><a href="/threads">Read this thread</a></li>
+          <li><a href="/stock">View your stock actions</a></li>
+          <li><a href="/timer">Set a timer</a></li>
+          <li><a href="/todo">Check the TODOs</a></li>
+        </ul>
+      </aside>
+    </div>
+
+    <footer class="footer">
+      Seguinos en:
+      <ul>
+        <li><a href="wwww.facebook.com/mysite">Facebook</a></li>
+        <li><a href="wwww.instagram.com/mysite">Instagram</a></li>
+        <li><a href="wwww.twitter.com/mysite">Twitter</a></li>
+        <li><a href="mailto:mysite@gmail.com">Send us an email</a></li>
+      </ul>
+    </footer>
+
+    <!-- <script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script> -->
+    <!-- <script src="js/app.js"></script> -->
+
+    <script>
+      const menuButton = document.querySelector("#menu-btn");
+
+      menuButton.addEventListener("click", (event) => {
+        const navigationMenu = document.querySelector("#navigation-menu");
+
+        if (navigationMenu.classList.contains("hidden")) {
+          navigationMenu.classList.remove("hidden");
+        } else {
+          navigationMenu.classList.add("hidden");
+        }
+      });
+    </script>
+  </body>
+</html>