DEV Community

Cover image for Colorful Counter
sudo-self
sudo-self

Posted on

Colorful Counter

upstash-rediss.deno.dev

counters may be dime a dozen however a vast space for creativity is there. serverless. Another page view counter in production.

Typescript with deno is straight forward.

// server.ts
Deno.serve((_request: Request) => {
  return new Response("serverless data with Upstash");
});

Enter fullscreen mode Exit fullscreen mode

Wasting no time head over to Upstash create a Redis serverless database.

Once complete there are two key pieces of info were gonna grab for the project that make up the rest API were gonna use to access our data....

Image description

UPSTASH_REDIS_REST_URL

UPSTASH_REDIS_REST_TOKEN

copy them to a temporary file or leave a tab open then move them them directly to .env via playground.

deno runtime.

curl -fsSL https://deno.land/install.sh | sh
Enter fullscreen mode Exit fullscreen mode

In the quickstarts we find the handler function. all the work is done here just grab this and start a new deno playground. Deno Playground

import { serve } from "https://deno.land/std@0.142.0/http/server.ts";
import { Redis } from "https://deno.land/x/upstash_redis@v1.14.0/mod.ts";

serve(async (_req: Request) => {

    if( ! _req.url.endsWith("favicon.ico") ) {
        const redis = new Redis({
            url: '**YOUR ENDPOINT**',
            token: '**YOUR TOKEN**',
        })

        const counter = await redis.incr("deno-counter");
        return new Response(JSON.stringify({ counter }), { status: 200 });
    }


});

Enter fullscreen mode Exit fullscreen mode

save & deploy.

The url should now return a json.

{"count":197}
Enter fullscreen mode Exit fullscreen mode

Json

Upstash endpoint and token moved to .env via playground settings.


const token = Deno.env.get("UPSTASH_REDIS_TOKEN");
const redisUrl = Deno.env.get("UPSTASH_REDIS_URL");

Then all were doing in that same space is rendering html with a tailwind CDN.

const counter = await redis.incr("deno-counter");
${counter}

//deno.json

{
  "tasks": {
    "dev": "deno run --watch main.ts"
  }
}
Enter fullscreen mode Exit fullscreen mode

implement in production, another project, or keep creating.

export to GitHub direct from playground.

Image description

upstash-rediss.deno.dev

//Generating random colors

const randomColor = generateRandomHexColor();

function generateRandomHexColor() {
    const randomColor = Math.floor(Math.random()*16777215).toString(16);
    return "#" + randomColor;
}
Enter fullscreen mode Exit fullscreen mode
//html with tailwind CDN and GitHub buttons 

 <!DOCTYPE html>
            <html lang="en">
            <head>

                <script async defer src="https://buttons.github.io/buttons.js"></script>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Counter</title>
                <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
            </head>
            <body class="bg-gray-100 flex flex-col items-center justify-center h-screen">
                <div class="max-w-md w-full mx-auto rounded-lg p-6 mb-4" style="background-color: <u>${randomColor};</u>">
                    <div class="bg-white shadow-md rounded-lg p-6">
                        <h1 class="text-3xl font-semibold text-center mb-4 cursor-pointer text-green-500 hover:text-green-600" onclick="location.reload()">Counter</h1>
                        <div class="text-center">
                            <p class="text-5xl font-bold mb-4"><u>${counter}</u></p>
                            <p class="text-lg text-gray-500 mb-4">https://upstash-rediss.deno.dev</p>
                            <a class="github-button" href="https://github.com/sudo-self/upstash-deno" data-color-scheme="no-preference: dark; light: dark; dark: dark_high_contrast;" data-icon="octicon-star" data-size="large" aria-label="Star sudo-self/upstash-deno on GitHub">Star</a>
                            <p class="text-lg text-gray-500 mb-4">MAC address: ${macAddress}</p>
                        </div>
                    </div>
                </div>
            </body>
            </html>
Enter fullscreen mode Exit fullscreen mode

Guthub.com/sudo-self/upstash-deno

Top comments (0)