Skip to content

Instantly share code, notes, and snippets.

@jimniels
Created April 22, 2022 21:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jimniels/74c483f0a6fc3fb0fcddd72847c799b2 to your computer and use it in GitHub Desktop.
Save jimniels/74c483f0a6fc3fb0fcddd72847c799b2 to your computer and use it in GitHub Desktop.
Random Snippets
<!DOCTYPE html>
<title>Ephemeralist</title>
<style>
body {
max-width: 800px;
font-family: sans-serif;
}
img {
max-width: 100%;
height: auto;
}
</style>
<h1>Ephemeralist</h1>
<form action="./ephemeralist.html">
<input type="text" name="q" placeholder="search..." />
<button type="submit">Go</button>
</form>
<output></output>
<script type="module">
const render = (html) => {
document.querySelector("output").innerHTML = html;
};
const params = new URLSearchParams(window.location.search);
const q = params.get("q");
if (q) {
document.querySelector("input").value = q;
// http://edan.si.edu/openaccess/apidocs/#api-_footer
fetch(
`https://api.si.edu/openaccess/api/v1.0/category/science_technology/search?q=${encodeURIComponent(
q
)}&api_key=NJBkMwgTSqtCYC8gn9ZojCeXCJWMqS8a8WHaqnai`
)
.then((res) => res.json())
.then((json) => {
const data = json.response.rows;
render(`
<h2>${data.length} results</h2>
${data
.map((item) => {
try {
const title = item.title;
const src =
item.content.descriptiveNonRepeating.online_media.media[0]
.thumbnail;
const content = item.content.freetext.notes[0].content;
return {
title,
src,
content,
};
} catch (e) {
return undefined;
}
})
.filter((item) => item)
.map(
({ content, title, src }) => `
<div>
<h3>${title}</h3>
<img src="${src}" />
${content ? `<p>${content}</p>` : ""}
</div>
<hr />
`
)
.join("")}
`);
})
.catch((e) => {
console.error(e);
render(`<h2>Error retrieving and publishing results</h2>`);
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment