05-images-gallery-app

YirsisHertz · Apr 2, 2021 · bc0d793 · bc0d793
commit bc0d793
Show file tree

Hide file tree

Showing 412 changed files with 49,448 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}
diff --git a/00-nivelacion/00-nivelacion.zip b/00-nivelacion/00-nivelacion.zip
diff --git a/00-nivelacion/00-nivelacion/index.html b/00-nivelacion/00-nivelacion/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="es">
+  <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>Nivelación</title>
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  </head>
+  <body>
+    <h1>Hola mundo</h1>
+
+    <script src="./js/axios-async.js"></script>
+  </body>
+</html>
diff --git a/00-nivelacion/00-nivelacion/js/arrays.js b/00-nivelacion/00-nivelacion/js/arrays.js
@@ -0,0 +1,10 @@
+const [, usario2, ,] = ["Pepe", "Juan", "Lucia", "Maria"];
+
+document.write(usario2);
+
+// const numeros = [1, 2, 3, 4];
+// document.write("<ul>");
+// numeros.map((numero) => numero + 1);
+// document.write("</ul>");
+// document.write(numeros);
+// document.write(nuevo);
diff --git a/00-nivelacion/00-nivelacion/js/async-await.js b/00-nivelacion/00-nivelacion/js/async-await.js
@@ -0,0 +1,14 @@
+const peticion = async () => {
+  setTimeout(() => {
+    const datos = {
+      id: 3,
+      name: "Clementine Bauch",
+      username: "Samantha",
+      email: "[email protected]",
+    };
+
+    console.log(datos);
+  }, 1000);
+};
+
+peticion().then(console.log);
diff --git a/00-nivelacion/00-nivelacion/js/axios-async.js b/00-nivelacion/00-nivelacion/js/axios-async.js
@@ -0,0 +1,9 @@
+const peticion = async () => {
+  const { data } = await axios.get(
+    "https://jsonplaceholder.typicode.com/users/3"
+  );
+
+  return data;
+};
+
+const data = peticion().then(console.log);
diff --git a/00-nivelacion/00-nivelacion/js/axios.js b/00-nivelacion/00-nivelacion/js/axios.js
@@ -0,0 +1,3 @@
+axios
+  .get("https://jsonplaceholder.typicode.com/users/3")
+  .then(({ data }) => console.log(data.username));
diff --git a/00-nivelacion/00-nivelacion/js/fetch-async.js b/00-nivelacion/00-nivelacion/js/fetch-async.js
@@ -0,0 +1,6 @@
+const peticion = async () => {
+  const response = await fetch("https://jsonplaceholder.typicode.com/users/3");
+  const data = await response.json();
+
+  return data;
+};
diff --git a/00-nivelacion/00-nivelacion/js/fetch.js b/00-nivelacion/00-nivelacion/js/fetch.js
@@ -0,0 +1,5 @@
+fetch("https://jsonplaceholder.typicode.com/users/1")
+  .then((response) => response.json())
+  .then((data) => {
+    console.log(data);
+  });
diff --git a/00-nivelacion/00-nivelacion/js/funciones.js b/00-nivelacion/00-nivelacion/js/funciones.js
@@ -0,0 +1,5 @@
+const sumar = (a, b) => a + b;
+
+const resultado = sumar(5, 3);
+
+document.write(resultado);
diff --git a/00-nivelacion/00-nivelacion/js/interval.js b/00-nivelacion/00-nivelacion/js/interval.js
@@ -0,0 +1,9 @@
+const saludo = () => {
+  document.write("<li>Hola mundo</li>");
+};
+
+document.write("<ol>");
+
+setInterval(saludo, 5000);
+
+document.write("</ol>");
diff --git a/00-nivelacion/00-nivelacion/js/json.js b/00-nivelacion/00-nivelacion/js/json.js
@@ -0,0 +1,8 @@
+const { name, email } = {
+  name: "Yirsis",
+  edad: 20,
+  email: "[email protected]",
+};
+
+document.write("<p>" + name + "</p>");
+document.write("<p>" + email + "</p>");
diff --git a/00-nivelacion/00-nivelacion/js/promesas.js b/00-nivelacion/00-nivelacion/js/promesas.js
@@ -0,0 +1,17 @@
+const sumar = (a, b) => {
+  return new Promise((resolve, reject) => {
+    if (a < 0 || b < 0) {
+      reject("Esto no es valido");
+    } else {
+      resolve(a + b);
+    }
+  });
+};
+
+const result = sumar(3, 5)
+  .then((res) => {
+    document.write(res);
+  })
+  .catch((error) => {
+    document.write(error);
+  });
diff --git a/00-nivelacion/00-nivelacion/js/spreed.js b/00-nivelacion/00-nivelacion/js/spreed.js
@@ -0,0 +1,6 @@
+const frutas = ["manzana", "uva", "melon"];
+const citricos = ["naranja", "limon", "toronja"];
+
+const nuevo = [...frutas, ...citricos];
+
+document.write(nuevo);
diff --git a/00-nivelacion/00-nivelacion/js/template-string.js b/00-nivelacion/00-nivelacion/js/template-string.js
@@ -0,0 +1,6 @@
+const nombre = "Yirsis";
+const edad = new Date().getFullYear() - 2000;
+
+const mensaje = `Bienvenido ${nombre}, tienes la edad de ${edad}`;
+
+document.write(mensaje);
diff --git a/00-nivelacion/00-nivelacion/js/ternario.js b/00-nivelacion/00-nivelacion/js/ternario.js
@@ -0,0 +1,5 @@
+const cuenta = -10;
+
+const mensaje = cuenta < 0 && "Hola";
+
+document.write(mensaje);
diff --git a/00-nivelacion/00-nivelacion/js/timeout.js b/00-nivelacion/00-nivelacion/js/timeout.js
@@ -0,0 +1,12 @@
+const evaluar = () => {
+  const edad = prompt("Cual es tu edad?");
+
+  if (edad < 18) {
+    alert("Menor de edad");
+    return;
+  }
+
+  alert("Mayor de edad");
+};
+
+setTimeout(evaluar, 2000);
diff --git a/00-nivelacion/00-nivelacion/js/variables.js b/00-nivelacion/00-nivelacion/js/variables.js
@@ -0,0 +1,3 @@
+const nombre = "Yirsis";
+
+document.write(nombre);
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa.zip b/01-react-cdn-pwa/01-react-cdn-pwa.zip
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-144-144.png b/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-144-144.png
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-192-192.png b/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-192-192.png
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-48-48.png b/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-48-48.png
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-512-512.png b/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-512-512.png
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-72-72.png b/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-72-72.png
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-96-96.png b/01-react-cdn-pwa/01-react-cdn-pwa/android/android-launchericon-96-96.png
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/components/Contador.js b/01-react-cdn-pwa/01-react-cdn-pwa/components/Contador.js
@@ -0,0 +1,17 @@
+const Contador = () => {
+  const [cuenta, setCuenta] = React.useState(3);
+
+  const aumentar = () => setCuenta(cuenta + 1);
+  const disminuir = () => setCuenta(cuenta - 1);
+
+  return (
+    <>
+      <h1 className={cuenta <= 0 ? "negativo" : "positivo"}>
+        Contador: {cuenta}
+      </h1>
+      <hr />
+      <button onClick={aumentar}>Aumentar</button>
+      <button onClick={disminuir}>Disminuir</button>
+    </>
+  );
+};
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/components/Saludo.js b/01-react-cdn-pwa/01-react-cdn-pwa/components/Saludo.js
@@ -0,0 +1,5 @@
+const Saludo = () => {
+  const [cuenta, setCuenta] = React.useState(10);
+
+  return <h1>Cuenta: {cuenta}</h1>;
+};
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/favicon.png b/01-react-cdn-pwa/01-react-cdn-pwa/favicon.png
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/index.html b/01-react-cdn-pwa/01-react-cdn-pwa/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <!-- Meta tags -->
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- Meta tags PWA -->
+    <meta name="theme-color" content="#333333" />
+
+    <meta name="MobileOptimized" content="width" />
+    <meta name="HandheldFriendly" content="true" />
+
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+
+    <!-- Icons -->
+    <link rel="shortcut icon" href="./favicon.png" type="image/png" />
+
+    <link rel="apple-touch-icon" href="./favicon.png" type="image/png" />
+    <link
+      rel="apple-touch-startup-image"
+      href="./favicon.png"
+      type="image/png"
+    />
+
+    <!-- manifest -->
+    <link rel="manifest" href="./manifest.json" />
+
+    <!-- Title -->
+    <title>React CDN</title>
+    <!-- Scripts -->
+    <script
+      crossorigin
+      src="https://unpkg.com/react@17/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
+    ></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="text/babel" src="./components/Contador.js"></script>
+    <script type="text/babel">
+      ReactDOM.render(<Contador />, document.getElementById("root"));
+    </script>
+
+    <script src="./register.js"></script>
+  </body>
+</html>
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/manifest.json b/01-react-cdn-pwa/01-react-cdn-pwa/manifest.json
@@ -0,0 +1,38 @@
+{
+  "name": "Contador App React",
+  "short_name": "Contador React",
+  "description" : "Contador app hecha con React para el curso de React Desde Cero",
+  "background_color": "#333333",
+  "theme_color": "#333333",
+  "start_url": "./",
+  "scope": "./",
+  "lang": "es-MX",
+  "display": "fullscreen",
+  "orientation": "portrait",
+  "icons": [
+    {
+      "src": "android/android-launchericon-512-512.png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "android/android-launchericon-192-192.png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "android/android-launchericon-144-144.png",
+      "sizes": "144x144"
+    },
+    {
+      "src": "android/android-launchericon-96-96.png",
+      "sizes": "96x96"
+    },
+    {
+      "src": "android/android-launchericon-72-72.png",
+      "sizes": "72x72"
+    },
+    {
+      "src": "android/android-launchericon-48-48.png",
+      "sizes": "48x48"
+    }
+  ]
+}
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/register.js b/01-react-cdn-pwa/01-react-cdn-pwa/register.js
@@ -0,0 +1,3 @@
+if (navigator.serviceWorker) {
+  navigator.serviceWorker.register("./sw.js");
+}
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/style.css b/01-react-cdn-pwa/01-react-cdn-pwa/style.css
@@ -0,0 +1,17 @@
+body {
+  background-color: #333;
+  color: snow;
+  text-align: center;
+}
+
+.positivo {
+  color: lime;
+}
+
+.negativo {
+  color: tomato;
+}
+
+button {
+  margin: 0 3px;
+}
diff --git a/01-react-cdn-pwa/01-react-cdn-pwa/sw.js b/01-react-cdn-pwa/01-react-cdn-pwa/sw.js
@@ -0,0 +1,55 @@
+const CACHE_ELEMENTS = [
+  "./",
+  "https://unpkg.com/react@17/umd/react.production.min.js",
+  "https://unpkg.com/react-dom@17/umd/react-dom.production.min.js",
+  "https://unpkg.com/@babel/standalone/babel.min.js",
+  "./style.css",
+  "./components/Contador.js",
+];
+
+const CACHE_NAME = "v3_cache_contador_react";
+
+self.addEventListener("install", (e) => {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      cache
+        .addAll(CACHE_ELEMENTS)
+        .then(() => {
+          self.skipWaiting();
+        })
+        .catch(console.log);
+    })
+  );
+});
+
+self.addEventListener("activate", (e) => {
+  const cacheWhitelist = [CACHE_NAME];
+
+  e.waitUntil(
+    caches
+      .keys()
+      .then((cacheNames) => {
+        return Promise.all(
+          cacheNames.map((cacheName) => {
+            return (
+              cacheWhitelist.indexOf(cacheName) === -1 &&
+              caches.delete(cacheName)
+            );
+          })
+        );
+      })
+      .then(() => self.clients.claim())
+  );
+});
+
+self.addEventListener("fetch", (e) => {
+  e.respondWith(
+    caches.match(e.request).then((res) => {
+      if (res) {
+        return res;
+      }
+
+      return fetch(e.request);
+    })
+  );
+});
diff --git a/01-react-cdn/01-react-cdn.zip b/01-react-cdn/01-react-cdn.zip
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const nombre = "Yirsis";

		document.write(nombre);