Skip to content

Commit

Permalink
Merge pull request #120 from chapurestrepo/main
Browse files Browse the repository at this point in the history 
PR Semana 4
  • Loading branch information
@cadifilippo
cadifilippo authored Aug 3, 2023
2 parents b625353 + 46347e4 commit 9435c88
Show file tree
Hide file tree
Showing 19 changed files with 2,500 additions and 1 deletion.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,4 @@ Crear una función que dada una fecha nos permita "humanizarla" con las siguient
│ │ ├── base.scss
│ │ └── desktop.scss
│ └── main.mjs // Agregar función para humanizar fechas
```
```
1 change: 1 addition & 0 deletions student-blogs/dfrestrepo-1489/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
259 changes: 259 additions & 0 deletions student-blogs/dfrestrepo-1489/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,259 @@
<!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="styles/main.scss">
<title>Blog</title>
</head>

<body>
<div class="page">

<header>
BLOG
</header>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>Blog</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
<article>
<section class="filter-container">
<h3>filter actions</h3>
<div class="filter-content">
<div class="filter-pill active">
<div class="filter-label">Design</div>
<button class="filter-action"></button>
</div>
<div class="filter-pill">
<div class="filter-label">UX</div>
<button class="filter-action"></button>
</div>
<div class="filter-pill">
<div class="filter-label">UI</div>
<button class="filter-action"></button>
</div>
<div class="filter-pill">
<div class="filter-label">Life style</div>
<button class="filter-action"></button>
</div>
<div class="filter-pill">
<div class="filter-label">Code</div>
<button class="filter-action"></button>
</div>
<div class="filter-pill">
<div class="filter-label">Cooking</div>
<button class="filter-action"></button>
</div>
</div>
</section>

<div class="containercards">
<div class="card">
<div class="card-cover">
<div class="card-image">
<img src="https://placebear.com/600/300" alt="">
</div>
<div class="card-tags">
<div class="filter-pill">
<div class="filter-label">Nature</div>
</div>
</div>
</div>
<div class="card-title">
<h2>
Bear life
</h2>
</div>
<time class="card-date" datetime="21-07-2023"></time>
<div class="card-description">
<p>Delve into the wonderful world of bears and uncover the secrets of their lives in this
exciting post. Join us on a journey through dense forests and majestic mountains as we
explore the daily life of these incredible animals.</p>
</div>
</div>
<div class="card">
<div class="card-cover">
<div class="card-image">
<img src="https://placebear.com/800/500" alt="">
</div>
<div class="card-tags">
<div class="filter-pill">
<div class="filter-label">Nature</div>
</div>
</div>
</div>
<div class="card-title">
<h2>
Bear life
</h2>
</div>
<time class="card-date" datetime="20-06-2023"></time>
<div class="card-description">
<p>Discover how bears interact with their environment, from foraging for food to building their
cozy homes in the depths of nature. Learn about their social behaviors and how they
communicate with each other. Marvel at their strength and agility as they hunt and defend
themselves against dangers.</p>
</div>
</div>
<div class="card">
<div class="card-cover">
<div class="card-image">
<img src="https://placebear.com/900/500" alt="">
</div>
<div class="card-tags">
<div class="filter-pill">
<div class="filter-label">Nature</div>
</div>
</div>
</div>
<div class="card-title">
<h2>
Bear life
</h2>
</div>
<time class="card-date" datetime="01-06-2023"></time>
<div class="card-description">
<p>you will find fascinating facts, beautiful images, and captivating stories about the
different types of bears that inhabit our planet. From the imposing polar bear to the agile
grizzly bear, each species has its own story to tell.</p>
</div>
</div>
<div class="card">
<div class="card-cover">
<div class="card-image">
<img src="https://placebear.com/800/700" alt="">
</div>
<div class="card-tags">
<div class="filter-pill">
<div class="filter-label">Nature</div>
</div>
</div>
</div>
<div class="card-title">
<h2>
Bear life
</h2>
</div>
<time class="card-date" datetime="28-05-2023"></time>
<div class="card-description">
<p>Get ready for an unforgettable adventure and learn more about the life of bears. We guarantee
you will fall in love with these magnificent animals and appreciate the importance of
preserving their natural habitat!</p>
</div>
</div>
<div class="card">
<div class="card-cover">
<div class="card-image">
<img src="https://placebear.com/650/300" alt="">
</div>
<div class="card-tags">
<div class="filter-pill">
<div class="filter-label">Nature</div>
</div>
</div>
</div>
<div class="card-title">
<h2>
Bear life
</h2>
</div>
<time class="card-date" datetime="28-04-2023"></time>
<div class="card-description">
<p>Delve into the wonderful world of bears and uncover the secrets of their lives in this
exciting post. Join us on a journey through dense forests and majestic mountains as we
explore the daily life of these incredible animals.</p>
</div>
</div>
<div class="card">
<div class="card-cover">
<div class="card-image">
<img src="https://placebear.com/900/400" alt="">
</div>
<div class="card-tags">
<div class="filter-pill">
<div class="filter-label">Nature</div>
</div>
</div>
</div>
<div class="card-title">
<h2>
Bear life
</h2>
</div>
<time class="card-date" datetime="28-06-2022"></time>
<div class="card-description">
<p>Discover how bears interact with their environment, from foraging for food to building their
cozy homes in the depths of nature. Learn about their social behaviors and how they
communicate with each other. Marvel at their strength and agility as they hunt and defend
themselves against dangers.</p>
</div>
</div>
<div class="card">
<div class="card-cover">
<div class="card-image">
<img src="https://placebear.com/500/500" alt="">
</div>
<div class="card-tags">
<div class="filter-pill">
<div class="filter-label">Nature</div>
</div>
</div>
</div>
<div class="card-title">
<h2>
Bear life
</h2>
</div>
<time class="card-date" datetime="21-05-2022"></time>
<div class="card-description">
<p>you will find fascinating facts, beautiful images, and captivating stories about the
different types of bears that inhabit our planet. From the imposing polar bear to the agile
grizzly bear, each species has its own story to tell.</p>
</div>
</div>
<div class="card">
<div class="card-cover">
<div class="card-image">
<img src="https://placebear.com/700/500" alt="">
</div>
<div class="card-tags">
<div class="filter-pill">
<div class="filter-label">Nature</div>
</div>
</div>
</div>
<div class="card-title">
<h2>
Bear life
</h2>
</div>
<time class="card-date" datetime="28-06-2021"></time>
<div class="card-description">
<p>Get ready for an unforgettable adventure and learn more about the life of bears. We guarantee
you will fall in love with these magnificent animals and appreciate the importance of
preserving their natural habitat!</p>
</div>
</div>
</div>

</article>

<div class="action-more-post">
<button class="btn action">See more</button>
</div>
<footer>
<address>si quieres saber más sobre mí y algunos de los proyectos que he desarrollado visita <a
href="https://chapurestrepo.com">https://chapurestrepo.com</a></address>
</footer>
</div>
<script type="module" src="./main.mjs"></script>
</body>

</html>
37 changes: 37 additions & 0 deletions student-blogs/dfrestrepo-1489/main.mjs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime.js";
import customParseFormat from "dayjs/plugin/customParseFormat"

await import("dayjs/locale/en-au.js")

dayjs.locale("en-au")
dayjs.extend(relativeTime)
dayjs.extend(customParseFormat)

function toHumanize(date) {
const wrappedDate = dayjs(date, "DD-MM-YYYY")
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")
}
}


const dates = document.querySelectorAll("time")
dates.forEach(function(date) {

const datetime = date.getAttribute("datetime")

console.log("datetime: " + datetime)

const transformDate = toHumanize(datetime);
console.log(transformDate)
date.textContent = transformDate
})
Loading

0 comments on commit 9435c88

Please sign in to comment.