/random-number-facts

Random number facts using the Numbers API

Primary LanguageCSS

Random Number Facts

Live Demo hosted on Netlify

About

This is just a little experiment playing with the Numbers API. This is my first time using a third-party API, so I wanted to keep it simple.

I'm generating random numbers between 0 and 360 and using the Numbers API to retrieve facts associated with those numbers. In browsers that support CSS variables (custom properties), the color used throughout will change to the hue of the random number generated by using hsl as the color format.

demo of desktop and tablet view

Accessibility

Color

All hues generated meet the WCAG contrast ratio requirements according to those I tested using Lea Verou's wonderful contrast ratio testing tool.

Keyboard

New random number facts can be generated when keyboard focus is on the "get new number fact" button by pressing ENTER or SPACEBAR.

Screenreaders

Using aria-live on the dynamic text container, each new number and fact will be announced for screenreader users. NOTE: I've tested this on a Mac using VoiceOver in Safari and Chrome. Further testing is needed.