This question already has an answer here:
I created a random text generator, which is working totally fine, and I'm looking for a way for the user to share or save the generated text. Ideally, I'd have a "copy to clipboard" button, or a "share to twitter" button of the generated text itself, NOT pre-inputted text, which is the only solution I've seen so far.
Here is my generator code:
<script src="http://ift.tt/1yCEpkO"></script>
<script type="text/javascript">
$(document).ready(function() {
var evil = [...];
var eviladj = [...];
var creepemoji = [...];
// This is a very common randomizing function.
// It takes a list (array) and returns one at random.
function select_random(x){
y = x[Math.floor(Math.random()*x.length)];
return y;
}
function generate(){
// Select a random item from each list
var selected_evil = select_random(evil);
var selected_eviladj = select_random(eviladj);
var selected_creepemoji = select_random(creepemoji);
// Take the selected (random) item from list and make it visible
$('.list-evil').html(selected_evil);
$('.list-eviladj').html(selected_eviladj);
$('.list-creepemoji').html(selected_creepemoji);
}
$('button').click(function(){
generate();
});
generate();
});
</script>
And here is the HTML and CSS for the buttons I'd like to use:
<div class="button-container">
<button class="button">REGENERATE</button>>
</div>
<div class="button-container-copy">
<button class="button">COPY TO CLIPBOARD</button>
</div>
<span class="list-evil"></span>
<span class="list-eviladj"></span>
<span class="list-creepemoji"></span>
<style>
.button-container {
position: fixed;
margin: 43% 0 0 0;
float: left;
display: inline;
}
.button-container-copy {
position: fixed;
margin: 43% 0 0 70%;
float: right;
display: inline;
}
.button {
font-family: 'Fugaz One', cursive;
font-size: 1.5em;
padding: 10px 20px;
background-color: #58FCEC;
color: deepskyblue;
border-radius: 10px;
transition-timing-function: linear;
transition-duration:.25s;
}
.button:hover {
background-color: deepskyblue;
color: #58FCEC;
transition-timing-function: linear;
transition-duration: .05s;
}
</style>
If anybody has alternative suggestions for sharing/saving generated phrases, let me know — I literally started learning about javascript today, so I may be missing something obvious!
Aucun commentaire:
Enregistrer un commentaire