Random Linear Gradient Generator

Source | Visit | Built with: JavaScript, HTML, CSS

Why I built it

When the blank white screen feels too vast and distracting, adding some colour can take one's mind off of the vastness and clear the head. Seeing new/unexpected colour combinations in the gradients can illuminate new UI possibilities.

What it does

When the app first loads, a pre-set linear gradient is shown. The user can then generate a new random linear-gradient set at 45-degrees with a click of the button or by pressing the enter key.

How I built it

I studied and practised vanilla JavaScript for many moons before touching a JS framework or library, and this app was built during my pre-React studies. I went with pure JS manipulating the DOM, simple CSS, and a bread and butter HTML document.

The JS grabs the covering container, button, and h2 elements from the document with querySelector. When the click event is triggered, the changeGradient function is called, which runs two for-loops over an array of values from 0 to F to produce two different and random strings of hex values that are interpolated into a new linear gradient value. This new value is then applied as the background value for the covering container and the textContent value of the h2.

How I tested it

What challenges I ran into

The main challenge was my initial thinking that something like this app was too simple, not worth building, that I needed to set my sights on something much larger and more complex. But I eventually regained my clarity and knew that there is a lot of opportunity and value in building simple things -- for myself and for others.

What I learned

Choosing to stick with vanilla JavaScript for this project kept me grounded in fundamentals and reminded me of the power of simple DOM manipulation.

This tiny app is a tool that I return to again and again when I'm quickly building something on the fly -- usually practising and learning something -- and want a different background. I didn't realise when I built it that I would use it as much as I do.

How I deploy it

This app is deployed through Vercel.

What's next for this project

• Make the degree of the linear gradient randomly generated as well.

• Test the app