JSFiddle - React, Tailwind, and code Playground

by atheer Salim

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<!--    <div>
<ul>
<li class = "sib">hej</li>
<li class = "sib">då</li>
</ul>
</div>

<div>
<ul>
<li class = "sib">hej</li>
<li class = "sib">då</li>
</ul>
</div>

<div>
<ul>
<li class = "sib">hej</li>
<li class = "sib">då</li>
</ul>
</div>     -->

<h3>
namn:
</h3>
<input type="text" id="namn">

<h3>
lösen:
</h3>
<input type="text" id="losen">

<h3>
Random num generator: Enter Max number 
</h3>
<input type="text" id="nummer">

<button id="loggin">
Send
</button>
  
<p id="numtext">
</p>

<p id="text">
Hej jag heter atheer och går i Arlandagymnasiet.
</p>

</body>
</html>

CSS

.sib {
  font-size: 20px;
}

.green {
  color: green;
}

JavaScript

$(document).ready(function() {

/*$(".sib").click(function() {
$(this).parent().css("visibility", "hidden");
});*/

/*$("div").hover(function() {
$(this).find("li").css( "background-color", "red");
}, function() {
$(this).find("li").css( "background-color", "white");
});*/

/*var bil = {
modell: "Ferrari",
topphastighet: 359,
driftmode: true, 
abs: false,
tank: 60,
fordelar:["snabb", "game on point", "fin rödfärg"]
};

bil.pris = "bara några miljoner";

alert(bil.fordelar);*/

/*var adam = {
längd: "lång som fan",
hårfärg: "svart",
favoritfilm: "hadi gel"
}

var atheer = {
längd: "average",
hårfärg: "brunt",
favoritfilm: "hungriga vargar"
}

var fabbe = {
längd: "relativ lång",
hårfärg: "röd aktig",
favoritfilm:"lion king"
}

var personer = [adam, atheer, fabbe][Math.floor(Math.random() * 3)];

alert(personer.favoritfilm);*/

function personer (namn, losen) {
this.namn = namn;
this.losen = losen;
}

$("#loggin").click(function() {
var namn = $("#namn").val().toUpperCase();
var losen = $("#losen").val().toUpperCase();

var anvandare = new personer(namn, losen);

var num = $("#nummer").val();

$("#numtext").text(Math.floor(Math.random() * num));

console.log(anvandare);


var text = $("#text").text();
var array = text.split(" ");

for (var i = 0; i < array.length; i++) {
    var word = array[i];
    if (word.includes("e")) {
			   array[i] = "<span class = 'green'>" + array[i] + "</span>";
    }
}

var newText = array.join(" ");
$("#text").html(newText);


});




});