This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.
Production
Playground
https://dash.deno.com/playground/deno-html-json
calling friends with a request.
🙋🏽SERVER
🙋🏿♂️TEXT
🙋🏻♀️HTML
🙋🏽JSON
🙋🏿♂️AUDIO
Imagine you're at a party, and you ask a friend to message the DJ across the room. In HTTP, your browser sends a request to a server asking to drop the bass. The DJ processes your request and sends back the track. This exchange is the essence of an HTTP request.
To demonstrate this browser action I chose to use a single typescript file main.ts developed via deno playground. https://deno-html-json.deno.dev.
🙋🏿♂️server.ts
// deno server.ts
import { listenAndServe } from "https://deno.land/std@0.111.0/http/server.ts";
🙋🏻♀️html
if (pathname.startsWith("/html")) {
const html = `
<html>
<p><a style="color:green">html<b class="text-blue-500"></b><br><marquee style="1"><img src="https://api.iconify.design/logos:html-5.svg?color=%23669c35" alt="HTML Icon" class="inline h-5 w-5 mx-1"></a></p>
</html>`;
return new Response(html, { headers: { "content-type": "text/html; charset=UTF-8" } });
}
🙋🏻♀️text
if (pathname.startsWith("/text")) {
const text = "This is plain text. I like to keep things simple around here";
return new Response(text, { headers: { "content-type": "text/plain; charset=UTF-8" } });
}
🙋🏽json
if (pathname.startsWith("/json")) {
const json = JSON.stringify({ "json": "could not find a valid date for my structure" });
return new Response(json, { headers: { "content-type": "application/json; charset=UTF-8" } });
}
🙋🏿♂️ java
// Random Words
const getRandomWord = () => {
const words = ["text", "audio", "html", "json", "pdf"];
const randomIndex = Math.floor(Math.random() * words.length);
return { word: words[randomIndex], color: getRandomDarkColor() };
};
Cloudflare R2 (storage)
Deno Typescript (playground)
Tailwind (CDN)
Dev.to (contest and inspirtation)
Github (workflow)
Top comments (0)