JSFiddle - React, Tailwind, and code Playground

by lennyekberg

HTML

<!-- jquery -->
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>  
    
<!-- läs in slumpscript och ord --> 
<script src="jquery/slumpordFork.js"></script>
<script src="jquery/alter_stylesheet.js"></script>
    
<!-- läs in css --> 
<!-- Färkodat 	<link rel="stylesheet" type="text/css" href="css/style.css">-->
<!-- Enfärgat	<link rel="stylesheet" type="text/css" href="css/clean.css">-->
<link href="css/style.css" rel="stylesheet" type="text/css" id="stl" />



<body>

<span style="position:fixed">
    <!--<button id="idd">Växla CSS</button>-->
    <button class="rndButton">Randomize</button>
</span>

<div class="limitwidth">
<br><br>
<h3>Sentences (works)</h3>


    Name <span class="foretagsnamn"></span><br>
    
    Workd escription <span class="foretagsbeskrivning"></span><br>
   
    Goal <span class="malsattning"></span><br>
    
    Goal, execution <span class="malsattninggenomforande"></span><br>
    
    Goal, result <span class="malsattningresultat"></span><br>
    

</div>

    <br><hr><br>
        
<div>
    <h3>The question (need help!)</h3>
    How do I make it possible to insert a randomized name from the array <b>Var Foretagsnamn</b> into another value in a different array?<br>
    
    For example I'd like to create from the array <b>var Malsattning</b> an output that read:<br>
    '<span class="exmalsattning">The vision is for <span class="exforetagsnamn">[insert Name from <b>Var Foretagsnamn</b>]</span> to create a positive  towards the brand</span>'
</<div>
 




</html>

CSS

@charset "UTF-8";
/* CSS Document */
body{
background-color:#363636;
color:#ffffff;
line-height:140%;
font-size:1em;
font-family:Helvetica, Arial;
}

h3{
	color:#dd3;
}

/*.limitwidth{
	width:512px;
	margin:auto;
}*/

.texttest{
	color:#F60;
	width:500px;
}

/*kontrollerade meningar som rullar fint*/
.foretagsnamn{
	color:#0CF;
}
.foretagsbeskrivning{
	color:#FC0;
}
.nuvarandepositionering{
	color:#0FC;
}
.malsattning{
	color:#3F6;
}
.malsattninggenomforande{
	color:#F36;
}

.malsattningresultat{
	color:#F00;
}

.usp{
	color:#CF3;
}

.prekarnvarde{
	color:#f95;
}

.karnvarde1,
.karnvarde2,
.karnvarde3{
	color:#caF;
}

.postkarnvarde{
	color:#f00;
}


.malgrupp{
	color:#FC6;
}

.malgrupppersona{
	color:#6C3;
}


.styrka{
	color:#F06;
}
	

.svaghet{
	color:#c5F;
}


/*meningar som behövs ses över*/
.random-sentence-ch0{
	color:#F63;
}

.exforetagsnamn{
	color:#0CF;
}
.exmalsattning{
	color:#3F6;
}

JavaScript

/////////////////////////////
//   Foretagsnamn (Name)   //
/////////////////////////////
	var Foretagsnamn = [
    'Lisa',
    'Ann',
    'Matt',
    'Carl',
    'Sara',
	'Ron'
    ],
    //the current sentences length
    maxForetagsnamn = Foretagsnamn.length;
	  
// get and return a random sentences from array
function getRandomForetagsnamn() {
    //calculate a random index
    var rndIdxForetagsnamn = Math.floor(Math.random()*(maxForetagsnamn));
	//return the random sentence
    return Foretagsnamn[rndIdxForetagsnamn];                        
}

//show a random sentences in a DOM selector
function showRandomForetagsnamn(selector){
  var randomForetagsnamn = getRandomForetagsnamn();  
  $(selector).html(randomForetagsnamn);
}


///////////////////////////////////////////////////
//   Foretagsbeskrivning (Workdescription)   //
///////////////////////////////////////////////////


var Foretagsbeskrivning = [
    'is an icecream vendor',
    'is a plumber',
    'organizes charity events',
	'build hybrid cars'
	],
    //the current sentences length
    maxForetagsbeskrivning = Foretagsbeskrivning.length;  
	
//get and return a random sentences from array
function getRandomForetagsbeskrivning() {
    //calculate a random index
    var rndIdxForetagsbeskrivning = Math.floor(Math.random()*(maxForetagsbeskrivning));
    //return the random sentence
    return Foretagsbeskrivning[rndIdxForetagsbeskrivning];                        
}
	

//show a random sentences in a DOM selector
    //vad är en DOM selector, för alla taggar i html eller?
function showRandomForetagsbeskrivning(selector){
  var randomForetagsbeskrivning = getRandomForetagsbeskrivning();  
  $(selector).html(randomForetagsbeskrivning);
}


////////////////////////////
//   Målsättning (Goal)   //
////////////////////////////


var Malsattning = [
    'The vision is to dominate the market in three years',
    'The vision is to create a positive attitude towards the brand',
    'The goal is to create a...