Last active
July 12, 2023 00:28
-
-
Save mkakh/6b4e0079e05b40a17eab211d3a4fef60 to your computer and use it in GitHub Desktop.
The webpage fetches emojis from a misskey instance. The input should be like "misskey.io". It was totally created by Bing AI. I haven’t tested it, but it seems to work correctly. CC0. The sample is placed on mkakh.com/emoji_fetcher.html.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Emoji Fetcher</title> | |
| <style> | |
| .emoji { | |
| display: inline-block; | |
| text-align: center; | |
| margin: 10px; | |
| } | |
| .emoji img { | |
| width: 64px; | |
| height: 64px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input | |
| type="text" | |
| id="urlInput" | |
| placeholder="Enter URL here" | |
| onkeydown="onUrlInputKeyDown(event)" | |
| /> | |
| <button onclick="fetchEmojis()">Fetch Emojis</button> | |
| <div id="emojiContainer"></div> | |
| <script> | |
| function onUrlInputKeyDown(event) { | |
| if (event.key === "Enter") { | |
| fetchEmojis(); | |
| } | |
| } | |
| function fetchEmojis() { | |
| let url = document.querySelector("#urlInput").value; | |
| if (!url.startsWith("http://") && !url.startsWith("https://")) { | |
| url = "https://" + url; | |
| } | |
| url += "/api/emojis"; | |
| fetch(url) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| if (!data.emojis || !Array.isArray(data.emojis)) { | |
| console.error("Invalid data received:", data); | |
| return; | |
| } | |
| const emojiContainer = document.querySelector("#emojiContainer"); | |
| emojiContainer.innerHTML = ""; | |
| data.emojis.forEach((emoji) => { | |
| const div = document.createElement("div"); | |
| div.className = "emoji"; | |
| const img = document.createElement("img"); | |
| img.src = emoji.url; | |
| img.alt = emoji.name; | |
| const title = document.createElement("div"); | |
| title.textContent = emoji.name; | |
| div.appendChild(img); | |
| div.appendChild(title); | |
| emojiContainer.appendChild(div); | |
| }); | |
| }) | |
| .catch((error) => console.error("Error fetching emojis:", error)); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment