DEV Community

Cover image for http request
sudo-self
sudo-self

Posted on • Updated on

http request

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Image description

Production

https://denodock.deno.dev

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.

Image description

ย ย 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";
Enter fullscreen mode Exit fullscreen mode

๐Ÿ™‹๐Ÿปโ€โ™€๏ธ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" } });
  }
Enter fullscreen mode Exit fullscreen mode

๐Ÿ™‹๐Ÿปโ€โ™€๏ธ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" } });
  }
Enter fullscreen mode Exit fullscreen mode

๐Ÿ™‹๐Ÿฝ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" } });
  }
Enter fullscreen mode Exit fullscreen mode

๐Ÿ™‹๐Ÿฟโ€โ™‚๏ธ 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() };
  };
Enter fullscreen mode Exit fullscreen mode

Cloudflare R2 (storage)
Deno Typescript (playground)
Tailwind (CDN)
Dev.to (contest and inspirtation)
Github (workflow)

Source https://github.com/sudo-self/http-request.git

Top comments (0)