jeudi 12 avril 2018

JavaScript - Copying randomly generated text value to the clipboard

I recently built a very simple tool to randomly generate colors and gradients. I want to add a button that copies the css of the generated color/gradient. I have a variable created that generates the css color, so how can I set a function to copy that generated value to the clipboard.

Here is the basic HTML:

<section>
     <div id="card">
          <div id="generated-color"></div>
          <h1 id="color-text"></h1>
     </div>
     <button onclick="random_color()">Generate</button>
</section>

Here is the JS function:

function random_color() {
     var color = 'rgb(' + [Math.floor(Math.random() * 256)] + ',' + [Math.floor(Math.random() * 256)] + ',' + [Math.floor(Math.random() * 256)] + ')';
     document.getElementById('generated-color').style.background = color;
     document.getElementById("color-text").innerHTML = color;
}

So basically, how could I go about copying the "color" variable that is generated?

Here is a live demo of the site: https://color.lukecjohnson.com

Thanks for the help everyone!




Aucun commentaire:

Enregistrer un commentaire