The time represented as hex color values

Last update: Aug 16, 2022

Related tags

Overview

A clock that represents the time as hex color values

I saw a project a little while ago, where I discovered that the time (in format 00:00:00) works perfectly for hexadecimal codes. I decided to create a very small project using vanilla JS, to represent the live time as a color.

setInterval(function() {
  today = new Date();
  hex = "#" + (today.getHours() < 10 ? '0' : '') + today.getHours() + "" 
      + (today.getMinutes() < 10 ? '0' : '') + today.getMinutes() + "" 
      + (today.getSeconds() < 10 ? '0' : '') + today.getSeconds();
  document.querySelector("#clock").innerHTML = hex;
  document.body.style.backgroundColor = hex;
}, 1)

This small codeblock gets the current time, formats it (placing a zero before the number if it is less than ten) and then appends an # before it. That newly created hex code is then placed within the #clock element, and is set as the backgroundColor of the body. Changing the color of the background with the hex color gives the site an almost meditative feel.

Feel free to play around with the code!

See it live Here.

This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

HtmlFormApp Overview This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreads

Oct 23, 2022

This is a library that makes it possible to change the configuration values of the Remix compiler (esbuild).

💽 remix-esbuild-override ⚠️ While I believe you will most likely get a lot of benefit from using this library, it can sometimes destroy your product.

Dec 22, 2022

Compare 👥 and extract 🔬 differences between JSON values

json-changes Easily compare changes in JSON-like values. This can be especially useful when you want to compare an incoming payload with a counterpart

Aug 23, 2022

Tiny and fast utility to extract all possible values for a given enum.

Tiny (208B) and fast utility to extract all possible values for a given enum.

Apr 18, 2022

🚀 Transition number values using easing functions

react-transition-value Transition / Animate number values using easing functions See Demos ⚡️ Getting started npm i react-transition-value import {

Dec 15, 2022

Generate deterministic fake values: The same input will always generate the same fake-output.

import { copycat } from '@snaplet/copycat' copycat.email('foo') // = '[email protected]' copycat.email('bar') // = 'Thurman.Schowalter668@

Dec 30, 2022

🧩 TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types such as number or boolean (not Value Objects)

🧩 TypeScript Primitives type TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types

Dec 7, 2022

A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles

range-slider-input A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles. Ex

Dec 24, 2022

An idiomatic way to enforce values not to be null nor undefined, with first-class support for TypeScript

nullthrows An idiomatic way to enforce values not to be null or undefined, with first-class support for TypeScript. Very lightweight with no dependenc

Jul 23, 2022

Comments

code improvements
shorter code to get hours, minutes, seconds

no need to check every 1 ms, as values will change only each 1000 ms (each 1 second), so 500 ms is kind of safe way to do this.

added var for stricter JS code

useful comment about miliseconds
opened by partyvaper 1
Wallpaper Engine wallpaper

I really like this and I wanted to use it as a wallpaper, so I made one for Wallpaper Engine

I removed the links from the footer because you can't click them in wallpaper engine

opened by SaifAqqad 0

The time represented as hex color values

Related tags

Overview

A clock that represents the time as hex color values

You might also like...

This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

This is a library that makes it possible to change the configuration values of the Remix compiler (esbuild).

Compare 👥 and extract 🔬 differences between JSON values

Tiny and fast utility to extract all possible values for a given enum.

🚀 Transition number values using easing functions

Generate deterministic fake values: The same input will always generate the same fake-output.

🧩 TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types such as number or boolean (not Value Objects)

A lightweight (~2kB) library to create range sliders that can capture a value or a range of values with one or two drag handles

An idiomatic way to enforce values not to be null nor undefined, with first-class support for TypeScript

Comments

code improvements

Wallpaper Engine wallpaper

Owner

Jamel

Functions for testing the types of JavaScript values, cross-realm. Has testers for all standard built-in objects/values.

An interactive list of plugins for hex-rays' IDA Pro

A tiny isomorphic fast function for generating a cryptographically random hex string.

CLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.

Get a quick hash that uses the well-liked Bernstein "times 33" hash method and delivers a hex string.

Change the color of an image to a specific color you have in mind.

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Export AWS SSM Parameter Store values in bulk to .env files