Merge pull request #119 from RamaUB/main

Semana 4, Ejercicios 1 a 4 completos
undefined-academy · Jul 31, 2023 · b625353 · b625353
2 parents 8b7c2f9 + c78d4ba
commit b625353
Show file tree

Hide file tree

Showing 24 changed files with 2,766 additions and 6 deletions.
diff --git a/student-blogs/Ramo-9888/index.html b/student-blogs/Ramo-9888/index.html
@@ -0,0 +1,63 @@
+<!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">
+    <link rel="stylesheet" href="./src/styles/main.scss">
+    <script type="module" src="./main.mjs" defer></script>
+    <title>Blog: Mi avance en el Bootcamp</title>
+</head>
+
+<body>
+    <div class="container">
+        <nav>
+            <ul>
+                <li><a href="#">Semana 1</a></li>
+                <li><a href="#">Semana 2</a></li>
+                <li><a href="#">Semana 3</a></li>
+                <li><a href="#">Semana 4</a></li>
+            </ul>
+            <img class="logo" src="logo.png" alt="logo">
+        </nav>
+        <div>
+            <img src="https://source.unsplash.com/wUbNvDTsOIc" alt="Semana 1">
+            <h1>Semana 1</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque illum unde rerum eos voluptatem ea blanditiis natus voluptatibus pariatur ipsum similique numquam soluta dicta atque saepe id, iste nihil voluptas.
+            </p>
+            <footer>
+                <time class="fecha" datetime="2023-04-01"></time>
+            </footer>
+        </div>
+        <div>
+            <img src="https://source.unsplash.com/_t-l5FFH8VA" alt="Semana 2">
+            <h1>Semana 2</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque illum unde rerum eos voluptatem ea blanditiis natus voluptatibus pariatur ipsum similique numquam soluta dicta atque saepe id, iste nihil voluptas.
+            </p>
+            <footer>
+                <time class="fecha" datetime="2023-05-05"></time>
+            </footer>
+        </div>
+        <div>
+            <img src="https://source.unsplash.com/k-rKfqSm4L4" alt="Semana 3">
+            <h1>Semana 3</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque illum unde rerum eos voluptatem ea blanditiis natus voluptatibus pariatur ipsum similique numquam soluta dicta atque saepe id, iste nihil voluptas.
+            </p>
+            <footer>
+                <time class="fecha" datetime="2023-06-20"></time>
+            </footer>
+        </div>
+        <div>
+            <img src="https://source.unsplash.com/ipARHaxETRk" alt="Semana 4">
+            <h1>Semana 4</h1>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque illum unde rerum eos voluptatem ea blanditiis natus voluptatibus pariatur ipsum similique numquam soluta dicta atque saepe id, iste nihil voluptas.
+            </p>
+            <footer>
+                <time class="fecha" datetime="2023-06-23"></time>
+            </footer>
+        </div>
+    </div>
+
+
+</body>
+</html>
diff --git a/student-blogs/Ramo-9888/logo.png b/student-blogs/Ramo-9888/logo.png
diff --git a/student-blogs/Ramo-9888/main.mjs b/student-blogs/Ramo-9888/main.mjs
@@ -0,0 +1,41 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime.js"
+await import("dayjs/locale/es-us.js")
+import utc from "dayjs/plugin/utc.js"
+dayjs.extend(utc)
+dayjs.extend(relativeTime)
+dayjs.locale("es-us")
+
+//***humaniza***//
+
+
+//console.log(dayjs("2023-05-06"))
+
+
+function humanize(date){
+  const wrappedDate = dayjs(date)
+  const daysDiff = Math.abs(wrappedDate.diff(Date.now(), "days"))
+
+  const isCurrentYear = wrappedDate.year() === new Date().getFullYear()
+    if(!isCurrentYear){
+        return wrappedDate.format('MMMM DD, YYYY')
+    } else if (daysDiff <= 30) {
+        return wrappedDate.fromNow()
+    } else {
+        return wrappedDate.format('MMMM DD')
+    }
+}
+
+function humanizeDate($date) {
+    const datetime = $date.getAttribute("datetime");
+    const humanizedDate = humanize(datetime);
+    $date.textContent = capitalize(humanizedDate);
+  }
+
+  function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1)
+  }
+
+
+  const $dates = document.querySelectorAll("time");
+$dates.forEach(humanizeDate)