Public
Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
export const variablePower = (request, response) => {
const stylesheet = `
<style>
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
ul > li {
flex-basis: 200px;
}
ul li img {
object-fit: cover;
max-width: 100%;
height: auto;
vertical-align: middle;
border-radius: 5px;
}
</style>
`;
fetchJSON("https://api.magicthegathering.io/v1/cards?power=*")
.then(({ cards }) => {
const names = new Set();
const isNewCard = ({ name }) => names.size + 1 == names.add(name).size;
const sortByName = (a, b) => (a.name < b.name ? -1 : 1);
const renderCard = ({ name, imageUrl, set, number }) =>
`<li><a href="https://scryfall.com/card/${set.toLowerCase()}/${number}">${name} <img src=${imageUrl} /></a>`;
const cardlist = cards.sort(sortByName).filter(isNewCard).map(renderCard);
const ul = (children) => `<ul>${children.join("\n")}</ul>`;
const html = (children) =>
[`<!doctype html>`, stylesheet, ul(cardlist)].join("\n");
response.set("Content-Type", "text/html");
response.send(html);
});
};
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
October 23, 2023