Add new project and hide it

midudev · Jun 14, 2024 · 441c226 · 441c226
1 parent b2f2304
commit 441c226
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 3 deletions.
diff --git a/XX-api-geo-ip/index.html b/XX-api-geo-ip/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>IP Geolocation</title>
+ <link rel="stylesheet" href="style.css" />
+ <script type="module">
+ const OPTIONS = {
+ method: 'GET',
+ headers: {
+ 'X-RapidAPI-Key': '71e59e906dmshfdc9ed284df2469p1b599cjsn0355f0f200d5',
+ 'X-RapidAPI-Host': 'ip-geolocation-and-threat-detection.p.rapidapi.com'
+ }
+ }
+
+ const fetchIpInfo = ip => {
+ return fetch(`https://freeipapi.com/api/json/${ip}`, OPTIONS)
+ .then(res => res.json())
+ .catch(err => console.error(err))
+ }
+
+ const $ = selector => document.querySelector(selector)
+
+ const $form = $('#form')
+ const $input = $('#input')
+ const $submit = $('#submit')
+ const $results = $('#results')
+
+ $form.addEventListener('submit', async (event) => {
+ event.preventDefault()
+ const {value} = $input
+ if (!value) return
+
+ $submit.setAttribute('disabled', '')
+ $submit.setAttribute('aria-busy', 'true')
+
+ const ipInfo = await fetchIpInfo(value)
+
+ if (ipInfo) {
+ $results.innerHTML = JSON.stringify(ipInfo, null, 2)
+ }
+
+ $submit.removeAttribute('disabled')
+ $submit.removeAttribute('aria-busy')
+
+ })
+ </script>
+</head>
+
+<body>
+ <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+
+ <main class="container">
+ <form id="form">
+ <label>
+ IP del usuario
+ <input required id="input" type="text" placeholder="Introduce aquí la IP">
+ <small>Por ejemplo: 54.85.132.205</small>
+ </label>
+
+ <button type="submit" id="submit">
+ Buscar información de esta IP
+ </button>
+
+ </form>
+
+ <div>
+ <pre id="results"></pre>
+ </div>
+ </main>
+
+</body>
+
+</html>
diff --git a/web/src/components/Projects.astro b/web/src/components/Projects.astro
@@ -1,13 +1,15 @@
 ---
 import { PROJECTS } from "../consts"
+
+const finalProjects = PROJECTS.filter((project) => !project.hidden).toReversed()
 ---
 
 <div
  class="grid gap-8 mb-6 lg:mb-16 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto"
 >
  {
- PROJECTS.toReversed().map((project, reversedIndex) => { 
- const index = PROJECTS.length - reversedIndex - 1
+ finalProjects.map((project, reversedIndex) => { 
+ const index = finalProjects.length - reversedIndex - 1
  const num = `${index + 1}`.padStart(2, "0")
 
  return (

diff --git a/web/src/consts.js b/web/src/consts.js
@@ -53,5 +53,20 @@ export const PROJECTS = [
  isDark: false
  },
  youtube: "https://www.youtube.com/watch?v=HvoiF1MCPGs"
- }
+ },
+ {
+ slug: "XX-api-geo-ip",
+ hidden: true,
+ title: "Buscar info de IP",
+ description: "Llama a una API para obtener información de IP",
+ learnings: [
+ "Fetch API",
+ "Formularios",
+ "Asincronía"
+ ],
+ theme: {
+ isDark: false
+ },
+ youtube: "https://www.youtube.com/watch?v=6AMKwVcpYTk"
+ },
 ]