v1
7/3/2022 by tolgahan -00
Setup HTML
<div class="pure-u-1 pure-u-sm-3-5">
<h2 class="separatorbar">All Episodes</h2>
<a class="episodecell" href="/+R7DU820ug">
<img class="art" src="https://example.com/1174581" />
<div class="cellcontent">
<div class="titlestack">
<div class="title singleline">
489: Very Inappropriate Thoughts About This Computer
</div>
<div class="caption2 singleline">Jun 30 • 114 min</div>
</div>
</div>
</a>
<a class="episodecell" href="/+QCwmMHIhs">
<img class="art" src="https://example.com/1051401" />
<div class="cellcontent">
<div class="titlestack">
<div class="title singleline">
Priest and Joe Illidge on crafting new villain Entropy without any rules
</div>
<div class="caption2 singleline">Jun 26 • 87 min left</div>
</div>
</div>
</a>
<a class="episodecell" href="/+QwxKgVw_o">
<img class="art" src="https://example.com/1098514" />
<div class="cellcontent">
<div class="titlestack">
<div class="title singleline">Ep. 647: Best Sci Fi Beach Reading</div>
<div class="caption2 singleline">Jun 27 • 27 min</div>
</div>
</div>
</a>
<a class="episodecell" href="/+HdT7S_15E">
<img class="art" src="https://example.com/488766" />
<div class="cellcontent">
<div class="titlestack">
<div class="title singleline">Filosofía de coyote</div>
<div class="caption2 singleline">Jun 29 • 25 min</div>
</div>
</div>
</a>
</div>ready
// get date from element by inner text
const getDate = e => {
return e.parsedDate ?? (e.parsedDate = Date.parse(`${e.querySelector(".caption2").innerText.split(/\s+•\s+/)[0]}, 2000`));
};
// find the a elements
Array.from(document.querySelectorAll("a.episodecell"))
// sort by date
.sort((a, b) => getDate(b) - getDate(a))
// replace node position by reinserting
.reduce((prev, cur) => cur.parentElement.insertBefore(cur, prev));ready
const cont=document.querySelector(".pure-u-1");
[...document.querySelectorAll(".episodecell")]
.map(a=>({a,date:new Date(a.querySelector(".caption2").textContent.split("•")[0]+"1972")}))
.sort((a,b)=>a.date-b.date)
.forEach(a=>cont.append(a.a))ready
[...document.querySelectorAll(".episodecell")].map(a=>({a,date:new Date(a.querySelector(".caption2").textContent.split("•")[0]+"1972")})).sort(({date:a},{date:b})=>b-a).forEach(({a})=>document.querySelector("h2.separatorbar").insertAdjacentElement('afterend',a))